Conoce HTML5 y CSS3

LA WEB SE MUEVE:
CONOCE HTML5 & CSS3

Javier Usobiaga BCNVisualSound 2011

http://swwweet.com/presentaciones/viajartiempo

¿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

!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>

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

HTML5:
<meta charset=utf-8>

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>

NUEVA ESTRUCTURA

<header>

NUEVA ESTRUCTURA

<article>

NUEVA ESTRUCTURA

<section>

NUEVA ESTRUCTURA

<aside>

NUEVA ESTRUCTURA

<footer>

NUEVA ESTRUCTURA

<figure>

FIGURE/FIGCAPTION

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

NUEVOS ELEMENTOS

<video>
<audio>

VIDEO

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

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+

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

*

* ú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?

✓ 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

BACKGROUND
MULTIPLE BACKGROUNDS:

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

multiple
background

multiple
background

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

#foo{
background: rgba(255, 0, 0, .7);
}

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

#foo{
background: hsla(324, 100%, 25%, .7);
}

RGBa

RGBa
RGBa

RGBa

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

body{
background: rgba(241, 238, 203, 0.7);
}

@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

@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
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-SHADOW
h1{
text-shadow: 3px 3px 5px black;
}
Doc Brown
h1{
text-shadow: 5px 5px 0px blue;
}

Marty McFly

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

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-shadow

box-shadow

box-shadow

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

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

BORDER RADIUS

#foo{
border-radius: 9999px;
}

border-radius

border-radius

border-radius

TRANSFORMS

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

#foo{
transform: scale(0.5);
}

TRANSFORMS

#foo{
transform: skew(45deg);
}

#foo{
transform: translate(20px,-20px);
}

TRANSITIONS

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

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

nav li:hover{
width: 220px;
}

TRANSITIONS

nav li span{
transition: .6s transform ease-in-out;
}

nav li:hover span{
transform: rotate(360deg);
}

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€

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/

Conoce HTML5 y CSS3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a Conoce HTML5 y CSS3

Similar a Conoce HTML5 y CSS3 (20)

Más de Marta Armada

Más de Marta Armada (7)

Último

Último (11)

Conoce HTML5 y CSS3