HTML5 & CSS3
HTML5 no es sólo HTML.
es HTML,
CSS
y Javascript
Historia
Antecedentes
- HTML4 4.01 en 1999
- W3 consorcio
- XHTML 1.0 en 2000 mucho más estricto
- La industria impone, guerra de navegadores
- XHTML 2.0 epic fail, se olvidó al usuario
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
- caniuse.com
- Detectar capacidades del navegador con JS - Modernizr
- Polyfills, añade esas capacidades Ej: CSS3 PIE border-radius IE6-8
CSS3
- Ya se habla de CSS4. Código más simple, ahorro tiempo.
- Frameworks LESS
- Backwards compatibility. Varias versiones o una sola. Comprobar: CSS3 test
- El debate de los vendor-prefixes
- Selectivzr. Compatibilidad IE
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
- Fuentes y más de 100 recursos
- Cursos de diseño entre otros de HTML5 y CSS3
Por cierto, no olvides
/