Cargando



A fondo ASP.NET MVC - Desarrollo Móvil

En este curso asp.net veremos todos los aspectos relacionados con el desarrollo móvil y cómo el framework ASP.NET MVC nos ayuda con diversas herramientas.


jul 25 2014 23:07
Avanzado
ago 09 2014 05:00

Crear Vista Móvil



El desarrollo de una aplicación que pueda verse en móviles conlleva muchas cosas, una de las más importantes es la parte visual, ya que es lo que mayormente diferencia esta versión de la versión de escritorio.

ASP.NET nos ofrece diferentes herramientas que nos ayudan a tener ambas versiones y que dependiendo de qué navegador utilice el usuario, se le enviará una versión u otra, sin embargo para llegar a este punto final debemos aprender a hacer nuestras vistas.

Como sabemos la vista es ya el resultado de todo lo que lleva nuestra aplicación y que se le muestra al usuario, por lo que si queremos que nuestra versión móvil tenga éxito debemos construir la vista pensando en móvil.

Dar el Primer Paso


El primer paso que debemos dar es crear la página destino de nuestro ingreso por móviles, es decir, si ingresamos y lo primero que vemos es el index de la aplicación, pues entonces debemos generar un index para móviles.

Afortunadamente para nosotros eso no es nada complicado, basta con que copiemos la página original y le coloquemos .Mobile en su nombre de archivo. Veamos en el siguiente ejemplo como cambiamos una página de esta forma.

Supongamos que tenemos un archivo llamado: Subastas.cshtml que corresponde a nuestra página de subastas, lo que haremos será generar una copia y renombrarla a Subastas.Mobile.cshtml, luego para confirmar que todo está funcionando adecuadamente vamos a incluir en la vista móvil un texto diferente al de la vista normal.

Veamos la siguiente imagen un ejemplo de cómo se vería un contenido, en este caso observamos que no se ve muy bien al acceder desde un navegador móvil:

asp_crear_vista_movil.jpg


Mejorar la vista


En la imagen anterior notamos que a pesar que la vista se redimensiona al acceder desde un móvil, no se ve de calidad, esto es porque la vista original no está adaptada a móviles, para ello podemos valernos que ASP.NET no solo nos permite cambiar las vistas con .Mobile también podemos hacerlo para archivos de Layout.

¿Qué incluir?
Lo primero que haremos es incluir jQuery Mobile, con ello lograremos incorporar funcionalidades de Javascript y estilo que nos ayudarán a dar forma a nuestra nueva vista.


Para hacerlo vamos a instalar los paquete necesarios utilizando nuGet como vemos en la imagen a continuación, esto nos dejará la librería, una hoja de estilos especial para este tipo de vistas y un nuevo archivo de Layout.

asp_crear_vista_movil2.jpg


Una vez que ya tenemos los nuevos paquetes, podemos cambiar un poco la imagen de nuestra vista .Mobile que habíamos incorporado, lo ideal es incorporar estilos de tipo responsive, con los cambios hechos el primer ejemplo que mostramos nos quedaría de la siguiente forma:

asp_crear_vista_movil3.jpg


Notamos que a pesar que no es una vista perfecta, el contenido ahora responde de mejor manera a la resolución más reducida de la pantalla de nuestro smartphone, con esto ya tenemos una base sobre la cual ir ajustando los detalles.

Hemos visto entoces como generar de una forma sencilla una vista adaptada a dispositivos móviles y que nos permite portar nuestra aplicación a diferentes ámbitos con lo cual gana en versatilidad y en facilidad de uso.


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X