Conoce HTML5 y CSS3
•
34 recomendaciones•11,167 vistas
Este documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 incluye nuevos elementos semánticos como <header>, <nav>, <article>, <section> y <footer>. También presenta nuevos elementos multimedia como <video> y <audio>. CSS3 incluye nuevas posibilidades para decoración como fondos múltiples, RGBa, text-shadow, box-shadow y transformaciones. El documento recomienda usar prefijos de proveedor y polyfills para mejorar la compatibilidad, y proporciona recursos adicionales para aprender más sobre estas
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (17)
Similar a Conoce HTML5 y CSS3
Similar a Conoce HTML5 y CSS3 (20)
Más de Marta Armada
Último
Último (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/