La web se mueve: conoce HTML5 y CSS3

LA WEB SE MUEVE: CONOCE HTML5 & CSS3 Javier Usobiaga
BCNVisualSound 2011

¡HOLA!

@htmlboy

@martuishere

Swwweet.com @savetheusers

LA WEB SE MUEVE

FUTURO

http://swwweet.com/presentaciones/viajartiempo

5 HTML5

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

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

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?

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>

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

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>

5 NUEVA ESTRUCTURA <header>

header header

5 NUEVA ESTRUCTURA <nav>

nav nav

5 NUEVA ESTRUCTURA <article>

article article article

5 NUEVA ESTRUCTURA <section>

section section

5 NUEVA ESTRUCTURA <aside>

5 NUEVA ESTRUCTURA <footer>

footer

5 NUEVA ESTRUCTURA <figure>

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

ﬁgure ﬁgure

5 NUEVOS ELEMENTOS <video> <audio>

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

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+

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>

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>

5 SOPORTE HTML5

5 SOPORTE HTML5 * * última beta

5 SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos)

CSS3 3

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

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

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?

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

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

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

multiple background multiple background

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

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

RGBa RGBa RGBa RGBa

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

rgba(241, 238, 203, .7)

rgba(5, 129, 121, .8)

rgba(173, 165, 53, .8)

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

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

@font-face @font-face

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/

3 TEXT-SHADOW h1{ text-shadow: 3px 3px 5px black; } h1{
text-shadow: 5px 5px 0px blue; } Doc Brown Marty McFly

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

text-shadow text-shadow text-shadow

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

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

box-shadow box-shadow box-shadow

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

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

border-radius border-radius border-radius

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

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

transform

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

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

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

5 SOPORTE CSS3

RECURSOS http://books.alistapart.com

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

RECURSOS CURSO 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/4966121385 http://www.flickr.com/photos/hoyvinmayvin/4310321648 http://www.flickr.com/photos/hoyvinmayvin/4119535890 http://www.flickr.com/photos/hoyvinmayvin/4065429187/

La web se mueve: conoce HTML5 y CSS3

La web se mueve: conoce HTML5 y CSS3

More Decks by Swwweet

Other Decks in Programming

Featured

Transcript