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:
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.
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.
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:
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.