Professional Documents
Culture Documents
Segui @ceslava
3,802 seguidores
recursos
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
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
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