HTML5 y CSS3 para diseñadores

Hernán Beati

HTML5 y CSS3 para diseñadores

Hernán Beati

HTML5 y CSS3 para diseñadores Hernán Beati

Derechos reservados © Alfaomega Grupo Editor Argentino, 2015. Ciudad Autónoma de Buenos Aires. Primera edición: Alfaomega Grupo Editor Argentino, 2015

Primera edición: MARCOMBO, S.A. 2016

© 2016 MARCOMBO, S.A. www.marcombo.com

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».

ISBN: 978-84-267-2262-1

D.L.: B-10094-2015

Impreso en Ulzama Digital SL Printed in Spain

A mi tercera hija, Alba Mora, que estaba por nacer cuando comencé a escribir este libro.

Casi todo el libro fue escrito con ella revoloteando cerca de mí así que merece ser "su" libro.

Mensaje del editor

Los conocimientos son esenciales en el desempeño profesional, sin ellos es imposible lograr las habilidades para competir laboralmente. La universidad o las instituciones de formación para el trabajo ofrecen la oportunidad de adquirir conocimientos que serán aprovechados más adelante en beneficio propio y de la sociedad; el avance de la ciencia y de la técnica hace necesario actualizar continuamente esos conocimientos. Cuando se toma la decisión de embarcarse en una vida profesional, se adquiere un compromiso de por vida: mantenerse al día en los conocimientos del área u oficio que se ha decidido desempeñar.

Alfaomega tiene por misión ofrecerles a estudiantes y profesionales conocimientos actualizados dentro de lineamientos pedagógicos que faciliten su utilización y permitan desarrollar las competencias requeridas por una profesión determinada. Alfaomega espera ser su compañera profesional en este viaje de por vida por el mundo del conocimiento.

Alfaomega hace uso de los medios impresos tradicionales en combinación con las tecnologías de la información y las comunicaciones (TIC) para facilitar el aprendizaje.

Libros como éste tienen su complemento en una página Web, en donde el alumno y su profesor encontrarán materiales adicionales.

Esta obra contiene numerosos gráficos, cuadros y otros recursos para despertar el interés del estudiante, y facilitarle la comprensión y apropiación del conocimiento. Cada capítulo se desarrolla con argumentos presentados en forma sencilla y estructurada claramente hacia los objetivos y metas propuestas.

Los libros de Alfaomega están diseñados para ser utilizados dentro de los procesos de enseñanza-aprendizaje, y pueden ser usados como textos para diversos cursos o como apoyo para reforzar el desarrollo profesional.

Alfaomega espera contribuir así a la formación y el desarrollo de profesionales exitosos para beneficio de la sociedad.

Acerca del autor

Me formé profesionalmente en la década de los '90 haciendo diseño gráfico, y antes del año 2000 ya me había especializado en diseño web. Más tarde aprendí también programación web, y comencé a enseñar todo lo que había aprendido.

Me gusta definirme como un diseñador que enseña a programar a diseñadores, y en otros casos, como un programador que enseña diseño a programadores. Estas dos áreas necesitan estar totalmente interconectadas en la web actual, y me gusta hacer de puente entre ambos mundos.

Actualmente soy docente en la Universidad Maimónides, en la Escuela DaVinci, en DotZero, en ITMaster y en SaberWeb. Soy Licenciado en Informática Educativa, y Analista de Sistemas.

Continuamente sigo actualizándome en diseño, multimedia y programación: los últimos cursos en los que participé como aprendiz fueron sobre desarrollo de aplicaciones móviles híbridas con HTML5, animación web responsive con HTML5, y creación de videojuegos con HTML5. Todo con HTML5, por supuesto.

Me encanta escribir. Este es mi segundo libro: el primero fue "PHP, creación de páginas web dinámicas" publicado por Alfaomega (reeditado en España por Marcombo con el título de "El gran libro de PHP"). Y ya estoy trabajando en mi siguiente obra, sobre Responsive Web Design, que también será publicada por Alfaomega.

Hernán Beati, mayo de 2015

Contenido

INTRODUCCIÓN .................................. 1 Estándares Web renovados ................ 1

CAPÍTULO 1 EL MARCADO SEMÁNTICO .................. 15 Un nuevo concepto de marcado ........ 15

CAPÍTULO 2 MARCANDO BLOQUES DE CONTENIDOS ....................................... 35 El contenido define el layout .............. 35

CAPÍTULO 3 FRAGMENTOS ENRIQUECIDOS: DE LOS MICROFORMATOS Y RDFA A LOS MICRODATOS ............................... 59 Enriqueciendo resultados en buscadores .......................................... 59

CAPÍTULO 4 FORMULARIOS RENOVADOS .............. 79 Una evolución funcional y estética..... 79

CAPÍTULO 5 MULTIMEDIA: AUDIO, VIDEO, ANIMACIÓN .......................................... 107 Multimedia sin plugins ........................ 107

CAPÍTULO 6 NUEVOS SELECTORES CSS3 .............. 133 ¿Qué es un selector? .......................... 133

CAPÍTULO 7 COLOR Y DEGRADÉ CSS3 .................. 157 Introducción ........................................ 157

CAPÍTULO 8 DECORANDO CON BORDES, SOMBRAS Y FONDOS ......................... 189 Efectos visuales simplificados ............ 189

CAPÍTULO 9 TIPOGRAFÍAS CON CSS3 .................... 235 Mejorando los textos para la Web ...... 235

CAPÍTULO 10 DISEÑO WEB ADAPTABLE PARA CELULARES Y TABLETAS ..................... 255 Bienvenidos a la Web del siglo XXI ..... 255 El diseño como problema y como solución ............................................... 257 ¿Qué son las Media Queries? ............. 260

CAPÍTULO 11 TRANSFORMACIONES ......................... 279 Introducción......................................... 279

CAPÍTULO 12 TRANSICIONES ANIMADAS ................ 297 Animando y dando interactividad a la interfaz ............................................. 297

CAPÍTULO 13 ANIMACIONES CON CSS3 ................... 317 Animaciones con varios estados intermedios ......................................... 317

X | Contenido ___________________________________________

ALFAOMEGA BEATI – HTML5 Y CSS3 PARA DISEÑADORES

Prólogo

Pocas tecnologías y herramientas perduran en el mundo de la informática por décadas. Todos hemos visto lenguajes que dejan de usarse, herramientas que se pierden en el tiempo y prácticas que pasan de ser un furor a desaparecer rápidamente en un par de años. Y un gran sentimiento de frustración al ver que todo el tiempo que ocupamos aprendiendo una tecnología se desvanece.

No es el caso de HTML, el cual sigue más vigente que nunca y justo cuando se creía que iba desapareciendo en pos de otras tecnologías (como Flash o desarrollos nativos), revivió de las cenizas con más poder y más futuro que antes con HTML5 y su compañero inseparable CSS, ahora en versión 3. Aunque vivimos en una era de una web muy distinta de hace unos años, lo cierto es que HTML5 es una buena apuesta a futuro.

Hace 20 años diseñé mi primera página web con el mismo lenguaje que hoy te atrapó para adquirir este libro: HTML. Te invito a que recuerdes, si es que tenías edad para ello, cómo era la navegación por Internet y las computadoras hace 20 años. Muy distinto al mundo de hoy y aún así, HTML sigue aquí con nosotros evolucionando.

En ese momento mi única fuente de información sobre el lenguaje HTML (en su versión 1 y 2 en esas épocas) era un apunte fotocopiado que conseguí con la lista de etiquetas y no mucha más información. Ni siquiera Internet era una fuente de información; en esa época no existía Google (había vida antes de Google), no había cursos de diseño web, no había libros como éste y navegar por Internet implicaba usar la línea telefónica –y pagar mucho dinero por minuto-. Con ese apunte, un editor de texto y mucha paciencia, diseñé mi primera página web.

Hoy tienes más suerte que yo hace 20 años. Gracias a este excelente libro, y a la ayuda de Hernán Beati, viajarás por el apasionante mundo de HTML y CSS en sus últimas versiones especialmente optimizado para diseñadores de una forma sencilla, rápida y completa.

Encontrar las respuestas sobre HTML5 puede ser una tarea difícil cuando se trata de bucear en la web. Por suerte, este libro te dará no sólo las pautas para empezar con HTML5 o actualizarte desde versiones anteriores, sino que te servirá de referencia en cualquier momento de tu vida profesional en el futuro cuando tengas una pregunta.

Espero que disfrutes el viaje de la compañía de Hernán, un excelente profesional con un enfoque docente que lo convierte en la persona ideal para acompañarte en este nuevo mundo.

Lic. Maximiliano Firtman

Director ITMaster

@firt

Agradecimientos

A Maximiliano Firtman, que me motivó antes que nadie a aprender HTML5 y CSS3, cuando estos lenguajes todavía no estaban de moda y eran apenas el futuro.

A Marcelo Cutini y Judith Brandi Baldini (quienes me permiten enseñar HTML5 y CSS3 en DotZero desde hace más de 5 años), porque uno siempre aprende más acerca de un tema cuando lo enseña.

A mi amigo Darío Saeed, por convertirme en profesor universitario gracias a HTML5, ofreciéndome dictar ese tema en la primera materia de la que fui profesor en la Universidad Maimónides.

A mi editor Damián Fernández por su infinita paciencia y perseverancia para lograr este libro a pesar de mi escasez de tiempos para escribirlo.

A los cientos de alumnos que aprendieron conmigo HTML5, porque con sus agudas observaciones y preguntas me hicieron cuestionar los usos habituales de HTML5, y así pude llegar a un entendimiento mucho más profundo de algunos temas.

A cada diseñador web que lea este libro, porque mi inspiración para escribir cada frase fue pensar específicamente en sus problemas y necesidades a la hora de actualizar sus conocimientos.

A los cafés de San Vicente donde escribí muchas de las páginas de este libro: Gundy's (que ya no existe), Boston y Clock.

A la laguna de San Vicente, donde muchas tardes estacioné el auto para escribir páginas de este libro, mientras contemplaba sus paisajes.

Hernán Beati

Antes de comenzar a leer

Los términos o definiciones cuyos significados están muy asociados al inglés se expresan en dicho idioma en cursiva.

Los ejemplos que se utilizan en este libro pueden descargarse desde: http://libroweb.alfaomega.com.mx.

Alfaomega e ITMaster te dan la posibilidad de que certifiques tus conocimientos y experiencias adquiridos como lector de este libro mediante una evaluación gratuita. Su aprobación te permitirá tener la certificación en HTML5.

Luego de la obtención del certificado, podrás continuar tu formación en la carrera de Programación HTML5 y CSS3 y puedes continuar con "Mobile HTML5", "Responsive Web Design" y "PhoneGap".

La capacitación podrás realizarla en forma presencial en las sedes habilitadas o a distancia a través de Internet con una capacitación online, en cualquier ciudad del mundo donde te encuentres.

Para dar la evaluación de certificación ingresa en la dirección correspondiente a tu país para recibir mayor información. Para realizar cualquier consulta adicional, se detalla la dirección de correo electrónico que corresponde a tu país

Españahttp://libros.itmaster.es - info@itmaster.es

Méxicohttp://libros.itmaster.com.mx - info@itmaster.com.mx

Argentina y otros paíseshttp://libros.itmaster.com.ar - info@itmaster.com.ar

Introducción

“Solo se puede elegir: oxidarse o resistir”.

Manal (1969).

Estándares Web renovados La Web cambió.

Para la mayoría de los diseñadores web es bastante reciente el momento en que cambiamos nuestra metodología de trabajo, dejamos de maquetar nuestros sitios con tablas, visualmente, y pasamos a utilizar posicionamiento CSS (¡y algunos ni siquiera transitaron ese camino aún!). Pero como si eso fuera poco, ahora estamos frente a un desafío todavía mayor: hacer que nuestros sitios adapten dinámicamente su layout para que puedan ser navegados sin problemas desde tabletas y smartphones.

El contexto del diseño web cambió: ya no se trata, como hace una década, de diseñar para pantallas de 800 por 600, o como hasta hace un par de años, de pensar en una resolución de 1024 por 768 píxeles. En realidad, nunca más podremos saber con exactitud para cuál resolución de pantalla estamos diseñando. La nueva web es flexible. Muy flexible. Nuestras páginas web pueden visualizarse en una pantalla mínima, pongamos como ejemplo, la de un celular de 240 por 320 píxeles, hasta... ¿quién se anima a poner el límite máximo? ¿Por ahora serán unos casi 4000 por más de 2000 píxeles? Seguramente, en el tiempo transcurrido entre el momento de escribir estas líneas y el de su lectura, esa medida ya habrá sido superada, alejándonos cada día más de esa

2 Introducción

antigua ilusión de pretender un diseño “fijo”, uniforme para todos los dispositivos y navegadores, una idealización heredada del diseño gráfico para papel, pero claro: ¡los papeles vienen en una sola resolución!

Figura 1. Diversidad de dispositivos y resoluciones.

Nuestro concepto de diseño para la web debe cambiar. Ya no puede seguir primando el que hemos heredado del diseño gráfico, basado en un medio estático como el papel. La clave está en pensar al diseño web como la creación de experiencias para el usuario, y no más como un diseño rígido, visualmente uniforme, ni como un lienzo artístico.

Algo es diseño si es funcional a una meta: el diseño no es arte. De modo que la pregunta para evaluar un diseño web ya no es “si se ve idéntico” en todos los navegadores y dispositivos, sino que debería ser: “¿puedo hacer las tareas requeridas por este sitio, con cualquier dispositivo, con cualquier navegador y versión?”. Si puedo responder afirmativamente a esta pregunta, el diseño logró su objetivo. Si no, ha fracasado. Es hora de aceptar la flexibilidad de la web, y cambiar nuestras expectativas de diseño (y las de nuestros clientes y jefes), para no seguir condenando al fracaso a todos nuestros proyectos.

En este nuevo contexto flexible, es inevitable que nos encontremos explicando a nuestros clientes que sus sitios se verán de diferentes maneras en algunos dispositivos. Intentaremos hacerles comprender que eso es inevitable, y que no tiene nada de malo. Posiblemente, ellos ya lo hayan experimentado al intentar navegar la web de su empresa desde su nuevo celular. Esta diversidad de dispositivos, es la que nos abrirá las

HTML5 y CSS3 para diseñadores 3

puertas para considerar la diversidad incluso entre navegadores (algo impensado un par de años atrás, cuando se seguían creando trucos para que las webs no se desarmen en Explorer 6). Los celulares han abierto las puertas de la diversidad para siempre.

En este contexto, es bueno recordar que HTML5 y CSS3 ya están aquí, vinieron para quedarse, y vinieron en nuestro auxilio. Estas nuevas versiones de ambos lenguajes están específicamente adaptadas a las necesidades del nuevo ambiente “flexible” en el que se desenvuelve la web actual.

La pregunta que muchos diseñadores y programadores web todavía se están haciendo con respecto a HTML5 y CSS3 es si ya se pueden usar aunque determinada funcionalidad en tal versión de Explorer no sea soportada nativamente. Si la pregunta es planteada con esa sencillez, nuestra respuesta, con igual sencillez, será afirmativa: sí, se pueden usar HTML5 y CSS3 hoy mismo. Pero eso no es lo más importante.

El punto clave es “cómo” usar HTML5 y CSS3 hoy. Mientras que la gran mayoría de tutoriales y libros –por no decir todos– se limitan a enunciar las novedades con un ejemplo simple que funciona en apenas la mitad de los escenarios (o menos), nosotros nos enfocamos en lograr compatibilidad en la mayor cantidad de escenarios que sea posible. De modo que la respuesta en versión no tan abreviada, sería que se pueden usar HTML5 y CSS3 hoy, pero aplicando técnicas de compatibilidad que nos permitan obtener buenos resultados (similares, o al menos predecibles) en los navegadores “antiguos” que aún utilizan nuestros usuarios.

La clave para poder aplicar HTML5 y CSS3 pasa por conocer y dominar algunos enfoques de compatibilización tales como:

• Mejora progresiva (progressive enhancement),

• Degradación elegante (graceful degradation) y

• Mejora regresiva (regressive enhancement).

A lo largo de este libro aprenderemos a aplicar cada uno de estos enfoques y a decidir cuál es el más apropiado en cada caso.

En el fondo, nuestra meta, como la de toda página web, será llegar con nuestros contenidos HTML, CSS y JavaScript a los navegadores de los usuarios, y esos navegadores serán el límite a evaluar.

La implementación de determinada funcionalidad en el mercado de navegadores no es algo estable y definitivo. Veremos que será muy fácil para nosotros agregar a algunos navegadores determinadas capacidades

4 Introducción

de las que carecían de fábrica, mediante algún script. Haremos un uso intensivo de esta posibilidad para lograr un máximo de soporte, incluso en navegadores que carecen de casi todas las características de HTML5 y CSS3. Es decir, podremos subsanar los errores o falencias de los navegadores con vistas a ofrecer a sus usuarios una experiencia lo más similar posible a la de quienes cuentan con un navegador mucho más moderno.

Alfabetización web: ¡a leer y a escribir código!

Desde el punto de vista del proceso o metodología de diseño web que emplearemos, el desafío principal que plantean HTML5 y CSS3 para la mayoría de los diseñadores web principiantes es el de profundizar su capacidad de entender (leer) y generar (escribir) las etiquetas HTML y el código CSS que los editores visuales usualmente escriben por ellos, manteniéndolos apartados de los lenguajes con los que está construida toda Web.

La meta es animarse a escribir códigos simples, como por ejemplo: o envolviendo algún bloque de una página web previamente creada. Después de todo, si de alguna manera pudimos aprender HTML4 y CSS2.1, ¿por qué no vamos a aprender ahora HTML5 y CSS3?

Para lograrlo, nos apoyaremos en las funcionalidades básicas de los buenos editores HTML que existen en el mercado, como Dreamweaver (el editor más utilizado, que usaremos casi siempre en su vista de “Código”), o editores alternativos de código abierto y gratuitos como Brackets,Aptana, KomodoEdit y similares. Cualquier editor sirve para escribir enlenguaje HTML y en CSS, solo que algunos nos permiten ser más rápidos,precisos y productivos, gracias al autocompletado de etiquetas yatributos.

Una evolución revolucionaria

En lo personal, me resultó bastante sorprendente que el W3C decidiera apostar a HTML5, en lugar de continuar avanzando con XHTML. En cambio, en CSS era previsible el salto a la versión 3. Es útil analizar cómo se llegó a HTML5 para poder intuir hacia dónde evolucionaremos de ahora en más. Hagamos un poco de historia.

HTML5 y CSS3 para diseñadores 5

En la década de 1970, cuando la empresa que dominaba el mercado del software era IBM (no: ¡aún no existía Microsoft!), la gente de IBM se enfrentaba a un grave problema, que era la dificultad para compartir información entre distintas oficinas de la misma empresa (muchísimas oficinas por todo el mundo, y no: ¡tampoco existía Internet!).

En esa época, no había archivos de formatos estandarizados, y cada programador generaba los suyos propios, generalmente de texto plano, con sus propias “claves”. Para graficar lo anterior, imaginemos que en una oficina un código "t" antes de una frase podía significar que ese texto era un “título”, pero en otra oficina eso significaba que era un “tabulador”, con los malos entendidos que nos podemos imaginar. Esto provocaba serias dificultades y pérdidas de tiempo para reutilizar esa información ya almacenada en otra sección de la empresa, que debía reconstruir y readaptar el archivo a su propia forma de almacenamiento y procesamiento de datos. El problema era la incompatibilidad.

En vista de esto, IBM decidió crear un lenguaje que permitiera estructurar el contenido de los documentos que producía, mediante el agregado de etiquetas o marcas (tags), que envolvieran al texto y describieran qué importancia y función tenía el mismo dentro de un documento. De esta manera indicaban que tal frase era el "título", tal otra el "subtítulo", otra un simple párrafo y así sucesivamente. Tenían la esperanza de que, si todos usaban ese nuevo lenguaje, se solucionaría el problema de la incompatibilidad.

Este lenguaje de marcas fue llamado GML (Generalized Markup Language) y funcionó a la perfección, logrando establecer un "idioma común" para que todas las oficinas de IBM pudieran compartir su información rápidamente y sin conversiones.

Pero pasado un tiempo notaron que el problema persistía cuando los proveedores (clientes) de IBM introducían datos desde el "mundo exterior", ya que no los estructuraban con GML.

Entonces, decidieron realizar algunos cambios al lenguaje GML y liberar para uso público este lenguaje de marcas: lo ofrecieron a una oficina de estándares (ISO) y así nació SGML (Standard Generalized Markup Language), un lenguaje estándar, público, que en los años 80 tuvo gran difusión en la informática mundial.

¿Y esto qué relación tiene con las páginas web? ¡Muchísima!

Cuando a fines de los años 80 un grupo de investigadores del CERN, entre los cuales estaba Vinton Cerf, tuvo que decidir cuál sería el tipo de documento que se utilizaría en ese nuevo servicio de navegación hipertextual al que llamaron World Wide Web, enseguida pensaron en

6 Introducción

SGML, puesto que varios de ellos ya lo conocían porque habían trabajado para IBM y podían dar fe de sus ventajas a la hora de intercambiar información. Ventajas de la compatibilidad...

Quienes tomaron la decisión bien podrían haber decidido que el formato de los documentos a usar en la web fuera el TXT, o bien, el DAT o el EXE. Sin embargo, prefirieron las conocidas ventajas de un lenguaje de marcado estandarizado, con etiquetas (tags) como era SGML.

Lenguaje HTML

A partir de esa decisión, crearon el lenguaje HTML (Hyper Text Markup Language), que no es más que un derivado de SGML, y lo crearon con el objetivo de estructurar el contenido de los documentos que se publicarían en la web.

La relativa complejidad de este lenguaje hizo que fueran los programadores (la gente del área de Sistemas de las empresas) quienes crearan las primeras páginas web de la historia (¡feísimas, por supuesto!, pero no era estética la necesidad de ese momento, con las conexiones dial-up muy lentas de que disponíamos).

Más adelante, al sucederse nuevas versiones del lenguaje HTML, se fueron incorporando nuevas etiquetas, que permitían decorar (dar formato, estilo, colores, alineación, etc.) al texto y demás elementos de las páginas web. En ese momento hicieron su entrada en escena dos actores principales de lo que sería la web hasta nuestros días: los diseñadores gráficos, y los programas de edición visual de documentos HTML (FrontPage y programas similares). Esto sucedía alrededor del año 2000.

La preocupación inicial de la gente de Sistemas por lograr documentos claramente estructurados, cedió paso a la preocupación estética, de acomodar en la pantalla los bloques de información, tal como si estuviésemos ante una página rígida de papel, el medio previamente conocido por los diseñadores gráficos. La información muchas veces terminó escondida por la presentación, el contenido dejó de importar detrás de la apariencia, todos los clientes pedían animaciones, efectos especiales, funcionalidades extras posibles "en un solo navegador" y otros caprichos conocidos por todos los que hacemos sitios web desde hace más de 10 años.

Así es que se usó y abusó de las tablas para maquetar documentos web, y de etiquetas dedicadas a la estética tales como , y muchas otras, que llevaron al callejón sin salida del re-diseño. En el momento de tener que re-decorar un sitio web, era preciso reconstruir su

HTML5 y CSS3 para diseñadores 7

código HTML desde el principio, copiando y pegando cada párrafo (a veces, palabra por palabra y hasta ¡letra por letra!) del documento viejo en uno nuevo, dando más trabajo rediseñar algo que diseñarlo desde cero.

Para solucionar esto, se decidió separar funciones estructurales, decorativas y funcionales en lenguajes diferentes: XHTML, CSS y JavaScript, respectivamente. El lenguaje HTML ya no siguió adelante, y de hecho la última versión (4.01) pasó cerca de 10 años sin actualizarse hasta la versión 5, de la que hablaremos luego. En su lugar se reformuló el lenguaje HTML intentando que implemente reglas propias de otro estándar, el lenguaje XML, fijando su objetivo en lo que fue originalmente y nunca debió haber abandonado: la estructuración jerárquica del contenido de un documento web.

Ese conjunto de reglas y etiquetas llamado XHTML fue durante los últimos años el tipo de marcado más utilizado, el que generaban automáticamente los buenos editores cuando marcábamos contenidos para la web. La idea era marcar “qué era” cada bloque de contenido (una lista, un encabezado, una cita, etc.).

Sustantivos...

Por otro lado, para el costado estético de los documentos web, se recurrió a otro lenguaje, el CSS (Cascading Style Sheet, Hojas de Estilo en Cascada). De esta forma no fueron necesarias más tablas, ni más mezclas de contenido y formato que impidieran los rediseños. Además, parecía haberse abandonado el lenguaje HTML. La solución parecía ser el código XHTML para estructurar la información, y CSS para decorarla. CSS indicaba “cómo era” cada elemento, cómo se presentaría.

Adjetivos...

Y JavaScript agregaría comportamientos, reacciones ante eventos, funcionalidades: “qué hace” cada elemento, cómo funciona.

Verbos...

Podemos sintetizar los roles de cada uno de los 3 principales lenguajes de la web asimilándolos a las funciones dentro de una gramática, según a qué pregunta responden:

HTML Sustantivo ¿Qué es esto?

CSS Adjetivo ¿Cómo es esto?

JavaScript Verbo ¿Qué hace esto?

8 Introducción

Pero a pesar de tan buen plan de separar estructura, presentación y funcionalidad que sigue vigente hoy en día, no solo en la web, sino en muchos otros lenguajes, el marcado XHTML no llegó a buen puerto.

El error de XHTML

Sorprendentemente, a pesar de sus buenas intenciones, XHTML estuvo condenado al fracaso. Si bien su versión XHTML 1.0 Transitional fue rápidamente adoptada por la mayoría de los diseñadores web en los últimos años, el motivo de su uso no fue, como idealmente parecía, preparar sus sitios para pasarlos a XHTML 1.0 Strict ni a XHTML 1.1, sino que el Dreamweaver, que como ya dijimos es el editor web más usado en el mundo, proponía ese tipo de documento por defecto al crear un nuevo archivo. Los errores de sintaxis seguían siendo una constante en la mayoría de las páginas web.

Mientras que este era el escenario, el W3C (organismo que consensúa los estándares web a nivel mundial) siguió intentando desarrollar la versión 2.0 de XHTML, donde ya no sería opcional que el servidor web sirviera las páginas XHTML como si fueran un archivo de tipo “text/html”, sino que sería obligatorio servirlas como XML. Esto implicaba que, de existir un solo error de sintaxis en una página web (una simple comilla mal cerrada), ésta no se visualizaría en absoluto y aparecería un mensaje críptico para el usuario de “Error en la línea X…”

HTML +

+

contenido

presentación

comportamiento

CSS

J Scriptava

Página Webcon estándares

Página Webincorrecta

contenidopresentación

comp rtamientoo

HTML5 y CSS3 para diseñadores 9

Este hecho fue el detonante para iniciar el cambio definitivo.

La secesión del WHATWG

Viendo que ese era el rumbo que tomaba el desarrollo del lenguaje XHTML dentro del W3C, con una idea de fondo muy poco realista del nivel de calidad posible de lograr por los diseñadores y programadores, un grupo de expertos liderado por Ian Hickson, con el apoyo de Mozilla, Opera y Apple, trasladaron en el año 2004 sus tareas de investigación por fuera del W3C, al WHATWG (Web Hypertext Application Technology Working Group), donde desarrollaron un lenguaje mucho más simple que XHTML, con una filosofía mucho más permisiva y realista, que aceptaba la imposibilidad de exigir un 100% de perfección sintáctica a diseñadores y programadores. Este nuevo lenguaje se llamó Web Applications 1.0, y fue la base de HTML5.

Conservaron casi todas las etiquetas de HTML4, y agregaron otras nuevas etiquetas que iban a utilizarse en XHTML 2 (como por ejemplo , , etc.), pero conservando la posibilidad de que el

10 Introducción

archivo sea servido como texto HTML, con lo cual no se generaría ningún problema fatal al cometer algún error de sintaxis.

El W3C acepta HTML5

En el año 2009, el W3C admite su error, anunciando que no continuará con el desarrollo de XHTML 2. Posteriormente, cierra el grupo de trabajo dedicado a ese lenguaje, abrazando la idea previamente desarrollada por el WHATWG y proponiendo HTML5 como nuevo grupo de trabajo, constituyéndose así en su nueva meta para esta época de la web como la conocemos actualmente.

A principios del año 2011, el W3C decidió dar por concluida la fase de experimentación de esta nueva versión de HTML y la lanzó con gran estrépito al mundo.

En realidad, HTML5 tiene un 90% de etiquetas en común con HTML 4 y con XHTML 1.0 y 1.1, y solo agrega algunas pocas etiquetas nuevas (como , , , , ). Sabiendo manejar HTML o XHTML, es muy simple actualizar nuestro marcado a la nueva versión HTML5. Al respecto, los cambios más notables no están en el marcado HTML5, sino en las otras tecnologías que acompañan a esta versión: funcionalidades de JavaScript y del DOM, y nuevos estilos y posibilidades de CSS3.

Es muy importante tener presentes las diferencias entre cada uno de los tres principales lenguajes que sirven para crear sitios web:

El marcado HTML

La primera tarea será marcar los contenidos con las etiquetas apropiadas. Eso nos ayudará a estructurar nuestros contenidos, agregando semántica a nuestras páginas. La primera parte de este libro estará dedicada a estas nuevas etiquetas HTML5.

Los estilos CSS

Para agregar belleza, diseño, orden, a nuestras páginas ya estructuradas con HTML utilizaremos CSS. Su función de hacer más agradable la experiencia de uso de una página web, implica que el orden de agregado de código CSS es posterior al de marcado HTML. En nuestra metodología, primero realizaremos el marcado semántico con HTML, sin lograr ningún resultado visual todavía, y posteriormente agregaremos el código CSS junto con las imágenes decorativas que mejorarán la presentación de

HTML5 y CSS3 para diseñadores 11

nuestras páginas. La segunda parte de este libro estará íntegramente dedicada a CSS3.

La programación JavaScript

En HTML5, el DOM (Document Object Model, o Modelo de Objetos del Documento) se integra por primera vez al estándar, con lo cual, dejan de existir incompatibilidades en la forma en que los distintos navegadores interpretan el código JavaScript, simplificando la tarea de los programadores.

Gracias a estas nuevas funcionalidades, el contenido de nuestras páginas web (o al menos “parte” de él), cambiará, no será siempre el mismo, dependerá de la información que se obtenga y se coloque en ellas mediante scripts. Por lo tanto, serán páginas dinámicas. Podremos agregar comunicación “en vivo” con el servidor utilizando sockets, que permiten comunicación en tiempo real entre servidor y cliente, con el concepto de “push”, que reemplaza al viejo truco de reiterar peticiones cada tantos segundos, técnica usada por Ajax hasta ahora, que puede producir sobrecargas de tráfico en el servidor. Podremos personalizar los contenidos según la ubicación geográfica de cada usuario, ofreciendo lo más útil para su posición actual. Y muchas otras funcionalidades que, al enfocarse en programación y no en diseño, quedan fuera del alcance de este libro.

Principios detrás de HTML5

Los objetivos o la “filosofía” que se tuvo en mente al ir elaborando la nueva versión 5 de HTML, pueden resumirse en:

Abierto (open source, free, libre): Es necesario dejar de depender de empresas que cobran regalías por el uso de sus softwares, en tareas tan elementales como reproducir un video o un audio, ver una animación o jugar a un juego, tareas que son parte fundamental del uso de la web para cualquier usuario. No deberíamos pagarle a nadie por realizar esas tareas, sería tan absurdo como hacerlo para poder leer un texto o ver fotos en una página web.

Encontrable: Los buscadores necesitan saber qué contenidos de una página son importantes y cuáles no, quién es el autor de ese texto y cuáles son sus datos de contacto, de qué marca es el producto ofrecido y cuál es su precio, en qué zona geográfica se encuentra el producto, etc. Los buscadores deben responder preguntas concretas de quienes buscamos algo, como por ejemplo: “¿cuánto cuesta un televisor LG de 42

12 Introducción

pulgadas en Buenos Aires?”, o “¿cuál es la dirección de la empresa Acme?”.

Compatible: Soportar el contenido existente en la web actual, para no obligar a rehacer plantillas de grandes sitios que se mantienen funcionando hace años. Este es el punto más polémico ya que algunos de los cambios implicaron declarar “obsoletas” a algunas etiquetas, y se modificó el comportamiento de otras, por lo cual, si alguien aplicó correctamente esas etiquetas hace años en sus sitios, aun así deberá cambiarlas. Sin embargo, un 90% de las etiquetas son las mismas de HTML4 y de XHTML. La idea fue no reinventar la rueda, y seguir las huellas abiertas por dos décadas de experiencias en la web. Si algo no estaba roto, entonces no lo arreglemos. Se trata de una evolución, y no de una revolución. O tal vez podamos considerar que estamos ante una “evolución revolucionaria”.

Áreas donde son notables las novedades

Dentro de cada uno de los tres lenguajes básicos de la web, ciertas áreas ofrecen novedades destacadas. Veamos cuáles son las principales:

HTML5:

• Nuevas etiquetas semánticas (los buscadores deben poderdistinguir qué es importante y qué no dentro del código de unapágina web). Marcaremos headers, footers, articles, menús denavegación, etc.

• Multimedia sin plugins (audio, video y animaciones de accesouniversal). Aquí es donde no debemos dejarnos cegar por laspublicaciones sensacionalistas que hablan de una “guerra” deHTML5 contra Flash. Si es necesario, utilizaremos las dostecnologías, cada una enfocada en un tipo de usuario y tipo dedispositivo en concreto, es decir, complementaremos ambosenfoques para dar la mayor cobertura posible a todos nuestrosusuarios.

• Formularios más usables y que validan automáticamente loingresado por el usuario, reduciendo –idealmente, veremos queaún falta implementar bastante– el uso de JavaScript. Peropodremos aplicar una estrategia de mejora progresiva, usandoelementos de HTML5 como primera opción, y dejando que solouna porción de nuestros usuarios de navegadores antiguosutilicen un “plan B” o fallback generado por un script.

HTML5 y CSS3 para diseñadores 13

CSS3:

• Uso de cualquier tipografía con @font-face de CSS3 (aunque elusuario no la tenga instalada en su dispositivo).

• Nuevos modelos de color que incluyen translucidez y degradadossin imágenes.

• Efectos visuales como sombras en textos y cajas, bordesredondeados y con imágenes, múltiples fondos para un mismoelemento.

• Técnicas para manipular la presentación y el movimiento deelementos con CSS, como transformaciones, transiciones yanimaciones.

• Mejora en la sintaxis CSS gracias a nuevos selectores.

JavaScript:

• Nuevas posibilidades interactivas con el nuevo DOM (DocumentObject Model o Modelo de Objetos del Documento) y sus nuevasfunciones.

• Geolocalización del usuario.

• Posibilidad de arrastrar y soltar cualquier elemento HTML.

• Animaciones interactivas con Canvas.

• Almacenamiento de datos con Session Storage y Local Storage.

• Trabajo offline con Cache de Aplicaciones, File System API ybases de datos del lado del cliente.

• Comunicación con el servidor con Web Sockets.

• Eficiencia mediante hilos (Web Workers).

Existen, además de estas, muchas otras funcionalidades queiremos conociendo a lo largo de este libro.

Progresividad del cambio

Todavía más que los sitios web sencillos, serán las aplicaciones web las primeras en aprovechar las ventajas de HTML5, ya que la mayoría de esas aplicaciones hace un uso extensivo de JavaScript, y por lo tanto la detección de capacidades y generación de código compatible mediante JavaScript encaja perfectamente con ese escenario. Pensemos que “el