Responsive Design

Lo nuevo de HTML para los nuevos entornos.

Responsive designCon la gran cantidad de tamaños de pantalla

que existen para desarrollar en distintos dispositivos ha surgido la necesidad de adoptar diseños sensibles (Responsive Design) que se adapte según las necesidades.

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web.

La idea y el propósito del diseño web adaptativo fue previamente discutida y descrita por el consorcio W3C en julio de 2008 en su recomendación "Mobile Web Best Practices" bajo el subtítulo "One Web".

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de "One Web", y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de "One Web" hace referencia a la idea de construir una Web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.

VentajasCon una sola versión en HTML y CSS se cubren

todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para móviles Android, otra para iPhone, etc.

Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.

Elementos ResponsiveElementos Responsive

1. Empieza con una plantilla. Para que empezar las cosas desde cero si hay cosas muy buenas ya hechas (Skeleton, Omega, Amazium…), ¿por qué no utilizarlas?

2. Trabaja con capas basadas en grids fluidos. Lo que quiere decir: ni una medida en pixeles, todo en porcentajes y relaciones

3. Imágenes flexibles o adaptativas. Esto no siempre es fácil y la mayoría de las veces es costoso pero con unas reglas de CSS bien definidas y un buen número de presets para los tamaños de las imágenes, se puede lograr y dar un aspecto genial.

4. jQuery es tu amigo. Y los plugins de jQuery son más amigos tuyos todavía, añado yo. Exprímelos todo lo que puedas, sin miedo.

5. No te olvides de Apple. Porque ahora los iPhones y los iPads son lo que está petando el mercado y lo sabes.

6. Fondos escalables. Primordial para dar una sensación de responsive design bien hecho.

7. Inspírate. Ya dijo Picasso aquello de “los buenos artistas copian, los genios roban”. No tengas miedo a ser un Tarantino e inspírate todo lo que puedas. No se trata de inventar la rueda sino de que esta haga ir a nuestro vehículo lo más rápido posible.

8. Prueba, prueba y vuelve a probar. Hay en ciertos ámbitos culturetas cierto desdén por el “prueba y error”. En el caso del responsive design no queda otra, tanto que se puede hacer tedioso… aunque por suerte hay algunas herramientas que nos pueden facilitar un poco la vida.

Ejemplos de diseño web responsive

http://designmodo.com/responsive-design-examples/http://designmodo.com/minimal-responsive-web-designs/

Diseños inspiradores

Plantillas HTML5

Herramientas Responsive

Lo Nuevo HTML5

1. Nuevo DOCTYPE1. Nuevo DOCTYPEHasta ahora se venía usando el engorroso DOCTYPE de

toda la vida que yo si mi editor HTML no lo pusiera cada vez que abro una nueva página me sería imposible recordar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bueno a partir de ahora creo que va a ser un poco más fácil no?

<!DOCTYPE html>

2. No más TYPE para scripts y linksEl formato tradicional.

Pero a partir de ahora voy a cambiar el modo de enlazar mis scripts y hojas de estilo.

3. No más comillas ni cerrar elementos

A diferencia de XHTML en HTML5 ya no es necesario usar comillas para los atributos, y ni siquiera es necesario cerrar los elementos.

<p id=cualquierID> Hola que tal.

4. <figure> <figure> , nuevo elemento de HTML5 , nuevo elemento de HTML5

Con <figure> podemos ordenar semánticamente mejor una imagen a un pie de imagen uniendo ambos elementos dentro de uno mismo.

Por lo que una imagen como esta:

Quedaría de la siguiente forma:

5. Text inputs para emailsText inputs para emailsDentro de poco la mayoría de navegadores va a

venir con validación de formularios incorporado por lo que agregando el nuevo type de email , crearemos input texts que solo permitan direcciones de email válidas

6. Los nuevos atributos “required” y “autofocus”6. Los nuevos atributos “required” y “autofocus”

Además de la validación si añadimos el atributo “required” no podremos enviar un formulario hasta no añadir la dirección de email en dicho campo.

7. Placeholders o marcas de aguaPlaceholders o marcas de aguaLos placeholders o marcas de agua son el texto

que aparece en las cajas de búsqueda que al escribir o hacer focus desaparece. De momento esto se podía hacer con javascript , pero ahora simplemente añadiendo este nuevo atributo conseguimos el mismo resultado.

<input name="email" type="email" placeholder="info@tuweb.com" />

8. Nueva semántica de <header> <nav> y Nueva semántica de <header> <nav> y <footer><footer>

A la hora de ordenar la web se utiliza DIVs y se les asigna atributos tales como:

A partir de ahora HTML5 incorpora nueva semántica para estas partes de la página quedando de la siguiente manera:

9. Internet Explorer y HTML5Internet Explorer y HTML5Para variar internet explorer es un mundo

aparte en respecto a todos los navegadores , y la única forma que reconozca los elementos de HTML5 es haciéndoselo saber. Para ello Remy Sharp creo un script que inicializa todos los elementos en IE

<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

10. Contenido editableContenido editableLos nuevos navegadores soportan un nuevo atributo que

puede ser aplicado a los elementos para permitir editar el texto en ellos. Como bien dicen en nettuts esto sumado a por ejemplo la posibilidad de guardas datos localmente te permite crear simples programas como por ejemplo una lista de Tareas

11. Soporte para audioAunque aun queda mucho camino por recorrer los

navegadores más actuales soportan este nuevo elemento evitando así el uso de plugins y librerías externas. Aunque eso sí, como siempre con diferencias entre unos y otros, mientras firefox se decanto por soportar archivos .ogg, webkit funciona con .mp3, internet explorer para variar no soporta ningún formato y opera de momento solo .wav

12. Soporte para videoSoporte para videoAl igual que en el elemento Audio los navegadores están

divididos sobre que formato de video apoyar en un futuro. Mientras Firefox y Opera apoyan los formatos abiertos de Theora y Vorbis , Safari e Internet Explorer soportan H.264, formato no abierto que es soportado por los reproductores flash actuales.Por lo que a la hora de ofertar videos en nuestras web debemos ofrecer ambas alternativas al igual que hicimos con el audio

<video controls preload> <source src="video-gracioso.ogv" type="video/ogg; codecs='vorbis, theora'" /><source src="video-gracioso.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Tu navegador no lo soporta. <a href="video-gracioso.mp4">Puedes descargar el video.</a> </p> </video>

Aunque por norma no es necesario especificar el atributo type haciéndolo ahorramos un poco de trabajo al navegador ya que sino lo tendría que averiguar por si solo.Por otro lado si tu navegador no soporta HTML5 video podes optar por un link de descarga del video o simplemente colocar el video en formato flash como alternativa.

13. Atributos “preload” y “controls”Atributos “preload” y “controls”Estos dos nuevos atributos vistos en los elementos

HTML5 audio y HTML5 video se describen por si solos.El atributo controls añade los controles (play, pause,etc) para controlar los videos y audios.

<video controls>Y el atributo preload hace una precarga del video para

ahorrar algo de tiempo en la experiencia del usuario. Si la página esta diseñada para mostrar un video deberíamos activarlo en cambio si no estamos seguro que el usuario desee verlo ya que es algo secundario dentro del contenido, no lo incluiremos.

<video controls preload>

14. Expresiones regulares con el nuevo atributo 14. Expresiones regulares con el nuevo atributo patternpattern

Otro nuevo atributo que hará más fácil la validación de formularios sin el uso de Javascript. En el siguiente ejemplo un usuario deberá crear un username que conste de letras mayúsculas o minúsculas con más de 4 caracteres y menos de 10.

15. Nuevo elemento <mark>Nuevo elemento <mark>Este nuevo elemento es parecido a <em> o

<strong> pero a diferencias de estos que sirven para darle valor o poder a una palabra <mark> esta pensado como un resaltador. Algo muy utilizado en buscadores para resaltar las palabras mas relevantes y que un poco de javascript podríamos implementar.

<h3>Resultados de avión </h3> <p>El aeropuerto Pablo Picasso esta lleno de <mark style="background-color:#FFFF88;">avion</mark>es

15. Atributo data para atributos personalizadosAtributo data para atributos personalizadosEste “nuevo” atributo es muy útil cuando se quiere pasar valores

a javascript por ejemplo. Antes podíamos utilizar cualquier atributo inventado por nosotros y nuestros scripts funcionaban , pero la validación fallaba. Ahora agregando data al atributo podremos usarlo sin problema como muestra el siguiente ejemplo.

<div id="myDiv" data-valorCualquiera="Mi valor"> Bla Bla </div>

Y para obtener dicho valor con JSvar theDiv = document.getElementById(‘myDiv’);

var attr = theDiv.getAttribute(‘data-valorCualquiera’);alert(attr); // Mi valor

Incluso se puede usar con CSS para hacer un cambio de texto con la propiedad hover.

18. Cuando debemos usar DIV’S ?Cuando debemos usar DIV’S ?

Habiendo tantos elementos nuevos en HTML5 nos preguntamos si debemos seguir usando los div para organizar nuestra web. La respuesta es si, siempre y cuando no haya un elemento que lo defina mejor semánticamente. Esto quiere decir que por ejemplo si escribimos un artículo usariamos <article> para agrupar el código, en cambio si nuestro propósito es simplemente posicionar dicha porción de código un div sería la elección perfecta.

19. Guardando datos de forma local (localStorage y Guardando datos de forma local (localStorage y sessionStorage)sessionStorage)

Esto aunque en un día fue considerado HTML5 ha pasado a ser una especificación independiente.

HTML5 ofrece dos posibilidades para almacenar datos en el lado del cliente:

localStorage Almacena datos sin tiempo limitesessionStorage Almacena datos por lo que dure la sesión

Estas opciones vienen a ser el reemplazo de las famosas COOKIES . A diferencias de estas los datos en HTML5 no son pasados en cada request ,sino solamente cuando se solicita, permitiendo así almacenar grandes cantidades de datos mejorando el rendimiento general.

20. Introducción a <canvas> de HTML5Introducción a <canvas> de HTML5Para crear un elementos canvas tan solo debemos especificar su largo

y ancho de la siguiente manera. En caso que el navegador no lo soporte se mostrara el mensaje de su interior.

<canvas id="myCanvas" width="200" height="100"> Tu navegador no soporta canvas </canvas>

Como ven crear el objeto canvas es muy sencillo la parte dificil viene a la hora de “dibujar” en el. Para ellos nos ayudamos de Javascript

<script type="text/javascript">var c=document.getElementById("myCanvas");//Accedemos al elementos camvas var cxt=c.getContext("2d");//creamos el objeto a dibujar cxt.fillStyle="#FF0000";//escogemos color rojo cxt.fillRect(0,0,150,75);// le damos forma </script>

• También podemos dibujar círculos por ejemplo:

<script type="text/javascript">   var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,28,20,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>

Dibujar imágenes en canvasPodemos dibujar una imagen en canvas con la

siguiente función<script type="text/javascript">

var c=document.getElementById("myCanvas3"); var cxt=c.getContext("2d"); var img = new Image(); //indico la URL de la imagen img.src = 'imagen.gif'; //defino el evento onload del objeto imagen img.onload = function(){ //incluyo la imagen en el canvas cxt.drawImage(img, 10, 10); }

</script>