HTML5 y CSS3

html5 y css3 construyendo la web 2.0

¿qué es HTML5?

1. no es una sola gran cosa

2. no hay que desechar nada

3. es fácil empezar

4. ya es funcional

5. llegó para quedarse

.leaf{ height:350px; width:272px; background: #edcf17; -webkit-border-radius:55px 30px 245px 0px; -moz-border-radius:55px 30px 245px 0px; -o-border-radius:55px 30px 245px 0px; border-radius:55px 30px 245px 0px; position: absolute; opacity:0.97; -webkit-transform: rotate(0deg) translate(64px,-0.9258em); -moz-transform: rotate(0deg) translate(64px,-0.9258em); -o-transform: rotate(0deg) translate(64px,-0.9258em); transform: rotate(0deg) translate(64px,-0.9258em);}

#yellow{ z-index:-97; background:-webkit-gradient(radial, 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418));}#yellow2{ background:-webkit-gradient(radial, 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); z-index:-94; height:79px; width:255px;}#green{ background: #44A73D; background:-webkit-gradient(radial, 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); -webkit-transform: rotate(120deg) translate(60px,152px); -moz-transform: rotate(120deg) translate(60px,152px); -o-transform: rotate(120deg) translate(60px,152px); transform: rotate(120deg) translate(60px,152px); z-index:-96;}

<!DOCTYPE html><html lang="en" class=""><head>! <meta charset="UTF-8" />! <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />!! <title>inuit.css—cooler than a polar bear’s toenails</title>!! ! <link rel="stylesheet" href="css/inuit.css" />!! ! <link rel="stylesheet" href="css/style.css" />!! ! <link rel="shortcut icon" href="icon.png" />! <link rel="apple-touch-icon-precomposed" href="icon.png" /></head><body>!! !! <div id="page" class="grid grid-10">! !! ! <a href="https://twitter.com/inuitcss" title="Follow inuit.css on Twitter"><img src="img/logo.png" alt="inuit.css logo" id="logo" /></a>! !! ! <h1>Thank you for choosing <a href="http://csswizardry.com/inuit/">inuit.css</a>. Your hair looks really lovely today…</h1>! !! </div>!</body></html>

css3html5contenido presentación

https://twitter.com/inuitcss

https://twitter.com/inuitcss

http://csswizardry.com/inuit/

http://csswizardry.com/inuit/

nuevos elementos

<!DOCTYPE html>

HTML5 doctype

elementos estructurales

nos da nuevo vocabulario semántico para distintas partes de

la estructura, eliminando la necesidad de IDs y clases

Internet Explorer necesita ciertos arreglos con javascript para lograr que reconozca estos nuevos elementos

<html> <head> <title>Mokka mit Schlag </title> </head><body> <header> <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1> </header> <section> <article> <h2><a href= "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County</a></h2> <p>Yesterday I joined the Brooklyn Bird Club for our annual trip to Western New Jersey, specifically Hyper Humus, a relatively recently discovered hot spot. It 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>

<article> <h2><a href= "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list?</a></h2> <p>Seems you can now go <a href="http://www.wired.com/science/discoveries/news/ 2007/04/cone_sf">bird watching via the Internet</a>. I haven't been able to test it out yet (20 user limit apparently) but this is certainly cool. Personally, I can't imagine it replacing actually being out in the field by any small amount. On the other hand, I've always found it quite sad to meet senior birders who are no longer able to hold binoculars steady or get to the park. I can imagine this might be of some interest to them. At least one elderly birder did a big year on TV, after he could no longer get out so much. This certainly tops that.</p> </article> <nav> <a href="/blog/page/2/">« Previous Entries</a> </nav> </section>

<nav> <ul> <li><h2>Info</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2007/04/'>April 2007</a></li> <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> </nav> <footer> <p>Copyright 2007 Elliotte Rusty Harold</p> </footer> </body></html>

<html> <head> <title>Mokka mit Schlag </title> </head><body><div id="page"> <div id="header"> <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1> </div> <div id="container"> <div id="center" class="column"> <div class="post" id="post-1000572"> <h2><a href= "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County</a></h2> <div class="entry"> <p>Yesterday I joined the Brooklyn Bird Club for our annual trip to Western New Jersey, specifically Hyper Humus, a relatively recently discovered hot spot. It 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> </div> </div>

<div class="post" id="post-1000571"> <h2><a href= "/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="entry"> <p>Seems you can now go <a href="http://www.wired.com/science/discoveries/news/ 2007/04/cone_sf">bird watching via the Internet</a>. I haven't been able to test it out yet (20 user limit apparently) but this is certainly cool. Personally, I can't imagine it replacing actually being out in the field by any small amount. On the other hand, I've always found it quite sad to meet senior birders who are no longer able to hold binoculars steady or get to the park. I can imagine this might be of some interest to them. At least one elderly birder did a big year on TV, after he could no longer get out so much. This certainly tops that.</p> </div> </div>

</div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/">« Previous Entries</a> </div> <div class="alignright"></div> </div> </div>

<div id="right" class="column"> <ul id="sidebar"> <li><h2>Info</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2007/04/'>April 2007</a></li> <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>

html 4 html5

http://www.elharo.com/blog


http://www.wired.com/science/discoveries/news/






ejemplos

HTML5: <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>

http://slides.html5rocks.com



http://www.anieto2k.com/demo/canvasfirefox.html



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.html

https://mozillademos.org/demos/holo-mobile/demo.html (sólo firefox mobile)











http://html-5tutorial.com/static/demo/chrome-logo.html



.leaf{ height:350px; width:272px; background: #edcf17; -webkit-border-radius:55px 30px 245px 0px; -moz-border-radius:55px 30px 245px 0px; -o-border-radius:55px 30px 245px 0px; border-radius:55px 30px 245px 0px; position: absolute; opacity:0.97; -webkit-transform: rotate(0deg) translate(64px,-0.9258em); -moz-transform: rotate(0deg) translate(64px,-0.9258em); -o-transform: rotate(0deg) translate(64px,-0.9258em); transform: rotate(0deg) translate(64px,-0.9258em);}

#yellow{ z-index:-97; background:-webkit-gradient(radial, 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418));}#yellow2{ background:-webkit-gradient(radial, 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); z-index:-94; height:79px; width:255px;}#green{ background: #44A73D; background:-webkit-gradient(radial, 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); -webkit-transform: rotate(120deg) translate(60px,152px); -moz-transform: rotate(120deg) translate(60px,152px); -o-transform: rotate(120deg) translate(60px,152px); transform: rotate(120deg) translate(60px,152px); z-index:-96;}#red{ background: #E03e39; background:-webkit-gradient(radial, 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f)); background:-moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); -webkit-transform: rotate(-120deg) translate(206px,73px); -moz-transform: rotate(-120deg) translate(206px,73px); -o-transform: rotate(-120deg) translate(206px,73px); transform: rotate(-120deg) translate(206px,73px); z-index:-95;}

#blue_core{ width:180px; height:180px; -webkit-border-radius:180px; -moz-border-radius:180px; -o-border-radius:180px; border-radius:180px; background:#3f67bc; background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF)); background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466CC7 60%); line-height:180px; -webkit-box-shadow: 2px 12px 8px #aaa; -moz-box-shadow: 2px 12px 8px #aaa; -o-box-shadow: 2px 12px 8px #aaa; box-shadow: 2px 12px 8px #aaa; /*-webkit-transition:-webkit-transform 5s ease-out;*/}#white_shell{ width:180px; height:180px; -webkit-border-radius:180px; -moz-border-radius:180px; -o-border-radius:180px; border-radius:180px; border:15px solid white; vertical-align: middle; line-height:180px;}#colors{ -webkit-border-radius:360px; -moz-border-radius:360px; -o-border-radius:360px; border-radius:360px; padding:140px; -webkit-box-shadow: 0px 10px 15px #aaa; -moz-box-shadow: 0px 10px 15px #aaa; -o-box-shadow: 0px 10px 15px #aaa; box-shadow: 0px 10px 15px #aaa;}#trimmer{ border:25px solid white; -webkit-border-radius:370px; -moz-border-radius:370px; -o-border-radius:370px; border-radius:370px; z-index: 100; padding:140px; padding:0; margin:0; width:491px;}

color: opacidad

div { color: #f00; opacity: 1.0; }

div { color: #f00; opacity: 0.5; }

color: rgba

div { color: rgb(0,255,0); }

div { color: rgba(0,255,0,0.5); }

background-size

div { background-size: 100px 65px; }

div { background-size: 400px 65px; }

background-image

background: url(body-top.png) top left no-repeat,url(body-bottom.png) bottom left no-repeat,url(body-middle.png) left repeat-y;

border-image

border-image: url(button.png) 0 12 0 12 stretchstretch;

border-image: url(border.png) 27 27 27 27 roundround;

border-radius

border-radius: 10px;

border-top-right-radius: 10px;

http://slides.html5rocks.com/#rounded-corners



box-shadow

box-shadow: 10px 10px 10px #333;

text-overflow

text-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…

text-shadow

text-shadow: 10px 10px 10px #333;

This is sample text.

@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

http://livepage.apple.com/

http://livepage.apple.com/

transformation: rotate

transform: rotate(30deg);

transformation: scale

transform: scale(0.5,2.0);

transformation: skew

transform: skew(-30deg);

transformation: translate

transform: translate(30px, 0);

transitions

transition: all 1s ease;

http://www.nearshorenexus.com

http://slides.html5rocks.com/#css-transitions

http://www.intergraphicdesigns.com/clientes/nearshore/nexus/www/

http://www.intergraphicdesigns.com/clientes/nearshore/nexus/www/



media queries

@media (min-width: 1100px){body{margin:150px 0 0 100px;

}}

http://www.alsacreations.fr/

http://benthebodyguard.com/





APIs

http://slides.html5rocks.com/#drag-in



motores

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/



ventajas vs desventajas

http://www.findmebyip.com/litmus



http://fetchak.com/ie-css3/

recursos para ie y plantillas para iniciar html5



http://www.thewildernessdowntown.com/*ver con google chrome

http://www.thewildernessdowntown.com/

http://www.thewildernessdowntown.com/

http://www.intergraphicdesigns.com











































































































































































































































































































































































































































HTML5 y CSS3

Technology

Transcript of HTML5 y CSS3