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

6.
Libros
www.mobilexweb.com

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

8.
9

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

10.
11

11.
Esto
no
es
más
la
web
12

12.
Ahora
es
más
compleja
13

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

14.
Muchas
preguntas
Photo by wayneandwax (Flickr) 15

15.
futurefriend.ly
16

16.
HTML5,
HTML
5
y
estándares
17

17.
+

18.
+

19.
¿Qué
puedo
hacer?
20

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

21.
¿Qué
hay
de
nuevo?
22

22.
Nuevas
eMquetas
semánMcas
23

23.
Formularios
24

24.
EMquetas
mulMmedia
25

25.
¿APIs
en
HTML5?
26

26.
Drawing
2D
API
(aka
Canvas)
27

27.
Offline
API
(aka
AppCache)
28

28.
Web
Storage
API
29

29.
Web
SQL
API
30

30.
Web
Sockets
API
31

31.
GeolocaMon
API
32

32.
DeviceMoMon
y
DeviceOrientaMon
API
33

33.
Web
Workers
API
34

34.
Drag
and
Drop
API
35

35.
File
API
36

36.
Audio
API
37

37.
Drawing
3D
API
(aka
WebGL)
38

38.
NoMficaMons
API
39

39.
Camera
API
40

40.
CSS3
41

41.
Nuevos
efectos
y
selectores
42

42.
Nuevo
Flexible
Box
Model
43

43.
Transiciones
44

44.
Transformaciones
2D
y
3D
45

45.
Animaciones
46

46.
Web
Fonts
47

47.
48

48.
SVG
y
SVG
inline
49

49.
Data
URI
50

50.
(mulM)
Touch
Events
51

51.
Viewport
52

52.
Pixel
RaMo
53

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

54.
+
Mejora Progresiva

55.
Ejemplo!
56

56.
+
Diseño web que reacciona

57.
Los
celulares
son
los
autos
voladores
Ejemplo!
58

58.
+ DATOS
72%
mobile

59.
+ DATOS
+5
mil
millones

60.
+

61.
layersstudio.net
62

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

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

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

65.
+ 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?

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?
2010
+5.000M
teléfonos

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
2012
2x
smartphones
<-­‐>
PC

68.
+ 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

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

70.
+ FOCO

71.
+ FOCO
Images from @lukew

72.
+ CONTEXTO
Images from @lukew

73.
+ CONTEXTO
Images from @lukew

74.
+ CONTEXTO

75.
+ CONTEXTO
Sleep Cycle

76.
+ CONTEXTO
HappyWakeU
p

77.
+

78.
+ PERTENENCIA
DEMO
CON
USTEDES

79.
+ VIAJA
CONMIGO

80.
+ VIAJA
CONMIGO

81.
+ ESTÁ
CERCA
MIO

82.
+
24x7

83.
+ ACCESO
DIARIO

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

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

86.
+ PROXÉMICA

87.
+ PROXÉMICA

88.
+ PROXÉMICA

89.
+ PROXÉMICA

90.
+ PROXÉMICA

91.
+ 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

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.
+ MEJOR
NEGOCIO

94.
+ 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

95.
+