El documento presenta información sobre HTML5, incluyendo sus características principales como etiquetas semánticas, multimedia, CSS3 y animaciones. También discute conceptos como diseño web responsivo y el uso de JavaScript para crear experiencias interactivas en 3D.

1. Warm Up!
@tessekkur
@HTML5MeetSpain

2. Hoy tocan estiramientos!
¿En qué condiciones estás tú?
Image source: http://awfulsports.files.wordpress.com/2010/10/sports-geek.jpg

3. ¿Quién decide que #HTML5 sea la
tecnología adecuada para la Web?
¿La Mafia?
Image source: http://mafiatoday.com/wp-content/uploads/2013/01/Cosa-Nostra-300x240.jpg

4. Cuando programas hay que seguir unas
normas. Hay estándares! Ya había estándares
y habrá nuevos estándares.
Organización dónde grandes/pequeñas compañías,
personal y personas independientes trabajan juntos para
desarrollar los estándares Web.
Tim Berners-Lee, inventor de la Web
What Working Group.
Los promotores de #HTML5
Developers!
Logo W3C: http://www.w3.org/Icons/w3c_home - Logo WhatWG: www.whatwg.org/

5. ¿Qué es #HTML5?
Es la palabra de moda (buzzword!) para referirse a las
nuevas versiones de HTML y CSS, y las nuevas API’s de
Javascript.
HTML4, XHTML1 por HMTL5
CSS2 por CSS3
Javascript evoluciona a un ritmo increíble!
Las JS API’s no existían! ¿Sabes qué es una API?

6. ¿Qué es #HTML5?
Image source: Wikipedia – http://en.wikipedia.org/wiki/HTML5

7. HTML
Los cambios son relativamente pocos. Nuevas etiquetas, nuevos
atributos, Lo más representativo es el carácter semántico de este
lenguaje de programación.
La Web es texto. Y el texto tiene que tener sentido.
WEB SEMÁNTICA (3,0)
Etiquetas que describen el tipo de contenido que contienen:
header, section, article, footer, video, audio ... pero hay más!
Image source: Wikipedia – http://en.wikipedia.org/wiki/HTML5

8. Web Semántica
Las etiquetas semánticas, se refieren a la estructura. Son
bloques de contenido que empleamos para mostrar la
información de nuestras páginas html.
Pero podemos especificar aún más que tipo de datos
contiene la información. Con estructuras de datos.
¿Cómo?
Con Microdatos.
¿Cómo?
¿Cómo?

9. HTML Microdata
Los microdatos consisten en un grupo de datos nombre-valor.
Los grupos son identificados cómo items, y cada par nombre-valor
es una propiedad.
Para crear un item empleamos el atributo itemscope.
Para añadir una propiedad al item usamos el atributo itemprop.
Image source: http://www.techwhatnext.com/wp-content/uploads/2011/06/top-3-search-engines.jpg

10. Sin Microdata

11. Con Microdata
La clave está aquí !
http://schema.org/Person

12. HTML DOCTYPE. ¿Y tú cuál usas?

13. #HTML5
Ya está!
o_0

14. HTML5 Multimedia
Video&Audio
- No Flash, no Silverlight, no plug-in!
- Estilos con CSS
- Integrar con SVG y Canvas
- Control mediante Javascript

15. HTML5 Multimedia
Video&Audio
Aporta una solución en la línea 16 a los usuarios
que no visualizan tu contenido HTML5.
El audio se incluye igual.

16. HTML5 Multimedia
Ejemplos
Crear experiencias!
Páginas con Vídeos de fondo
Video ‘Responsive’
http://popcornjs.org/
http://dfcb.github.com/BigVideo.js/
http://code.google.com/p/jquery-tubular/
http://mediaelementjs.com/

17. CSS3 Bordes redondeados
#Example_A {
height: 65px; #Example_D {
width:160px; height: 5em;
-moz-border-radius-bottomright: width: 12em;
50px; -moz-border-radius: 1em 4em 1em 4em;
border-bottom-right-radius: border-radius: 1em 4em 1em 4em;
50px; }
}
#Example_E {
#Example_B { height: 65px;
height: 65px; width:160px;
width:160px; -moz-border-radius: 25px 10px / 10px 25px;
-moz-border-radius-bottomright: border-radius: 25px 10px / 10px 25px;
50px 25px; }
border-bottom-right-radius:
50px 25px; #Example_F {
} height: 70px;
#Example_C { width: 70px;
height: 65px; -moz-border-radius: 35px;
width:160px; border-radius: 35px;
-moz-border-radius-bottomright: }
25px 50px;
border-bottom-right-radius:
25px 50px;
}

18. CSS3 Degradados
http://www.colorzilla.com/gradient-editor/

19. Patrones!
http://lea.verou.me/css3patterns/

20. CSS3 Transiciones
Las Transiciones nos dan la habilidad de animar suavemente del
estado anterior al nuevo.
Los cambios de valor en las propiedades se producirán
suavemente durante un determinado tiempo.
El siguiente código provocará que la propiedad opacity haga una
transición de 3 segundos y la propiedad left realice una transición
de 5 segundos.

21. CSS3 Animaciones
El ejemplo produce una una animación de #warning
horizontalmente desde la posición 0 hasta los 100px durante cinco
segundos y se repite nueve veces para un total de diez iteraciones.
La clave se encuentra, en que las Transiciones se realizan implícitamente cuando se
produce el cambio del valor de la propiedad, las Animaciones son explícitamente
ejecutadas cuando las propiedades de animación son empleadas.

22. CSS3 Transformaciones
box 1
Movido hacia la derecha: -webkit-transform: translate(3em,0);
box 2
Rota 30 grados(mov. reloj): -webkit-transform: rotate(30deg);
box 3
Movido hacia la izqda y abajo: -webkit-transform: translate(-3em,1em);
box 4
Escala 2 veces su tamaño: -webkit-transform: scale(2);
http://www.the-art-of-web.com/css/css-animation/

23. 3D cubes built and animated with CSS
http://www.paulrhayes.com/
experiments/cube/multiCubes.html

24. CSS3-Man
Anthony Calzadilla
http://www.optimum7.com/css3-
man/animation.html

25. MADMANIMATION
http://stuffandnonsense.co.uk/
content/demo/madmanimation/

26. I Twitty the Fool!
http://www.anthonycalzadilla.com/
i-twitty-the-fool/

27. DOM Tree
http://hakim.se/experiments/css/
domtree/

28. CSS3 Media Queries
Las media queries ya existían!

29. Responsive Web Design

30. Responsive Web Design
Media Queries
Media features
Las características del medio que podemos consultar pueden ser:
• width y device-width
• height y device-height
• orientation
• aspect-ratio y device-aspect-ratio
• color y color-index
• monochrome
• resolution
• Además: scan, grid...

31. Responsive Web Design
¿Ejemplos?

32. Responsive Web Design
http://mediaqueri.es/

33. Javascript
Alucinas!
Videogames, 3D, SmartTV,
Geolocalización, Web Storage,
WebRTC

34. Javascript
Alucinas!
http://florian-rappl.de/Articles/Page/116/super-mario5-article
Canela fina!
http://html.adobe.com/edge/animate/showcase/bubbles/bubbles.html

35. Javascript
3D / WebGL
http://mrdoob.com/131/clouds
http://www.findyourwaytooz.com/
http://madebyevan.com/webgl-water/

36. Gracias!
html5spain@gmail.com
@tessekkur
@HTML5MeetSpain