Presentación realizada por Javier Usobiaga en el Barcelona Visual Sound 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
Barcelona Visual Sound 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

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

27. ¿Y UNA
TEMPLATE
MÓVIL?

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

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

34. UNA
WEB

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

36. CONTENIDO

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

39. +flexible
-control
-costes
web
{

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

41. ¿
CON QUÉ HERRAMIENTAS
CONTAMOS
?

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

43. DETECTAR CAPACIDADES
modernizr.com

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

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

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

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

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

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

51. FORMULARIOS

52. JS APIS
local storage
offline (cache)
web workers
web sockets

53. CANVAS
playbiolab.com

54. GEOLOCALIZACIÓN

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

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

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

58. GESTURES
jgestures.codeplex.com

60. CSS3

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

62. - WEBKIT
-
:-( - MOZ
MS
- O

63. BORDES REDONDEADOS

64. BORDER RADIUS
#box{
border-radius: 10px;
}
#circle{
border-radius: 50%;
}

65. TRANSPARENCIAS

66. RGBA & HSLA
#box{
background: rgba(84,69,54,.5);
}
#box2{
background: hsla(30,36%,33%,.5);
}

67. SOMBRAS

68. BOX-SHADOW
#box{
box-shadow: 5px 5px 10px #000;
}

69. TIPOGRAFÍA

70. @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

71. DEGRADADOS

72. DEGRADADOS
leaverou.me/css3patterns

73. DEGRADADOS
www.colorzilla.com/gradient-editor

74. GRADIENT
#box {
background-image: linear-gradient
(45deg, red, black);
}

75. TRANSFORMAR

76. TRANSFORM
#box{
transform: scale(.5);
}

77. TRANSFORMAR

78. TRANSFORM
#box{
transform: rotate(45deg);
}

79. TRANSFORMAR

80. TRANSFORM
#box{
transform: translate(20px, 40px);
}

81. TRANSFORMAR

82. TRANSFORM
#box{
transform: skew(5deg, 30deg);
}

83. MOVIMIENTO

84. TRANSITION
#box{
transition: 1s background ease-in;
}

85. ANIMATIONS
mzl.la/ieGCct

86. MOVIMIENTO 3D

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

88. ADAPTAR LA WEB

89. ADAPTAR LA WEB

90. mediaqueri.es

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

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

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

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

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

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

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

98. ¿LA SOLUCIÓN?

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

101. CRÉDITOS
http://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