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

Ó V I L E B M L A W C SS 3 N D O M L 5 y E Ñ A o n H T S cDI Javier Usobiaga · @htmlboy Barcelona Visual Sound 2012

WEB MÓVIL

2012 los smartphonesno son cosa de geeks

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

¿un dispositivo con una pantalla pequeña?

¿un dispositivoque se puedellevar encimafácilmente?

¿un dispositivo que se utiliza normalmente en la calle?

¿cualquierdispositivocon una pantallatáctil y a color?

¿cualquier dispositivo que no seaun sobremesa?

UN MÓVIL ES ESTO...

...Y ESTO

Y...¿QUÉ HACEMOS?

HABLEMOS DE APPS

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

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

+esfuerzo +costes +dolorapp app web{ { {

¿Y UNATEMPLATE MÓVIL?

Creo que es peligroso denegar alos usuarios el acceso alcontenido y la funcionalidad “porsu propio bien.” Asumir que sabeslo que el visitante a tu páginaweb quiere y necesita basándotesolo en su dispositivo es ser muycondescendiente. Jeremy Keith adactio.com/journal/1716

+versiones +código +dolorweb web web{ { {

UNAWEB

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

CONTENIDO

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

+ﬂexible -control -costesweb{

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

¿CON QUÉ HERRAMIENTAS CONTAMOS ?

O F Í A ILO S V A F fallbackN U E detectar capacidades olvidarse del pixel perfect

DETECTAR CAPACIDADES modernizr.com

VIEWPORTinitial-scale = 1.0width = device-widthuser-scalable = yesmaximum-scale = NO!

VIEWPORT<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

MULTIMEDIAtags <video> y <audio>formato no uniﬁcadoTIP: usar mp4 y webMFlash como fallback

VIDEO & AUDIO<video controls> <source src="video.mp4" > <source src="video.webm" > </video>

FORMULARIOSnuevos inputmejor experiencia de usuariovalidación nativa (o casi...)

FORMULARIOS<input type=”email” /><input type=”url” /><input type=”number” /><input type=”date” />

FORMULARIOS

JS APISlocal storageofﬂine (cache)web workersweb sockets

CANVAS playbiolab.com

GEOLOCALIZACIÓN

PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor

TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)

SWIPEplugins.jquery.com/project/swipe

GESTURES jgestures.codeplex.com

¿POR menos imágenes menos jsQUÉ? menos peticiones

- WEBKIT -:-( - MOZ MS - O

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 ANIMATIONStympanus.net/Development/ImageTransitions/index4.html

ADAPTAR LA WEB

mediaqueri.es

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

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

RWDretícula ﬂuidaimágenes ﬂexiblesmedia queries

TARGET I .. CONTEXTOalistapart.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 12 3 abookapart.com/products/mobile-ﬁrst

RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil

¿LA SOLUCIÓN?

C I ASG R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com

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

http://blog.javierusobiaga.com	670
http://us-w1.rockmelt.com	5
http://posterous.com	2

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

by Marta Armada on Feb 11, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 677

Statistics

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