Revolución móvil, HTML 5 y responsive design

57
a revolución móv

description

Clase de Narrativa Online, Facultad de Comunicación, Universidad de Montevideo 2013

Transcript of Revolución móvil, HTML 5 y responsive design

Page 1: Revolución móvil, HTML 5 y responsive design

La revoluciónmóvil

Page 2: Revolución móvil, HTML 5 y responsive design

2012

Computadoras

Page 3: Revolución móvil, HTML 5 y responsive design

Celulares

Page 4: Revolución móvil, HTML 5 y responsive design

Tabletas

Page 5: Revolución móvil, HTML 5 y responsive design

Ecosistemas

Page 6: Revolución móvil, HTML 5 y responsive design

Nuevas herramientas

Page 7: Revolución móvil, HTML 5 y responsive design

El mundo de las aplicaciones

Page 8: Revolución móvil, HTML 5 y responsive design

¿Qué son?

Page 9: Revolución móvil, HTML 5 y responsive design

Multi plataforma

Page 10: Revolución móvil, HTML 5 y responsive design

Planeta

1

Page 11: Revolución móvil, HTML 5 y responsive design

Mundo Apple/IosApp Store

Page 12: Revolución móvil, HTML 5 y responsive design

iPhoneiPod

iPod Touch

iPad

iOS 6.1

Page 13: Revolución móvil, HTML 5 y responsive design

Planeta

2

Page 14: Revolución móvil, HTML 5 y responsive design

Mundo google/androidGoogle Play

Page 15: Revolución móvil, HTML 5 y responsive design

Samsung GalaxyHTC

Motorola

Google Nexus

AndroidJelly Bean 4.2

Page 16: Revolución móvil, HTML 5 y responsive design

Planeta

3

Page 17: Revolución móvil, HTML 5 y responsive design

Mundo BLACKBERRYBlackberry World

Page 18: Revolución móvil, HTML 5 y responsive design

Blackberry TorchBlackberry CurveBlackberry Bold

Blackberry Z10

Page 19: Revolución móvil, HTML 5 y responsive design

Planeta

4

Page 20: Revolución móvil, HTML 5 y responsive design

Mundo microsoftWindows Phone store

Page 21: Revolución móvil, HTML 5 y responsive design

Nokia LumiaSamsungHTCHuawei

Page 22: Revolución móvil, HTML 5 y responsive design

Modos adaptables

Page 23: Revolución móvil, HTML 5 y responsive design

El nuevorey

Page 24: Revolución móvil, HTML 5 y responsive design
Page 25: Revolución móvil, HTML 5 y responsive design
Page 26: Revolución móvil, HTML 5 y responsive design

34% del tráfico total del FT viene de móviles

15-20% de las nuevas suscripciones se venden desde un celular

12% de las ganancias x publicidad del FT proviene de móviles

“The audience is clearly moving to mobile, and we need to be where the audience is.

Page 27: Revolución móvil, HTML 5 y responsive design

Saboresy colores

Page 28: Revolución móvil, HTML 5 y responsive design

Chau plug ins!!

Page 29: Revolución móvil, HTML 5 y responsive design

Video y multimediaGráficosSonidoInteractividadVelocidadOffline

Page 30: Revolución móvil, HTML 5 y responsive design

Vs

Y/O

Page 32: Revolución móvil, HTML 5 y responsive design

Yendo de la cama al living

Page 33: Revolución móvil, HTML 5 y responsive design
Page 34: Revolución móvil, HTML 5 y responsive design

Uno para todos todos para uno

Page 35: Revolución móvil, HTML 5 y responsive design
Page 36: Revolución móvil, HTML 5 y responsive design
Page 38: Revolución móvil, HTML 5 y responsive design

Ventajas responsive design

Page 39: Revolución móvil, HTML 5 y responsive design

SEO. Sólo hay una web (HTML + CSS), URL es única para todos los dispositivos. Se evitan redirecciones de unas versiones a otras  

UX. User eXperience.  El usuario accede al mismo website con independencia del dispositivo que utilice. Coherencia.

Integridad. Sólo hay una estructura HTML y una única hoja de estilo CSS para todos los dispositivos. 

Costes. Requiere más tiempo de desarrollo y es más cara, pero implica menos mantenimiento (hay que revisar 1 hoja de estilo).

Page 40: Revolución móvil, HTML 5 y responsive design
Page 41: Revolución móvil, HTML 5 y responsive design

Adaptaciones móviles

Page 42: Revolución móvil, HTML 5 y responsive design

Mobile

Desktop en smartphone

Page 43: Revolución móvil, HTML 5 y responsive design
Page 44: Revolución móvil, HTML 5 y responsive design

Los sitios web mobile-friendly “convierten a los usuarios en clientes”

What Users Want Most from Mobile Sites Today (Google, setiembre 2012)

Page 45: Revolución móvil, HTML 5 y responsive design
Page 46: Revolución móvil, HTML 5 y responsive design

61% “Si no encuentro rápido lo que estaba buscando en un sitio móvil, me voy a otro”

50% “Si la web de mi negocio favorito no tiene salida móvil, lo usaría menos o lo cambiaría por otro”.

Page 47: Revolución móvil, HTML 5 y responsive design

Pensar y crear en clave de móviles

Page 49: Revolución móvil, HTML 5 y responsive design

Contenido demasiado limitadoDominios múltiples. Pop-ups. Videos que no se pueden verRedireccionamiento falllido.Tiempo de carga  PageSpeed

Page 51: Revolución móvil, HTML 5 y responsive design

jQuery

UnderscorejPlayer

HTML5 videojQuery Reel

jQuery address

Page 52: Revolución móvil, HTML 5 y responsive design
Page 56: Revolución móvil, HTML 5 y responsive design

http://www.thinkwithgoogle.com/mobileplanet/es/

Page 57: Revolución móvil, HTML 5 y responsive design