Workshop:
HTML5 & CSS3 para diseñadores

Urban Station, sede de nuestros Workshops

Ya está abierta la inscripción para nuestro exclusivo Workshop de 8 horas, donde capacitaremos a un máximo de seis diseñadores web, desarrolladores o programadores, de manera personalizada y totalmente práctica (al estilo Bootcamp, en tu propia notebook) en las novedades de HTML5 y CSS3.

Más información sobre el Workshop

Introducción

Descargar diapositivas de la Introducción

En la Introducción analizamos las novedades que traen para los diseñadores las versiones HTML5 y CSS3.

Revisamos las distintas posturas a tomar respecto de si ya llegó el momento de usar HTML5 y CSS3 en nuestros sitios, y concluimos que sí es posible y es deseable hacerlo, pero siempre empleando técnicas de compatibilidad.

Analizamos varias técnicas de compatibilidad, sus ventajas y desventajas. Vemos cuál es el proceso de aplicación de la técnica de mejora progresiva (progressive enhancement), de la degradación elegante (graceful degradation), y de mejora regresiva (regressive enhancement).

Reflexionamos sobre la imposibilidad de seguir pensando a la web como si fuera una hoja de papel rígida y controlable, ya que su principal característica es la flexibilidad y adaptabilidad a distintos dispositivos, resoluciones, navegadores, etc.

Unidad 1

La primera unidad la dedicaremos al marcado HTML5. Aprenderemos a aplicar los nuevos elementos semánticos, conoceremos las diferencias en aquellos elementos que cambiaron su forma de uso, y veremos cuáles son los elementos obsoletos que ya no debemos usar.

Crearemos nuestros primeros archivos HTML5, indicando la DTD correspondiente, los metatags, y la codificación de caracteres.

Utilizaremos etiquetas para agregar significado (semántica) a los textos de nuestras páginas. Aprenderemos a usar las nuevas etiquetas para marcar secciones (section, article, nav, header, footer, aside), reemplazando el uso que antes dábamos a algunos DIVs. Comprenderemos para qué sirve un Microdato y aplicaremos varios de ellos.

Por último, hacemos un taller marcando secciones y nuevos elementos HTML5 en varias páginas web reales.

Unidad 2

En la segunda unidad aprenderemos a utilizar los nuevos elementos de formulario de HTML5.

Además veremos cuáles son los nuevos atributos existentes, y aprenderemos a utilizar las validaciones automáticas.

En lo relativo a Multimedia, aprenderemos a insertar audio y video en nuestras páginas de manera compatible con todos los navegadores.

Veremos qué opciones propone HTML5 para realizar animaciones interactivas (juegos, aplicaciones web), y cuál es el objetivo y mejor uso de cada una de ellas (canvas, SVG animado y animaciones CSS3).

Para finalizar, comenzaremos a conocer la sintaxis de nuevos selectores de CSS3.

Unidad 3

En la tercera unidad aplicaremos nuevos efectos decorativos: bordes redondeados y con imágenes, sombras en textos y bloques, efectos 3D, nuevos modelos de color con translucidez y degradés.

Aplicaremos cualquier tipografía mediante @font-face.

Realizaremos una introducción al diseño de sitios web adaptables al tamaño de pantalla con Media Queries (Responsive Web Design).

Unidad 4

En la cuarta unidad, realizaremos animaciones solo con CSS3 (sin Flash ni scripts).

Crearemos transformaciones (rotaciones, escala, sesgado, etc.) estáticas, luego les agregaremos dinamismo con transiciones entre dos estados, y finalmente realizaremos animaciones con múltiples estados intermedios.

Para terminar, enumeraremos las posibilidades que existen a nivel programación mediante las nuevas APIs de JavaScript.