Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
55
EDICIÓN DE BOLSILLO LA WEB EN DISPOSITIVOS MÓVILES CSS3 HTML5 JS JAVIER USOBIAGA SUBFLASH 2011
-
Upload
marta-armada -
Category
Technology
-
view
6.726 -
download
3
Transcript of Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
EDICIÓN DE BOLSILLO
LA WEB EN DISPOSITIVOS MÓVILES
CSS3HTML5
JS
JAVIER USOBIAGA SUBFLASH 2011
a 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.
L
Stephen Hay - There is no Movile Web
La web móvil no va de
pantallas pequeñas.
La web móvil no va de
pantallas táctiles.
La web móvil no va de
conexiones lentas.
La web móvil no va de
aplicaciones para SO.
La web móvil va del miedo
a la pérdida de control.
optimiza siempre
La era de detectar el
navegador ha muerto.
Llega la era de detectar
las capacidades.
ESTRATEGIAS
1
3 SOLUCIONES A UN MISMO RETO
No hacer nada.
No hacer nada.
Hacer una plantilla diferente.
No hacer nada.
Hacer una plantilla diferente.
Adaptar la web.
No hacer nada.
Hacer una plantilla diferente.
Adaptar la web.
diseñar con fallback
rellenar huecos
http://yepnopejs.com/ http://bit.ly/listofpolyfills
CSS3
2
OPTIMIZANDO RECURSOS
Menos imágenes.
Menos imágenes.
Menos Javascript.
Menos imágenes.
Menos Javascript.
Menos peticiones.
gradients
border-radius
RGBa
box-shadow
@font-face
gradients
border-radius
RGBa
box-shadow
@font-face
http://www.colorzilla.com/gradient-editor/
CSS transforms:
scale
rotate
skew
translate
Transitions
&
Animations
3D transforms
http://css3.bradshawenterprises.com/
-webkit-transform: translateZ(0);
media queries
@media screen and (max-width:320px){
#container{width: 300px;
}
header nav{display: none;
}
}
responsive web design
#container .column{width: 31.12164296%;margin-right: 3.3175355%;
}
.img-container img{max-width: 100%;
}
http://www.alistapart.com/articles/responsive-web-design
responsive web design
http://www.abookapart.com/products/responsive-web-design
HTML5
3
EL NAVEGADOR RECUPERA EL CONTROL
viewport
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0" >
video / audio
<video controls><source src="vid.mp4" ><source src="vid.ogv" >
<!-- Puedes añadir un reproductor Flash -->
</video>
formularios
<input type=”email” />
<input type=”url” />
<input type=”number” />
<input type=”search” />
<input type=”date” />
<input type=”color” />
formularios
HTML5 ♥ JS
4
AMPLIANDO FUNCIONALIDADES
local storage
offline (cache)
web workers
web sockets
geolocalización
TOUCH
5
DÍSELO CON GESTOS
touch events
addEventListener('touchstart'...)
addEventListener('touchmove'...)
addEventListener('touchend'...)
touch = touch + click
touchstartmouseovermousemovemousedownmouseupclickestilos de :hover
http://plugins.jquery.com/project/swipe
swipe
http://jgestures.codeplex.com/
gestures
FRAMEWORKS JS
6
¿SON NECESARIOS?
http://jqtouch.com
http://jquerymobile.com
http://www.sencha.com/products/touch
http://zeptojs.com
pausa dramática
¡GRACIAS!
¿PREGUNTAS?
:-)
@HTMLBOY SWWWEET.COM
AGRADECIMIENTOS Y CRÉDITOS
1 BRUCE LAWSON . . . http://brucelawson.co.uk
2 PETER-PAUL KOCH . . . http://quirksmode.org
3 ETHAN MARCOTTE . . http://unstoppablerobotninja.com
4 JEREMY KEITH . . . http://adactio.com
5 LUKE WROBLEWSKY . . http://lukew.com
6 STEPHEN HAY . . . http://the-haystack.com
