HTML5 & CSS3

HTML5 no es sólo HTML.

es HTML,

CSS

y Javascript

Historia

Antecedentes

El nacimiento HTML5

Entra en juego WHATWG, menos democrático pero más realista.
Avances gracias entre otros Chrome, actualizaciones constantes, nuevos dispositivos. Aplicaciones web.
HTML5 para 2022. Falso, la web ya es HTML5.
Ya no hablamos de navegadores, hablamos de capacidades.
No es un nuevo lenguaje, importancia de compatibilidad con elementos webs que no cumplen los estándares.

Navegadores

Novedades

Web semántica

Se simplifica: DOCTYPE, charset, script, style, cierre de tags, varios elementos dentro del tag a
Se añaden nuevas etiquetas, programamos para humanos: header, footer, nav, article, aside, hgroup, section, figure, datalist
Se eliminan tags frameset, strike, center, font cuyo cometido se hace con CSS
Ya no hablamos de navegadores, hablamos de capacidades.
Escalabilidad: Microformatos con clases CSS o RDFa property="myformat:summary"
content editable

Formularios

Nuevos tipos de input para prescindir de Javascript y validar formularios

email, tel, url, required, file, color, time, date, placeholder, autofocus, autocomplete

Multimedia

Nuevas etiquetas audio, video, fallbacks Flash, formatos código abierto, controles avanzado javascript
SVG Vectorial Inkscape / Illustrator - Flash
canvas - interactivo. Juegos. Javascript. 2D y 3D. Funciona con imágenes y vídeo.

APIS

Geolocalización
Apliccation Cache
Web Data Storage, mejora de las cookies, hasta 5MB en el usuario y no sólo texto
WebSQL - SQL en el navegador
File API, Web Workers (múltiples .js corriendo en paralelo en una misma página), Web Sockets (aplicaciones multiusuario), History API, Web Messaging, Drag and Drop, etc.

Compatibilidad - Cross-browsers

CSS3

CSS3. Novedades

3 nuevos selectores de atributos. Selector general de hermanos, como el adyancente pero sin que sean consecutivos
Pseudo-elementos. Sintaxis ::first-line ::first-letter ::before ::after ::selection
@font-face
Columnas
Animaciones, transiciones, transformaciones
Opacidad, transparencia, canales alpha, contraste, saturación y brillo (RGB, RGBA, HSL, HSLA)
Reflejos, degradados y sombras
Múltiples bordes, con imágenes, redondeados
Múltiples backgrounds, background-size
Media queries (estilo según dimensiones navegador)
CSS3 Please! Testea online CSS3

Empezar. Frameworks

Demos

Agradecimientos

Por cierto, no olvides