HTML5 Warm up!

536 views

Published on

HTML5 WarmUp!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
536
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Warm up!

  1. 1. Warm Up! @tessekkur @HTML5MeetSpain
  2. 2. Hoy tocan estiramientos!¿En qué condiciones estás tú? Image source: http://awfulsports.files.wordpress.com/2010/10/sports-geek.jpg
  3. 3. ¿Quién decide que #HTML5 sea latecnología adecuada para la Web? ¿La Mafia? Image source: http://mafiatoday.com/wp-content/uploads/2013/01/Cosa-Nostra-300x240.jpg
  4. 4. Cuando programas hay que seguir unasnormas. 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. 5. ¿Qué es #HTML5? Es la palabra de moda (buzzword!) para referirse a lasnuevas 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. 6. ¿Qué es #HTML5? Image source: Wikipedia – http://en.wikipedia.org/wiki/HTML5
  7. 7. HTMLLos cambios son relativamente pocos. Nuevas etiquetas, nuevosatributos, 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. 8. Web SemánticaLas 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. 9. HTML MicrodataLos microdatos consisten en un grupo de datos nombre-valor.Los grupos son identificados cómo items, y cada par nombre-valores 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. 10. Sin Microdata
  11. 11. Con MicrodataLa clave está aquí ! http://schema.org/Person
  12. 12. HTML DOCTYPE. ¿Y tú cuál usas?
  13. 13. #HTML5Ya está! o_0
  14. 14. HTML5 Multimedia Video&Audio- No Flash, no Silverlight, no plug-in! - Estilos con CSS - Integrar con SVG y Canvas - Control mediante Javascript
  15. 15. HTML5 Multimedia Video&AudioAporta una solución en la línea 16 a los usuarios que no visualizan tu contenido HTML5. El audio se incluye igual.
  16. 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. 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. 18. CSS3 Degradadoshttp://www.colorzilla.com/gradient-editor/
  19. 19. Patrones!http://lea.verou.me/css3patterns/
  20. 20. CSS3 TransicionesLas Transiciones nos dan la habilidad de animar suavemente delestado anterior al nuevo.Los cambios de valor en las propiedades se produciránsuavemente durante un determinado tiempo.El siguiente código provocará que la propiedad opacity haga unatransición de 3 segundos y la propiedad left realice una transiciónde 5 segundos.
  21. 21. CSS3 AnimacionesEl ejemplo produce una una animación de #warninghorizontalmente desde la posición 0 hasta los 100px durante cincosegundos 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. 22. CSS3 Transformacionesbox 1Movido hacia la derecha: -webkit-transform: translate(3em,0);box 2Rota 30 grados(mov. reloj): -webkit-transform: rotate(30deg);box 3Movido hacia la izqda y abajo: -webkit-transform: translate(-3em,1em);box 4Escala 2 veces su tamaño: -webkit-transform: scale(2); http://www.the-art-of-web.com/css/css-animation/
  23. 23. 3D cubes built and animated with CSS http://www.paulrhayes.com/ experiments/cube/multiCubes.html
  24. 24. CSS3-Man Anthony Calzadillahttp://www.optimum7.com/css3-man/animation.html
  25. 25. MADMANIMATIONhttp://stuffandnonsense.co.uk/content/demo/madmanimation/
  26. 26. I Twitty the Fool!http://www.anthonycalzadilla.com/i-twitty-the-fool/
  27. 27. DOM Treehttp://hakim.se/experiments/css/domtree/
  28. 28. CSS3 Media QueriesLas media queries ya existían!
  29. 29. Responsive Web Design
  30. 30. Responsive Web Design Media QueriesMedia featuresLas 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. 31. Responsive Web Design ¿Ejemplos?
  32. 32. Responsive Web Design http://mediaqueri.es/
  33. 33. Javascript Alucinas! Videogames, 3D, SmartTV,Geolocalización, Web Storage, WebRTC
  34. 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. 35. Javascript 3D / WebGL http://mrdoob.com/131/clouds http://www.findyourwaytooz.com/http://madebyevan.com/webgl-water/
  36. 36. Gracias!html5spain@gmail.com @tessekkur @HTML5MeetSpain

×