HTML5 & CSS3 por ceslava |

Segui @ceslava

3,802 seguidores

recursos

HTML5 & CSS3

HTML5 & CSS3 por Cristian Eslava

HTML5 no es slo HTML. es HTML, CSS y Javascript

Historia

Antecedentes
HTML4 4.01 en 1999 W3 consorcio XHTML 1.0 en 2000 mucho ms estricto La industria impone, guerra de navegadores XHTML 2.0 epic fail, se olvid al usuario

El nacimiento HTML5
Entra en juego WHATWG, menos democrtico pero ms 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 estndares.

Navegadores

Fuente: StatCounter Global Stats - Browser Market Share

Novedades

Web semntica
Se simplifica: DOCTYPE, charset, script, style, cierre de tags, varios elementos dentro del tag a Se aaden 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 cdigo abierto, controles avanzado javascript SVG Vectorial Inkscape / Illustrator - Flash canvas - interactivo. Juegos. Javascript. 2D y 3D. Funciona con imgenes y vdeo.

APIS
Geolocalizacin Apliccation Cache Web Data Storage, mejora de las cookies, hasta 5MB en el usuario y no slo texto WebSQL - SQL en el navegador File API, Web Workers (mltiples .js corriendo en paralelo en una misma pgina), 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, aade esas capacidades Ej: CSS3 PIE border-radius IE6-8

CSS3
Ya se habla de CSS4. Cdigo ms 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, saturacin y brillo (RGB, RGBA, HSL, HSLA) Reflejos, degradados y sombras Mltiples bordes, con imgenes, redondeados Mltiples backgrounds, background-size Media queries (estilo segn dimensiones navegador) CSS3 Please! Testea online CSS3

Empezar. Frameworks
HTMLBoilerplate -> Initializr -> http://foundation.zurb.com/ (responsive) http://twitter.github.com/bootstrap/ http://html5demos.com/

Demos
Marcado no vlido se renderiza HTML5 vlido HTML5 vlido en IE con polyfill HTML5 con Modernizr y jQuery Un polyfill para cada caso

Agradecimientos
Fuentes y ms de 100 recursos Cursos de diseo entre otros de HTML5 y CSS3
Por cierto, no olvides

#DonaMedula