Temario
Dirigido a
Desarrolladores, diseñadores, maquetadores y toda persona interesada en HTML y la web
Descripción
Durante el curso nos centraremos en la creación de un sitio web vivo utilizando las últimas capacidades de HTML 5 y CSS 3 para adaptarnos a los estándares web más exquisitos. Aprenderemos a crear sitios web visibles en cualquier navegador —incluso haremos pequeñas pruebas con dispositivos móviles— y utilizaremos técnicas de interacción para crear animaciones que permitan la visualización estándar de los contenidos. El objetivo final del curso es la comprensión y asimilación de las nueva capacidades de HTML5 y CSS3 para idear, conceptualizar, maquetar y producir sitios web modernos.
Temario
Diseño y Maquetación Web con HTML 5 + CSS 3•
•Día 1: HTML 5
Durante el primer día veremos las nuevas etiquetas de HTML5 (header, footer, nav, mark, article, figure, figurecaption, section, summary, details, meter, progress, time, video, audio, source) y el porqué de las mismas. Para ello analizaremos los problemas existentes en la web y la necesidad de una web semántica. Por ese motivo aparecen nuevas etiquetas que facilitan la creación de contenidos con significados y que por tanto son más fáciles de indexar, visualizar y analizar por motores de búsqueda. Estas nuevas etiquetas "semánticas" simplifican el proceso de desarrollo y maquetación de páginas web, contenidos multimedia y artículos, creando un entorno más homogéneo entre dispositivos. Además visualizaremos el soporte en los diferentes navegadores de cada una de las etiquetas y su comportamiento, así como alternativas para poder mejorar el acceso a las mismas para navegadores antiguos.
•Día 2: Interactividad con HTML 5
Uno de los factores más relevantes de HTML5 es la opción de utilizarlo de manera más práctica para la interacción e introducción de datos. Bajo esta premisa se han creado otra serie de etiquetas (canvas, nuevos tipos input, formularios, etc.) que permiten manejar la información de una manera mucho más elegante. A través de una completa API se potencia la interacción dentro del navegador y se permite la creación de animaciones e interacciones antes solo posibles con plugins externos como Silverlight y Flash. A través de ejercicios prácticos iremos viendo los diferentes elementos introducidos y como utilizarlos.
•Día 3 - Aplicando estilos con CSS3
Otra de las grandes novedades es el avance de CSS hacia su versión 3 incorporando multitud de elementos para separar el código de la presentación y el contenido de los estilos. De esta forma se potencia el SEO de nuestras páginas a la vez que se separa el trabajo de producción de las mismas. A través de los nuevos selectores y las nuevas funcionalidades de CSS3 se pueden realizar tareas de presentación antes solamente posibles a través de gráficos. Con un surtido conjunto de ejemplos prácticos veremos cómo se utilizan y bajo que conceptos se aplican cada uno de los nuevos atributos, animaciones y transiciones.
•Día 4 - Layout
El layout o presentación es una de los aspectos más importantes de la web, ya que permite la generación de web semántica estructurada y completamente separada del código visual. A través de diferentes ejemplos veremos cómo utilizar sistemas de grid CSS estándar y realizar diferentes opciones de presentación comunes en la web con CSS3 para presentar la información. Utilizaremos columnas, cabeceras y pies de manera estándar para generar plantillas de presentación intercambiables con el mismo markup
