Conoce HTML5 y CSS3

LA WEB SE MUEVE: CONOCE HTML5 & CSS3Javier Usobiaga BCNVisualSound 2011

¡HOLA!

@htmlboy

@martuishere

Swwweet.com @savetheusers

LA WEB SEMUEVE

FUTURO

http://swwweet.com/presentaciones/viajartiempo

5HTML5

¿QUÉ ES HTML5?✓Nuevos elementos, más semánticos✓Un conjunto de APIs✓Retrocompatible✓Una nueva filosofía

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

¿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

!DOCTYPEXHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML5: <!DOCTYPE html>

CODIFICACIÓN XHTML 1.1:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5: <meta charset=utf-8>

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>

NUEVA ESTRUCTURA <header>

headerheader

NUEVA ESTRUCTURA <nav>

navnav

NUEVA ESTRUCTURA <article>

article article article

NUEVA ESTRUCTURA <section>

sectionsection

NUEVA ESTRUCTURA <aside>

NUEVA ESTRUCTURA <footer>

footer

NUEVA ESTRUCTURA <figure>

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

ﬁgure ﬁgure

NUEVOS ELEMENTOS <video> <audio>

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

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+

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>

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>

SOPORTE HTML5

SOPORTE HTML5 * * última beta

SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos)

¿QUÉ ES CSS3?✓Nuevas posibilidades de decoración✓Menos markup✓Menos dependencia de javascript✓Mayor control

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

¿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,

¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

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

multiple background multiplebackground

RGBa Y HSLaRGBa = RGB + alpha#foo{ background: rgba(0, 0, 0, .5);}#foo{ background: rgba(255, 0, 0, .7);}

RGBa Y HSLaHSLa = HSL + alpha#foo{ background: hsla(324, 100%, 75%, .7);}#foo{ background: hsla(324, 100%, 25%, .7);}

RGBaRGBa RGBa RGBa

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);}

rgba(241, 238, 203, .7)

rgba(5, 129, 121, .8)

rgba(173, 165, 53, .8)

@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

@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

@font-face@font-face

@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/

TEXT-SHADOWh1{ text-shadow: 3px 3px 5px black;} Doc Brownh1{ text-shadow: 5px 5px 0px blue;} Marty McFly

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;}

text-shadowtext-shadow text-shadow

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

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);}

box-shadowbox-shadow box-shadow

BORDER RADIUS#foo{ border-radius: 10px;}#foo{ border-radius: 50px 0 50px 0;}

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

border-radiusborder-radius border-radius

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

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

transform

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

TRANSITIONS nav li{ width: 160px; transition: .3s width linear; } nav li:hover{ width: 220px; }

TRANSITIONSnav li span{ transition: .6s transform ease-in-out;}nav li:hover span{ transform: rotate(360deg);}

SOPORTE CSS3

RECURSOShttp://books.alistapart.com

RECURSOShttp://swwweet.com/presentaciones/html5hoy

RECURSOSCURSO CSS3 EN PUNT MULTIMÈDIA 15/2/2011 - 18/2/2011 19:30 - 21:30 39,50€ / 30,40€

¡GRACIAS!

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/

http://educacion.creaciondemedios.com	974
http://ladylanding.blogspot.com	254
http://idesing.me	98
http://www.afan.info	87
http://lanyrd.com	41
http://www.formaros.com	28
http://ladylanding.blogspot.com.es	26
http://ladylanding.com	23
http://landingpagesalpoder.blogspot.com	19
http://paper.li	10
http://ecuasol.blogspot.com	7
http://betabeers.com	7
http://twitter.com	7
http://ladylanding.blogspot.mx	4
http://ladylanding.blogspot.com.ar	3
https://twitter.com	3
http://feeds.feedburner.com	2
http://www.ecuasol.blogspot.com	2
http://repositorio.anforaformacion.es	2
http://copyscape.com	1
http://fernando-martin.blogspot.com	1
http://www.ladylanding.es	1
url_unknown	1

Conoce HTML5 y CSS3

by Marta Armada on Feb 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

23 Embeds 1,601

Statistics

Conoce HTML5 y CSS3 — Presentation Transcript