ASP.NET MVC 4

Novedades para el desarrollo móvil en in ASP.NET MVC 4

Keith Burnell

 

Por mucho tiempo, los desarrolladores han buscado el santo grial de las herramientas que permitan llegar con una única base de código a todas las plataformas, algo que hoy resulta más importante que nunca. Debido a la creciente popularidad y variedad de smartphones y tabletas móviles alrededor del mundo, resulta imprescindible que nuestros sitios cuenten con interfaces móviles agradables y útiles. Ciertamente, podríamos optar por el método nativo y crear aplicaciones específicas para iOS, Android, Windows Phone, BlackBerry, etc., pero lamentablemente las aplicaciones nativas requieren de conjuntos de habilidades y códigos específicos para cada plataforma.

Afortunadamente, HTML5 y CSS3 parecen ser el conjunto de herramientas que finalmente nos permitirán realmente “escribir una vez y ejecutar en cualquier parte”. Aunque todavía no son especificaciones finales, HTML5 y CSS3 se están convirtiendo rápidamente en los estándares de la industria para sitios de varios objetivos y basados en los exploradores, y los exploradores más importantes ya cuentan con compatibilidad para la mayoría de las características. Lo mejor del conjunto HTML5/CSS3 es que representa un marcado HTML directo que podemos aprovechar desde cualquier grupo de herramientas basado en HTML, desde PHP hasta ASP.NET MVC.

Este artículo profundizará en las nuevas características de ASP.NET MVC 4, muchas de las cuales aprovechan las funciones de HTML5 y CSS3 que no dependen del explorador para facilitar el desarrollo de sitios que tienen como objetivo específico los exploradores móviles, como también para aquellos que apuntan tanto a los exploradores móviles como los de escritorio.

Si aún no tiene ASP.NET MVC 4 instalado y todavía ejecuta Visual Studio 2010, puede descargar las piezas desde el Instalador de plataforma web o directamente desde el sitio web de ASP.NET MVC (asp.net/mvc/mvc4). Visual Studio 11 incluye ASP.NET MVC 4.

Representación adaptable

La representación adaptable el es proceso de visualizar un sitio web de manera diferente, según las capacidades del dispositivo y explorador objetivo. ASP.NET MVC 4 incluye varias técnicas de representación adaptable.

Etiqueta meta de viewport En forma predeterminada, los exploradores, incluso en los dispositivos y tabletas móviles, suponen que representan la páginas en el escritorio y muestran el contenido con un ancho de 980 píxeles, alejado al máximo. En la Figura 1 vemos un sitio creado con la plantilla de sitio de Internet predeterminada de ASP.NET MVC 3. Observe que aun cuando el sitio se muestra en un explorador móvil, este supone que está representando el contenido para el escritorio. Aunque esta representación del sitio cumple su función, claramente no es ideal.

The Default Display Created Using ASP.NET MVC 3
Figura 1 Visualización predeterminada creada con ASP.NET MVC 3

En su lugar, podemos usar la etiqueta meta de viewport para indicarle al explorador el ancho, alto y la escala exacta que debe usar para representar el contenido. También podemos configurar la etiqueta meta de viewport para representar el contenido en función de las capacidades del dispositivo:

    <meta name="viewport" content="width=device-width" />

En la Figura 2 vemos la página después de agregar la etiqueta meta de viewport a _Layout.cshtml. La escala del sitio ahora se ajustó al ancho del dispositivo. Si usted crea un nuevo proyecto de ASP.NET MVC 4 con el uso de cualquier plantilla de proyecto (excepto la plantilla de API web), puede abrir el archivo _Layout.cshtml y verá la etiqueta meta de viewport en la sección del encabezado. 

Scaling to the Device with ASP.NET MVC 4
Figura 2 Escalado al ancho del dispositivo con ASP.NET MVC 4

Consultas de medios de CSS Cuando desarrollamos un sitio para varios objetivos, generalmente queremos que los usuario móviles reciban una visualización diferente de la que ven los usuarios de escritorio. Por lo general, la funcionalidad es prácticamente la misma, pero cambia el estilo y la visualización del contenido. Con las consultas de medios de CSS podemos aplicar estilos específicos de CSS en forma condicional, según las funcionalidades del explorador que realiza la solicitud al sitio web:

    @media only screen and (max-width: 850px) {
        header{
          float: none;
        }
      }

Esta consulta de medios aplicará los estilos contenidos únicamente cuando los medios aparecen en la pantalla, no impresos y el ancho máximo del área del sitio en el que se representa es menor que 850 píxeles. Esta técnica nos permite cambiar el estilo del contenido de cualquier forma que podamos imaginar, en función de las capacidades de representación que tenga el explorador.

Al trabajar con exploradores móviles, siempre debemos tener en cuenta el ancho de banda. Al usar un dispositivo móvil generalmente no estamos conectados a Wi-Fi u otra red de alta velocidad, por lo que al presentar el sitio en estos dispositivos, conviene hacerlo de la manera más eficiente posible. Por ejemplo, si las imágenes no son necesarias para la funcionalidad del sitio, no las incluya en las visualizaciones móviles. En el caso donde las imágenes realmente son necesarias, asegúrese de presentarlas en el tamaño correcto, es decir, asegúrese de enviar las imágenes dimensionadas al tamaño de presentación. De las misma forma que podemos especificar las imágenes con CSS, con las consultas de medios de CSS podemos especificar diferentes imágenes a partir de las capacidades del dispositivo y del explorador.

Todas las plantillas de proyecto predeterminadas de ASP.NET MVC 4, excepto la plantilla API de web, incluyen algunos ejemplos con consultas de medios de CSS. Para ejemplificar esto, cree y ejecute un nuevo proyecto ASP.NET MVC 4 con la plantilla de proyecto de aplicación de Internet. Maximice el explorador y luego comience a reducir lentamente el tamaño de la ventana. Cuando el tamaño de la ventana alcance 850 píxeles o menos, verá varios cambios en la visualización de la página predeterminada. Para entender los detalles exactos de los cambios, consulte el archivo Site.css, a partir de la línea 466.

Cuando CSS solo simplemente no basta

Algunas veces no basta con modificar los estilos para representar el sitio y usarlo en todos los dispositivos. En dichos casos, la única opción real es crear vistas adaptadas a los tipos de exploradores y dispositivos que tengamos en mente.

Entrega de vistas específicas para los dispositivos móviles La idea de entregar páginas específicas en función del explorador que realiza la solicitud no es nueva. Los desarrolladores han realizado el examen de exploradores durante mucho tiempo. En las versiones anteriores de ASP.NET MVC podíamos crear una implementación personalizada del de motor de vista, que se heredaba de los formularios Web Forms o de los motores de vistas Razor, reemplazaba el método FindView, agregaba algún tipo de examen de exploradores y devolvía una vista específica para el explorador que realizaba la consulta. ASP.NET MVC 4 cuenta con dos características nuevas que nos permiten lograr esto mismo en diferentes niveles con mucho menos esfuerzo.

La funcionalidad nueva de ASP.NET MVC 4 nos permite reemplazar las vistas para dispositivos móviles en forma global con el uso de una convención en vez de una configuración. Cuando ASP.NET MVC 4 satisface una solicitud de un explorador móvil y determina qué vista debe mostrar, primero busca vistas con el nombre [view].mobile.cshtml. Si encuentra una vista con un nombre correspondiente a la convención, ASP.NET MVC la presentará; de lo contrario, recurrirá a la vista estándar.

Como puede observar en la Figura 3, hice una copia de _Layout.cshtml y cambié el nombre a _Layout.mobile.cshtml, de acuerdo con la convención. Resalté la línea de HTML que se agregó para dejar en claro qué versión de _Layout.cshtml se está usando para representar la página. Cuando el sitio se representa en el explorador de escritorio, nada cambia, pero al representarlo en un explorador móvil, tal como se observa en la Figura 4, vemos que se usa la versión móvil de _Layout.cshtml.

Mobile-Specific _Layout.cshtml
Figura 3 _Layout.cshtml específica para dispositivos móviles

Mobile-Specific View
Figura 4 Vista específica para dispositivos móviles

Entrega de vistas específicas para exploradores. En general, ya no es necesario entregar las vistas o contenidos para exploradores determinados en el escritorio. Sin embargo, si se ha dedicado al desarrollo de sitios web desde hace bastante tiempo, es muy probable que haya escrito algún código o CSS para hacer que algo funcione en un explorador determinado o en otro. Esta es la situación en la que nos encontramos ahora con los exploradores móviles, pero el problema es compuesto, debido a la gran cantidad de plataformas móviles, cada una con su propio explorador. Y como si eso no fuera suficiente, ahora tenemos el concepto de los sitios “nativos”. Ya no basta con que el sitio se represente bien en los exploradores móviles; para estar a la vanguardia, el sitio debe tener la apariencia y comportamiento de las aplicaciones que se ejecutan de manera nativa en el dispositivo. Para esto no basta con entregar vistas específicas para los exploradores móviles en general, sino que también para exploradores móviles puntuales, con estilos que coincidan con la plataforma.

Para lograr esto, ASP.NET MVC 4 introdujo los Modos de presentación. Esta nueva característica nos permite combinar la facilidad de la convención por sobre la configuración con la solidez del examen de exploradores para entregar vistas específicas para el explorador.

Para poder aprovechar los Modos de presentación, primero tenemos que definirlos en el método Application_Start de Global.asax, del siguiente modo: 

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

Este es un Modo de presentación creado para el explorador de iPhone. La primera instancia de “iPhone” define el sufijo de la vista que ASP.NET MVC buscará al determinar qué visualización debe representar. La segunda instancia de “iPhone” se refiere al agente de usuario que realiza la solicitud y define la condición que ASP.NET MVC usará para hacer que el nombre coincida con la convención [view].iPhone.cshtml. Básicamente, esto se traduce como: cuando un explorador de iPhone realiza una solicitud, primero debe buscar visualizaciones que coincidan con el sufijo “iPhone”.

Para ejemplificar el Modo de presentación para el explorador de iPhone, hice otra copia de _Layout.cshtml y le puse el nombre _Layout.iPhone.cshtml de acuerdo con la convención de nombre definida cuando creé el Modo de presentación. Luego lo modifiqué para dejar en claro que se usará el diseño de iPhone cuando exploro el sitio con el iPhone. Si veo el sitio con el explorador del escritorio o el explorador emulador de Windows Phone, no veo mi modificación, pero al mirar el sitio en el explorador del iPhone, tal como se aprecia en la Figura 5, puedo ver la modificación.

iPhone-Specific View
Figura 5 Vista específica para el iPhone

La adición de estas características a ASP.NET MVC 4 nos permite entregar fácilmente vistas para dispositivos móviles y exploradores específicos con un mínimo de esfuerzo. Al usar los modos de reemplazo y de presentación de ASP.NET MVC 4, podemos entregar vistas específicas para dispositivos móviles y exploradores, lo que nos brinda la oportunidad de adaptar completamente el sitio al dispositivo en que se representa.

jQuery Mobile y jQuery.Mobile.MVC

jQuery Mobile es una biblioteca de código abierto basada en jQuery Core para construir interfaces de usuario para dispositivos móviles. Como jQuery Mobile es un conjunto de herramientas bien documentado y como implementar jQuery Mobile en ASP.NET MVC 4 no es diferente de implementarlo en cualquier otro idioma o marco, no voy a profundizar aquí, excepto para mostrar cómo incorporarlo en ASP.NET MVC 4.

jQuery Mobile no viene incluido de manera predeterminada en las plantillas de proyecto de ASP.NET MVC 4 (aparte de la plantilla de proyecto de aplicación móvil), pero no cuesta nada agregarlo a una aplicación ASP.NET MVC 4. Debe usar NuGet para instalar los scripts y cualquier otro archivo necesario y luego ir a _Layout.cshtml y agregar manualmente las referencias a los scripts y archivos CSS necesarias. Como alternativa, puede instalar el paquete jQuery.Mobile.MVC NuGet, el cual; instalará todos los scripts y los archivos necesarios; creará _Layout.Mobile.cshtml y; agregará las referencias a todos los scripts de jQuery Mobile y los archivos CSS. El paquete jQuery.Mobile.MVC NuGet también agrega la funcionalidad de alternación de vistas que permite que el usuario vea la versión móvil del sitio y cómo cambia a la vista completa de escritorio, tal como se aprecia en la Figura 6.

jQuery Mobile View with View-Switching Functionality
Figura 6 Vista jQuery Mobile con la funcionalidad de alternación de vista

Plantilla de proyecto

Si queremos crear un sitio independiente dedicado exclusivamente a los exploradores móviles, ASP.NET MVC 4 creó una plantilla de proyecto que nos permite exactamente esto. Al crear un nuevo proyecto ASP.NET MVC 4, ahora tenemos la opción de elegir la plantilla de proyecto de “Aplicación móvil”. 

Cree un proyecto con la plantilla de proyecto de aplicación móvil de ASP.NET MVC 4 y luego eche una mirada la estructura general del proyecto. Verá que hay ningún cambio evidente, en comparación con la plantilla de proyecto de aplicación estándar de ASP.NET MVC 4: tiene los mismos modelos, vistas y controles. Pero si ejecuta la aplicación, verá que el sitio está adaptado específicamente para los exploradores móviles.

Como ya lo mencioné brevemente, la plantilla de proyecto móvil de ASP.NET MVC 4 incluye jQuery Mobile desde el inicio. Es más, implementa jQuery Mobile en todas las vistas predeterminadas:

    <h2>@ViewBag.Message</h2>
    <p>
      To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
        title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Navigation</li>
      <li>@Html.ActionLink("About", "About", "Home")</li>
      <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

Este código se encuentra en Views/Home/Index.cshtml. Si no está familiarizado con jQuery Mobile y de qué forma se implementa, lo primero que le llamará la atención son los atributos “data-” (“data guion”). Esto es lo que jQuery Mobile usa para configurar los controles en la página.

La plantilla de proyecto de aplicación móvil de ASP.NET MVC 4 es excelente para crear sitios que se enfocan únicamente en los exploradores móviles o para servir como referencia cuando deseamos implementar características específicas para los exploradores móviles. Probablemente, la mayoría de las veces crearemos sitios que están destinados a los exploradores de escritorio. Pero de todos modos queremos que el sitio se visualice de manera útil en los exploradores móviles, sin tener que dedicar demasiado tiempo ni esfuerzo adicional en adaptar el código especialmente para los dispositivos móviles. Afortunadamente, la plantilla de proyecto de aplicación móvil de ASP.NET MVC 4 sirve como punto de partida para introducir características destinadas a los dispositivos móviles en las aplicaciones MVC existentes para los exploradores de escritorio.

Con la popularidad de los dispositivos móviles, no es de sorprender que mejorar la experiencia de desarrollo de un sitio web móvil fuera el objetivo de ASP.NET MVC 4. Al usar las nuevas características de ASP.NET MVC 4 asegurará que los sitios no solo llegarán a todo su público, sino que también lo harán sin requerir de demasiado esfuerzo de codificación ni duplicaciones en la capa de la interfaz de usuario.

Keith Burnell es ingeniero de software jefe en Skyline Technologies. Ha desarrollado software durante más de 10 años, con una especialización en el desarrollo de sitios web ASP.NET y ASP.NET MVC a gran escala. Burnell es un miembro activo de la comunidad de desarrolladores y se puede encontrar en su blog (dotnetdevdude.com) y en Twitter en twitter.com/keburnell.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: John PtacekClark Sell