• Author / Uploaded
• Cristian Eslava

• Categories
• Hojas de estilo en cascada
• HTML5
• HTML
• Navegador web
• Script Java

Citation preview

HTML5 & CSS3 por ceslava |

Segui @ceslava

3,802 seguidores

recursos

HTML5 & CSS3

HTML5 & CSS3 por Cristian Eslava

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

Fuente: StatCounter Global Stats - Browser Market Share

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 HTMLBoilerplate -> Initializr -> http://foundation.zurb.com/ (responsive) http://twitter.github.com/bootstrap/ http://html5demos.com/

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

Agradecimientos Fuentes y más de 100 recursos Cursos de diseño entre otros de HTML5 y CSS3 Por cierto, no olvides

#DonaMedula

/