Arquitecto IT

Ejemplo de Diseño Sensible

Para el desarrollo de este ejemplo, tomamos el caso descrito en mi anterior articulo a modo de diseño. De este modo, tenemos una página que va a adaptar su presentación de acuerdo al ancho del dispositivo que accede a ella.

Este es el Diagrama de Componentes de nuestro ejemplo:

Los estilos que son comunes, los vamos a definir en una hoja de estilos CSS (base.css), para ser empleada independientemente de la resolución que tenga el dispositivo con el que accede el usuario.

Como se puede observar en el diagrama, hemos decidido que nuestra aplicación va a realizar la adaptación de su contenido a dos tipos de resoluciones:

1. Dispositivos con un ancho de resolución menor de 400 pixeles (px), que visualizarán nuestra aplicación con un layout vertical, representando las distintas zonas cada una en una fila

2. Dispositivos con un ancho de resolución mayor a 400 pixeles (px), que visualizarán nuestra aplicación con un layout que ubique el menú ppal a la izquierda del contenido principal

Este modo nos va a permitir, el soporte incluso para el mismo usuario en el caso que disponga de un dispositivo con el que pueda variar su orientación

Con el fin de comprobar el cambio en dicha página, la cabecera de dicha página cambiará de color como consecuencia del ancho del dispositivo que accede.

Puedes ver el funcionamiento del ejemplo que vamos a realizar.

Áreas de la Pagina y su comportamiento

Nuestro ejemplo, presenta las siguientes secciones:

• Una sección que es la cabecera del sitio
• Una barra de menu, con enlaces a otras secciones.
• Una sección, donde los articulos son presentados
• Un pie de página, con un enlace para contactar con el creador de la página

Los cámbios que se van producir son los siguiente:

1. Dispositivos con un máximo de 400 px. En este caso, las distintas secciones se presentan de modo lineal, una tras la otra. La hoja de estilos, con el nombre Adaptlt400.css, dispone de los siguientes estilos:

#banner {
  color: black;
  font-size: 1em;
  text-align: center;
  background-color:white;
}

En este caso, como no queremos alterar las disposiciones de los elementos, cambiamos el color de fondo de la cabecera, a

2. Dispositivos con un mínimo de 400px. Los dispositivos que cumplan con esta característica, reciben distinta presentación:

• La barra de menú se presenta a la izquierda, alineando los distintos enlaces
• La sección con el contenido, se presenta a la derecha del menú

Para conseguir ese efecto, creamos la hoja Adaptgt400.css, con los siguientes cambios:

Cambiamos los elementos del menú de navegación, para se presenten como una lista

ul
{
  text-align: left;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {display: block}
#banner {
  color: white;
  font-size: 1em;
  text-align: center;
  background-color:blue;
}

Indicamos que queremos que la barra de navegación se ubique a la izquierda de la zona de contenidos.

#navMenu {
  padding: 0;
  display: block;
  float:left;
  width: 20%;
  height: 100%;
}

Indicamos que la sección con los artículos, también flote sobre el menú de navegación.

#workArea {
  float:left;
  width: 80%;
}

Aplicar Media Queries a la página

Para que se aplique la hoja de estilo correspondiente, debemos incluir en nuestra página el enlace a las hojas de estilos.

Para ello, empleamos la etiqueta “link”, añadiendo las dos hojas de estilos:

<!-- Estilos-->
<link rel="stylesheet" type="text/css" href="./css/Adaptlt400.css" media=" (max-width: 400px)" />
<link rel="stylesheet" type="text/css" href="./css/Adaptgt400.css" media=" (min-width: 400px)" />
<!-- Fin Estilos-->

Como se observa, a primera vista, tenemos un nuevo atributo “media” que es el que vamos a emplear para indicar cuando se debe aplicar cada una de las hojas de estilos.

Herramientas empleadas

Debido a mi “afición” al software libre, me siento obligado a enumerar las herramientas que he empleado para la realización de este artículo:

• Diagramas. Para los diagramas, he empleado la herramienta DIA. Se puede descargar e instalar desde los repositorios por defecto, en Ubuntu.
• Imágenes. Todas las imágenes han sido redimensionadas con Gimp.
• Desarrollo HTML 5. Para el desarrollo de la página, he empleado BlueGriffon.

¿Qué es SPDY?

En noviembre de 2009, Google, dentro de su proyecto Let's make the web faster, anuncia la creación de un nuevo protocolo cuyo principal objetivo es reducir el tiempo de carga de las páginas web. El nombre elegido para el nuevo protocolo es SPDY (pronunciado Speedy).

Conjuntamente con el anuncio, se presenta la documentación, la implementación y los resultados de las primeras pruebas realizadas en los laboratorios: ¡la carga de páginas web se ve mejorada en un 55%! Atendiendo a estos resultados y teniendo en cuenta que son pruebas de laboratorio se puede decir que  el tiempo necesario para visualizar una web se ve reducido, aproximadamente, a la mitad.

Características

SPDY está diseñado específicamente para minimizar la latencia de red y disminuir el tiempo utilizado en el transporte de información en las comunicaciones web.

SPDY se sitúa a medio camino entre la capa de sesión y la capa de aplicación. Este protocolo no sustituye al protocolo HTTP sino que lo complementa y mejora determinados aspectos que HTTP no contempla.

Las características principales en las que se basa SPDY:

• Conexiones multiplexadas: es la idea base del protocolo. Se permite un número ilimitado de peticiones sobre una misma conexión. Esta característica también mejora la eficiencia del protocolo TCP: se necesita realizar menos conexiones y enviar menos paquetes de información en cada conexión (aunque son más densos).
• Compresión de cabeceras HTTP: SPDY comprime las cabeceras HTTP, tanto de peticiones como de respuestas. Esto hace que se envíen menos paquetes y menos bytes en cada paquete disminuyendo el tiempo necesario para procesar la petición.
• Priorización de peticiones: SPDY implementa un sistema de prioridades para el procesamiento de peticiones. El cliente puede asignar a cada petición que realiza una prioridad y el servidor resolverá antes las peticiones de prioridad más alta. Esto previene que se produzca una congestión de red con peticiones a recursos que no son críticos.
• Push desde el servidor: este protocolo experimenta con la idea de enviar datos desde el servidor al cliente antes de que este haga una petición expresa a un recurso, es decir, el servidor envía información al cliente que este va a necesitar pero que aún no ha pedido. Para ello utiliza la cabecera X-Associated-Content. Esta característica puede suponer una mejora significativa en el tiempo inicial de carga de páginas web.

Uso de SDPY

Actualmente, está liberada la versión 3 de SPDY. Para poder sacar partido a las características del protocolo y aprovechar las mejoras en el rendimiento de las comunicaciones web es necesaria una adaptación de las dos partes más importantes implicadas en la comunicación web: el navegador y el servidor.

Del grupo de navegadores más conocidos y utilizados, Internet Explorer, Chrome, Firefox, Opera y Safari, los que soportan SPDY son Chrome y Firefox desde las versiones 6 y 11, respectivamente. También en sus versiones para Android. Esto supone más de la mitad de los navegadores que se utilizan actualmente en la navegación por internet por lo que ya existe un uso muy alto de navegadores web que pueden aprovechar las mejoras proporcionadas por SPDY. Amazon con Silk, el navegador para Kindle, también soporta SPDY.

Opera, por su parte, ha lanzado un cliente a través de Opera Labs con una versión de prueba que soporta SPDY pero aún no está disponible en la versión estable de su navegador, aunque probablemente lo estará en una de las siguientes versiones estables.

Por otro lado, dos compañías muy importantes en el mercado de navegadores como Microsoft y Apple, con sus navegadores Internet Explorer y Safari respectivamente, no parecen tener planes para dar soporte a SPDY.

Si quieres puedes consultar el soporte de los navegadores para SPDY.

El otro agente principal involucrado en las comunicaciones web son los servidores web. Google es quien más esfuerzo está realizando para que el proyecto salga adelante dando soporte a este protocolo en todos sus servicios que funcionan bajo HTTPS: Google Search, Gmail, Google Ad’s…

Recientemente, Twitter y Facebook también han anunciando que dan soporte a SPDY en sus servidores, es decir, van a servir sus páginas web a través de este protocolo si el usuario accede con un navegador que lo soporte. Varios servidores web muy utilizados van implementando, poco a poco, el soporte a SPDY: el módulo mod_spdy da soporte a este protocolo para el servidor Apache y también Jetty y nginx implementan las características para soportar SPDY.

Aunque hablamos de que es necesaria una adaptación tanto de los navegadores como de los servidores para utilizar SPDY, estas adaptaciones son transparentes a los usuarios de la web. Es posible que las mejoras introducidas por este protocolo vayan a influir en el diseño de los nuevos sitios web y en las técnicas de optimización de la parte de front-end de los servicios que proporcione una empresa si se incrementa o estandariza el uso de este protocolo.

Conclusiones

El objetivo inicial de SPDY era proporcionar un acceso más rápido a la web sin necesidad de cambiar el contenido y de forma transparente a los usuarios. Ha demostrado que es posible y viable. Presenta importantes mejoras a nivel de rendimiento en cualquier tipo de conexión,  tanto en conexiones normales como en conexiones para móviles.

SPDY se basa en una serie de buenas ideas (compresión de cabeceras, una única conexión para múltiples peticiones, etc.) que dan una base sólida para la posible definición de un nuevo estándar. ¿HTTP 2.0?

SPDY es una de las propuestas, enviada por Google al IETF, para la definición del estándar HTTP 2.0. Otra de las propuestas enviada por Microsoft es HTTP Speed+Mobility y, para su definición, toma como base varias características de SPDY y añade mejoras relacionadas con el trabajo que se ha hecho hasta ahora de WebSockets.

En esta época donde existe una gran cantidad de información y la posibilidad de acceder a ella desde cualquier punto y dispositivo es imprescindible que el acceso sea lo más rápido posible. Parece que Google y SPDY han iniciado con fuerza este proceso de mejorar el acceso a la información de la red.

Estaremos atentos a los movimientos que se vayan produciendo. Mientras tanto, ¿cuál es vuestra opinión sobre este protocolo? ¿Creéis que su uso se va a seguir extendiendo? ¿Se convertirá en un estándar de facto?

Que tu diseño sea "Sensible" al contexto del usuario

Dentro del ámbito de la Accesibilidad, encontramos un punto muy importante, que todo arquitecto y desarrollador Web debería de tener en cuenta a la hora de plantear la Arquitectura de una nueva Aplicación Web. Me estoy refiriendo a la adaptación del contenido al dispositivo que emplea el usuario para acceder a dicha aplicación, tomando de modo adicional el contexto en el que se desenvuelve.

Cuando me refiero al contexto, principalmente, podemos centrarnos en la orientación del dispositivo, la resolución del mismo, etc...

A lo largo de los últimos años, ha surgido un nuevo paradigma denominado Responsive Design, que podemos traducir como Diseño Sensible. El planteamiento del Diseño Responsable se basa,  en tener en cuenta el Dispositivo y el contexto que el usuario emplea para acceder al contenido de modo que:

• Dicho contenido se adapte al dispositivo, siendo adaptable a las características del Viewport (espacio donde se muestra el contenido) y se evita que el usuario deba realizar scroll por nuestras páginas, impidiendo una experiencia de usuario correcta.
• De modo adicional, también debe adaptarse al modo de navegación del que dispone el usuario (si la navegación se va a realizar por teclado, por pantalla táctil, etc...)
• Evitar la duplicidad de páginas para dar cábida a todos los dispositivos, de modo que no entremos en un mantenimiento costoso y pesado
• Marcar las bases para la evolución de nuestra Aplicación Web a nuevos dispositivos, de un modo ágil

El diseño sensible presenta varios aspectos a tener en cuenta, pero en este articulo vamos a enfocarnos a la gestión de las distintas presentaciones (Layouts) de una Aplicación Web diseñada de este modo, siendo adaptadas al llamado Viewport (espacio en el que la página será presentada en el dispositivo que accede a ella).
Recomiendo la lectura, para aquellos que se encuentren cómodos con el ingles, del post de Ethan Marcotte

Distintos clientes, misma necesidad

Actualmente, nos encontramos con la siguiente necesidad.

A dia de hoy, nos encontramos con multitud de dispositivos, que presentan distintas características a las que nuestra Aplicación Web debe tener en cuenta en su diseño:

• A nivel hardware, las pantallas presentan distintas resoluciones, en incluso algunos, como las tabletas pueden variarla de modo dinámico.
• Ciertos dispositivos son elegidos por usuarios que requieren desarrollar tareas “sobre la marcha” y de modo óptimo, para mejorar su acceso a Internet, por lo que estamos obligados a presentarle el contenido más importante de un modo accesible
• Los dispositivos presentan distintos navegadores, con distinto soporte a lenguajes de marcas y tecnologías complementarias (javascript, soporte a lenguaje de marcas)

Media Queries, la solución a aplicar

Para ayudarnos en esta nueva tarea, disponemos de un mecanismo denominado Media Queries. El objetivo de esta tecnología, cumple con el objetivo que tenemos que cubrir.

Si queremos conocer el soporte actual de los navegadores, podemos encontrar aquí más información.

Por medio del uso de Media Queries, podemos establecer distintas hojas de estilo para lograr que nuestro ntenido se adapte a distintos tipos de medios. Si a este nivel equiparamos los distintos “tipos de medios” a los distintos tipos de dispositivos para los que deseamos que nuestra Aplicación Web, nos encontramos con el siguiente escenario:

Ya sea por el medio que sea, análisis de estadísticas de acceso de dispositivos en Internet, por las necesidades de nuestro cliente o de nuestra empresa; hemos decidido que nuestra aplicación va a realizar la adaptación de su contenido a dos tipos de resoluciones:

1. Dispositivos con un ancho de resolución menor de 400 pixeles (px), que visualizarán nuestra aplicación con un layout vertical, representando las distintas zonas cada una en una fila

2. Dispositivos con un ancho de resolución mayor a 400 pixeles (px), que visualizarán nuestra aplicación con un layout que ubique el menú ppal a la izquierda del contenido principal

Los estilos que son comunes, los vamos a definir en una hoja de estilos CSS (base.css), para ser empleada independientemente de la resolución que tenga el dispositivo con el que accede el usuario.

Este enfoque, nos obliga a tener en cuenta a la hora de diseñar nuestra aplicación, de la importancia que tiene la definición de los estilos CSS y el mejor modo de agruparlo.

Como hemos comentado anteriormente, media Queries nos va a permitir aplicar una hoja de estilos u otra, dependiendo de las reglas que establezcamos. En nuestro caso, será el ancho mínimo el valor por el cual la CSS correspondiente será empleada.

Siempre queremos dar soporte a cualquier dispositivo, pero debemos tener en cuenta que el uso de media queries puede tener impacto en cuanto al rendimiento de nuestra Aplicación:

• El navegador evalúa variaciones en el viewport, que provocar hacer el usuario, como cambio del tamaño de la ventana donde visualiza el contenido o variación en la orientación del dispositivo, redimensionar la ventana del navegador. Por esta razón, debemos establecer un límite a la hora de indicar el número de reglas, con el fin de no penalizar el rendimiento en la respuesta del navegador
• Limitar los estilos de las hojas para el layout, sólo para posicionar contenido de nuestra página y no de presentación
• Si los estilos los tenemos en ficheros CSS, hay que tener en cuenta las peticiones que debe realizar el navegador para no sobrepasar el número optimo

 Por norma general, las peticiones de recursos desde nuestra página debería de estar entre 6 y 8, contando con las peticiones para otros recursos, como las imágenes)

Resumen

Una vez visto el funcionamiento de Media Queries, podemos reconocer una herramienta a tener en cuenta si queremos adaptar la presentación del contenido de nuestras Aplicaciones Web a los distintos dispositivos que pueden emplear nuestros usuarios, y los que puedan aparecer en un futuro (más que próximo).

A la hora de aplicar Media Queries debemos tener en cuenta:

• El rendimiento. Hay que tener en cuenta que la modularización que supone su uso, implica añadir peticiones de nuestras páginas. Deberíamos tener siempre como meta, que no se superen las 8 peticiones por página, sobre todo si nuestros usuarios van a acceder con dispositivos móviles.
• Los estilos a incluir en las hojas de estilos. Debido a que el navegador reevalua cualquier cambio en el espacio donde se presenta nuestra página, el hecho de añadir cambios en la presentación de los elementos de nuestra página supone más tiempo de proceso del navegador para aplicarlos. Deberíamos, por tanto, añadir a las hojas de estilo cambios en la disposición de los elementos, e intentar centralizar en una hoja base la presentación de los mismos (color de fondo, fuentes, bordes, etc.)

Herramientas empleadas

Debido a mi “afición” al software libre, me siento obligado a enumerar las herramientas que he empleado para la realización de este artículo:

• Diagramas. Para los diagramas, he empleado la herramienta DIA. Se puede descargar e instalar desde los repositorios por defecto, en Ubuntu.
• Imágenes. Todas las imágenes han sido redimensionadas con Gimp.

La aparición de los elementos VIDEO y AUDIO en HTML5 ha simplificado la capacidad de insertar elementos multimedia en nuestros diseños webs. Si bien, el estado primigenio de la especificación HTML5 hace que sea complicado mantener la compatibilidad de código para diferentes navegadores.

Popcorn: Unificando el elemento VIDEO

Popcorn es un proyecto de Mozilla que pretende dar un interface unificado y sencillo para el tratamiento de los elementos multimedia en las páginas web.

De esta manera, lo primero que nos ofrece Popcorn es el framework Popcorn.js, el cual, mediante un sistema de eventos facilita la interacción con los elementos multimedia. Así Popcorn.js nos permite centrarnos en lo que realmente queremos hacer simplificandonos el control y gestión del vídeo.

Popcorn.js estandariza las propiedades del elemento HTMLMediaElement. Ya que a día de hoy no tiene una implementación unificada en todos los navegadores. Cada versión del framework tiene unos 1400 test de regresión para asegurar la compatibilidad con los navegadores web.

Popcorn: Realizando mashups multimedia

Pero Popcorn no se queda en una simplificación de la gestión de vídeos, si no que su idea es el poder proporcionar una experiencia multimedia completa al usuario. De esta forma, el framework Popcorn.js cuenta con multiples funcionalidades para acceder a recursos multimedia: fotos, tweets, wikipedia,... los cuales iremos cargando, mostrando y ocultando en el avance del vídeo.

Alrededor del proyecto Popcorn han nacido un ecosistema de proyectos y librerías que complementan a este framework, dando la posibilidad de extender su uso.

Entre los plugins podemos encontrar: Twitter, Flickr, Lastfm, Linkedin, OpenMap, Wikipedia, Google Maps,...

A descargarse Popcorn

Si quieres trabajar con el framework Popcorn.js tienes que saber que la versión actual de Popcorn es Popcorn 1.2. Las librerías que necesitarás son:

• Librería Popcorn para desarrollo
• Librería Popcorn para producción

Otra opción es personalizarse la librería de producción mediante un builder.

Si te has descargado Popcorn es bueno que ahora le eches un vistazo a la documentación de popcorn, sus apis y demos.

Algo de código con Popcorn

El uso del framework Popcorn.js es muy sencillo. Veamos algunas pequeñas líneas de código sobre lo que podemos hacer:

Cargando Popcorn:

<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
  </head>
  <body>
    <video height="180" width="300" id="ourvideo">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
    </video>
    <div id="footnote"></div>
  </body>
</html>
 

Creando texto en un momento determinado del vídeo:

var popcorn = Popcorn( "#ourvideo" );
 
popcorn.footnote({
  start: 2,
  end: 5,
  target: "footnote",
  text: "Pop!"
});
 

Integrando Popcorn con las fotos de Flickr:

var pop = Popcorn( "#video" );
 
pop.flickr({
  start: 5,
  end: 15,
  userid: "35034346917@N01",
  target: "flickrdiv"
});

Integrando Popcorn con el timeline de Twitter:

pop.twitter({
  start: 5,
  end: 15,
  title: "Steve Song",
  src: "@stevesong",
  target: "twitterdiv",
});

Ejemplos de Webs hechas con Popcorn

Algunas de las demos que puedes visualizar con Popcorn son:

• Know you exit - un experimento musical con gente componiendo alrededor del mundo. La composición de música y vídeo queda integrada con tweets de Twitter y geolocalizaciones.
• Zaragoza Public Spaces, vídeo que nos muestra sitios de interés de Zaragoza integrando localizaciones con Google Maps y texto anexo al vídeo.
• Open Images, Open Data - una iniciativa holandesa que nos muestra como se puede enriquecer un vídeo con contenido multimedia diverso obtenido de Wikipedia, Google Maps, repositorios de los museos de Holanda,...
• Color Tracker, como poder seguir un color dentro del vídeo y añadirle información.
• ... otras demos.

Aunque hemos comentado que Mozilla Popcorn es un proyecto que soporta diferentes navegadores, es muy recomendable visualizarlo con Firefox.

Popcorn Maker (proyecto Butter): editando nuestros vídeos

Adicionalmente al framework Popcorn.js el proyecto Popcorn está construyendo Popcorn Maker. Que es conocido como el proyetco Butter.

Popcorn Maker es un editor de vídeos en formato web. De esta forma el editor Popcorn Maker creará de forma dinámica el código del framework Popcorn.js en base a las acciones que definamos: insertar elementos en el vídeo, realizar overlaping,...

Todo el trabajo con Popcorn Maker se realiza de forma visual, sin tener que tirar ni una sola línea de código.

A día de hoy podemos probar la Preview de Popcorn Maker y habrá que esperar hasta noviembre 2012 para poder disponer de la primera versión de Popcorn Maker.

Adicionalmente podemos bajarnos el código de Popcorn Maker, realizar pruebas, reportar bugs, extenderlo,...

---

Más información sobre el proyecto en Mozilla Popcorn y @popcornjs

Como Arquitectos IT que somos hemos podido comprobar que un buen uso de la tecnología, un uso razonable y en un camino de equidad conlleva el poder realizar grandes proyectos de tecnología. El Arquitecto IT, denostado a veces, glorificado las que menos, intenta dar una visión de la estandarización, coherencia y buen uso de las tecnologías. Para ello, el Arquitecto IT se basa en el uso de estándares, patrones, buenas prácticas, prueba nuevas tecnologías, intenta convencer en el avance tecnológico,...

En ArquitectoIT.com nos hemos juntado un grupo de Arquitectos IT que tienen ganas de hablar sobre nuevas tecnologías, de cómo estas nos pueden ayudar en el desarrollo de proyectos. Arquitectos IT que quieren compartir sus experiencias y conocimientos.

Buscamos la conversación, la crítica, el aprendizaje, el debate,... pero siempre desde el lado positivo, desde el lado de la colaboración, del compañerismo, del aporte de soluciones por parte de la gente. Buscamos que, de forma ordenada, la gente exprese sus visiones, de a conocer sus puntos de vista sobre las cosas que aquí se escriben.

La meta. Aprender de la arquitectura y tecnología. Y, como no, pasar un buen rato entre amigos.

Solo nos queda deciros una cosa, ¡Aprendamos!

Los que abajo suscriben.

Carlos, José Luis, Enrique, Jorge, Juanma, Marcos, José Carlos, Jose Ignacio, Miguel Ángel y Víctor.