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
330
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
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
One Size Fits None
Avatar for Swwweet swwweet
12
850
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
580

Other Decks in Programming

See All in Programming
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
710
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
660
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
110
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
5
2.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
270
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
1.3k
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
210
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
4
6.5k
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
490
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
270
20250704_教育事業におけるアジャイルなデータ基盤構築
Avatar for Uchide Hiroki(ucchi-) hanon52_
5
740
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
Avatar for takuya542 takuya542
1
12k

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
680
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k

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/