Your SlideShare is downloading. ×
0
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
HTML5 y CSS3
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

HTML5 y CSS3

3,795

Published on

Material de la charla: "HTML5 y CSS3" impartida por InterGraphicDESIGNS dentro del marco de la "Semana Compu" organizada por la Escuela de Computación del Instituto Tecnológico de Costa Rica. Abril …

Material de la charla: "HTML5 y CSS3" impartida por InterGraphicDESIGNS dentro del marco de la "Semana Compu" organizada por la Escuela de Computación del Instituto Tecnológico de Costa Rica. Abril 2011

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,795
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
95
Comments
0
Likes
4
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. html5 y css3 construyendo la web 2.0
  • 2. ¿qué es HTML5?
  • 3. 1. no es una sola gran cosa
  • 4. 2. no hay que desechar nada
  • 5. 3. es fácil empezar
  • 6. 4. ya es funcional
  • 7. 5. llegó para quedarse
  • 8. html5 css3 contenido presentación .leaf{ height:350px;<!DOCTYPE html> width:272px;<html lang="en" class=""> background: #edcf17;<head> -webkit-border-radius:55px 30px 245px 0px;! <meta charset="UTF-8" /> -moz-border-radius:55px 30px 245px 0px;! <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> -o-border-radius:55px 30px 245px 0px;! border-radius:55px 30px 245px 0px;! <title>inuit.css&mdash;cooler than a polar bear&rsquo;s toenails</title> position: absolute;! opacity:0.97;! <!-- The framework --> -webkit-transform: rotate(0deg) translate(64px,-0.9258em);! <link rel="stylesheet" href="css/inuit.css" /> -moz-transform: rotate(0deg) translate(64px,-0.9258em);! -o-transform: rotate(0deg) translate(64px,-0.9258em);! <!-- Your extension --> transform: rotate(0deg) translate(64px,-0.9258em);! <link rel="stylesheet" href="css/style.css" /> }!! <!-- Favicons and the like --> #yellow{! <link rel="shortcut icon" href="icon.png" /> z-index:-97;! <link rel="apple-touch-icon-precomposed" href="icon.png" /> background:-webkit-gradient(radial,</head> 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418));<body> }! #yellow2{! <!-- YOU CAN START WORKING IN THIS FILE RIGHT AWAY, JUST EDIT BELOW --> background:-webkit-gradient(radial,! 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418));! <div id="page" class="grid grid-10"> z-index:-94;! ! height:79px;! ! <a href="https://twitter.com/inuitcss" title="Follow inuit.css on Twitter"><img src="img/ width:255px;logo.png" alt="inuit.css logo" id="logo" /></a> }! ! #green{! ! <h1>Thank you for choosing <a href="http://csswizardry.com/inuit/">inuit.css</a>. Your background: #44A73D;hair looks really lovely today&hellip;</h1> background:-webkit-gradient(radial,! ! 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f));! </div> background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%);! -webkit-transform: rotate(120deg) translate(60px,152px);</body> -moz-transform: rotate(120deg) translate(60px,152px);</html> -o-transform: rotate(120deg) translate(60px,152px); transform: rotate(120deg) translate(60px,152px); z-index:-96; }
  • 9. nuevos elementos
  • 10. HTML5 doctype<!DOCTYPE html>
  • 11. elementos estructurales nos da nuevo vocabulariosemántico para distintas partes de la estructura, eliminando la necesidad de IDs y clasesInternet Explorer necesita ciertos arreglos con javascript para lograr que reconozca estos nuevos elementos
  • 12. html 4 html5 <html><html> <head> <head> <title>Mokka mit Schlag </title> <title>Mokka mit Schlag </title> </head> </head> <body><body> <header><div id="page"> <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1> <div id="header"> </header> <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1> <section> </div> <article> <div id="container"> <h2><a href= <div id="center" class="column"> "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> <div class="post" id="post-1000572"> Spring Comes (and Goes) in Sussex County</a></h2> <h2><a href= "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> <p>Yesterday I joined the Brooklyn Bird Club for our Spring Comes (and Goes) in Sussex County</a></h2> annual trip to Western New Jersey, specifically Hyper Humus, a relatively recently discovered hot spot. It <div class="entry"> started out as a nice winter morning when we arrived at <p>Yesterday I joined the Brooklyn Bird Club for our the site at 7:30 A.M., progressed to Spring around 10:00 annual trip to Western New Jersey, specifically Hyper A.M., and reached early summer by 10:15. </p> Humus, a relatively recently discovered hot spot. It </article> started out as a nice winter morning when we arrived at the site at 7:30 A.M., progressed to Spring around 10:00 A.M., and reached early summer by 10:15. </p> <article> </div> <h2><a href= </div> "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list?</a></h2> <div class="post" id="post-1000571"> <p>Seems you can now go <a <h2><a href= href="http://www.wired.com/science/discoveries/news/ "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> 2007/04/cone_sf">bird watching via the Internet</a>. I But does it count for your life list?</a></h2> havent been able to test it out yet (20 user limit apparently) but this is certainly cool. <div class="entry"> Personally, I cant imagine it replacing <p>Seems you can now go <a actually being out in the field by any small amount. href="http://www.wired.com/science/discoveries/news/ On the other hand, Ive always found it quite 2007/04/cone_sf">bird watching via the Internet</a>. I sad to meet senior birders who are no longer able to havent been able to test it out yet (20 user hold binoculars steady or get to the park. I can limit apparently) but this is certainly cool. imagine this might be of some interest to them. At Personally, I cant imagine it replacing least one elderly birder did a big year on TV, after actually being out in the field by any small amount. he could no longer get out so much. This certainly On the other hand, Ive always found it quite tops that.</p> sad to meet senior birders who are no longer able to </article> hold binoculars steady or get to the park. I can <nav> imagine this might be of some interest to them. At <a href="/blog/page/2/">&laquo; Previous Entries</a> least one elderly birder did a big year on TV, after </nav> he could no longer get out so much. This certainly </section> tops that.</p> </div> <nav> </div> <ul> <li><h2>Info</h2> </div> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <div class="navigation"> <li><a href="/blog/todo-list/">Todo List</a></li> <div class="alignleft"> </ul></li> <a href="/blog/page/2/">&laquo; Previous Entries</a> <li><h2>Archives</h2> </div> <ul> <div class="alignright"></div> <li><a href=/blog/2007/04/>April 2007</a></li> </div> <li><a href=/blog/2007/03/>March 2007</a></li> </div> <li><a href=/blog/2007/02/>February 2007</a></li> <li><a href=/blog/2007/01/>January 2007</a></li> <div id="right" class="column"> </ul> <ul id="sidebar"> </li> <li><h2>Info</h2> </ul> <ul> </nav> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <footer> <li><a href="/blog/todo-list/">Todo List</a></li> <p>Copyright 2007 Elliotte Rusty Harold</p> </ul></li> </footer> <li><h2>Archives</h2> <ul> </body> <li><a href=/blog/2007/04/>April 2007</a></li> </html> <li><a href=/blog/2007/03/>March 2007</a></li> <li><a href=/blog/2007/02/>February 2007</a></li> <li><a href=/blog/2007/01/>January 2007</a></li> </ul> </li> </ul> </div> <div id="footer"> <p>Copyright 2007 Elliotte Rusty Harold</p> </div></div></body></html>
  • 13. ejemplosHTML5: <aside></aside>HTML4: <div class="aside"></div>HTML5: <audio src="xyz.ogg" autoplay controls></audio>HTML4: <object type="application/ogg"data="xyz.ogg"><param name="src" value="xyz.ogg"></object>
  • 14. http://slides.html5rocks.com
  • 15. http://www.anieto2k.com/demo/canvasfirefox.html
  • 16. deg_cola_6.addColorStop(1,rgba(254,249,149,0)); ! ctx.lineTo(170,327);function draw(){ ! ctx.fillStyle = mar;/*0.1*/ ! ctx.bezierCurveTo(230,430,360,470,465,425); ! var deg_cola_7 = ctx.createLinearGradient(640,240,590,500); ! ctx.quadraticCurveTo(443,305,452,292); var canvas = document.getElementById(tutorial); ! ctx.arc(390,278,228,0,Math.PI*2,true); ! ctx.fill(); ! deg_cola_7.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(448,287,445,293); if (canvas.getContext){ ! ctx.fill(); ! ctx.beginPath(); ! deg_cola_7.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.bezierCurveTo(436,296,430,274,447,260); var ctx = canvas.getContext(2d); ! //continentes ! ctx.fillStyle = deg_lomo_2; ! deg_cola_7.addColorStop(1,rgba(254,249,149,0)); ! ctx.lineTo(446.3,257);! //degradados ! ctx.beginPath(); ! ctx.moveTo(415,477); ! var deg_cola_8 = ctx.createLinearGradient(640,240,590,500);! var contsupder = ctx.createLinearGradient(370,160,470,230); ! ctx.fillStyle = "rgba(50, 130, 600, 1)";/*0.3*/ ! ctx.bezierCurveTo(430,266,408,235,419,227); ! ctx.bezierCurveTo(360,462,345,455,295,400); ! deg_cola_8.addColorStop(0,rgba(254,249,149,1)); ! ctx.bezierCurveTo(407,221,411,198,440,214);! contsupder.addColorStop(0,#0F80BC); ! //continente superior izquierdo ! ctx.lineTo(275,415); ! deg_cola_8.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.lineTo(440,220);! contsupder.addColorStop(1,#000C36); ! ctx.beginPath(); ! ctx.bezierCurveTo(310,445,342,470,415,477); ! deg_cola_8.addColorStop(1,rgba(222,92,1,0.9)); ! ctx.lineTo(446,216);! var contsupizq = ctx.createLinearGradient(390,50,210,120); ! ctx.fillStyle = contsupizq; ! ctx.fill(); ! var deg_cola_9 = ctx.createLinearGradient(580,320,350,480); ! ctx.lineTo(452,223);! contsupizq.addColorStop(0,#0F80BC); ! ctx.moveTo(390,50); ! ctx.beginPath(); ! deg_cola_9.addColorStop(0,rgba(254,249,149,1)); ! ctx.lineTo(456,223);! contsupizq.addColorStop(1,#053A74); ! ctx.lineTo(370,59.5); ! ctx.fillStyle = deg_lomo_3; ! deg_cola_9.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.bezierCurveTo(465,215,445,200,459,193);! var contgrande = ctx.createLinearGradient(390,160,550,370); ! ctx.lineTo(358,80); ! ctx.moveTo(308,466); ! deg_cola_9.addColorStop(1,rgba(185,18,13,0.9)); ! ctx.bezierCurveTo(471,206,471,188,482,200);! contgrande.addColorStop(0,#084F85); ! ctx.bezierCurveTo(356,82,361,89,366,85); ! ctx.bezierCurveTo(280,438,260,410,250,387); ! var deg_oreja_izq = ctx.createLinearGradient(190,120,220,180);! contgrande.addColorStop(1,#00032E); ! ctx.bezierCurveTo(359,99,368,102,356,120); ! ctx.bezierCurveTo(493,208,496,215,492,217); ! ctx.lineTo(210,375); ! deg_oreja_izq.addColorStop(0,rgba(249,189,95,1)); ! ctx.bezierCurveTo(497,217,496,226,491,226);! var minicontdergrande = ctx.createLinearGradient(530,200,571,200); ! ctx.lineTo(348,137); ! ctx.bezierCurveTo(240,426,274,450,308,466); ! deg_oreja_izq.addColorStop(0.2,rgba(245,167,75,1)); ! ctx.quadraticCurveTo(486,230,492,232);! minicontdergrande.addColorStop(0,#011F64); ! ctx.bezierCurveTo(347,138,340,128,340,138); ! ctx.fill(); ! deg_oreja_izq.addColorStop(0.7,rgba(174,42,5,1)); ! ctx.quadraticCurveTo(498,228,504,233);! minicontdergrande.addColorStop(1,#001149); ! ctx.bezierCurveTo(334,140,332,138,327,134); ! ctx.beginPath(); ! deg_oreja_izq.addColorStop(1,rgba(174,42,5,1)); ! ctx.quadraticCurveTo(503,240,498,238);! var contizqgrande = ctx.createLinearGradient(330,354,348,373); ! ctx.lineTo(280,150); ! ctx.fillStyle = deg_lomo_4; ! var deg_cabeza = ctx.createLinearGradient(200,125,200,159); ! ctx.quadraticCurveTo(498,234,495,237);! contizqgrande.addColorStop(0,#000721); ! ctx.lineTo(220,150); ! ctx.moveTo(260,470); ! deg_cabeza.addColorStop(0,rgba(255,255,255,0.8)); ! ctx.bezierCurveTo(498,250,506,247,501,255);! contizqgrande.addColorStop(1,#001250); ! ctx.lineTo(216,130); ! ctx.bezierCurveTo(230,430,220,395,215,360); ! deg_cabeza.addColorStop(1,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(508,257,509,261);! var mar = ctx.createLinearGradient(210,50,210,390); ! ctx.bezierCurveTo(260,82,310,53,390,50); ! ctx.lineTo(175,365); ! var deg_oreja_der = ctx.createLinearGradient(350,110,290,160); ! ctx.quadraticCurveTo(514,265,520,258);! mar.addColorStop(0,#67C5D5); ! ctx.fill(); ! ctx.bezierCurveTo(195,408,223,445,260,470); ! deg_oreja_der.addColorStop(0,rgba(254,242,190,1)); ! ctx.quadraticCurveTo(546,245,524,264);! mar.addColorStop(0.5,#5BA5C4); ! //continente superior derecho ! ctx.fill(); ! deg_oreja_der.addColorStop(0.25,rgba(244,176,82,1)); ! ctx.bezierCurveTo(530,261,550,244,534,267);! mar.addColorStop(1,#211375);! ! ctx.beginPath(); ! ctx.beginPath(); ! deg_oreja_der.addColorStop(1,rgba(222,114,16,1)); ! ctx.quadraticCurveTo(539,276,530,287);! var cristal = ctx.createLinearGradient(390,60,390,180); ! ctx.fillStyle = contsupder;/*0.3*/ ! ctx.fillStyle = deg_lomo_3; ! var deg_rojo_lomo = ctx.createLinearGradient(150,260,380,500); ! ctx.quadraticCurveTo(530,296,521,300);! cristal.addColorStop(0,rgba(255,255,255,0.6)); ! ctx.moveTo(394,50); ! ctx.moveTo(223,419); ! deg_rojo_lomo.addColorStop(0,rgba(179,0,0,1)); ! ctx.quadraticCurveTo(520,295,512,300);! cristal.addColorStop(0.6,rgba(255,255,255,0.3)); ! ctx.quadraticCurveTo(391,55,397,65); ! ctx.bezierCurveTo(230,430,205,390,211,362); ! deg_rojo_lomo.addColorStop(0.9,rgba(186,19,4,1)); ! ctx.bezierCurveTo(523,305,524,312,515,323);! cristal.addColorStop(0.95,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(395,72,398,74); ! ctx.lineTo(183,342); ! deg_rojo_lomo.addColorStop(1,rgba(186,19,4,0.2)); ! ctx.quadraticCurveTo(517,339,509,337);! var cachetepeludo = ctx.createLinearGradient(250,260,300,380); ! ctx.quadraticCurveTo(420,82,418.5,89); ! ctx.bezierCurveTo(188,380,205,396,223,419); ! var deg_lomo_1 = ctx.createLinearGradient(460,440,170,330); ! ctx.quadraticCurveTo(511,347,500,343);! cachetepeludo.addColorStop(0,rgba(150,18,3,1)); ! ctx.quadraticCurveTo(419,92,414,92); ! ctx.fill(); ! deg_lomo_1.addColorStop(0,rgba(255,255,255,0.2)); ! ctx.quadraticCurveTo(493,340,498,348);! cachetepeludo.addColorStop(0.5,rgba(193,49,1,1)); ! ctx.quadraticCurveTo(409,89,411,95); ! ctx.beginPath(); ! deg_lomo_1.addColorStop(0.3,rgba(222,114,16,1)); ! ctx.quadraticCurveTo(504,354,500,360);! cachetepeludo.addColorStop(1,rgba(228,95,7,0)); ! ctx.quadraticCurveTo(422,100,411,100); ! ctx.fillStyle = deg_lomo_3; ! deg_lomo_1.addColorStop(1,rgba(222,114,16,1)); ! ctx.quadraticCurveTo(492,362,495,352);! var hocicobase = ctx.createLinearGradient(315,0,380,0); ! ctx.lineTo(420,107); ! ctx.moveTo(180,390); ! var deg_lomo_2 = ctx.createLinearGradient(460,440,170,330); ! ctx.bezierCurveTo(476,365,493,367,479,370);! hocicobase.addColorStop(0,rgba(173,39,5,1)); ! ctx.lineTo(417,112); ! ctx.bezierCurveTo(177,320,178,320,186,300); ! deg_lomo_2.addColorStop(0,rgba(255,255,255,0.2)); ! ctx.quadraticCurveTo(485,365,480,380);! hocicobase.addColorStop(0.4,rgba(237,85,2,1)); ! ctx.bezierCurveTo(400,115,449,124,412,124); ! ctx.lineTo(166,260); ! deg_lomo_2.addColorStop(0.3,rgba(222,114,16,1)); ! ctx.lineTo(481,387);! hocicobase.addColorStop(1,rgba(237,85,2,1)); ! ctx.lineTo(409.5,127.5); ! ctx.bezierCurveTo(160,320,162,320,180,390); ! deg_lomo_2.addColorStop(1,rgba(222,114,16,1)); ! ctx.fill();! var blancohocico = ctx.createLinearGradient(320,220,340,210); ! ctx.lineTo(416,135); ! ctx.fill(); ! var deg_lomo_3 = ctx.createLinearGradient(340,440,170,330); ! //isla a la derecha del continente grande! blancohocico.addColorStop(0,rgba(242,199,171,1)); ! ctx.lineTo(422,140); ! ctx.beginPath(); ! deg_lomo_3.addColorStop(0,rgba(232,210,100,0.4)); ! ctx.beginPath();! blancohocico.addColorStop(1,rgba(255,255,204,1)); ! ctx.lineTo(437,135); ! ctx.fillStyle = deg_lomo_3; ! deg_lomo_3.addColorStop(0.5,rgba(222,114,16,1)); ! ctx.fillStyle = minicontdergrande;! var sombrahocico = ctx.createLinearGradient(335,0,380,0); ! ctx.lineTo(449,128.8); ! ctx.moveTo(170,269); ! deg_lomo_3.addColorStop(1,rgba(222,114,16,1)); ! ctx.moveTo(560,222);! sombrahocico.addColorStop(0,rgba(0,0,0,0.1)); ! ctx.bezierCurveTo(452,130,447,124,455,125); ! ctx.bezierCurveTo(155,286,154,297,151,310); ! var deg_lomo_4 = ctx.createLinearGradient(340,440,170,330); ! ctx.bezierCurveTo(556,220,554,226,548,222);! sombrahocico.addColorStop(1,rgba(0,0,0,0.01)); ! ctx.lineTo(461,127); ! ctx.lineTo(149,280); ! deg_lomo_4.addColorStop(0,rgba(255,255,255,0.3)); ! ctx.quadraticCurveTo(546,220,547,226);! var puntahocico = ctx.createLinearGradient(367,181.5,381,196); ! ctx.lineTo(477,135.5); ! ctx.lineTo(152,266); ! deg_lomo_4.addColorStop(0.5,rgba(222,114,16,0.6)); ! ctx.quadraticCurveTo(544,225,546,227);! puntahocico.addColorStop(0,rgba(133,142,141,1)); ! ctx.lineTo(479,138.5); ! ctx.fill(); ! deg_lomo_4.addColorStop(1,rgba(222,114,16,0)); ! ctx.quadraticCurveTo(549.5,226,551,229);! puntahocico.addColorStop(0.3,rgba(133,142,141,1)); ! ctx.quadraticCurveTo(472,140,479,155); ! //picos blancos del lomo ! var deg_lomo_picos_blancos = ctx.createLinearGradient(263,145,190,190); ! ctx.quadraticCurveTo(545,226,542,233);! puntahocico.addColorStop(1,rgba(0,0,0,1)); ! ctx.lineTo(483,157); ! ctx.beginPath(); ! deg_lomo_picos_blancos.addColorStop(0,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(540,230,539,232);! var sombra_blanca_pata = ctx.createLinearGradient(440,340,380,310); ! ctx.quadraticCurveTo(482.5,153,487,154); ! ctx.fillStyle = deg_lomo_picos_blancos; ! deg_lomo_picos_blancos.addColorStop(0.5,rgba(255,255,255,0.3)); ! ctx.lineTo(538,230);! sombra_blanca_pata.addColorStop(0,rgba(243,248,155,1)); ! ctx.bezierCurveTo(492,154,485,162,489,160); ! ctx.moveTo(263,145); ! deg_lomo_picos_blancos.addColorStop(1,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(528,232,533,238.5);! sombra_blanca_pata.addColorStop(1,rgba(243,248,155,0)); ! ctx.quadraticCurveTo(488,165,498,166); ! ctx.bezierCurveTo(250,148,234,160,233,183); ! var deg_lomo_picos_blancos_1 = ctx.createLinearGradient(175,180,175,210); ! ctx.bezierCurveTo(540,234,541,240,536,242);! var sombra_pata = ctx.createLinearGradient(420,335,300,380); ! ctx.quadraticCurveTo(498,169,502,169); ! ctx.bezierCurveTo(250,155,250,160,263,145); ! deg_lomo_picos_blancos_1.addColorStop(0,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(546,247,547,240);! sombra_pata.addColorStop(0,rgba(142,15,1,0.3)); ! ctx.quadraticCurveTo(503,171,506,174); ! ctx.fill(); ! deg_lomo_picos_blancos_1.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(546,236);! sombra_pata.addColorStop(1,rgba(142,15,1,1)); ! ctx.quadraticCurveTo(506.5,186,508,172); ! ctx.beginPath() ! var deg_lomo_picos_blancos_2 = ctx.createLinearGradient(160,200,160,240); ! ctx.lineTo(548,234);! //degradados amarillos de la cola ! ctx.bezierCurveTo(515,172,513,165,514,161); ! ctx.beginPath(); ! deg_lomo_picos_blancos_2.addColorStop(0,rgba(255,255,255,0)); ! ctx.lineTo(548,232);! var deg_cola_1 = ctx.createLinearGradient(445,85,555,140); ! ctx.quadraticCurveTo(520,154,518,163); ! ctx.fillStyle = deg_lomo_picos_blancos_4; ! deg_lomo_picos_blancos_2.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(554,232);! deg_cola_1.addColorStop(0,rgba(254,249,149,1)); ! ctx.bezierCurveTo(526,168,536.5,169,540,160); ! ctx.moveTo(173,235); ! var deg_lomo_picos_blancos_3 = ctx.createLinearGradient(160,240,160,320); ! ctx.quadraticCurveTo(560,232,562,226);! deg_cola_1.addColorStop(0.5,rgba(254,254,37,1)); ! ctx.lineTo(560,140); ! ctx.bezierCurveTo(167,244,162,253,159,263); ! deg_lomo_picos_blancos_3.addColorStop(0,rgba(255,255,255,0)); ! ctx.fill();! deg_cola_1.addColorStop(1,rgba(254,249,149,0)); ! ctx.lineTo(531,99); ! ctx.bezierCurveTo(158,252,158,245,161,231); ! deg_lomo_picos_blancos_3.addColorStop(0.5,rgba(255,255,255,0.3)); ! //parte de abajo continente izquierdo! var deg_cola_2 = ctx.createLinearGradient(445,85,600,200); ! ctx.bezierCurveTo(487,66,449,53,394,50); ! ctx.fill(); ! deg_lomo_picos_blancos_3.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.beginPath();! deg_cola_2.addColorStop(0,rgba(254,249,149,1)); ! ctx.fill(); ! ctx.beginPath(); ! var deg_lomo_picos_blancos_4 = ctx.createLinearGradient(160,230,160,255); ! ctx.fillStyle = contizqgrande;! deg_cola_2.addColorStop(0.5,rgba(254,254,37,1)); ! //isla entre continentes derecho e izquierdo ! ctx.fillStyle = deg_lomo_picos_blancos_2; ! deg_lomo_picos_blancos_4.addColorStop(0,rgba(255,255,255,0)); ! ctx.moveTo(320,360);! deg_cola_2.addColorStop(1,rgba(247,151,8,1)); ! ctx.moveTo(401,120); ! ctx.moveTo(180,200); ! deg_lomo_picos_blancos_4.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(320,410);! var deg_cola_3 = ctx.createLinearGradient(445,85,600,210); ! ctx.quadraticCurveTo(408,128,404,133); ! ctx.bezierCurveTo(173,208,166,217,160,226); ! var deg_lomo_picos_blancos_5 = ctx.createLinearGradient(190,245,190,275); ! ctx.lineTo(395,407);! deg_cola_3.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(413,138,408,140.5); ! ctx.bezierCurveTo(161,219,163,208,167,198); ! deg_lomo_picos_blancos_5.addColorStop(0,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(388,404,390,395.5);! deg_cola_3.addColorStop(0.5,rgba(254,254,37,1)); ! ctx.quadraticCurveTo(410,155,388,154); ! ctx.fill(); ! deg_lomo_picos_blancos_5.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.quadraticCurveTo(384,399,383,395);! deg_cola_3.addColorStop(1,rgba(254,249,149,0)); ! ctx.quadraticCurveTo(396,148,390,143); ! ctx.beginPath(); ! var deg_lomo_picos_blancos_6 = ctx.createLinearGradient(180,280,180,320); ! ctx.quadraticCurveTo(392,385,381,380); http://www.anieto2k.com/demo/canvasfirefox.html! var deg_cola_4 = ctx.createLinearGradient(598,130,590,265); ! ctx.quadraticCurveTo(378,155,375,140); ! ctx.fillStyle = deg_lomo_picos_blancos_5; ! deg_lomo_picos_blancos_6.addColorStop(0,rgba(255,255,255,0)); ! ctx.quadraticCurveTo(385,373,378,370);! deg_cola_4.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(386,132,389,134); ! ctx.moveTo(209,247); ! deg_lomo_picos_blancos_6.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(380,360);! deg_cola_4.addColorStop(0.5,rgba(254,254,37,1)); ! ctx.quadraticCurveTo(387,129,396,130); ! ctx.bezierCurveTo(205,258,206,267,208,277); ! //circulo grande ! ! ctx.fill();! deg_cola_4.addColorStop(1,rgba(254,249,149,0)); ! ctx.quadraticCurveTo(395,125,401,120); ! ctx.bezierCurveTo(197,270,195,261,194,250); ! //ctx.beginPath(); ! //cristalizado! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.fill(); ! ctx.fill(); ! ctx.fillStyle = "rgba(0, 0, 100, 1)";/*0.1*/ ! ctx.beginPath();! deg_cola_5.addColorStop(0,rgba(254,249,149,1)); ! //continente grande del centro ! ctx.beginPath(); ! ctx.arc(390,278,232,0,Math.PI*2,true); ! ctx.fillStyle = cristal;! deg_cola_5.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.beginPath(); ! ctx.fillStyle = deg_lomo_picos_blancos_6; ! ctx.fill(); ! ctx.moveTo(390,60);! deg_cola_5.addColorStop(1,rgba(254,249,149,0)); ! ctx.fillStyle = contgrande; ! ctx.moveTo(200,280); ! //2 circulo grande ! ctx.bezierCurveTo(321.5,60,266,95,266,138);! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.moveTo(452,405); ! ctx.bezierCurveTo(198,290,197,303,200,320); ! ctx.beginPath(); ! ctx.bezierCurveTo(266,181,321.5,216,390,216);! deg_cola_6.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(443,395,427,397); ! ctx.bezierCurveTo(190,307,187,290,188,280); x.fillStyle = deg_lomo_picos_blancos; ! ctx.bezierCurveTo(445.5,216,514,181,514,138);! deg_cola_4.addColorStop(1,rgba(254,249,149,0)); ! ctx.quadraticCurveTo(413,392,432,390.5); ! ctx.fill(); ! ctx.moveTo(243,155); ! ctx.bezierCurveTo(514,95,445.5,60,390,60);! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.lineTo(420,384); ! ctx.beginPath(); ! ctx.bezierCurveTo(227,154,208,170,208,186); ! ctx.fill();! deg_cola_5.addColorStop(0,rgba(254,249,149,1)); ! ctx.lineTo(412,385); ! ctx.strokeStyle = "rgb(0,0,0)"; ! ctx.bezierCurveTo(218,174,230,160,243,155); ! ! //cola y lomo! deg_cola_5.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.quadraticCurveTo(405,383,407,381); ! //ctx.moveTo(700,500); ! ctx.fill(); ! ! ctx.fillStyle = "rgba(222, 115, 27, 1)";/*0.1*/! deg_cola_5.addColorStop(1,rgba(254,249,149,0)); ! ctx.quadraticCurveTo(385,384,401,378); ! ctx.arc(700,500,15,0,Math.PI*2,true); ! ctx.beginPath(); ! ! ctx.beginPath();! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.quadraticCurveTo(401,374,405,372); ! ctx.stroke(); ! ctx.fillStyle = deg_lomo_picos_blancos; ! ! ctx.moveTo(445,87);! deg_cola_6.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(402,365,411,360); ! ctx.font="24px Arial"; ! ctx.moveTo(235,139); ! ! ctx.bezierCurveTo(530,85,572,108,600,165);! ! deg_cola_4.addColorStop(1,rgba(254,249,149,0)); ! ctx.quadraticCurveTo(407,355,410,350); ! ctx.strokeText("R",691.5,509);! ! ! ctx.bezierCurveTo(205,148,185,170,187,184); ! ! ctx.bezierCurveTo(596,135,593,132,590,124);! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.lineTo(431,318); } ! ctx.bezierCurveTo(215,155,200,170,235,139); ! ! ctx.bezierCurveTo(620,155,626,195,632,255);! deg_cola_5.addColorStop(0,rgba(254,249,149,1)); ! ctx.quadraticCurveTo(440,319,446,320); ! else { ! ctx.fill(); ! ! ctx.bezierCurveTo(635,225,635,225,637,220);! deg_cola_5.addColorStop(0.3,rgba(254,254,37,1)); ! ctx.quadraticCurveTo(446,312,460,314); ! document.write("Su navegador no soporta esta ! ctx.beginPath(); ! ! ctx.bezierCurveTo(645,465,495,520,400,525);! deg_cola_5.addColorStop(1,rgba(254,249,149,0)); ! ctx.lineTo(460,319); tecnologia"); ! ctx.fillStyle = deg_lomo_picos_blancos_1; ! ! ctx.bezierCurveTo(235,528,168,420,150,310);! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.quadraticCurveTo(449,313,449,303); ! } ! ctx.moveTo(195,180); ! ! ctx.bezierCurveTo(148,317,148,317,147,331);! deg_cola_6.addColorStop(0,rgba(254,249,149,1)); }
  • 17. canvas demos http://www.nevermindthebullets.com/strip.html#1-1 http://mrdoob.com/projects/chromeexperiments/ball_pool/ https://mozillademos.org/demos/marblerun/demo.html https://mozillademos.org/demos/flight-of-the-navigator/demo.htmlhttps://mozillademos.org/demos/holo-mobile/demo.html (sólo firefox mobile)
  • 18. css3
  • 19. http://html-5tutorial.com/static/demo/chrome-logo.html
  • 20. .leaf{ #blue_core{ height:350px; width:180px; width:272px; height:180px; background: #edcf17; -webkit-border-radius:180px; -webkit-border-radius:55px 30px 245px 0px; -moz-border-radius:180px; -moz-border-radius:55px 30px 245px 0px; -o-border-radius:180px; -o-border-radius:55px 30px 245px 0px; border-radius:180px; border-radius:55px 30px 245px 0px; background:#3f67bc; position: absolute; background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF)); opacity:0.97; background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466CC7 60%); -webkit-transform: rotate(0deg) translate(64px,-0.9258em); line-height:180px; -moz-transform: rotate(0deg) translate(64px,-0.9258em); -webkit-box-shadow: 2px 12px 8px #aaa; -o-transform: rotate(0deg) translate(64px,-0.9258em); -moz-box-shadow: 2px 12px 8px #aaa; transform: rotate(0deg) translate(64px,-0.9258em); -o-box-shadow: 2px 12px 8px #aaa;} box-shadow: 2px 12px 8px #aaa; /*-webkit-transition:-webkit-transform 5s ease-out;*/#yellow{ } z-index:-97; #white_shell{ background:-webkit-gradient(radial, width:180px; 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418)); height:180px;} -webkit-border-radius:180px;#yellow2{ -moz-border-radius:180px; background:-webkit-gradient(radial, -o-border-radius:180px; 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); border-radius:180px; z-index:-94; border:15px solid white; height:79px; vertical-align: middle; width:255px; line-height:180px;} }#green{ #colors{ background: #44A73D; -webkit-border-radius:360px; background:-webkit-gradient(radial, -moz-border-radius:360px; 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); -o-border-radius:360px; background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); border-radius:360px; -webkit-transform: rotate(120deg) translate(60px,152px); padding:140px; -moz-transform: rotate(120deg) translate(60px,152px); -webkit-box-shadow: 0px 10px 15px #aaa; -o-transform: rotate(120deg) translate(60px,152px); -moz-box-shadow: 0px 10px 15px #aaa; transform: rotate(120deg) translate(60px,152px); -o-box-shadow: 0px 10px 15px #aaa; z-index:-96; box-shadow: 0px 10px 15px #aaa;} }#red{ #trimmer{ background: #E03e39; border:25px solid white; background:-webkit-gradient(radial, -webkit-border-radius:370px; 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f)); -moz-border-radius:370px; background:-moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); -o-border-radius:370px; -webkit-transform: rotate(-120deg) translate(206px,73px); border-radius:370px; -moz-transform: rotate(-120deg) translate(206px,73px); z-index: 100; -o-transform: rotate(-120deg) translate(206px,73px); padding:140px; transform: rotate(-120deg) translate(206px,73px); padding:0; z-index:-95; margin:0;} width:491px; }
  • 21. color: opacidaddiv { color: #f00; opacity: 1.0; }div { color: #f00; opacity: 0.5; }
  • 22. color: rgbadiv { color: rgb(0,255,0); }div { color: rgba(0,255,0,0.5); }
  • 23. background-sizediv { background-size: 100px 65px; }div { background-size: 400px 65px; }
  • 24. background-imagebackground: url(body-top.png) top left no-repeat,url(body-bottom.png) bottom left no-repeat,url(body-middle.png) left repeat-y;
  • 25. border-imageborder-image: url(button.png) 0 12 0 12 stretchstretch;border-image: url(border.png) 27 27 27 27 roundround;
  • 26. border-radius border-radius: 10px;border-top-right-radius: 10px; http://slides.html5rocks.com/#rounded-corners
  • 27. box-shadowbox-shadow: 10px 10px 10px #333;
  • 28. text-overflowtext-overflow: ellipsis;Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam purus nunc, auctor et accumsan ut, aliquamvel leo. Quisque dignissim tincidunt rhoncus. Duissed velit rutrum lorem rutrum faucibus. Nam tincidunteros at arcu vestibulum egestas. Donec fringilla,turpis in auctor luctus, orci orci vestibulum lacus,a tristique felis erat non diam. Morbi dolor massa,elementum ac iaculis quis, iaculis sed neque. Aliquamerat volutpat. Aliquam porttitor auctor massa sitamet ultrices. Maecenas quis nunc nibh, sit amethendrerit leo. Donec a massa eget velit consecteturfermentum aliquet et eros. Vestibulum volutpat, estvitae dapibus congue, nibh augue vehicula lacutus es…
  • 29. text-shadowtext-shadow: 10px 10px 10px #333; This is sample text.
  • 30. @font-face@font-face { font-family: Helvy; src: url(MgOpenModernaBold.ttf); font-weight: bold; font-style: normal;}p.specialFont { font-family: Helvy, sans-serif; } http://www.fontsquirrel.com/fontface/generator
  • 31. transformation: rotate transform: rotate(30deg);
  • 32. transformation: scale transform: scale(0.5,2.0);
  • 33. transformation: skew transform: skew(-30deg);
  • 34. transformation: translate transform: translate(30px, 0);
  • 35. transitions transition: all 1s ease;http://slides.html5rocks.com/#css-transitions http://www.nearshorenexus.com
  • 36. media queries@media (min-width: 1100px){ body{ margin:150px 0 0 100px;}} http://www.alsacreations.fr/ http://benthebodyguard.com/
  • 37. APIshttp://slides.html5rocks.com/#drag-in
  • 38. motores
  • 39. prefijos:-webkit -moz x -webkit -o -webkit-box-shadow:2px 2px 5px #666; -moz-box-shadow:2px 2px 5px #666; -o-box-shadow:2px 2px 5px #666; box-shadow:2px 2px 5px #666; http://prefixmycss.com/
  • 40. ventajas vs desventajas
  • 41. http://www.findmebyip.com/litmus
  • 42. recursos para ie y plantillas para iniciar html5 http://fetchak.com/ie-css3/
  • 43. http://www.thewildernessdowntown.com/ *ver con google chrome

×