Diseñando la web móvil con HTML5 y CSS3

DISEÑANDO LA WEB MÓVIL

con HTML5 y CSS3

Javier Usobiaga · @htmlboyBarcelona Visual Sound 2012

WEB MÓVIL

2012los smartphones

no son cosa de geeks

PERO...

¿QUÉ ES UN MÓVIL?

¿un dispositivo con una pantalla

pequeña?

¿un dispositivoque se puedellevar encima fácilmente?

¿un dispositivo que se utilizanormalmente

en la calle?

¿cualquier dispositivocon una pantallatáctil y a color?

¿cualquier dispositivoque no sea

un sobremesa?

UN MÓVIL ES ESTO...

...Y ESTO

UN MÓVIL ES ESTO...

...Y ESTO

UN MÓVIL ES ESTO...

...Y ESTO

UN MÓVIL ES ESTO...

...Y ESTO

Y...

¿QUÉ HACEMOS?

HABLEMOS DE APPS

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

80%de las apps de marca no llegan

a 1.000 descargas

bit.ly/app-fail

+esfuerzo+costes

+dolorapp app web{ { {

¿Y UNA TEMPLATE MÓVIL?

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

{ { {web web web

+versiones+código

+dolor

UNA WEB

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

CONTENIDO

UNA WEB

CÓMO SE VERÁ NUESTRA WEB

? ? ?

{ web

+flexible-control

-costes

REGL

A DE O

RO*

web app = template

*O DE BRONCE

contenido = una web

CON QUÉ HERRAMIENTAS CONTAMOS

¿

?

NUEVA FILOSOFÍA

fallback

detectar capacidades

olvidarse del pixel perfect

DETECTAR CAPACIDADES

modernizr.com

VIEWPORTinitial-scale

width

user-scalable

maximum-scale

= 1.0

= device-width

= yes

= NO!

VIEWPORT

<meta name = "viewport" content = "width=device-width,

initial-scale=1.0" >

MULTIMEDIAtags <video> y <audio>

formato no unificado

TIP: usar mp4 y webM

Flash como fallback

VIDEO & AUDIO<video controls>

<source src="video.mp4" ><source src="video.webm" >

<!-- Puedes añadir un reproductor Flash -->

</video>

FORMULARIOSnuevos input

mejor experiencia de usuario

validación nativa (o casi...)

FORMULARIOS<input type=”email” />

<input type=”url” />

<input type=”number” />

<input type=”date” />

FORMULARIOS

JS APISlocal storage

offline (cache)

web workers

web sockets

CANVAS

playbiolab.com

GEOLOCALIZACIÓN

PANTALLAS TÁCTILESmás intuitivo

móvil != pantalla táctil

touch = touch + hover + click

más interacción != mejor

TOUCH EVENTSaddEventListener('touchstart'...)!

addEventListener('touchmove'...)!

addEventListener('touchend'...)

SWIPE

plugins.jquery.com/project/swipe

GESTURES

jgestures.codeplex.com

CSS3

¿POR QUÉ?

menos imágenes

menos js

menos peticiones

WEBKITMOZMSO

----

-(:

BORDES REDONDEADOS

BORDER RADIUS#box{

border-radius: 10px;}

#circle{border-radius: 50%;

}

TRANSPARENCIAS

RGBA & HSLA#box{

background: rgba(84,69,54,.5);}

#box2{background: hsla(30,36%,33%,.5);

}

SOMBRAS

BOX-SHADOW

#box{box-shadow: 5px 5px 10px #000;

}

TIPOGRAFÍA

@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

DEGRADADOS

DEGRADADOS

leaverou.me/css3patterns

DEGRADADOS

www.colorzilla.com/gradient-editor

GRADIENT

#box { background-image: linear-gradient

(45deg, red, black);}

TRANSFORMAR

TRANSFORM

#box{transform: scale(.5);

}

TRANSFORMAR

TRANSFORM

#box{transform: rotate(45deg);

}

TRANSFORMAR

TRANSFORM

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

}

TRANSFORMAR

TRANSFORM

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

}

MOVIMIENTO

TRANSITION

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

}

ANIMATIONS

mzl.la/ieGCct

MOVIMIENTO 3D

3D ANIMATIONS

tympanus.net/Development/ImageTransitions/index4.html

ADAPTAR LA WEB

ADAPTAR LA WEB

mediaqueri.es

MEDIA QUERIES@media screen and (max-width:320px){

#container {width: 300px;}

header nav {display: none;}

}

RESPONSIVEWEB

DESIGN

RESPONSIVEWEB

DESIGNRWD

abookapart.com/products/responsive-web-design

RWDretícula fluida

imágenes flexibles

media queries

TARGET

CONTEXTOI ..

alistapart.com/articles/responsive-web-design

RESPONSIVE#container .column{

width: 67.0212765%; /* 630/940 */margin-right: 2.12765%; /* 20/940 */

}

.img-container img{max-width: 100%;

}

MOBILE FIRST

123

abookapart.com/products/mobile-first

RESUMIENDOlas apps no son la (única) solución

templates = posibles incoherencias

el responsive web design es difícil

¿LA SOLUCIÓN?

GRACIAS¿preguntas?

Javier Usobiaga · @htmlboySwwweet.com

CRÉDITOShttp://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