Descargar como PDF, PPTX
![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](https://image.slidesharecdn.com/charlahtml5-130208030255-phpapp02/75/En-20-minutos-HTML5-CSS3-9-2048.jpg)
![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](https://image.slidesharecdn.com/charlahtml5-130208030255-phpapp02/75/En-20-minutos-HTML5-CSS3-12-2048.jpg)
En 20 minutos ... HTML5 + CSS3
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í
Más contenido relacionado
Similar a En 20 minutos ... HTML5 + CSS3
En 20 minutos ... HTML5 + CSS3
- 1. HTML5 + CSS3 ATICA ~ 07/02/2013 Eduardo Rey Jara 01 / 17
- 2. HTML5 Todavía no setrata de un standard cerrado, pero ya podemos hacer uso de la mayoría de sus novedades. 02 / 17
- 3. Novedades HTML5 (1/5) ElDOCType 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) Nuevoselementos (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) Nuevoselementos (2 de 2). Antes y ahora. Ejemplos prácticos: • Antes • Ahora 05 / 17
- 6. Novedades HTML5 (3/5) Nuevosatributos: 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) Tiposde 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) Funcionalidadesmuy 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... Tratandocon 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 – Modelode 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) Descendientedirecto 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 comoalternativa 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 formade acordarse de todo Usando chuletas HTML5 CheatSheet Css3 CheatSheet 16 / 17
- 17. Gracias 17 / 17