HTML5 + CSS3  ATICA ~ 07/02/2013    Eduardo Rey Jara                       01 / 17
HTML5Todavía no se trata de un standard cerrado, pero yapodemos hacer uso de la mayoría de sus novedades.                 ...
Novedades HTML5 (1/5)El DOCType de la páginaÚnicamente hace falta poner este simple doctype alcomienzo de la página.<!DOCT...
Novedades HTML5 (2/5)Nuevos elementos (1 de 2)HTML5 es mucho más semántico que lo que estábamosacostumbrados a usar con XH...
Novedades HTML5 (2/5)Nuevos elementos (2 de 2).Antes y ahora.Ejemplos prácticos:•   Antes•   Ahora                        ...
Novedades HTML5 (3/5)Nuevos atributos:Atributos de información extra: data-xxxPodemos añadir todos los que queramos. Espec...
Novedades HTML5 (4/5)Tipos de datos en formularios:HTML5 nos permite añadir nuevos tipos de campo deformulario a nuestras ...
Novedades HTML5 (5/5)Funcionalidades muy buenas pero sólo paraalgunos navegadores :(Está más implementado en navegadores m...
Ahora las pegas...Tratando con nuestro amigo Internet ExplorerAunque las nuevas versiones implementan másfuncionalidad, si...
CSS3 CSS3 está definido desde 2008 y ya se habla de CSS4.     ¿por qué ahora? porque ahora es cuando losnavegadores que nu...
CSS3 – Modelo de cajaEl modelo de caja no ha cambiado. El tamaño de unelemento sigue siendo su width/height más su borde m...
CSS3Selectores CSS3 (1/2)Descendiente directo en el DOM:#menuPrincipal ul > li > ulSelectores por atributo:elemento[atribu...
CSS3Selectores CSS3 (2/2)Pseudo-elementos (ahora se usa :: en lugar de : ) : p::first-line{}         /*   primera línea de...
CSS3Utilizando CSS como alternativa a carga de                imágenes.   Este ejemplo no tiene ni JS ni imágenes...      ...
CSS3No usamos imágenes, usamos...Fuentes de iconos vectoriales. Todos los iconos comotexto.Ejemplo: Font AwesomeCarga de f...
La única forma de acordarse de todo                  Usando chuletasHTML5 CheatSheetCss3 CheatSheet                       ...
Gracias          17 / 17
Upcoming SlideShare
Loading in …5
×

En 20 minutos ... HTML5 + CSS3

3,682 views

Published on

Nuevas funcionalidades de HTML5 y CSS3 así como buenas prácticas en el uso de estos lenguajes de marcado y presentación.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,682
On SlideShare
0
From Embeds
0
Number of Embeds
491
Actions
Shares
0
Downloads
85
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

En 20 minutos ... HTML5 + CSS3

  1. 1. HTML5 + CSS3 ATICA ~ 07/02/2013 Eduardo Rey Jara 01 / 17
  2. 2. HTML5Todavía no se trata de un standard cerrado, pero yapodemos hacer uso de la mayoría de sus novedades. 02 / 17
  3. 3. Novedades HTML5 (1/5)El DOCType de la páginaÚnicamente hace falta poner este simple doctype alcomienzo de la página.<!DOCTYPE html> 03 / 17
  4. 4. Novedades HTML5 (2/5)Nuevos elementos (1 de 2)HTML5 es mucho más semántico que lo que estábamosacostumbrados a usar con XHTML o HTML4.Etiquetas para cada delimitar zonas o semántica que nosdan 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. 5. Novedades HTML5 (2/5)Nuevos elementos (2 de 2).Antes y ahora.Ejemplos prácticos:• Antes• Ahora 05 / 17
  6. 6. Novedades HTML5 (3/5)Nuevos atributos:Atributos de información extra: data-xxxPodemos añadir todos los que queramos. Especialmente pensados paracomunicación con aplicaciones front-end. Evitamos pasar parámetros comoinput:hiddenAtributos role para usabilidad wai-aria:Atributos que mejoran la usabilidad de cara a lectores de voz o para añadirleuna semántica adicional a la etiqueta. La lista de roles completa bien explicadala tenemos aquí, añadiré al ejemplo unos cuantos para ver esto con claridadEjemplo. 06 / 17
  7. 7. Novedades HTML5 (4/5)Tipos de datos en formularios:HTML5 nos permite añadir nuevos tipos de campo deformulario 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 elementosContras: Cada navegador lo muestra/trata como quiere y no todos lo tienenimplementados al 100%. Muchos ni al 1%Ejemplo. 07 / 17
  8. 8. Novedades HTML5 (5/5)Funcionalidades muy buenas pero sólo paraalgunos navegadores :(Está más implementado en navegadores móviles, por sunovedad, que en navegadores de escritorioWebSocketsAlmacenamiento de datos en cliente (BBDD Locales y App caché).Geoposicionamiento.Funciones 3D 08 / 17
  9. 9. Ahora las pegas...Tratando con nuestro amigo Internet ExplorerAunque las nuevas versiones implementan másfuncionalidad, siempre va un paso por detrás del restode 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 determinadosestilos y etiquetas?Librería Modernizr 09 / 17
  10. 10. CSS3 CSS3 está definido desde 2008 y ya se habla de CSS4. ¿por qué ahora? porque ahora es cuando losnavegadores que nuestros usuarios tienen implementado decentemente CSS3. 10 / 17
  11. 11. CSS3 – Modelo de cajaEl modelo de caja no ha cambiado. El tamaño de unelemento sigue siendo su width/height más su borde mássu padding. 11 / 17
  12. 12. CSS3Selectores CSS3 (1/2)Descendiente directo en el DOM:#menuPrincipal ul > li > ulSelectores por atributo:elemento[atributo^="valor"] /* comienza por */elemento[atributo$="valor"] /* termina por */elemento[atributo*="valor"] /* contiene */ 12 / 17
  13. 13. CSS3Selectores 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. 14. CSS3Utilizando CSS como alternativa a carga de imágenes. Este ejemplo no tiene ni JS ni imágenes... 14 / 17
  15. 15. CSS3No usamos imágenes, usamos...Fuentes de iconos vectoriales. Todos los iconos comotexto.Ejemplo: Font AwesomeCarga de fuentes corporativas con @font-faceIncluso las podemos cargar asíncronamente con Google Web Fonts o Typekit ocrear nuestra propia fuente.Efectos de bordes, sombras, cambios de color …(Usar con precaución). Podemos ver todas las opciones enCSS3Generator.comAnimaciones (transiciones)(Usar con mucha precaución)El mejor tutorial lo ha hecho Brad Shaw:http://css3.bradshawenterprises.com/transitions/ 15 / 17
  16. 16. La única forma de acordarse de todo Usando chuletasHTML5 CheatSheetCss3 CheatSheet 16 / 17
  17. 17. Gracias 17 / 17

×