Conoce HTML5 y CSS3
•
34 likes•11,167 views
Presentación de Javier Usobiaga en el Barcelona Visual Sound 2011.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Conoce HTML5 y CSS3
Similar to Conoce HTML5 y CSS3 (20)
More from Marta Armada
Recently uploaded
Recently uploaded (20)
Conoce HTML5 y CSS3
- 1. LA WEB SE MUEVE: CONOCE HTML5 & CSS3 Javier Usobiaga BCNVisualSound 2011
- 2. ¡HOLA!
- 3. @htmlboy
- 4. @martuishere
- 7. FUTURO
- 9. CSS 3
- 13. 5 HTML5
- 14. ¿QUÉ ES HTML5? ✓Nuevos elementos, más semánticos ✓Un conjunto de APIs ✓Retrocompatible ✓Una nueva filosofía
- 16. ¿SE PUEDE USAR YA? SÍ pero...
- 17. ¿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
- 18. !DOCTYPE XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML5: <!DOCTYPE html>
- 19. CODIFICACIÓN XHTML 1.1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5: <meta charset=utf-8>
- 20. LINK / SCRIPT XHTML 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>
- 21. NUEVA ESTRUCTURA <header>
- 22. header header
- 23. NUEVA ESTRUCTURA <nav>
- 24. nav nav
- 25. NUEVA ESTRUCTURA <article>
- 26. article article article
- 27. NUEVA ESTRUCTURA <section>
- 28. section section
- 29. NUEVA ESTRUCTURA <aside>
- 30. aside
- 31. NUEVA ESTRUCTURA <footer>
- 32. footer
- 33. NUEVA ESTRUCTURA <figure>
- 34. FIGURE/FIGCAPTION <figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption> </figure>
- 35. figure figure
- 36. NUEVOS ELEMENTOS <video> <audio>
- 37. video
- 38. VIDEO <video src="video.???" > </video>
- 39. VIDEO GUERRA 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+
- 40. 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>
- 41. 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>
- 42. SOPORTE HTML5
- 43. SOPORTE HTML5 * * última beta
- 44. SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos) <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
- 45. 3 CSS3
- 46. ¿QUÉ ES CSS3? ✓Nuevas posibilidades de decoración ✓Menos markup ✓Menos dependencia de javascript ✓Mayor control
- 47. ¿SE PUEDE USAR YA? SÍ pero...
- 48. ¿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,
- 49. ¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?
- 52. BACKGROUND MULTIPLE BACKGROUNDS: html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }
- 53. multiple background multiple background
- 54. RGBa Y HSLa RGBa = RGB + alpha #foo{ background: rgba(0, 0, 0, .5); } #foo{ background: rgba(255, 0, 0, .7); }
- 55. RGBa Y HSLa HSLa = HSL + alpha #foo{ background: hsla(324, 100%, 75%, .7); } #foo{ background: hsla(324, 100%, 25%, .7); }
- 56. RGBa RGBa RGBa RGBa
- 57. RGBa Y HSLa html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; } body{ background: rgba(241, 238, 203, 0.7); }
- 58. rgba(241, 238, 203, .7)
- 59. rgba(5, 129, 121, .8)
- 60. rgba(173, 165, 53, .8)
- 61. @FONT-FACE PERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS EN EL SISTEMA OPERATIVO @font-face { font-family: 'Lobster'; src: url('Lobster.ttf') format('truetype'); font-weight: normal; font-style: normal; } L r
- 62. @FONT-FACE PERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS 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
- 64. @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/
- 65. TEXT-SHADOW h1{ text-shadow: 3px 3px 5px black; } Doc Brown h1{ text-shadow: 5px 5px 0px blue; } Marty McFly
- 66. TEXT-SHADOW h1{ 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; }
- 67. text-shadow text-shadow text-shadow
- 68. BOX SHADOW #foo{ box-shadow: 5px 5px 10px black; } #foo{ box-shadow: inset 3px 3px 10px black; }
- 69. 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); }
- 70. box-shadow box-shadow box-shadow
- 71. BORDER RADIUS #foo{ border-radius: 10px; } #foo{ border-radius: 50px 0 50px 0; }
- 72. BORDER RADIUS #foo{ border-radius: 9999px; }
- 73. border-radius border-radius border-radius
- 74. TRANSFORMS #foo{ transform: rotate(45deg); } #foo{ transform: scale(0.5); }
- 75. TRANSFORMS #foo{ transform: skew(45deg); } #foo{ transform: translate(20px,-20px); }
- 76. transform
- 77. TRANSITIONS #foo{ transition: 1.5s opacity ease-in-out; }
- 79. TRANSITIONS nav li{ width: 160px; transition: .3s width linear; } nav li:hover{ width: 220px; }
- 81. TRANSITIONS nav li span{ transition: .6s transform ease-in-out; } nav li:hover span{ transform: rotate(360deg); }
- 83. SOPORTE CSS3
- 84. IE8
- 87. RECURSOS CURSO CSS3 EN PUNT MULTIMÈDIA 15/2/2011 - 18/2/2011 19:30 - 21:30 39,50€ / 30,40€
- 88. ¡GRACIAS!
- 89. CRÉDITOS http://www.flickr.com/photos/kingdafy/500260659 http://www.flickr.com/photos/mikeq314/4966121385 http://www.flickr.com/photos/hoyvinmayvin/4310321648 http://www.flickr.com/photos/hoyvinmayvin/4119535890 http://www.flickr.com/photos/hoyvinmayvin/4065429187/