Tema 1: Introducción al Desarrollo Web Móvil

Introducción al tema
El auge de los equipos móviles inteligentes habilitados para Internet (Smartphones, Tablets,
phablets, etc.) nos ha empujado hacia la era de la computación móvil.  Cada vez se acrecienta
el número de personas que navegan por la web desde su dispositivo móvil. 

El Internet comenzó su auge con el computador personal, pero hoy se utilizan más de 3 mil
millones de teléfonos móviles en todo el mundo, para muchas personas la primera experiencia
de Internet es a través de un dispositivo móvil.  Estos rápidos cambios exigen al mundo de los
negocios adaptarse a ellos.  Con los dispositivos móviles que toman el lugar de los
computadores personales, no tener un sitio web móvil amigable es como cometer suicidio
empresarial.

Con esto en mente, muchos propietarios de sitios web ya desarrollan estrategias para
proporcionar información y servicios a sus visitantes móviles, lo que representa una gran
demanda por la implementación de nuevas webs móviles o la adaptación de las existentes.  En
ese sentido, a medida que la plataforma móvil continúa creciendo, los ingenieros de Sistemas
debemos estar muy interesados y preparados para el desarrollo de páginas y aplicaciones en el
mundo móvil. 

En este tema del desarrollo web móvil, nos vamos a concentrar en el diseño de interfaces web
optimizadas para móviles.  Iniciaremos definiendo con claridad la estructura de una web para
dispositivos móviles, aplicando las últimas técnicas y herramientas en el desarrollo web como
son HTML5, CSS3 y Javascript, entendiendo el fundamento sobre el que, como desarrolladores
debemos iniciar el trabajo.  Luego haremos un repaso de las herramientas con las que
debemos contar para nuestro trabajo al implementar una webmóvil, herramientas de
depuración y validación para asegurarnos de seguir los estándares recomendados. 
Finalmente, nos adentraremos en la aplicación de Responsive Design, analizando sus tres
características principales: La Rejilla flexible, imágenes flexibles y media quieres. 

Mapa conceptual referido al tema

1.1. Estructura de una web móvil con HTML5, CCS3 y Javascript.
Las herramientas estándar que todo desarrollador web debe conocer y utiilizar en este
momento, son HTML5, CSS3 y Javascript.  Estas herramientas en la actualidad nos
permiten estructurar la web móvil de acuerdo a estándares, procedimientos y buenas
prácticas recomendadas en el desarrollo web.

1.1.1. Diferencias del desarrollo web móvil

Cuando hablamos de Desarrollo Web móvil, la pregunta que quizá sea lo primero que
venga a nuestra mente es ¿Cuál es la diferencia entre el desarrollo web para
computadoras con el desarrollo web para dispositivos móviles?

Un aspecto muy importante acerca del desarrollo web móvil es que está
fundamentalmente construido con todas las mismas herramientas que se utilizan en el
diseño y desarrollo web tradicional.  En realidad el desarrollo web móvil es el
desarrollo web de siempre, pero teniendo en cuenta otros factores clave y unas API
adicionales.
Desarrollo web Móvil = Desarrollo web Normal + Consideraciones clave adicionales + Apis adicionales

Por lo tanto, como desarrolladores web hay que conocer las herramientas básicas para
el desarrollo web: HTML, CSS y Javascript.  Las consideraciones clave y APIS
adicionales, vienen de la mano hoy mediante HTML5, CSS3 y los últimos estándares,
especificaciones y características avanzadas de Javascript que se aplican al entorno
móvil en concreto.  

Al respecto, es interesante tener en cuenta algunos comentarios de personajes muy

representativos de la ciencia computacional.

“The future of the web is HTML5.”  (El futuro de la Web es HTML5)

– Dean Hachamovitch.  Microsoft

“We’re betting big on HTML5.”  (Estamos apostando fuerte por HTML5)

– Vic Gundotra.  Google

“Si alguien os pide desarrollar una aplicación móvil, decidle que una aplicación web
abierta puede ser igual de buena e igual de sexy. Si se utiliza HTML5, no es necesario
escribir una aplicación para cada sistema”.
Tim Berners-Lee. El padre de la Web

“the world is moving to HTML5” (El mundo se está moviendo hacia HTML5).
Steve Jobs.  Apple

Por otro lado, debemos tener en cuenta otros factores para el desarrollo móvil: 
Pantallas más pequeñas, ancho de banda de red limitado, potencia del procesador,
entre otros.  Por lo tanto, el desarrollo web para móviles te obliga a concentrarte en
los aspectos clave de la experiencia del usuario.

Por ejemplo, fijémonos en los siguientes casos, ingresa a cada una de estas webs
usando tu navegador desde una laptop y luego ingresa usando tu dispositivo móvil:

 https://news.google.com/
 peru21.pe
  jw.org
Como podemos notar en la versión para el escritorio, muestran mucha información,
pero en la experiencia móvil, se enfoca o muestra sólo lo necesario, evitando toda la
información secundaria.   Por otro lado, los componentes de cada web se acomodan
cuando se accede desde un dispositivo móvil, con el fin de dar al usuario una
experiencia satisfactoria.  Esto es lo que buscamos cuando hablamos del desarrollo
web móvil, un solo diseño para múltiples dispositivos.

1.1.2. Estructura básica de una web móvil

Considerando lo dicho anteriormente, podemos empezar estructurando nuestra
primer desarrollo web móvil considerando el siguiente código base:

Dentro de este código, lo primero que quizá nos parezca algo diferente es la etiqueta
meta Viewport.  Más adelante hablaremos un poco más sobre este tema con más
detalle, por el momento sólo indicaremos que esta línea es esencial para que nuestra
web móvil se adapte a un dispositivo móvil.  Cuando esta página se ve desde un
desktop, esta línea de código no tiene ningún efecto.

Como podemos notar cuando ya empezamos a desarrollar aplicaciones Web para

móviles se nos abre muchas posibilidades, puesto que ahora es necesario aprender a
escribir código que se adapta a diferentes tamaños de pantallas, hacer que nuestro
código funcione fuera de línea e interactuar con las características propias de
hardware de los dispositivos móviles como son el GPS, acelerómetro, cámara, audio,
entre otros.  Todos estos temas se estarán examinando más adelante.

1.1.3. La etiqueta meta Viewport

El comportamiento natural de cualquier navegador web en un dispostivo móvil es al
ingresar en una página web, analiza el tamaño total de la web y lo escala haciéndolo
más pequeño para que se muestre completo en la pantalla.  Esto puede generar
problemas para lograr que un sitio web se vea de forma consistente en cualquier
plataforma.  Por ejemplo, la imagen que se muestra a continuación tiene un gráfico
que mide 320 pixels al igual que la pantalla del dispositivo, sin embargo, el gráfico
aparece con un tamaño muy inferior a causa del efecto de escalado automático que
hace el navegador.
 La solución a esto es la etiqueta meta viewport que fue introducida por Apple en el
navegador Safari para móviles, para ayudar a los desarrolladores a mejorar la
presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad.  Luego los
demás navegadores dieron soporte a dicha etiqueta a pesar que la misma no forma
parte de ningún estándar web.
Esta etiqueta viewport nos permite, definir el ancho, alto,
tamaño y escala del área usada por el navegador para
mostrar contenido.  Como lo observamos en el código
indicado en la sección

Estructura básica de una web móvil, el viewport es un

atributo del tag <meta> que  debe incluirse entre las
etiquetas <head> de un documento HTML.  Agregando
esta línea de código, exigimos al navegador que muestre
nuestra web en la escala correcta.

A continuación mostramos las propiedas del ViewPort:

Como podemos observar, tiene varias propiedades que podemos cambiar.  Sin
embargo para asegurar compatibilidad con la mayor cantidad de pantallas y
navegadores móviles, se recomienda utilizar este formato como base:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.2. Herramientas para el desarrollo web móvil.

Hablemos de las herramientas necesarias con las que debemos contar para poder
realizar el desarrollo web móvil de un forma eficiente.  Estas herramientas nos van
desde contar con un dispostivo móvil físico, luego utilizar las herramientas integradas
en el propio navegador donde probamos nuestras aplicaciones y tambien fijarse en
herramientas que nos permiten validar nuestro trabajo respecto a estándares de
desarrollo.

1.2.1. Dispositivo móvil

Aunque técnicamente no es necesario contar con un dispositivo móvil para las pruebas
que podamos realizar, sin embargo, el contar con uno será mucho más beneficioso.  Si
fuera un dispositivo Android será mucho mejor, además considerando que hoy, el
sistema operativo móvil es ya el más utilizado, por otro lado, con este será posible
hacer un uso más fluido de  las herramientas de depuración móvil del navegador
Chrome.
1.2.2. Herramientas en el navegador

Todo navegador actualizado, cuenta con las opciones para desarrolladores, mediante
la cual proporcionan una serie de herramientas para depurar e inspeccionar
aplicaciones web.   En el caso de Chrome basta con dar click en el ícono del menú en la
parte superior derecha, luego elegir “Herramientas” y “Herramientas del
desarrollador” o presionar sencillamente “F12”.  Para Firefox, click en el ícono del
menú en la parte superior derecha, luego “Desarrollador” y “barra de desarrolladores”
o presionar sencillamente “Mayús + F2”. Todo navegador actualizado, cuenta con las
opciones para desarrolladores, mediante la cual proporcionan una serie de
herramientas para depurar e inspeccionar aplicaciones web.   En el caso de Chrome
basta con dar click en el ícono del menú en la parte superior derecha, luego elegir
“Herramientas” y “Herramientas del desarrollador” o presionar sencillamente “F12”. 
Para Firefox, click en el ícono del menú en la parte superior derecha, luego
“Desarrollador” y “barra de desarrolladores” o presionar sencillamente “Mayús + F2”.

Una característica con la que cuenta el navegador Google Chrome, consiste en la

posibilidad de utilizar directamente el navegador de nuestro dispositivo móvil para
testear nuestras aplicaciones web en tiempo de desarrollo.  Para esto debemos seguir
los siguientes pasos, considerando que contamos con una laptop o computador de
escritorio y un Smartphone Android 4.0 o más:

1.- Activamos el modo desarrollador en nuestro smartphone.  Elegimos las opciones:

Configuración/Acerca de/ y en la opción “Número de compilación” realizar siete
toques.  Este método solo funciona para dispositivos con Android a partir de la versión
4.0.  Para versiones anteriores revisa el manual de tu dispositivo.

2.- Ingresamos a la opción “Desarrollador” y activamos la opción “depuración USB”

3.- Nos aseguramos de tener instalados la última versión de Chrome tanto en la Laptop
como en el dispositivo móvil.

4.- Conectamos mediante cable USB el celular con nuestro computador de escritorio.

5.- En nuestro navegador de escritorio o laptop, ingresamos al navegador Chrome y en

la barra de direcciones colocamos: crhome://inspect

6.- Allí debe aparecer el nombre de nuestro dispositivo conectado.  Desde donde
podemos elegir cualquier opción para navegar, inspeccionar o depurar desde nuestra
laptop cualquier web que tengamos cargada en nuestro navegador móvil.

7.- Podemos configurar para permitir al dispositivo móvil acceder a un servidor local
instalado en nuestra laptop, de tal manera que en momento podamos visualizar
nuestra web que desarrollamos directamente en el equipo móvil.

8.- En nuestra laptop, debemos tener activado un servidor web de desarrollo.

 9.- Para acceder desde nuestro móvil a una dirección local de la laptop debemos
configurar la redirección de puertos.   En la página crhome://inspect, click en el botón
“Port forwarding” y creamos una redirección de puertos, podemos utilzar el puerto
9999 que apunte a nuestra web local que deseamos acceder.  Luego habilitamos el
check “Enabled port forwarding” y click en “Done”

10.- En el navegador de nuestro móvil digitamos “localhost:9999” y nos cargará la

página local que estamos probando de nuestra laptop.

También tanto en el navegador Firefox y en el Chrome, existen plugin o extensiones

que nos ayudarán a depurar nuestros desarrollos web móviles.  Uno de estos plugin es
el famoso “Web developer”.  Para el caso de Chome, solo debes ir a
https://chrome.google.com/webstore/category/apps.  En esta Web, en el cuadro de
búsqueda digitamos “Web developer” y procedemos a la instalación.  Una vez
instalado, una opción que se usa mucho es “Resize”;  en esta, al dar click en la opción
“View Responsive Layouts” nos presenta varias vistas de nuestra web en diversos
tamaños de pantallas.

1.2.3. Validando nuestra web móvil

Mediante la siguiente página web:

http://developers.google.com/speed/pagespeed/insights/, Google nos presenta una
valiosa herramienta, mediante la cual podemos validar si nuestra web es adaptable a
móviles y además recibimos recomendaciones basadas en técnicas y estándares que
debemos aplicar para lograr nuestro objetivo.

1.3. Resposive Web Design

Diseño web Responsivo es el enfoque que sugiere que el diseño y desarrollo deben
responder al comportamiento del usuario y el entorno basado en el tamaño de
pantalla, la plataforma y la orientación.

1.3.1. Caracteristicas Principales

Para que un diseño web sea considerado "responsivo", debe tener tres características
fundamentales. El diseñador / desarrollador Web Ethan Marcotte, autor que
conceptualiza el Responsive Web Design - indica que deben ser las siguientes:

 El sitio debe ser construido con una base de rejilla(grid) flexible.

 Las imágenes que se incorporan en el diseño deben tambien ser flexibles.
 Diferentes vistas deben ser habilitadas en diferentes contextos utilizando los
media queries de CSS3

Como el usuario cambia desde su ordenador portátil para cualquier otro dispositivo
móvil, el sitio web debe cambiar automáticamente para adaptarse a la resolución,
tamaño de imagen y orientación. En otras palabras, el sitio web debe estar
implementado con la tecnología para responder automáticamente a las preferencias
del usuario. Esto eliminaría la necesidad de un diseño diferente y fase de desarrollo
para cada nuevo aparato en el mercado. 
1.3.2. Rejilla flexible

Decir que su sitio debe estar formado por una rejilla flexible, no significa que se
encuentra restringido a elegir uno de los más de doce opciones de grandes sistemas de
rejillas que hoy existen en diseño web.

Ya sea que usemos un sistema de rejillas flexible prefabricados o creemos una solución
personalizada, lo verdaderamente importante de un sistema de rejilla flexible es el
mecanismo de control para el tamaño de su diseño y espaciado.  Hoy esto significa,
Para los diseñadores web, abandonar nuestros queridos píxeles y reemplazarlos con
diseños web que utilicen los porcentajes y em’s como unidades relativas de medición.  
Para este momento, gracias al CSS3 ya contamos con las unidades de medidas mucho
mejor y flexibles conocidas como Viewport Units, las que llegan a ser más exactas aún
que los porcentajes y los em’s.

Otra de las características renovadas y ya más estables de CSS3 para estos casos, es el
uso del nuevo Flexbox model o modelo flexible de caja.  Tal como se menciona en la
página de desarrolladores de Mozila: “es un modo de diseño que permite colocar los
elementos de una página para que se comporten de forma predecible cuando el
diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes
dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora
sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los
márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.”

Los Viewport Units

Estas nuevas unidades de medida revolucionan el diseño responsivo.  Son unidades Css
relativas al tamaño de la ventana del navegador.  Como podemos notar, este es un
aspecto muy importante que las diferencia de las unidades de porcentajes y em’s las
cuales son relativas al tamaño del bloque de contención inicial, lo que muchas veces
hacía que fuera dificil controlar los tamaños cuando existían contenedores anidados. 
Este problema se soluciona, pues a los elementos que se les aplica esta medida, toman
como su referencia el tamaño de la ventana del navegador, no el de su contenedor.

Los valores vw, vh, vmin, vmax relativos al tamaño de la ventana. Valores que forman
parte de la especificación CSS3 Values & Units Module.

vw y vh (Viewport width y Viewport height) representan porcentajes sobre la anchura

y altura del 'viewport' respectívamente.  Ejemplo:

1vw = 1/100 de la anchura de la ventana. Es el 1% del ancho de ella.

15vh = 15/100 de la altura de la ventana. Es el 15% de el alto de ella.
El vmin tomará el valor más bajo, y el vmax el más alto.  Si la ventana del navegador se
encuentra apaisada (más ancha que alta), entonces vmin=vh y vmax = vw.    Si, la
ventana se encuentra en modo portaretrato (más alta que ancha), el vmin = vw y el
vmax = vh.

Esto es especialmente útil en diseño para dispositivos móviles, en los que rotamos el
aparato y cambiamos de una vista de portaretrato a otra apaisada.

Por ejemplo, si un viewport o ventana grafica es equivalente a una resolución de 800px

por 600px el vmax sería la longitud mayor, que seria 800px y el vmin la longitud
mínima que sería la de 600px.

En otro caso, si la vista es 1000px por 700px, entonces 100vmax sería equivalente a
1000px.

La recomendación hoy también es aplicar estas misma unidades de medida viewport

Units a los tamaños de fuentes que utilicemos en nuestros sitios web.  Por ejemplo:

En Un ViewPort 800 x 600  (ancho x alto), podemos aplicar el siguiente tamaño a las
fuentes:

CSS

h1 {font-size: 8vw}

h2 {font-size: 3vh;}

p {font-size: 2vmin;}

Lo que significa lo siguiente:

h1 tendrá un tamaño de fuente del 8% de la anchura de la ventana = 64px

h2 = 18px

p = 12px

1.3.3. Imágenes flexibles

Como el diseño web evoluciona, estamos constantemente viendo los sitios que
incorporan cada vez menos las imágenes innecesarias y fotos.
Una alternativa para las imágenes surge con CSS.  La propiedad CSS overflow (por
ejemplo overflow: hidden) nos da la posibilidad de recortar las imágenes
dinámicamente a medida que los contenedores de ellos cambian para adaptarse a
nuevos entornos de visualización.

Otra alternativa también puede utilizarse las nuevas unidades de medida Viewport
Units, explicadas en el párrafo tamaño, para controlar los tamaños de las imágenes.

También podemos tener varias versiones de la imagen en el servidor, y luego servir de

forma dinámica la versión de tamaño adecuado en función del user agent detectado o
características de cliente mediante la manipulación del DOM.

Por último tenemos la opción de ocultar las imágenes en conjunto si realmente

queremos poner énfasis en el contenido y no en las imágenes, utilizando media
queries que sirven una hoja de estilo que establece la propiedad display: none a cada
imagen (o un subconjunto de las imágenes mediante la asignación una clase opcional
como opcional-img para permitir una selector CSS especificado en su hoja de estilo).

Este tema de las imágenes flexibles siempre ha sido una clave de frustración para los
diseñadores que desean aumentar la velocidad y la funcionalidad de sus sitios. Sin
embargo, todo eso va a cambiar, como la nueva etiqueta HTML5 <picture>.

Esta etiqueta actuará como un filtro para la vigente <img>. Permitirá que los
navegadores antiguos puedan todavía cargar imágenes mediante <img>, pero también
permitirá que los nuevos navegadores puedan filtrar el contenido basado en diferentes
condiciones. Según Scott Gilbertson en su post "Una guía completa para el Elemento
picture" :.

Un ejemplo muy sencillo de uso es el siguiente:

Con este código indicamos al navegador, lo siguiente:  Si la densidad de píxeles de

pantalla está a 1x que cargue cover1x.jpg ; si la densidad de la pantalla es 2x que
cargue el de mayor resolución cover2x.jpg . Por último, si la densidad de la pantalla es
de 4x, cargar cover4x.jpg .

1.3.4. Media Queries

Esta es, posiblemente, la característica más interesante (y más intimidante para los
diseñadores web que no están familiarizados con ellas) de un diseño web responsivo.

A menudo, muchos se dejan llevar, pensando en los media queries como el

componente principal de un diseño responsivo y dejando los otros componentes como
opcionales. La realidad de la situación es que las media queries son poco útiles sin la
aplicación existente de una base sólida de HTML5 y CSS3 que incluye no sólo una rejilla
flexible, sino también las imágenes flexibles.
Los Media quieries permiten a los diseñadores crear varios diseños usando los mismos
documentos HTML, sirviendo selectivamente las hojas de estilo en base a las
características del user agent, como el tamaño de la ventana del navegador. Otros
parámetros son la orientación (horizontal o vertical), resolución de pantalla y así
sucesivamente.

A continuación podemos ver otros ejemplos más utilizados de media queries

<!– Esta hoja de estilos se muestra si tu dispositivo tiene como máximo 480px de
ancho.  –>
<link href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only
screen and (max-device-width: 480px)” />

<!– Este otro query solo se muestra en equipos de escritorio en una ventana de al
menos 481px de ancho. –>
<link href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and
(min-width: 481px)” />

<!-- CSS media query en un elemento Link -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query dentro de una hoja de estilos -->

<style>
/* si la ventana tiene un ancho de 600px o menos */
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
/* si la ventana tiene un ancho de 700px o más y la pantalla esta en formato
horizontal. */
@media (min-width: 700px) and (orientation: landscape) { …..
}
</style>

A todo esto tambien es necesario estar enterados de las últimas novedades en CSS3
con respecto a las media quieries.  A continuación otros ejemplos:

@media (min-width: 600px) and (max-width: 1000px) {

 /* conjunto de reglas*/
}

Según la última especificación Media Queries Level 4 

http://www.w3.org/TR/mediaqueries-4/, ahora ya puede utilizarse esto:

@media (600px < width < 1000px) {

 /* conjunto de reglas*/
 }

La regla @media light-level para el control del contraste de la web en función de la luz

ambiente.
Ejemplo:

@media (light-level: normal) {

  p { background: url("texture.jpg"); color: #333; font-weight: 300;}

 @media (light-level: dim) {

  p { background: #222; color: #ccc;  font-weight: 700;}

@media (light-level: washed) {

  p { background: #fff; color: #000; font-size: 2em; font-weight: 900;}

Referencias

 Arroyo, Natalia  (2011). Información en el móvil. Recuperado en Biblioteca

Digital USS-UCVcix  base de datos e-libro

 Herrera Ríos Emmanuel (2011). Arrancar con HTML5: curso de programación.

Recuperado en Biblioteca Digital USS-UCVcix  base de datos e-libro