Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La web se mueve: conoce HTML5 y CSS3

Avatar for Swwweet Swwweet
January 25, 2012
Programming
2
350

La web se mueve: conoce HTML5 y CSS3

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

Avatar for Swwweet

Swwweet

January 25, 2012
Tweet

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
340
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.2k
Design for loading
Avatar for Swwweet swwweet
5
510
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
One Size Fits None
Avatar for Swwweet swwweet
12
860
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
710
Responsively Responsive
Avatar for Swwweet swwweet
23
1.6k
La letra con píxel entra
Avatar for Swwweet swwweet
0
1.1k
The future of code
Avatar for Swwweet swwweet
4
590

Other Decks in Programming

See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
Avatar for Kanon Fujita 874wokiite
0
550
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
420
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
630
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
アルテニア コンサル／ＩＴエンジニア向け 採用ピッチ資料
Avatar for ALTENIR altenir
0
110
testingを眺める
Avatar for matumoto matumoto
1
140
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
7
2.5k
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
170
API Platform 4.2: Redefining API Development
Avatar for Antoine Bluchet soyuka
0
140
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
320
個人開発で徳島大学生60％以上の心を掴んだアプリ、そして手放した話
Avatar for akidon0000 akidon0000
1
150

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k

Transcript

  1. LA WEB SE MUEVE: CONOCE HTML5 & CSS3 Javier Usobiaga

    BCNVisualSound 2011

  2. ¡HOLA!

  3. @htmlboy

  4. @martuishere

  5. Swwweet.com @savetheusers

  6. LA WEB SE MUEVE

  7. FUTURO

  8. None

  9. CSS 3

  10. None
  11. None

  12. http://swwweet.com/presentaciones/viajartiempo

  13. 5 HTML5

  14. 5 ¿QUÉ ES HTML5? ✓Nuevos elementos, más semánticos ✓Un conjunto

    de APIs ✓Retrocompatible ✓Una nueva filosofía
  15. None

  16. 5 SÍ pero... ¿SE PUEDE USAR YA?

  17. 5 ✓Hay que preocuparse de la retrocompatibilidad ✓Algunas tecnologías no

    están preparadas aún ✓El contenido tiene que ser siempre accesible ✓Se pueden complementar con javascript (polyfills) ¿SE PUEDE USAR YA?

  18. 5 !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. 5 CODIFICACIÓN XHTML 1.1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5:

    <meta charset=utf-8>

  20. 5 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. 5 NUEVA ESTRUCTURA <header>

  22. header header

  23. 5 NUEVA ESTRUCTURA <nav>

  24. nav nav

  25. 5 NUEVA ESTRUCTURA <article>

  26. article article article

  27. 5 NUEVA ESTRUCTURA <section>

  28. section section

  29. 5 NUEVA ESTRUCTURA <aside>

  30. aside

  31. 5 NUEVA ESTRUCTURA <footer>

  32. footer

  33. 5 NUEVA ESTRUCTURA <figure>

  34. 5 FIGURE/FIGCAPTION <figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption> </figure>

  35. figure figure

  36. 5 NUEVOS ELEMENTOS <video> <audio>

  37. video

  38. 5 VIDEO <video src="video.???" > </video>

  39. 5 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. 5 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. 5 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. 5 SOPORTE HTML5

  43. 5 SOPORTE HTML5 * * última beta

  44. 5 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. CSS3 3

  46. 3 ¿QUÉ ES CSS3? ✓Nuevas posibilidades de decoración ✓Menos markup

    ✓Menos dependencia de javascript ✓Mayor control

  47. 3 SÍ pero... ¿SE PUEDE USAR YA?

  48. 3 ✓No hay que devaluar la experiencia del usuario ✓Cuidado

    con los elementos críticos: branding, estructura... ✓Pueden ser un premio ✓Hay que utilizar “vendor prefixes”: -moz, -webkit, -ms, -o ¿SE PUEDE USAR YA?

  49. 3 ¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE

    EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?

  50. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

  51. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

  52. 3 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. 3 RGBa Y HSLa RGBa = RGB + alpha #foo{

    background: rgba(0, 0, 0, .5); } #foo{ background: rgba(255, 0, 0, .7); }

  55. 3 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. 3 RGBa Y HSLa body{ background: rgba(241, 238, 203, 0.7);

    } html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }

  58. rgba(241, 238, 203, .7)

  59. rgba(5, 129, 121, .8)

  60. rgba(173, 165, 53, .8)

  61. 3 @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. 3 @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

  63. @font-face @font-face

  64. 3 @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. 3 TEXT-SHADOW h1{ text-shadow: 3px 3px 5px black; } h1{

    text-shadow: 5px 5px 0px blue; } Doc Brown Marty McFly

  66. 3 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. 3 BOX SHADOW #foo{ box-shadow: 5px 5px 10px black; }

    #foo{ box-shadow: inset 3px 3px 10px black; }

  69. 3 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. 3 BORDER RADIUS #foo{ border-radius: 10px; } #foo{ border-radius: 50px

    0 50px 0; }

  72. 3 BORDER RADIUS #foo{ border-radius: 9999px; }

  73. border-radius border-radius border-radius

  74. 3 TRANSFORMS #foo{ transform: rotate(45deg); } #foo{ transform: scale(0.5); }

  75. 3 TRANSFORMS #foo{ transform: skew(45deg); } #foo{ transform: translate(20px,-20px); }

  76. transform

  77. 3 TRANSITIONS #foo{ transition: 1.5s opacity ease-in-out; }

  78. None

  79. 3 TRANSITIONS nav li{ width: 160px; transition: .3s width linear;

    } nav li:hover{ width: 220px; }
  80. None

  81. 3 TRANSITIONS nav li span{ transition: .6s transform ease-in-out; }

    nav li:hover span{ transform: rotate(360deg); }
  82. None

  83. 5 SOPORTE CSS3

  84. IE8

  85. RECURSOS http://books.alistapart.com

  86. RECURSOS http://swwweet.com/presentaciones/html5hoy

  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/