Slides de la charla "Diseñando la web móvil con HTML5 y CSS3" del Device Days 2012.

1. Ó 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
c
DI Javier Usobiaga · @htmlboy
Device Days 2012

2. WEB MÓVIL

3. 2012
los smartphones
no son cosa de geeks

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

5. ¿un dispositivo
con una
pantalla
pequeña?

6. ¿un dispositivo
que se puede
llevar encima
fácilmente?

7. ¿un dispositivo
que se utiliza
normalmente
en la calle?

8. ¿cualquier
dispositivo
con una pantalla
táctil y a color?

9. ¿cualquier
dispositivo
que no sea
un sobremesa?

10. UN MÓVIL ES ESTO...

11. ...Y ESTO

12. UN MÓVIL ES ESTO...

13. ...Y ESTO

14. UN MÓVIL ES ESTO...

15. ...Y ESTO

16. UN MÓVIL ES ESTO...

17. ...Y ESTO

18. Y...
¿QUÉ HACEMOS?

19. HABLEMOS DE APPS

20. 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

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

24. +esfuerzo
+costes
+dolor
app app web
{
{
{

25. ¿Y UNA
TEMPLATE
MÓVIL?

26. 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

29. +versiones
+código
+dolor
web web web
{
{
{

30. UNA
WEB

31. 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

32. CONTENIDO

33. CÓMO SE VERÁ
NUESTRA WEB
UNA WEB
? ? ?

34. +flexible
-control
-costes
web
{

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

36. ¿
CON QUÉ HERRAMIENTAS
CONTAMOS
?

37. +

38. SÍNDROME
DE FLASH

40. VIEWPORT
initial-scale = 1.0
width = device-width
user-scalable = yes
maximum-scale = NO!

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

42. MULTIMEDIA
tags <video> y <audio>
formato no unificado
TIP: usar mp4 y webM
Flash como fallback

43. VIDEO & AUDIO
<video controls>
<source src="video.mp4" >
<source src="video.webm" >
<!-- Puedes añadir un
reproductor Flash -->
</video>

44. FORMULARIOS
nuevos input
mejor experiencia de usuario
validación nativa (o casi...)

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

46. FORMULARIOS

47. OFFLINE - CACHE

48. OFFLINE - CACHE

49. LOCAL STORAGE

50. LOCAL STORAGE
localStorage.setItem('miClave','miValor');
localStorage.getItem('miClave');
localStorage.removeItem('miClave');
localStorage.clear();

51. WEB STORAGE
SQL INDEXED
DB

52. CANVAS

53. CANVAS
playbiolab.com

54. SVG

55. SVG
svg-wow.org

56. GEOLOCALIZACIÓN

57. PANTALLAS TÁCTILES
más intuitivo
móvil != pantalla táctil
touch = touch + hover + click
más interacción != mejor

58. TOUCH EVENTS
addEventListener('touchstart'...)
!
addEventListener('touchmove'...)
!
addEventListener('touchend'...)

59. SWIPE
plugins.jquery.com/project/swipe

60. GESTURES
jgestures.codeplex.com

62. CSS3

63. ¿POR menos imágenes
menos js
QUÉ? menos peticiones

64. MENOS IMÁGENES
border-radius
rgba y hsla
box-shadow
gradients
font-face

65. MENOS JS
transform:scale
transform:rotate
transform: translate
transform: skew
transition

66. ANIMATIONS
mzl.la/ieGCct

67. 3D ANIMATIONS
tympanus.net/Development/ImageTransitions/index4.html

68. GPU ACCELERATION
-webkit-transform: translateZ(0);

69. ADAPTAR LA WEB

70. ADAPTAR LA WEB

71. mediaqueri.es

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

73. RESPONSIVE
WEB
DESIGN
RESPONSIVE
WEB R
W
DESIGN D
abookapart.com/products/responsive-web-design

74. RWD
retícula fluida
imágenes flexibles
media queries

75. TARGET
I ..
CONTEXTO
alistapart.com/articles/responsive-web-design

76. RESPONSIVE
#container .column{
width: 67.0212765%; /* 630/940 */
margin-right: 2.12765%; /* 20/940 */
}
.img-container img{
max-width: 100%;
}

77. MOBILE FIRST
1
2
3
abookapart.com/products/mobile-first

78. O F Í A
ILO S
V A F fallback
N U E detectar capacidades
olvidarse del pixel perfect

79. DETECTAR CAPACIDADES
modernizr.com

80. RESUMIENDO
las apps no son la (única) solución
templates = posibles incoherencias
el responsive web design es difícil

81. ¿LA SOLUCIÓN?

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