La web se mueve: conoce HTML5 y CSS3

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

¡HOLA!

Slide 3

Slide 3 text

@htmlboy

Slide 4

Slide 4 text

@martuishere

Slide 5

Slide 5 text

Swwweet.com @savetheusers

Slide 6

Slide 6 text

LA WEB SE MUEVE

Slide 7

Slide 7 text

FUTURO

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

CSS 3

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

http://swwweet.com/presentaciones/viajartiempo

Slide 13

Slide 13 text

5 HTML5

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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?

Slide 18

Slide 18 text

5 !DOCTYPE XHTML 1.1: HTML5:

Slide 19

Slide 19 text

5 CODIFICACIÓN XHTML 1.1: HTML5:

Slide 20

Slide 20 text

5 LINK / SCRIPT XHTML 1.1: HTML5:

Slide 21

Slide 21 text

5 NUEVA ESTRUCTURA

Slide 22

Slide 22 text

header header

Slide 23

Slide 23 text

5 NUEVA ESTRUCTURA

Slide 24

Slide 24 text

nav nav

Slide 25

Slide 25 text

5 NUEVA ESTRUCTURA

Slide 26

Slide 26 text

article article article

Slide 27

Slide 27 text

5 NUEVA ESTRUCTURA

Slide 28

Slide 28 text

section section

Slide 29

Slide 29 text

5 NUEVA ESTRUCTURA

Slide 30

Slide 30 text

aside

Slide 31

Slide 31 text

5 NUEVA ESTRUCTURA

Slide 32

Slide 32 text

footer

Slide 33

Slide 33 text

5 NUEVA ESTRUCTURA

Slide 34

Slide 34 text

5 FIGURE/FIGCAPTION

Tortugas

Slide 35

Slide 35 text

ﬁgure ﬁgure

Slide 36

Slide 36 text

5 NUEVOS ELEMENTOS

Slide 37

Slide 37 text

video

Slide 38

Slide 38 text

5 VIDEO

Slide 39

Slide 39 text

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+

Slide 40

Slide 40 text

5 VIDEO

Tu navegador no sorporta vídeo.

Slide 41

Slide 41 text

5 VIDEO Descargar vídeo

Slide 42

Slide 42 text

5 SOPORTE HTML5

Slide 43

Slide 43 text

5 SOPORTE HTML5 * * última beta

Slide 44

Slide 44 text

5 SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos)

Slide 45

Slide 45 text

CSS3 3

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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?

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Slide 51

Slide 51 text

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

multiple background multiple background

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

RGBa RGBa RGBa RGBa

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

rgba(241, 238, 203, .7)

Slide 59

Slide 59 text

rgba(5, 129, 121, .8)

Slide 60

Slide 60 text

rgba(173, 165, 53, .8)

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

@font-face @font-face

Slide 64

Slide 64 text

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/

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

text-shadow text-shadow text-shadow

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

box-shadow box-shadow box-shadow

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

border-radius border-radius border-radius

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

transform

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

5 SOPORTE CSS3

Slide 84

Slide 84 text

IE8

Slide 85

Slide 85 text

RECURSOS http://books.alistapart.com

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

¡GRACIAS!

Slide 89

Slide 89 text

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/