5. INTRODUCCIÓN
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5
1. HTML5 NO ES UN GRAN BLOQUE
6. INTRODUCCIÓN
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5
1. HTML5 NO ES UN GRAN BLOQUE
2. NO NECESITAS TIRAR NADA ANTERIOR A
HTML 5
7. INTRODUCCIÓN
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5
1. HTML5 NO ES UN GRAN BLOQUE
2. NO NECESITAS TIRAR NADA ANTERIOR A
HTML 5
3. ES MUY FÁCIL EMPEZAR
8. INTRODUCCIÓN
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5
1. HTML5 NO ES UN GRAN BLOQUE
2. NO NECESITAS TIRAR NADA ANTERIOR A
HTML 5
3. ES MUY FÁCIL EMPEZAR
4. YA FUNCIONA
9. INTRODUCCIÓN
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5
1. HTML5 NO ES UN GRAN BLOQUE
2. NO NECESITAS TIRAR NADA ANTERIOR A
HTML 5
3. ES MUY FÁCIL EMPEZAR
4. YA FUNCIONA
5. HA LLEGADO PARA QUEDARSE
11. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
12. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
13. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
14. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
●Canvas y microdatos
15. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
●Canvas y microdatos
●WebWorkers, WebStorage, WebSockets y Web SQL
Database
16. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
●Canvas y microdatos
●WebWorkers, WebStorage, WebSockets y Web SQL
Database
●Geolocalización
17. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
●Canvas y microdatos
●WebWorkers, WebStorage, WebSockets y Web SQL
Database
●Geolocalización
●Mejoras en los formularios
18. NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>
●Canvas y microdatos
●WebWorkers, WebStorage, WebSockets y Web SQL
Database
●Geolocalización
●Mejoras en los formularios
●Retrocompatible
20. ¿SE PUEDE USAR YA?
Sí pero...
✔ Hay que preocuparse de la retrocompatibilidad
21. ¿SE PUEDE USAR YA?
Sí pero...
✔ Hay que preocuparse de la retrocompatibilidad
✔ Algunas tecnologías no están preparadas aún
22. ¿SE PUEDE USAR YA?
Sí pero...
✔ Hay que preocuparse de la retrocompatibilidad
✔ Algunas tecnologías no están preparadas aún
✔ El contenido tiene que ser siempre accesible
23. ¿SE PUEDE USAR YA?
Sí pero...
✔ Hay que preocuparse de la retrocompatibilidad
✔ Algunas tecnologías no están preparadas aún
✔ El contenido tiene que ser siempre accesible
✔ Se pueden complementar con javascript
24. ¿SE PUEDE USAR YA?
Sí pero...
✔ Hay que preocuparse de la retrocompatibilidad
✔ Algunas tecnologías no están preparadas aún
✔ El contenido tiene que ser siempre accesible
✔ Se pueden complementar con javascript
(polyfills)
25. !DOCTYPE
XTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN" "http://www.w3.org/TR/
xhtml11/DTD/xhtml11.dtd">
HTML5:
<!DOCTYPE html>
38. <HGROUP>
Ha desaparecido de la especificación de HTML5
recientemente
Originariamente se utilizaba para agrupar encabezados con
más de una etiqueta <h1>...<h6>
40. <TIME>
<time>2011-05-05</time>
datetime: permite declarar la fecha en un formato legible
por una máquina
41. <TIME>
<time>2011-05-05</time>
datetime: permite declarar la fecha en un formato legible
por una máquina
pubdate: especifica que es una fecha de publicación
42. ADIÓS A...
applet
big
center
font
frame
blink
marquee
48. ATRIBUTOS
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el
navegador coge el primer fotograma.
49. ATRIBUTOS
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el
navegador coge el primer fotograma.
width, height: si no se especifican, se toman las del poster;
si no, serán 300px por 150px.
50. ATRIBUTOS
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el
navegador coge el primer fotograma.
width, height: si no se especifican, se toman las del poster;
si no, serán 300px por 150px.
loop: reproduce el vídeo en bucle.
51. ATRIBUTOS
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el
navegador coge el primer fotograma.
width, height: si no se especifican, se toman las del poster;
si no, serán 300px por 150px.
loop: reproduce el vídeo en bucle.
preload: precarga el vídeo.
52. ATRIBUTOS
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el
navegador coge el primer fotograma.
width, height: si no se especifican, se toman las del poster;
si no, serán 300px por 150px.
loop: reproduce el vídeo en bucle.
preload: precarga el vídeo.
src: indica la fuente del vídeo.
53. LA FORMA CORRECTA
<video controls width="360" height="240"
poster="caratula.jpg" >
<source src="vid.mp4" type="video/mp4" >
<source src="vid.ogv" type="video/ogg" >
<p>
Tu navegador no sorporta vídeo. Puedes
descargar este vídeo en formato
<a href="vid.mp4">mp4<a> o en formato
<a href="vid.ogv">Ogg<a>.
</p>
</video>
54. GUERRA DE FORMATOS
Formato IE Firefox Safari Chrome Opera
Ogg NO 3.4+ NO 5.0+ 10.5+
H264 9.0+ NO 3.0+ 5.0+ NO
WebM 9.0+ 4.0+ NO 5.0+ 10.6+
55. SOPORTE HTML5
Chrome
Firefox
Safari
Opera
Internet Explorer 9
56. SOPORTE HTML5
Creamos los elementos nuevos con Javascript:
document.CreateElement('nav');
document.CreateElement('header');
document.CreateElement('footer');
document.CreateElement('article');
document.CreateElement('section');
103. PARA TERMINAR...
Polyfills:
Modernizr
HTML5 shiv
Google Chrome Frame
Frameworks:
HTML5 boilerplate
Switch to HTML5
104. RECURSOS
Online:
- HTML5doctor
- Dive into HTML5
- HTML5 Rocks
- W3C HTML5 spec - Edition for Web Authors
- WHATWG HTML5 spec - Edition for Web
Developers
- HTML5 gurus en Twitter, por Bruce Lawson
- Can I Use?
105. MÁS RECURSOS
Libros:
- HTML5 for web designers, de Jeremy Keith
- Introducing HTML5, de Bruce Lawson y Remy Sharp
- HTML5: Up and Running, de Mark Pilgrim
- Pro HTML5 Programming, de Peter Lubbers, Brian
Albers y Frank Salim
- Foundation HTML5 Canvas, de Rob Hawkes
106. PARA OJEAR
Presentaciones (@htmlboy y @martuishere):
http://swwweet.com/presentaciones/html5hoy
http://www.slideshare.net/Martulina/conoce-
html5-y-css3-6893390
Página de Javier Casares:
http://javiercasares.com/html5/