En 20 minutos ... HTML5 + CSS3
•
1 recomendación•3,643 vistas
Este documento presenta las principales novedades de HTML5 y CSS3. Explica que HTML5 introduce nuevos elementos semánticos como <article>, <header> y <footer>, así como nuevos atributos como "data-" y "role". También describe los nuevos tipos de datos de formularios en HTML5. Señala que CSS3 incluye nuevos selectores, pseudo-elementos y pseudo-clases, así como propiedades para efectos, animaciones y fuentes. Finalmente, recomienda usar "chuletas" o hojas de referencia rápida para recordar todas las caracterí
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (9)
Destacado
Destacado (20)
Similar a En 20 minutos ... HTML5 + CSS3
Similar a En 20 minutos ... HTML5 + CSS3 (20)
Más de Sección de Metodologías, Normalización y Calidad del Software
Más de Sección de Metodologías, Normalización y Calidad del Software (6)
En 20 minutos ... HTML5 + CSS3
- 1. HTML5 + CSS3 ATICA ~ 07/02/2013 Eduardo Rey Jara 01 / 17
- 2. HTML5 Todavía no se trata de un standard cerrado, pero ya podemos hacer uso de la mayoría de sus novedades. 02 / 17
- 3. Novedades HTML5 (1/5) El DOCType de la página Únicamente hace falta poner este simple doctype al comienzo de la página. <!DOCTYPE html> 03 / 17
- 4. Novedades HTML5 (2/5) Nuevos elementos (1 de 2) HTML5 es mucho más semántico que lo que estábamos acostumbrados a usar con XHTML o HTML4. Etiquetas para cada delimitar zonas o semántica que nos dan mayor legibilidad y simpleza del código. Nuevas etiquetas que más usaremos: <article> <address> <aside> <footer> <header> <progress> <nav> <section> <video> <audio> 04 / 17
- 5. Novedades HTML5 (2/5) Nuevos elementos (2 de 2). Antes y ahora. Ejemplos prácticos: • Antes • Ahora 05 / 17
- 6. Novedades HTML5 (3/5) Nuevos atributos: Atributos de información extra: data-xxx Podemos añadir todos los que queramos. Especialmente pensados para comunicación con aplicaciones front-end. Evitamos pasar parámetros como input:hidden Atributos 'role' para usabilidad wai-aria: Atributos que mejoran la usabilidad de cara a lectores de voz o para añadirle una semántica adicional a la etiqueta. La lista de roles completa bien explicada la tenemos aquí, añadiré al ejemplo unos cuantos para ver esto con claridad Ejemplo. 06 / 17
- 7. Novedades HTML5 (4/5) Tipos de datos en formularios: HTML5 nos permite añadir nuevos tipos de campo de formulario a nuestras aplicaciones. Tipos: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week. Con atributo required y máximos y mínimos. Pros: Nos evita tener que añadir javascript adicional para controlar elementos Contras: Cada navegador lo muestra/trata como quiere y no todos lo tienen implementados al 100%. Muchos ni al 1% Ejemplo. 07 / 17
- 8. Novedades HTML5 (5/5) Funcionalidades muy buenas pero sólo para algunos navegadores :( Está más implementado en navegadores móviles, por su novedad, que en navegadores de escritorio WebSockets Almacenamiento de datos en cliente (BBDD Locales y App caché). Geoposicionamiento. Funciones 3D 08 / 17
- 9. Ahora las pegas... Tratando con nuestro amigo Internet Explorer Aunque las nuevas versiones implementan más funcionalidad, siempre va un paso por detrás del resto de navegadores. ¿Cómo hacemos que soporte etiquetas HTML5? <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> ¿Cómo diferenciamos si soporta o no determinados estilos y etiquetas? Librería Modernizr 09 / 17
- 10. CSS3 CSS3 está definido desde 2008 y ya se habla de CSS4. ¿por qué ahora? porque ahora es cuando los navegadores que nuestros usuarios tienen implementado decentemente CSS3. 10 / 17
- 11. CSS3 – Modelo de caja El modelo de caja no ha cambiado. El tamaño de un elemento sigue siendo su width/height más su borde más su padding. 11 / 17
- 12. CSS3 Selectores CSS3 (1/2) Descendiente directo en el DOM: #menuPrincipal ul > li > ul Selectores por atributo: elemento[atributo^="valor"] /* comienza por */ elemento[atributo$="valor"] /* termina por */ elemento[atributo*="valor"] /* contiene */ 12 / 17
- 13. CSS3 Selectores CSS3 (2/2) Pseudo-elementos (ahora se usa :: en lugar de : ) : p::first-line{} /* primera línea de un elemento */ p::first-letter{} /* primera letra de un elemento */ p::before{} /* insertar datos antes */ p::after{} /* insertar datos después */ p::selection{} /* selección en un elemento */ Pseudo-clases: li:nth-child(2n+1){} /* todos elementos impares de una lista */ li:nth-last-child(2n+1){} /* idem pero contando desde el final */ p:empty{} /* párrafos sin elementos HTML dentro, sólo texto */ p:first-child, p:last-child {}/* primer y último párrafo del documento */ li:nth-of-type(5) /* el 5 elemento de una lista */ li:nth-last-of-type(5) /* idem pero contando desde el final */ li:nth-last-of-type(5) /* idem pero contando desde el final */ ul:not(#menuPrincipal ul) /* las listas que no están en menu principal */ 13 / 17
- 14. CSS3 Utilizando CSS como alternativa a carga de imágenes. Este ejemplo no tiene ni JS ni imágenes... 14 / 17
- 15. CSS3 No usamos imágenes, usamos... Fuentes de iconos vectoriales. Todos los iconos como texto. Ejemplo: Font Awesome Carga de fuentes corporativas con @font-face Incluso las podemos cargar asíncronamente con Google Web Fonts o Typekit o crear nuestra propia fuente. Efectos de bordes, sombras, cambios de color … (Usar con precaución). Podemos ver todas las opciones en CSS3Generator.com Animaciones (transiciones) (Usar con mucha precaución) El mejor tutorial lo ha hecho Brad Shaw: http://css3.bradshawenterprises.com/transitions/ 15 / 17
- 16. La única forma de acordarse de todo Usando chuletas HTML5 CheatSheet Css3 CheatSheet 16 / 17
- 17. Gracias 17 / 17