edición de bolsillo: css3, html5 y js para la web móvil
TRANSCRIPT
![Page 1: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/1.jpg)
EDICIÓN DE BOLSILLO
LA WEB EN DISPOSITIVOS MÓVILES
CSS3HTML5
JS
JAVIER USOBIAGA SUBFLASH 2011
![Page 2: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/2.jpg)
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
![Page 3: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/3.jpg)
La web móvil no va de
pantallas pequeñas.
![Page 4: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/4.jpg)
La web móvil no va de
pantallas táctiles.
![Page 5: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/5.jpg)
La web móvil no va de
conexiones lentas.
![Page 6: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/6.jpg)
La web móvil no va de
aplicaciones para SO.
![Page 7: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/7.jpg)
La web móvil va del miedo
a la pérdida de control.
![Page 8: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/8.jpg)
optimiza siempre
![Page 9: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/9.jpg)
![Page 10: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/10.jpg)
La era de detectar el
navegador ha muerto.
Llega la era de detectar
las capacidades.
![Page 11: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/11.jpg)
ESTRATEGIAS
1
3 SOLUCIONES A UN MISMO RETO
![Page 12: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/12.jpg)
No hacer nada.
![Page 13: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/13.jpg)
No hacer nada.
Hacer una plantilla diferente.
![Page 14: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/14.jpg)
No hacer nada.
Hacer una plantilla diferente.
Adaptar la web.
![Page 15: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/15.jpg)
No hacer nada.
Hacer una plantilla diferente.
Adaptar la web.
![Page 16: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/16.jpg)
diseñar con fallback
![Page 18: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/18.jpg)
rellenar huecos
http://yepnopejs.com/ http://bit.ly/listofpolyfills
![Page 19: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/19.jpg)
CSS3
2
OPTIMIZANDO RECURSOS
![Page 20: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/20.jpg)
Menos imágenes.
![Page 21: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/21.jpg)
Menos imágenes.
Menos Javascript.
![Page 22: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/22.jpg)
Menos imágenes.
Menos Javascript.
Menos peticiones.
![Page 23: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/23.jpg)
gradients
border-radius
RGBa
box-shadow
@font-face
![Page 24: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/24.jpg)
gradients
border-radius
RGBa
box-shadow
@font-face
![Page 26: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/26.jpg)
http://www.colorzilla.com/gradient-editor/
![Page 27: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/27.jpg)
CSS transforms:
scale
rotate
skew
translate
![Page 28: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/28.jpg)
Transitions
&
Animations
![Page 30: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/30.jpg)
3D transforms
![Page 31: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/31.jpg)
http://css3.bradshawenterprises.com/
![Page 32: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/32.jpg)
-webkit-transform: translateZ(0);
![Page 33: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/33.jpg)
media queries
@media screen and (max-width:320px){
#container{width: 300px;
}
header nav{display: none;
}
}
![Page 35: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/35.jpg)
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
![Page 36: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/36.jpg)
responsive web design
http://www.abookapart.com/products/responsive-web-design
![Page 37: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/37.jpg)
HTML5
3
EL NAVEGADOR RECUPERA EL CONTROL
![Page 38: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/38.jpg)
viewport
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0" >
![Page 39: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/39.jpg)
video / audio
<video controls><source src="vid.mp4" ><source src="vid.ogv" >
<!-- Puedes añadir un reproductor Flash -->
</video>
![Page 40: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/40.jpg)
formularios
<input type=”email” />
<input type=”url” />
<input type=”number” />
<input type=”search” />
<input type=”date” />
<input type=”color” />
![Page 41: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/41.jpg)
formularios
![Page 42: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/42.jpg)
HTML5 ♥ JS
4
AMPLIANDO FUNCIONALIDADES
![Page 43: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/43.jpg)
local storage
offline (cache)
web workers
web sockets
![Page 45: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/45.jpg)
geolocalización
![Page 46: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/46.jpg)
TOUCH
5
DÍSELO CON GESTOS
![Page 47: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/47.jpg)
touch events
addEventListener('touchstart'...)
addEventListener('touchmove'...)
addEventListener('touchend'...)
![Page 48: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/48.jpg)
touch = touch + click
touchstartmouseovermousemovemousedownmouseupclickestilos de :hover
![Page 49: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/49.jpg)
http://plugins.jquery.com/project/swipe
swipe
![Page 50: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/50.jpg)
http://jgestures.codeplex.com/
gestures
![Page 51: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/51.jpg)
FRAMEWORKS JS
6
¿SON NECESARIOS?
![Page 52: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/52.jpg)
http://jqtouch.com
http://jquerymobile.com
http://www.sencha.com/products/touch
http://zeptojs.com
![Page 53: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/53.jpg)
pausa dramática
![Page 54: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/54.jpg)
¡GRACIAS!
¿PREGUNTAS?
:-)
@HTMLBOY SWWWEET.COM
![Page 55: Edición de bolsillo: CSS3, HTML5 y JS para la web móvil](https://reader034.vdocuments.mx/reader034/viewer/2022052321/554e2466b4c90511778b50c0/html5/thumbnails/55.jpg)
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