Conoce HTML5 y CSS3

40,769 views

Published on

Presentación de Javier Usobiaga en el Barcelona Visual Sound 2011.

Published in: Technology
6 Comments
33 Likes
Statistics
Notes
No Downloads
Views
Total views
40,769
On SlideShare
0
From Embeds
0
Number of Embeds
4,683
Actions
Shares
0
Downloads
1,057
Comments
6
Likes
33
Embeds 0
No embeds

No notes for slide

Conoce HTML5 y CSS3

  1. 1. LA WEB SE MUEVE: CONOCE HTML5 & CSS3Javier Usobiaga BCNVisualSound 2011
  2. 2. ¡HOLA!
  3. 3. @htmlboy
  4. 4. @martuishere
  5. 5. Swwweet.com @savetheusers
  6. 6. LA WEB SEMUEVE
  7. 7. FUTURO
  8. 8. CSS3
  9. 9. http://swwweet.com/presentaciones/viajartiempo
  10. 10. 5HTML5
  11. 11. ¿QUÉ ES HTML5?✓Nuevos elementos, más semánticos✓Un conjunto de APIs✓Retrocompatible✓Una nueva filosofía
  12. 12. ¿SE PUEDE USAR YA? SÍ pero...
  13. 13. ¿SE PUEDE USAR YA?✓retrocompatibilidad de la Hay que preocuparse✓aún tecnologías no están preparadas Algunas✓accesible tiene que ser siempre El contenido✓(polyfills) complementar con javascript Se pueden
  14. 14. !DOCTYPEXHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML5: <!DOCTYPE html>
  15. 15. CODIFICACIÓN XHTML 1.1:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5: <meta charset=utf-8>
  16. 16. LINK / SCRIPTXHTML 1.1:<link rel="stylesheet" type="text/css" href="style-original.css"/> <script type="text/javascript" src="jquery.js"></script>HTML5: <link rel=stylesheet href=styles.css> <script src=jquery.js></script>
  17. 17. NUEVA ESTRUCTURA <header>
  18. 18. headerheader
  19. 19. NUEVA ESTRUCTURA <nav>
  20. 20. navnav
  21. 21. NUEVA ESTRUCTURA <article>
  22. 22. article article article
  23. 23. NUEVA ESTRUCTURA <section>
  24. 24. sectionsection
  25. 25. NUEVA ESTRUCTURA <aside>
  26. 26. aside
  27. 27. NUEVA ESTRUCTURA <footer>
  28. 28. footer
  29. 29. NUEVA ESTRUCTURA <figure>
  30. 30. FIGURE/FIGCAPTION<figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption></figure>
  31. 31. figure figure
  32. 32. NUEVOS ELEMENTOS <video> <audio>
  33. 33. video
  34. 34. VIDEO<video src="video.???" > </video>
  35. 35. VIDEOGUERRA DE FORMATOS Theora + Ogg 3.5+ 5.0+ 10.5+ H264 + MP4 9.0+ 3.0+ 5.0+ 3.0+ 2.0+ WebM 9.0+ 4.0+ 5.0+ 10.6+
  36. 36. VIDEO<video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <p> Tu navegador no sorporta vídeo. </p></video>
  37. 37. VIDEO<video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <object type="application/x-shockwave-flash" data="player.swf?file=vid.mp4"> <param name="vid" value="player.swf?file=vid.mp4"> <a href="vid.mp4">Descargar vídeo</a> </object></video>
  38. 38. SOPORTE HTML5
  39. 39. SOPORTE HTML5 * * última beta
  40. 40. SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos)<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
  41. 41. 3CSS3
  42. 42. ¿QUÉ ES CSS3?✓Nuevas posibilidades de decoración✓Menos markup✓Menos dependencia de javascript✓Mayor control
  43. 43. ¿SE PUEDE USAR YA? SÍ pero...
  44. 44. ¿SE PUEDE USAR YA?✓ No hay que devaluar la experiencia del usuario✓branding, estructura... Cuidado con los elementos críticos:✓ Pueden ser un premio✓-webkit, -ms, -o Hay que utilizar “vendor prefixes”: -moz,
  45. 45. ¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?
  46. 46. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  47. 47. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  48. 48. BACKGROUNDMULTIPLE BACKGROUNDS:html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top;}
  49. 49. multiple background multiplebackground
  50. 50. RGBa Y HSLaRGBa = RGB + alpha#foo{ background: rgba(0, 0, 0, .5);}#foo{ background: rgba(255, 0, 0, .7);}
  51. 51. RGBa Y HSLaHSLa = HSL + alpha#foo{ background: hsla(324, 100%, 75%, .7);}#foo{ background: hsla(324, 100%, 25%, .7);}
  52. 52. RGBaRGBa RGBa RGBa
  53. 53. RGBa Y HSLahtml{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top;}body{ background: rgba(241, 238, 203, 0.7);}
  54. 54. rgba(241, 238, 203, .7)
  55. 55. rgba(5, 129, 121, .8)
  56. 56. rgba(173, 165, 53, .8)
  57. 57. @FONT-FACEPERMITE INCORPORAR TIPOGRAFÍAS NOINSTALADAS EN EL SISTEMA OPERATIVO@font-face { font-family: Lobster; src: url(Lobster.ttf) format(truetype); font-weight: normal; font-style: normal;} L r
  58. 58. @FONT-FACEPERMITE INCORPORAR TIPOGRAFÍAS NOINSTALADAS EN EL SISTEMA OPERATIVO@font-face { font-family: Lobster; src: url(Lobster.eot?) format(eot), url(Lobster.woff) format(woff), url(Lobster.ttf) format(truetype), url(Lobster.svg#webfont1MhCsZSr) format (svg); font-weight: normal; font-style: normal;} L r
  59. 59. @font-face@font-face
  60. 60. @FONT-FACE Google Font Directory http://code.google.com/webfonts Fontsquirrel http://www.fontsquirrel.com/ Typekit http://typekit.com/ MyFonts http://new.myfonts.com/info/webfonts/
  61. 61. TEXT-SHADOWh1{ text-shadow: 3px 3px 5px black;} Doc Brownh1{ text-shadow: 5px 5px 0px blue;} Marty McFly
  62. 62. TEXT-SHADOWh1{ text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E;}
  63. 63. text-shadowtext-shadow text-shadow
  64. 64. BOX SHADOW#foo{ box-shadow: 5px 5px 10px black;}#foo{ box-shadow: inset 3px 3px 10px black;}
  65. 65. BOX SHADOW#foo{ box-shadow: : 0 1px 0 #e87754,                0 2px 0 #bd4019,                0 3px 0 #ae3b17,              0 5px 0 #9f3615,                0 7px 0 #903113,                0 8px 1px rgba(0,0,0,.1),                0 0 5px rgba(0,0,0,.1),                0 10px 10px rgba(0,0,0,.2),                0 20px 20px rgba(0,0,0,.15);}
  66. 66. box-shadowbox-shadow box-shadow
  67. 67. BORDER RADIUS#foo{ border-radius: 10px;}#foo{ border-radius: 50px 0 50px 0;}
  68. 68. BORDER RADIUS#foo{ border-radius: 9999px;}
  69. 69. border-radiusborder-radius border-radius
  70. 70. TRANSFORMS#foo{ transform: rotate(45deg);}#foo{ transform: scale(0.5);}
  71. 71. TRANSFORMS#foo{ transform: skew(45deg);}#foo{ transform: translate(20px,-20px);}
  72. 72. transform
  73. 73. TRANSITIONS#foo{ transition: 1.5s opacity ease-in-out;}
  74. 74. TRANSITIONS nav li{ width: 160px; transition: .3s width linear; } nav li:hover{ width: 220px; }
  75. 75. TRANSITIONSnav li span{ transition: .6s transform ease-in-out;}nav li:hover span{ transform: rotate(360deg);}
  76. 76. SOPORTE CSS3
  77. 77. IE8
  78. 78. RECURSOShttp://books.alistapart.com
  79. 79. RECURSOShttp://swwweet.com/presentaciones/html5hoy
  80. 80. RECURSOSCURSO CSS3 EN PUNT MULTIMÈDIA 15/2/2011 - 18/2/2011 19:30 - 21:30 39,50€ / 30,40€
  81. 81. ¡GRACIAS!
  82. 82. CRÉDITOS http://www.flickr.com/photos/kingdafy/500260659 http://www.flickr.com/photos/mikeq314/4966121385http://www.flickr.com/photos/hoyvinmayvin/4310321648http://www.flickr.com/photos/hoyvinmayvin/4119535890http://www.flickr.com/photos/hoyvinmayvin/4065429187/

×