Slide 1

Slide 1 text

DISEÑANDO LA WEB MÓVIL con HTM L5 y CSS3 Javier Usobiaga · @htmlboy Barcelona Visual Sound 2012

Slide 2

Slide 2 text

WEB MÓVIL

Slide 3

Slide 3 text

2012 los smartphones no son cosa de geeks

Slide 4

Slide 4 text

PERO... ¿QUÉ ES UN MÓVIL?

Slide 5

Slide 5 text

¿un dispositivo con una pantalla pequeña?

Slide 6

Slide 6 text

¿un dispositivo que se puede llevar encima fácilmente?

Slide 7

Slide 7 text

¿un dispositivo que se utiliza normalmente en la calle?

Slide 8

Slide 8 text

¿cualquier dispositivo con una pantalla táctil y a color?

Slide 9

Slide 9 text

¿cualquier dispositivo que no sea un sobremesa?

Slide 10

Slide 10 text

UN MÓVIL ES ESTO...

Slide 11

Slide 11 text

...Y ESTO

Slide 12

Slide 12 text

UN MÓVIL ES ESTO...

Slide 13

Slide 13 text

...Y ESTO

Slide 14

Slide 14 text

UN MÓVIL ES ESTO...

Slide 15

Slide 15 text

...Y ESTO

Slide 16

Slide 16 text

UN MÓVIL ES ESTO...

Slide 17

Slide 17 text

...Y ESTO

Slide 18

Slide 18 text

Y... ¿QUÉ HACEMOS?

Slide 19

Slide 19 text

HABLEMOS DE APPS

Slide 20

Slide 20 text

El debate de aplicaciones nativas vs. aplicaciones móbiles sigue siendo uno de los más polémicos. Me parece ridículo. Nadie tiene este problema respecto a las aplicaciones nativas vs. las aplicaciones de escritorio. Cennydd Bowles the-pastry-box-project.net/cennydd-bowles/2012-january-28

Slide 21

Slide 21 text

80% de las apps de marca no llegan a 1.000 descargas bit.ly/app-fail

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

+esfuerzo +costes +dolor app app web { { {

Slide 27

Slide 27 text

¿Y UNA TEMPLATE MÓVIL?

Slide 28

Slide 28 text

Creo que es peligroso denegar a los usuarios el acceso al contenido y la funcionalidad “por su propio bien.” Asumir que sabes lo que el visitante a tu página web quiere y necesita basándote solo en su dispositivo es ser muy condescendiente. Jeremy Keith adactio.com/journal/1716

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

{ { { web web web +versiones +código +dolor

Slide 34

Slide 34 text

UNA WEB

Slide 35

Slide 35 text

La Web Móvil no existe. Sólo existe La Web, y la vemos de distintas formas. Tampoco existe la Web de Escritorio. Ni la Web de Tablet. Gracias. Stephen Hay the-haystack.com/2011/01/07/there-is-no-mobile-web

Slide 36

Slide 36 text

CONTENIDO

Slide 37

Slide 37 text

UNA WEB CÓMO SE VERÁ NUESTRA WEB ? ? ?

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

{ web +flexible -control -costes

Slide 40

Slide 40 text

REGLA DE ORO* web app = template *O DE BRONCE contenido = una web

Slide 41

Slide 41 text

CON QUÉ HERRAMIENTAS CONTAMOS ¿ ?

Slide 42

Slide 42 text

NUEVA FILOSOFÍA fallback detectar capacidades olvidarse del pixel perfect

Slide 43

Slide 43 text

DETECTAR CAPACIDADES modernizr.com

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

VIEWPORT initial-scale width user-scalable maximum-scale = 1.0 = device-width = yes = NO!

Slide 46

Slide 46 text

VIEWPORT

Slide 47

Slide 47 text

MULTIMEDIA tags y formato no unificado TIP: usar mp4 y webM Flash como fallback

Slide 48

Slide 48 text

VIDEO & AUDIO

Slide 49

Slide 49 text

FORMULARIOS nuevos input mejor experiencia de usuario validación nativa (o casi...)

Slide 50

Slide 50 text

FORMULARIOS

Slide 51

Slide 51 text

FORMULARIOS

Slide 52

Slide 52 text

JS APIS local storage offline (cache) web workers web sockets

Slide 53

Slide 53 text

CANVAS playbiolab.com

Slide 54

Slide 54 text

GEOLOCALIZACIÓN

Slide 55

Slide 55 text

PANTALLAS TÁCTILES más intuitivo móvil != pantalla táctil touch = touch + hover + click más interacción != mejor

Slide 56

Slide 56 text

TOUCH EVENTS addEventListener('touchstart'...) ! addEventListener('touchmove'...) ! addEventListener('touchend'...)

Slide 57

Slide 57 text

SWIPE plugins.jquery.com/project/swipe

Slide 58

Slide 58 text

GESTURES jgestures.codeplex.com

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

CSS3

Slide 61

Slide 61 text

¿POR QUÉ? menos imágenes menos js menos peticiones

Slide 62

Slide 62 text

WEBKIT MOZ MS O - - - - -( :

Slide 63

Slide 63 text

BORDES REDONDEADOS

Slide 64

Slide 64 text

BORDER RADIUS #box{ border-radius: 10px; } #circle{ border-radius: 50%; }

Slide 65

Slide 65 text

TRANSPARENCIAS

Slide 66

Slide 66 text

RGBA & HSLA #box{ background: rgba(84,69,54,.5); } #box2{ background: hsla(30,36%,33%,.5); }

Slide 67

Slide 67 text

SOMBRAS

Slide 68

Slide 68 text

BOX-SHADOW #box{ box-shadow: 5px 5px 10px #000; }

Slide 69

Slide 69 text

TIPOGRAFÍA

Slide 70

Slide 70 text

@FONT-FACE @font-face { font-family: 'myFont'; src: url('myFont.woff'); font-weight: normal; font-style: normal; } fontspring.com/blog/the-new-bulletproof-font-face-syntax

Slide 71

Slide 71 text

DEGRADADOS

Slide 72

Slide 72 text

DEGRADADOS leaverou.me/css3patterns

Slide 73

Slide 73 text

DEGRADADOS www.colorzilla.com/gradient-editor

Slide 74

Slide 74 text

GRADIENT #box { background-image: linear-gradient (45deg, red, black); }

Slide 75

Slide 75 text

TRANSFORMAR

Slide 76

Slide 76 text

TRANSFORM #box{ transform: scale(.5); }

Slide 77

Slide 77 text

TRANSFORMAR

Slide 78

Slide 78 text

TRANSFORM #box{ transform: rotate(45deg); }

Slide 79

Slide 79 text

TRANSFORMAR

Slide 80

Slide 80 text

TRANSFORM #box{ transform: translate(20px, 40px); }

Slide 81

Slide 81 text

TRANSFORMAR

Slide 82

Slide 82 text

TRANSFORM #box{ transform: skew(5deg, 30deg); }

Slide 83

Slide 83 text

MOVIMIENTO

Slide 84

Slide 84 text

TRANSITION #box{ transition: 1s background ease-in; }

Slide 85

Slide 85 text

ANIMATIONS mzl.la/ieGCct

Slide 86

Slide 86 text

MOVIMIENTO 3D

Slide 87

Slide 87 text

3D ANIMATIONS tympanus.net/Development/ImageTransitions/index4.html

Slide 88

Slide 88 text

ADAPTAR LA WEB

Slide 89

Slide 89 text

ADAPTAR LA WEB

Slide 90

Slide 90 text

mediaqueri.es

Slide 91

Slide 91 text

MEDIA QUERIES @media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;} }

Slide 92

Slide 92 text

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN R W D abookapart.com/products/responsive-web-design

Slide 93

Slide 93 text

RWD retícula fluida imágenes flexibles media queries

Slide 94

Slide 94 text

TARGET CONTEXTO I .. alistapart.com/articles/responsive-web-design

Slide 95

Slide 95 text

RESPONSIVE #container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */ } .img-container img{ max-width: 100%; }

Slide 96

Slide 96 text

MOBILE FIRST 1 2 3 abookapart.com/products/mobile-first

Slide 97

Slide 97 text

RESUMIENDO las apps no son la (única) solución templates = posibles incoherencias el responsive web design es difícil

Slide 98

Slide 98 text

¿LA SOLUCIÓN?

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

GRACIAS ¿preguntas? Javier Usobiaga · @htmlboy Swwweet.com

Slide 101

Slide 101 text

CRÉDITOS http://www.flickr.com/photos/joshfassbind/4683365102 http://www.flickr.com/photos/docsearls/2268395744 http://www.flickr.com/photos/hermida/5442243540 http://www.flickr.com/photos/yourdon/4064143718 http://www.flickr.com/photos/bendodson/5338445045 http://www.flickr.com/photos/rafelmiro/5090998436 http://www.flickr.com/photos/jaynev/5831853872