(spanish) Conferencia sobre HTML5 dictada en Colombia 3.0

1. HTML5
Lic. Maximiliano Firtman @firt
www.firt.mobi | Bogotá, 06/10/11
1

2. ¿Y
yo
quién
soy?
Lic.
Maximiliano
Firtman
@firt

3. +10
años

4. Mobile
iPhone
y
iPad
Android
Java
HTML5
Flex
y
AIR

5. SiIos

7.
Libros
www.mobilexweb.com

8. Futuros
Using the Latest Today
Mobile
HTML5
Estelle Weyl
& Maximiliano Firtman

9. 9

10. “Casi
todas
las
aplicaciones,
incluyendo
las
móviles,
se
desarrollarán
con
HTML5
en
el
futuro”
Eric Schmidt, CEO de Google
Febrero 2011
10

11. 11

12. Esto
no
es
más
la
web
12

13. Ahora
es
más
compleja
13

14. Ahora
es
más
compleja
Photo by World of Good (Flickr)
Malvinas / Falklands Islands
14

15. Muchas
preguntas
Photo by wayneandwax (Flickr) 15

16. futurefriend.ly
16

17. HTML5,
HTML
5
y
estándares
17

18. +

19. +

20. ¿Qué
puedo
hacer?
20

21. SiIos
Web
MulIplataforma
webapps
instaladas
offline
Aplicaciones
naIvas
mobile
Aplicaciones
naIvas
Windows
8
21

22. ¿Qué
hay
de
nuevo?
22

23. Nuevas
eMquetas
semánMcas
23

24. Formularios
24

25. EMquetas
mulMmedia
25

26. ¿APIs
en
HTML5?
26

27. Drawing
2D
API
(aka
Canvas)
27

28. Offline
API
(aka
AppCache)
28

29. Web
Storage
API
29

30. Web
SQL
API
30

31. Web
Sockets
API
31

32. GeolocaMon
API
32

33. DeviceMoMon
y
DeviceOrientaMon
API
33

34. Web
Workers
API
34

35. Drag
and
Drop
API
35

36. File
API
36

37. Audio
API
37

38. Drawing
3D
API
(aka
WebGL)
38

39. NoMficaMons
API
39

40. Camera
API
40

41. CSS3
41

42. Nuevos
efectos
y
selectores
42

43. Nuevo
Flexible
Box
Model
43

44. Transiciones
44

45. Transformaciones
2D
y
3D
45

46. Animaciones
46

47. Web
Fonts
47

48. 48

49. SVG
y
SVG
inline
49

50. Data
URI
50

51. (mulM)
Touch
Events
51

52. Viewport
52

53. Pixel
RaMo
53

54. + Podremos crear un sólo código
para todas las plataformas?

55. +
Mejora Progresiva

56. Ejemplo!
56

57. +
Diseño web que reacciona

58. Los
celulares
son
los
autos
voladores
Ejemplo!
58

59. + DATOS
72%
mobile

60. + DATOS
+5
mil
millones

61. +

62. layersstudio.net
62

63. +
GRACIAS!
firtman@gmail.com
twitter.com/firt
www.firt.mobi
www.mobilexweb.com
Picture from freedigitalphotos.net

64. + DATOS
2000
¿Preocupó
el
Y2K
en
los
móviles?
¿En
dónde?

65. + DATOS
2000
¿Preocupó
el
Y2K
en
los
móviles?
¿En
dónde?
2003
¿Teléfono
con
cámara?
no
seas
ridículo

66. + DATOS
2000
¿Preocupó
el
Y2K
en
los
móviles?
¿En
dónde?
2003
¿Teléfono
con
cámara?
no
seas
ridículo
2006
¿Qué
es
el
iPhone?

67. + DATOS
2000
¿Preocupó
el
Y2K
en
los
móviles?
¿En
dónde?
2003
¿Teléfono
con
cámara?
no
seas
ridículo
2006
¿Qué
es
el
iPhone?
2010
+5.000M
teléfonos

68. + DATOS
2000
¿Preocupó
el
Y2K
en
los
móviles?
¿En
dónde?
2003
¿Teléfono
con
cámara?
no
seas
ridículo
2006
¿Qué
es
el
iPhone?
2010
+5.000M
teléfonos
2012
2x
smartphones
<-­‐>
PC

69. + DATOS
2008
Nació
AppStore
con
500
apps
2011
Hay
decenas
de
Mendas
y
cientos
de
miles
de
apps
2013
29.500
M
dólares
en
apps

70. +
¿por qué está
bueno hacer
mobile?

71. + FOCO

72. + FOCO
Images from @lukew

73. + CONTEXTO
Images from @lukew

74. + CONTEXTO
Images from @lukew

75. + CONTEXTO

76. + CONTEXTO
Sleep Cycle

77. + CONTEXTO
HappyWakeU
p

78. +

79. + PERTENENCIA
DEMO
CON
USTEDES

80. + VIAJA
CONMIGO

81. + VIAJA
CONMIGO

82. + ESTÁ
CERCA
MIO

83. +
24x7

84. + ACCESO
DIARIO

85. +
¿Cuántas veces
mirás la pantalla
por día?

86. +
Si recibís una
alerta, ¿cuánto
tardás en verla?

87. + PROXÉMICA

88. + PROXÉMICA

89. + PROXÉMICA

90. + PROXÉMICA

91. + PROXÉMICA

92. + PROXÉMICA
ESPACIO INTIMO
• 15 a 45 cm
• El más importante
• El más caro
• Confianza
• Emocionalmente unidos
• Interacción con mirada, tacto
y audio

93. + PROXÉMICA
ESPACIO INTIMO
• 15 a 45 cm
• El más importante
• El más caro
• Confianza
• Emocionalmente unidos
• Interacción con mirada, tacto
y audio

94. + MEJOR
NEGOCIO

95. + MEJOR
NEGOCIO
n
+250
millones
de
usuarios
acIvos
en
Facebook
móvil
n
Los
usuarios
de
Facebook
en
el
móvil
son
el
doble
de
acIvos

96. +