Creación de aplicaciones HTML5

Uso de HTML5 para crear experiencias móviles

Brandon Satrom

Descargar el ejemplo de código

El mes pasado presenté las consultas de medios de CSS3 (msdn.microsoft.com/magazine/hh882445), un módulo nuevo que sirve para adaptar los estilos mediante reglas condicionales. Aunque las consultas de medios son útiles para una amplia gama de dispositivos, frecuentemente se mencionan en el contexto de la creación de sitios y aplicaciones móviles. Es decir, la presentación de las consultas de medios en el último artículo se enmarcó dentro de la creación de experiencias móviles y para las tabletas.

Si tomamos en cuenta las dificultades que implica la creación de sitios y aplicaciones móviles, no nos sorprende el éxito que tuvieron las consultas de medios. Comparadas con las alternativas inconvenientes como el examen del explorador (llamado a veces detección del dispositivo) y la creación de las experiencias móviles plataforma por plataforma, las consultas de medios realmente son un regalo maravilloso. Ciertamente son módulos fenomenales, y la razón para escribir acerca de ellas el mes pasado es que todos deberíamos usarlos ahora.

Diseño web adaptable, una nueva mirada

Pero esto no es todo: las consultas de medios de CSS son excelentes, pero son solo parte del bagaje que necesitamos para crear experiencias móviles realmente excelentes. El mes pasado mencioné el término diseño web adaptable, término acuñado por Ethan Marcotte en su artículo fundacional con el mismo nombre (bit.ly/9AMjxh). Marcotte se concentra en las consultas de medios, pero también señala otras dos prácticas necesarias: las cuadrículas fluidas y las imágenes flexibles. Las consultas de medios son los motores que impulsan los sitios adaptativos que responden bien, pero solo funcionan cuando también el diseño del sitio es adaptativo y de respuesta inmediata. Este mes presentaré algunas ideas en torno a estos otros dos pilares del diseño web adaptable. Comenzaré con un resumen de algunos módulos de diseño CSS jóvenes y prometedores, y luego analizaré algunas técnicas que permiten que también los elementos no textuales, como las imágenes y el vídeo insertado, sean adaptables. A lo largo del camino mencionaré algunos marcos y bibliotecas útiles para aplicar estas técnicas. También mencionaré algunos marcos populares para crear aplicaciones web móviles, y cerraré con un breve análisis sobre el uso de HTML5 para crear aplicaciones “nativas”. Cuando termine con este artículo contará con una base sólida para implementar un diseño web adaptable en sus propias aplicaciones.    

Cuadrículas y diseños fluidos

El uso de las cuadrículas en el diseño tipográfico es una práctica que existe de una forma u otra hace siglos; de hecho, es incluso anterior al invento de los tipos móviles. Esta estructura bidimensional, compuesta de ejes verticales y horizontales que se intersectan, permite al diseñador organizar y alinear los elementos de manera atractiva, tal como se aprecia en la Figura 1. En el transcurso de los últimos años, los diseñadores web comenzaron a aplicar muchos de estos principios en su obra digital, y existen varios marcos populares, como 960 Grid System (960.gs) y Semantic Grid System (semantic.gs), que permiten que todo el mundo pueda usar la cuadrícula en sus diseños.

Figura 1 Una cuadrícula tipográfica

Sin embargo, la aplicación directa de una cuadrícula tipográfica en la web presenta una dificultad grave: los diseños impresos son rígidos, pero no así los diseños web. Lo que es más, muchas implementaciones de la cuadrícula no son muy semánticas y, por lo tanto, hay que agregar marcado adicional para definirla, lo que mezcla la presentación con el contenido en las páginas HTML.

Esto nos conduce a la parte de “fluido” de la “cuadrícula fluida” de Marcotte: para ser realmente adaptables, las cuadrículas (o los diseños) deben ser capaces de adaptarse a las experiencias cambiantes. Tal como comenté el mes pasado, las consultas de medios nos permiten definir reglas para los elementos reubicables, pero para que esto resulte, debemos definir primero estos elementos dentro de un contenedor fluido o flexible. Las herramientas que mencioné (al igual que muchas más) se encargan de este problema en forma nativa (Semantic Grid) o mediante el uso de una biblioteca complementaria (Adapt.js para 960 Grid: adapt.960.gs), pero también existen algunos módulos CSS nuevos y emergentes que apoyan el proceso de creación de diseños fluidos.

Observe que me tomé algunas libertades con el término cuadrícula fluida de Marcotte, al replantearlo como diseño fluido. Hago esto ya que algunos de los módulos nuevos de CSS, a pesar de no fundarse en la cuadrícula, nos sirven para crear contenedores fluidos y adaptables.

Veamos primero CSS3 Flexible Box Layout Module (o Flexbox), que se encuentra en bit.ly/yguOHU. Flexbox se diseñó para crear contenedores de diseño para elementos que dispondrán los elementos secundarios en un flujo horizontal o vertical y ofrecerán un espaciado automático (¡Adiós “ul li { float: right; }”!). Este módulo es compatible (con prefijos de proveedor) con Internet Explorer 10 Platform Preview, Firefox, Chrome, Safari, iOS Safari y Android (consulte caniuse.com/flexbox para obtener más información).

Comenzaremos por aplicar Flexbox al sitio Photo Gallery que presenté el mes pasado. Dado el CSS de la Figura 2, puede ver el resultado (con un poco de estilo adicional con fines ilustrativos) en la Figura 3. Observe que el CSS de la Figura 2 solo usa el prefijo de proveedor “-ms-”. El código de muestra disponible en línea (archive.msdn.microsoft.com/mag201205HTML5) incluye los otros prefijos de proveedor (-webkit, -moz, -o), y debería probarlos también en sus sitios.

Figura 2 CSS para usar el módulo Flexbox

ul.thumbnails {
  width: 100%;
  background: #ababab;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
}
ul.thumbnails li {
  -ms-box-flex: 1;
}

Figura 3 Imágenes en Photo Gallery con Flexbox

Esto se ve muy bien pero, está claro que se ve igual a lo que ya teníamos. Para ilustrar la flexibilidad de Flexbox, puede cambiar el tamaño de la ventana del explorador o abrir una página en un emulador o dispositivo móvil. Aunque en este ejemplo no definimos consultas de medios, el diseño se comporta de manera un poco más fluida. Si combina ambos módulos, podrá crear contenedores fluidos que se alinean y que desplazan y distribuyen los elementos en forma sensible. Por ejemplo, puede crear una regla de consulta de medios para las pantallas con menos de 480 píxeles, cambiar el diseño orientado en cuadros a vertical, y listo, ya tiene el comienzo de un diseño móvil.

El Diseño en cuadrícula CSS (o simplemente Cuadrícula CSS), que se encuentra en bit.ly/ylx7Gq, es una especificación más nueva presentada al Grupo de trabajo de CSS del World Wide Web Consortium (W3C) en abril de 2011, que actualmente solo está implementada en Internet Explorer 10 Consumer Preview. La idea es proporcionar una funcionalidad nativa para cuadrículas robustas en el explorador. Para los desarrolladores e ingenieros el resultado es una cuadrícula tipográfica sofisticada sin diseños con tablas ni marcados que carezcan de significado semántico.

La Cuadrícula CSS nos permite establecer un diseño de página con filas y columnas predefinidas, además de reglas para especificar cómo debe fluir el contenido dentro y entre estos elementos. El primer paso es definir un contenedor de cuadrícula, para lo cual especificamos “grid” como la propiedad display de los elementos en cuestión:

body {
  display: -ms-grid; // A vendor prefix is required.
}

Aquí selecciono todo el elemento body, lo que significa que mi cuadrícula llenará el documento completo. Pero esto no es una exigencia, y también podríamos crear una cuadrícula en una sección menor de la página, o incluso definir varias cuadrículas dentro de una misma página. Una vez que definimos la cuadrícula, debemos definir el tamaño de las filas y columnas:

body {
  display: -ms-grid;
  -ms-grid-rows: 50px 30% 20% auto;
  -ms-grid-columns: 75px 25px 2fr 1fr;
}

Aquí especifiqué una cuadrícula con cuatro columnas y cuatro filas, de tamaño fijo en algunos pocos casos (50px, 75px, por ejemplo), proporcional al tamaño de la ventana para unos pocos (30%, 20%) y automático, en función del ancho del contenido (auto). También usé la nueva unidad de valor fraccionario fr, que se define en la especificación de la Cuadrícula CSS como “…una fracción del espacio disponible”. Los valores fraccionarios se calculan después de asignar los tamaños fijos y luego se reparten en forma proporcional entre todas las filas y columnas definidas con estos valores. En el ejemplo, esto significa que después de apartar los 100 píxeles para las primeras dos columnas, la tercera columna recibirá dos tercios del espacio restante y la cuarta columna un tercio.

Una vez definida la cuadrícula, los elementos secundarios se pueden posicionar fácilmente dentro de la cuadrícula, al asignar los valores de fila y columna, del siguiente modo:

#main {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-row-span: 2;
  -ms-grid-row-align: center;
}

Aquí ubiqué el elemento de seccionamiento “main” en la segunda fila y columna de la cuadrícula. Permito que el elemento abarque dos filas y centro el contenido dentro del contenedor. El sitio Microsoft Internet Explorer Test Drive Demo usa su implementación del Diseño en cuadrícula CSS para crear una implementación exacta del sitio popular Grid System, thegridsystem.org, y usted puede revisarlo por su propia cuenta en bit.ly/gEkZkE.

Si alguna vez intentó hacer algo similar con marcado y CSS2.1, sin duda que será capaz de reconocer la flexibilidad que ofrece CSS Grid. Mejor aún, al combinarlo con las consultas de medios, la Cuadrícula CSS permite crear diseños adaptativos que se pueden ajustar con menos cambios de reglas al cambio de tamaño y orientación del dispositivo por parte del usuario.

La última especificación de diseño que presentaré es el Módulo de diseño CSS en varias columnas (CSS Multi-Column), que se encuentra en bit.ly/yYEdts. CSS Multi-Column se encuentra en estado de “Candidato a recomendación” (bit.ly/x5IbJv) y disfruta de una adopción amplia en todos los exploradores, incluida la adopción planeada en Internet Explorer 10. Tal como dice su nombre, Multi-Column permite presentar columnas en una página sin posicionamiento manual ni elementos flotantes. Basta con aplicar la propiedad “column-width” (con prefijos, donde haga falta) en un contenedor, del siguiente modo:

article {
  width: 960px;
  column-width: 240px;
}

Con esta regla, los elementos article se dividen en columnas de 240 píxeles y se crean todas las columnas permitidas por el contenedor (en este caso, se requiere de cuatro columnas de 240 píxeles para llenar el contenedor de 960 píxeles). También podríamos usar la propiedad column-count para definir una cantidad fija de columnas; en este caso los anchos de las columnas se distribuirían en forma equitativa dentro del ancho del contenedor.

Igual que con los módulos Flexbox y Grid, al combinar el módulo con las consultas de medios podemos definir rápidamente reglas sencillas y adaptables para entregar a los usuarios móviles una experiencia de usuario ideal.

Los tres módulos que describí tienen mucho en común: cada uno tiene características que nos permiten crear el tipo de diseños fluidos que son un requisito para los sitios web realmente adaptables. Lo animo a que juegue con todos para poder elegir el módulo apropiado cuando se enfrente a un nuevo diseño desafiante.

También le sugiero que eche una mirada a los marcos emergentes que aprovechan estas especificaciones. Su uso le servirán como plataforma de partida para crear diseños fluidos en sus propios sitios. Dos marcos dignos de mención son Skeleton (getSkeleton.com) y Bootstrap (twitter.github.com/bootstrap), un kit completo para la creación de sitios de Twitter. Recientemente reconstruí uno de mis propios sitios con la ayuda de Skeleton (puede verlo en html5tx.com).

Medios adaptables

En materia del diseño web adaptable, especialmente en el diseño móvil, la dificultad está en los medios. Comencemos con las imágenes. Una de las formas más fáciles para obtener imágenes que se adapten mejor es agregar la siguiente instrucción a las hojas de estilo:

img {
    max-width: 100%;
  }

Esta regla siempre ajustará el tamaño de la imagen (agrandándola o achicándola) para que quepa dentro del contenedor primario de la imagen. Por lo tanto, si los elementos contenedores son adaptables (posiblemente con una de las técnicas descritas previamente), las imágenes también lo serán.

El desafío de este método radica en que las imágenes deben ser suficientemente grandes para adaptarse a cualquier tamaño que pudiera encontrarse en la práctica. En el sitio Photo Gallery que he estado usando, las imágenes sin procesar son bastante grandes, y por lo tanto se pueden cambiar de tamaño perfectamente.

Pero el uso de imágenes enormes redimensionables conduce a un problema considerable en las aplicaciones móviles: genera sobrecarga y, por ende, experiencias móviles insatisfactorias. Incluso cuando adaptamos una imagen grande a una ventana de 320 x 240 píxeles, tenemos que transmitir la imagen completa al dispositivo. Esto significa que transmitimos una imagen de 2 MB, cuando todo lo que necesita el dispositivo es una imagen de 10 KB. En el mundo móvil, el ancho de banda sigue siendo importante, por lo tanto hay que reemplazar la estrategia del ancho del dispositivo con métodos diferentes.

Desgraciadamente, esto sigue siendo difícil y W3C aún no ofrece ninguna solución específica formal. Existen varios métodos para lidiar con las imágenes adaptables, pero todas figuran en dos categorías: se encargan del problema del lado servidor o del lado cliente. Muchos de los métodos en el servidor, como los que se describen en bit.ly/rQG0Kw, emplean imágenes de 1 x 1 píxeles, cookies en el cliente y reglas de reescritura en el cliente para entregar la imagen correcta al dispositivo. Las soluciones del lado cliente, como la que se describe en bit.ly/tIdNYh, frecuentemente usan JavaScript, elementos <noscript> de reserva, comentarios condicionales y algunos trucos interesantes en CSS. Los dos métodos parecen chapuzas (porque lo son), pero representan lo mejor que hemos podido encontrar, dadas las restricciones de la etiqueta <img>. A corto plazo, lo mejor que puede hacer es estudiar ambos métodos y optar por el que mejor funcione con sus aplicaciones.

A largo plazo, sin embargo, puede que exista un rayo de luz. En un artículo de Smashing Magazine, “HTML5 Semantics” (bit.ly/rRZ5Bl), Bruce Lawson, de Opera, aboga por un elemento <picture> que se comportaría similar a las etiquetas <audio> y <video>, lo que significaría que los desarrolladores tendrían acceso a elementos secundarios <source> dentro de <picture>. Combinado con las consultas de medios, este nuevo elemento <picture> finalmente podría proporcionar una solución robusta para las imágenes adaptables:

<picture alt="cat gallery">
  <source src="nyan-high.png" media="min-width:800px" />
  <source src="nyan-med.png" media="min-width:480px" />
  <source src="nyan-low.png" />
  <!-- fallback for unsupporting browsers -->
  <img src="nyan-med.png" alt="cat gallery" />
</picture>

Aunque esta solución resultó ser muy popular y W3C le dedicó un Grupo comunitario (bit.ly/AEjoNt), no hay ningún grupo de trabajo formal, hasta donde yo sé. Con suerte, este elemento aparecerá en HTML6.

Existen dificultades similares para agregar un vídeo adaptable a los sitios y aplicaciones, aunque HTML5 tiene soluciones más robustas para el vídeo que para las imágenes. Para empezar, el elemento <source> extendido con las consultas de medios, tal como vimos en el elemento ficticio <picture> previo, es válido para <video>, como podemos observar aquí:

<video>
  <source src="nyan-mashup-high.webm" media="min-width:800px" />
  <source src="nyan-mashup-med.webm" media="min-width:480px" />
  <source src="nyan-mashup-low.webm" />
  <!-- Insert Silverlight or Flash Fallback here -->
</video>

Si usted sirve los vídeos desde sus servidores propios o emplea un servicio que proporciona diferentes versiones, le recomiendo encarecidamente que use esta sintaxis, para garantizar que los usuarios reciban un vídeo adecuado para el dispositivo.

Si bien esta solución le permitirá cuidar el ancho de banda de los usuarios, de todos modos tendrá que pensar acerca del ajuste de tamaño de estos elementos de vídeo incrustados, al igual que con las imágenes. Con las consultas de medios resulta fácil adaptar los elementos de vídeo a los diferentes tamaños de pantalla, pero si busca una solución un poco más automatizada, puede echar una mirada a FitVids.js (fitvidsjs.com), un complemento jQuery que permitirá que sus elementos de vídeo automáticamente se vuelvan fluidos y adaptables. Recuerde, sin embargo, que como complemento en jQuery, esta solución no funciona para los usuarios que deshabilitaron JavaScript.

Creación de aplicaciones web móviles con marcos HTML5

Ahora que cubrimos los dos pilares restantes del diseño web adaptable, los diseños fluidos y las imágenes flexibles, hablemos un poco sobre los casos donde no solo creamos sitios o aplicaciones adaptados para los dispositivos móviles, sino que se diseñaron específicamente para la experiencia móvil.

En el mundo del desarrollo, los paradigmas tradicionales del escritorio (o del cliente) y la web condujeron a un tercer tipo de aplicación, llamada frecuentemente aplicación nativa, ya que reside en un dispositivo determinado (un smartphone basado en Windows Phone o iPad, por ejemplo), que se desarrolla con marcos específicos para el tipo de dispositivo (iOS y Android) y se instala por medio de un App Store o Marketplace.

Por muy sofisticados y robustos que sean estos marcos, a veces los desarrolladores web quieren darle una “apariencia nativa” a sus aplicaciones web móviles. Estas aplicaciones siguen residiendo en los servidores y se pueden entregar fuera del contexto de los App Store o Marketplace.

Aunque estas aplicaciones se pueden crear a mano, comúnmente se usan marcos. Una opción popular para las aplicaciones web móviles es jQuery Mobile (jquerymobile.com), un marco de desarrollo móvil que entrega un sistema de interfaz de usuario basado en HTML5 y que está dirigido a prácticamente todas las plataformas móviles. En la Figura 4 aparece como ejemplo la aplicación móvil para OpenTable.com que se creó con jQuery UI.

Figura 4 Una pantalla móvil de ejemplo creada con jQuery Mobile

Otra alternativa para crear aplicaciones móviles con una apariencia y comportamiento nativo es Kendo UI Mobile (kendoui.com), un marco en HTML5, JavaScript y CSS de Telerik Inc. Kendo UI permite crear aplicaciones móviles que se ven completamente nativas en los dispositivos iOS y Android, y lo logra con una sola base de código. En la Figura 5 y Figura 6 aparece la aplicación en acción; puede probarla por su propia cuenta en bit.ly/wBgFBj.

Figura 5 Una aplicación de demostración con Kendo UI Mobile vista en un dispositivo iOS

Figura 6 Una aplicación de demostración con Kendo UI Mobile vista en un dispositivo Android

Creación de aplicaciones nativas con HTML5

La entrega de un aspecto nativo en las aplicaciones web no es solo una forma excelente de emplear sus conocimientos como desarrollador web, sino también de crear aplicaciones que están a la altura de las expectativas de los usuarios en los entornos móviles. Aun así, estas aplicaciones tienen un límite hasta donde pueden aprovechar los sensores y API nativos de los dispositivos. Mientras que algunas características, como la geolocalización, están disponibles en los exploradores móviles, no pasa lo mismo con muchas otras, como el acelerómetro y el vídeo. Para poder acceder a estas características, seguimos dependiendo de las aplicaciones móviles.

Lo bueno, sin embargo, es que la popularidad de la programación web ha permitido usar HTML5, JavaScript y CSS “en forma nativa”, por decir así. Algunos marcos populares como PhoneGap (phonegap.com) y Titanium Appcelerator (appcelerator.com) nos permiten usar HTML5 y JavaScript para crear aplicaciones nativas para iOS, Android y Windows Phone, adicionalmente con acceso a las API de los dispositivos. Mejor aún, los marcos de desarrollo móvil como jQuery Mobile y Kendo UI Mobile funcionan tan bien en estos entornos como en el explorador. En la Figura 7 aparece una aplicación nativa para iOS creada con PhoneGap y Kendo UI. Para obtener más información, consulte la publicación en el blog en bit.ly/zpIAPY.

Figura 7 Una aplicación para iOS creada con HTML, JavaScript y CSS

Microsoft condujo el desarrollo web nativo a un nuevo nivel, al incorporar formalmente la compatibilidad para la creación de aplicaciones para Windows 8 con HTML5, JavaScript y CSS, sin necesidad de abstracciones ni marcos adicionales. Puede revisar el Consumer Preview de Windows 8, junto con las nuevas herramientas para el desarrollo en estas plataformas, en dev.windows.com. 

¡Cuando se trata de la web móvil, tenemos muchas alternativas! Si usted es un desarrollador web que desea crear experiencias nativas, completas con características de realidad aumentada, eche una mirada a Windows 8 o un marco como PhoneGap o Titanium Appcelerator. Si lo que busca es simplemente una apariencia nativa en el explorador, revise jQuery UI y Kendo UI Mobile. Por último, si se propone crear un sitio web aislado que responda frente a diferentes dispositivos y experiencias, pruebe con las estrategias adaptables que analicé en este artículo y el del mes pasado. Sin lugar a dudas, actualmente la plataforma móvil es uno de los espacios de desarrollo más atractivos. Independientemente de las estrategias o plataformas que elija, la mejor apuesta que puede hacer es que convierta la plataforma móvil en su primera prioridad.

Brandon Satrom es director en jefe de productos de Kendo UI (kendoui.com), un conjunto de herramientas HTML5 y móvil de Telerik Inc. Mantiene un blog en userinexperience.com, lo puede seguir en Twitter en twitter.com/brandonsatrom y está escribiendo frenéticamente el libro, “Building Metro Style Apps for Windows 8 in JavaScript” junto con Chris Sells.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Jon Box, Burke Holland y Clark Sell