Your SlideShare is downloading. ×
Conoce HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Conoce HTML5 y CSS3

38,748
views

Published on

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

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

Published in: Technology

5 Comments
31 Likes
Statistics
Notes
  • Me encanto tu presentación como la puedo tener
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excelente presentación, les quiero dejar para futura referencia el nuevo curso de Jonathan Pineda sobre html5 y css3 en la url: http://www.html5ycss3illuminati.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • He tenido buenos resultados.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Exelente presentacion os queda todo muy claro para empezara trabajar con HTML5 y CSS3
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Funny seeing your presentation in Spanish - as I do not understand a word :-) I found it usefull anyway as I believe I understood the message though :-) An english translation would be welcome though :-)
    /Sten
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
38,748
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
962
Comments
5
Likes
31
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LA WEB SE MUEVE: CONOCE HTML5 & CSS3Javier Usobiaga BCNVisualSound 2011
  • 2. ¡HOLA!
  • 3. @htmlboy
  • 4. @martuishere
  • 5. Swwweet.com @savetheusers
  • 6. LA WEB SEMUEVE
  • 7. FUTURO
  • 8. CSS3
  • 9. http://swwweet.com/presentaciones/viajartiempo
  • 10. 5HTML5
  • 11. ¿QUÉ ES HTML5?✓Nuevos elementos, más semánticos✓Un conjunto de APIs✓Retrocompatible✓Una nueva filosofía
  • 12. ¿SE PUEDE USAR YA? SÍ pero...
  • 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. !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. CODIFICACIÓN XHTML 1.1:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5: <meta charset=utf-8>
  • 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. NUEVA ESTRUCTURA <header>
  • 18. headerheader
  • 19. NUEVA ESTRUCTURA <nav>
  • 20. navnav
  • 21. NUEVA ESTRUCTURA <article>
  • 22. article article article
  • 23. NUEVA ESTRUCTURA <section>
  • 24. sectionsection
  • 25. NUEVA ESTRUCTURA <aside>
  • 26. aside
  • 27. NUEVA ESTRUCTURA <footer>
  • 28. footer
  • 29. NUEVA ESTRUCTURA <figure>
  • 30. FIGURE/FIGCAPTION<figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption></figure>
  • 31. figure figure
  • 32. NUEVOS ELEMENTOS <video> <audio>
  • 33. video
  • 34. VIDEO<video src="video.???" > </video>
  • 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. 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. 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. SOPORTE HTML5
  • 39. SOPORTE HTML5 * * última beta
  • 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. 3CSS3
  • 42. ¿QUÉ ES CSS3?✓Nuevas posibilidades de decoración✓Menos markup✓Menos dependencia de javascript✓Mayor control
  • 43. ¿SE PUEDE USAR YA? SÍ pero...
  • 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. ¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?
  • 46. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  • 47. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  • 48. BACKGROUNDMULTIPLE BACKGROUNDS:html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top;}
  • 49. multiple background multiplebackground
  • 50. RGBa Y HSLaRGBa = RGB + alpha#foo{ background: rgba(0, 0, 0, .5);}#foo{ background: rgba(255, 0, 0, .7);}
  • 51. RGBa Y HSLaHSLa = HSL + alpha#foo{ background: hsla(324, 100%, 75%, .7);}#foo{ background: hsla(324, 100%, 25%, .7);}
  • 52. RGBaRGBa RGBa RGBa
  • 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. rgba(241, 238, 203, .7)
  • 55. rgba(5, 129, 121, .8)
  • 56. rgba(173, 165, 53, .8)
  • 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. @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. @font-face@font-face
  • 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. TEXT-SHADOWh1{ text-shadow: 3px 3px 5px black;} Doc Brownh1{ text-shadow: 5px 5px 0px blue;} Marty McFly
  • 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. text-shadowtext-shadow text-shadow
  • 64. BOX SHADOW#foo{ box-shadow: 5px 5px 10px black;}#foo{ box-shadow: inset 3px 3px 10px black;}
  • 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. box-shadowbox-shadow box-shadow
  • 67. BORDER RADIUS#foo{ border-radius: 10px;}#foo{ border-radius: 50px 0 50px 0;}
  • 68. BORDER RADIUS#foo{ border-radius: 9999px;}
  • 69. border-radiusborder-radius border-radius
  • 70. TRANSFORMS#foo{ transform: rotate(45deg);}#foo{ transform: scale(0.5);}
  • 71. TRANSFORMS#foo{ transform: skew(45deg);}#foo{ transform: translate(20px,-20px);}
  • 72. transform
  • 73. TRANSITIONS#foo{ transition: 1.5s opacity ease-in-out;}
  • 74. TRANSITIONS nav li{ width: 160px; transition: .3s width linear; } nav li:hover{ width: 220px; }
  • 75. TRANSITIONSnav li span{ transition: .6s transform ease-in-out;}nav li:hover span{ transform: rotate(360deg);}
  • 76. SOPORTE CSS3
  • 77. IE8
  • 78. RECURSOShttp://books.alistapart.com
  • 79. RECURSOShttp://swwweet.com/presentaciones/html5hoy
  • 80. RECURSOSCURSO CSS3 EN PUNT MULTIMÈDIA 15/2/2011 - 18/2/2011 19:30 - 21:30 39,50€ / 30,40€
  • 81. ¡GRACIAS!
  • 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/

×