Diseñando la web móvil con HTML5 y CSS3
-
Upload
marta-armada -
Category
Technology
-
view
13.781 -
download
4
description
Transcript of 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
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
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
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;
}
MOVIMIENTO 3D
3D ANIMATIONS
tympanus.net/Development/ImageTransitions/index4.html
ADAPTAR LA WEB
ADAPTAR LA WEB
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