Html5

1,645 views

Published on

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

No Downloads
Views
Total views
1,645
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. Html5 no va a cambiar el mundo el mundo lo cambias tu
  2. 2. Hola <ul><li>Somos @matiasjajaja y @vik407. Somos la mitad de @nullun. Y, @davsket, 1/7 de @monoku </li></ul>
  3. 3. Un poco de susto <ul><li>Html como una herramienta de marketing? Creo que si... </li></ul>
  4. 4. Antes de arrancar con el html5 <ul><li>un poco de lora a mis colegas diseñadores web </li></ul>
  5. 5. Fuck the pageview <ul><li>http://www.msnbc.msn.com/ </li></ul>
  6. 6. BIG <ul><li>http://wow.softfacade.com/ </li></ul>
  7. 7. La pagina como un poster <ul><li>http://www.contrast.ie/ </li></ul>
  8. 8. El iPad traer de regreso el Fanzine <ul><li>http://jasonsantamaria.com/articles/brain-food/ </li></ul>
  9. 9. Ti Po Gra Fías !!!!!  <ul><li>http://typekit.com/ </li></ul><ul><li>http://www.fontsquirrel.com/ </li></ul>
  10. 10. Ahora si arranquemos con el tema: html5
  11. 11. Safari, Chrome, Firefox y Opera, ya son HTML5 -- Internet Explorer en su próxima versión.
  12. 12. Me encanta la noticia: no XHTML 2, salto directo a HTML 5
  13. 13. Pero siguen en draft (mas de 900 paginas) - por eso a veces pienso en marketing, esto estará listo para el 2022.
  14. 14. Para llegar al 2012 a ser recomendado por la W3
  15. 15. Backward compatible? Existe un debate sobre el tema.
  16. 16. Las que se fueron Elementos <strike> <s> <big> <acronym> <tt> <center> <u> <font> Atributos width size cellpadding clear cellspacing valign height
  17. 17. Nuevas etiquetas <ul><li>Estructurales </li></ul><ul><li><article> </li></ul><ul><li><aside> </li></ul><ul><li><footer> </li></ul><ul><li><hgroup> </li></ul><ul><li><nav> </li></ul><ul><li><section> </li></ul><ul><li>Media </li></ul><ul><li><audio> </li></ul><ul><li><canvas> </li></ul><ul><li><video> </li></ul><ul><li><datagrid> </li></ul>
  18. 18. Hoy
  19. 19. Antes
  20. 20. Video y audio <video src = ”x.mp4” controls autobuffer > para los que no pueden ver este video </video>
  21. 21. Canvas (recuerden mi proximo mejor amigo) Para diagramas simples, graphs, animaciones. Con rectángulos, arcos, lineas. Efectos como, sombras, degradados, transparencias. Transformaciones; ampliar, rotar
  22. 23. Formularios <ul><li>Range (definir un valor dentro de un rango usando un slider) </li></ul><ul><li>AutoFocus (un click para limpiar el campo) </li></ul><ul><li>PlaceHolder (texto descriptivo dentro del campo) </li></ul><ul><li>Por definir : color, menu, date, day, time, number, tel, email </li></ul>
  23. 24. JavaScript quiere ser mi mejor amigo <ul><li>Acceder a las funcionalidades de la API de HTML5 mediante un modelo simple de programación javascript. </li></ul><ul><ul><li>Threaded JS </li></ul></ul><ul><ul><li>Drag and drop </li></ul></ul><ul><ul><li>Location </li></ul></ul><ul><ul><li>Offline Storage </li></ul></ul><ul><ul><li>Session Storage para guardar datos por ventana </li></ul></ul><ul><ul><li>Local Storage para datos globales persistentes </li></ul></ul>
  24. 25. Ejemplo javascript <ul><li>function saveandexit() </li></ul><ul><li>{ </li></ul><ul><li>     window.localStorage.WindowLocation = &quot;100,30&quot;; </li></ul><ul><li>     localStorage[&quot;SavingSession&quot;] = true; </li></ul><ul><li>} </li></ul><ul><li>Programación de propiedades y objetos  en javascript excepto el objeto localStorage que tiene una nueva semántica </li></ul><ul><li>En este caso guarda a nivel local los valores de posición de ventana en caso que cierres la ventana y la vuelves a abrir recuerde donde ha quedado posicionada. </li></ul>
  25. 26. Para que nos va a servir esto <ul><li>Móviles (esto esta muy impulsado por Apple). </li></ul><ul><li>Se acuerdan de Google Gears? (offline / online) </li></ul><ul><li>Datacenter en el navegador (base de datos local - no mas viajes a la nube) </li></ul><ul><li>Locación (donde estoy) </li></ul><ul><li>= </li></ul><ul><li>The WebTop! </li></ul>
  26. 27. Html5 no es CSS3 <ul><li>text-shadow border-radius and box-shadow webkit-transform transición de fade Esquinas redondeadas @font-face </li></ul>
  27. 28. Ejemplos <ul><li>http://html5demos.com/ </li></ul><ul><li>http://9elements.com/io/projects/html5/canvas </li></ul>

×