device days 2012 - html5 y css3 para móvil
DESCRIPTION
Slides de la charla "Diseñando la web móvil con HTML5 y CSS3" del Device Days 2012.TRANSCRIPT
DISEÑANDO LA WEB MÓVIL
con HTML5 y CSS3
Javier Usobiaga · @htmlboyDevice Days 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
¿
?
+
SÍNDROME
DE FLASH
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
OFFLINE - CACHE
OFFLINE - CACHE
LOCAL STORAGE
LOCAL STORAGElocalStorage.setItem('miClave','miValor');
localStorage.getItem('miClave');
localStorage.removeItem('miClave');
localStorage.clear();
WEB STORAGE
SQL INDEXEDDB
CANVAS
SVG
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
MENOS IMÁGENESborder-radius
rgba y hsla
box-shadow
gradientsfont-face
MENOS JStransform:scale
transform:rotate
transform: translate
transform: skewtransition
3D ANIMATIONS
tympanus.net/Development/ImageTransitions/index4.html
GPU ACCELERATION
-webkit-transform: translateZ(0);
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
NUEVA FILOSOFÍA
fallback
detectar capacidades
olvidarse del pixel perfect
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