Responsive Design Lo nuevo de HTML para los nuevos entornos.

Responsive design Con 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.hoja de estilo 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". consorcio W3C 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.

Ventajas Con 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.HTMLCSSPCstabletas 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.ad-hocAndroidiPhone

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.optimización de motores de búsquedaURLFacebookTwitter

Elementos 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?SkeletonOmegaAmazium 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.algunas herramientas

Ejemplos de diseño web responsive examples/ web-designs/ Diseños inspiradores Plantillas HTML5 Herramientas Responsive

Lo Nuevo HTML5 1. Nuevo DOCTYPE Hasta 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. Bueno a partir de ahora creo que va a ser un poco más fácil no?

2. No más TYPE para scripts y links El 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. Hola que tal.

, nuevo elemento de HTML5 4., nuevo elemento de HTML5 Con 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:

Text inputs para s 5. Text inputs para s Dentro de poco la mayoría de navegadores va a venir con validación de formularios incorporado por lo que agregando el nuevo type de , crearemos input texts que solo permitan direcciones de válidas

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 en dicho campo.

Placeholders o marcas de agua 7. Placeholders o marcas de agua Los 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.hacer con javascript

Nueva semántica de y 8. Nueva semántica de y 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:

Internet Explorer y HTML5 9. Internet Explorer y HTML5 Para 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 IEscript

Contenido editable 10. Contenido editable Los 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 audio Aunque 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.wavplugins.ogg

Soporte para video 12. Soporte para video Al 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 audioTheoraVorbisH.264 Tu navegador no lo soporta. Puedes descargar el 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.

Atributos “preload” y “controls” 13. 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. 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.

14. Expresiones regulares con el nuevo atributo pattern 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.

Nuevo elemento 15. Nuevo elemento Este nuevo elemento es parecido a o pero a diferencias de estos que sirven para darle valor o poder a una palabra 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. Resultados de avión El aeropuerto Pablo Picasso esta lleno de avion es

Atributo data para atributos personalizados 15. Atributo data para atributos personalizados Este “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. Bla Bla Y para obtener dicho valor con JS var 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.

Cuando debemos usar DIV’S ? 18. 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 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.

Guardando datos de forma local (localStorage y sessionStorage) 19. Guardando datos de forma local (localStorage y 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 limite sessionStorage 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.

Introducción a de HTML5 20. Introducción a de HTML5 Para 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. Tu navegador no soporta 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 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

También podemos dibujar círculos por ejemplo: 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();

Dibujar imágenes en canvas Podemos dibujar una imagen en canvas con la siguiente función 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); }