Diseño Responsivo:

Web móvil

www.institutointernet.com.ve
Para ser exitoso en la web
 Leonardo Montenegro

 Ingeniero Industrial.

 Especialidad en Aplicaciones de
Tecnologías del Habla.
 Desarrollador de Apple, Android,
 Actualización
Blackberry, Firefox OS. en Informática
Docente
y Diseño Instruccional.
 Experto en eLearning, bLearning y
 Desarrollador de Productos
mLearning.
@educamedia

Multimedia Educativos para

 Socio-fundador y programador de
eLearning y mLearning
Apptua.
 Desarrollo Web, realidad aumentada,
 Profesor
mundosde virtuales,
Marketingvideo
para interactivo,
educadores y Marketing
objetos de aprendizajeMóvil.
dinámicos.

 Desarrollador de eBook apps, Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
Apps
2 y WebRTC.
TEMARIO Diversidad de dispositivos conectados a Internet

¿Qué es la Web hoy? ¿Cómo será mañana?

Características resaltantes de la Web como ecosistema

Necesidad del diseño responsivo.

Metodologías de diseño.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

3
 Objetivos

 Identificar dispositivos para navegar en la Web.

 Establecer criterios que describan la Web actual y las tendencias.

 Identificar las metodologías de diseño Web.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

4
 Percepciones y sensaciones

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Percepciones y sensaciones

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Veamos al cliente de hoy y
de mañana

Niña presenta dificultades para comprender una revista impresa tras usar iPad.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

7
 Dispositivos para navegar
en la Web

www.institutointernet.com.ve
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
8
 ¿Cómo percibimos la Web?

Ambiente
increíblemente
inestable

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

9
 Dispositivos para navegar en la Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

10
 Dispositivos para navegar en la Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

11
 Dispositivos para navegar en la Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

12
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
13
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
14
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
15
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
16
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
17
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
18
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
19
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
20
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
21
 Smartphone

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

22
 Smartphone

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

23
 Tablets

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

24
 Tablets

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

25
 Tablets

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

26
 WebTV

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

27
 [Contenidos del curso. Lámina tipo de Contenido]

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

28
 WebTV

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

29
 [Contenidos del curso. Lámina tipo de Contenido]

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

30
 Wii

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

31
 [Contenidos del curso. Lámina tipo de Contenido]

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

32
 Google Glass

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

33
 Smatwatch

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

34
 Galaxy Gear

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

35
 Multimedia y Tecnología Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

36
 Además…

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

37
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
38
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
39
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
40
 ¿Qué es la Web hoy?
¿Cómo será mañana?

www.institutointernet.com.ve
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
41
 Entonces… qué es la Web

http://bradfrostweb.com/

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

42
 Esto es la Web

CV

http://bradfrostweb.com/

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

43
 Esto será la Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

44
 Esto forma parte de la Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

45
 Open Web Apps

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

46
 Wearable Devices

http://goo.gl/aCCCvW

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

47
 ¿Qué es la Web?

La Web es:

• u__v____l
• u__c__
• m______e
• f_______

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

48
 Tamaños y formatos

Tamaños y
formatos de
dispostivos
móviles.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

49
 Conectividad y comunicación

Conectividad y
comunicación
entre dispositivos

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

50
 Conectividad y comunicación

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

51
 Contexto móvil

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

52
 Presencia u omnipresencia

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

53
 ¿Qué hacer para confrontar la
fragmentación?

Crear experiencias
separadas para cada
situación

¿Reto o batalla
perdida?

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

54
 Sitios separados

htttp://edition.cnn.com

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

55
 ¿Qué es responsivo?

Hacia lo responsivo…

¿qué significa?

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

56
 Ethan Marcotte

Publicó un artículo
de diseño web
responsivo en 2010 y
lo ha convertido en el
tema más candente
en la industria del
diseño Web.

http://alistapart.com/article/responsive-
web-design

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Primer sitio Web responsivo

http://bit.ly/ZnLNyV

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

58
 Ethan Marcotte expresó:

When I’m speaking or writing about responsive

design, I try to underline something with great,
big, Sharpie-esque strokes: responsive design is
not about “designing for mobile.” But it’s not
about “designing for the desktop,” either.
Rather, it’s about adopting a more flexible, device-
agnostic approach to designing for the web.

http://unstoppablerobotninja.com/

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

59
 Actividad

Visualizar y describir sitios Web responsivos

http://www.awwwards.com/50-examples-of-responsive-web-design.html

http://bit.ly/ztLeI6

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

60
 Reflexión

¿El sitio de tu
empresa es
responsivo?

¿Sugerirías a tu
empresa tener un
sitio responsivo?

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

61
 Metodologías de Diseño Web y UX

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

62
 Sitio Web = cebolla

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

63
 Capas de un sitio Web

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

64
 Actividad

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Actividad

Renderización

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Viewport

http://bit.ly/UcuprK

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

 Cuando el tamaño importa

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

68
 Graceful degradation

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

69
 Graceful degradation

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

70
 Progressive enhancement: lo móvil primero

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

71
 Piensa en el
usuario.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

72
 Recomendaciones

Piensa en el
navegador.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

73
 Recomendación

¡No tener que decir al

usuario:
“descárgate la última
versión del navegador”!

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

74
 Analogía de PE & RWD

Aaron Gustafson, Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

75
 Analogía de PE & RWD

contenido presentación Interactividad

Aaron Gustafson, Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

76
 UX y eCommerce

Progressive enhancement =
excelente servicio al cliente

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

77
 Actividad

Analizar casos de sitios Web

de marcas reconocidas

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

78
 Adaptive design

Ofrecer alternativas
relacionadas con la
UX

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

79
 Ejemplo de alternativas

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

80
 Hojas de estilos CSS y
navegadores

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

81
 Animaciones con CCS3

http://bit.ly/dvUSYT

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

82
 Reactive design

Responsivo
respecto a las
necesidades de los
usuarios.

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

83
 Ejemplo de reactive design

http://reactivewebdesign.net/Home

Diseño Responsivo: Web Mòvil www.institutointernet.com.ve

84
 www.apptua.com

facebook.com/Apptua

@educamedia

leomonttenegro@gmail.com
leo@apptua.com

(0414) 121.43.69/ (0214) 119.06.89

www.institutointernet.com.ve
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
85
 www.institutointernet.com.ve

Facebook.com/Institutointernet

@InstInternet

contactenos@institutointernet.com.ve

(0212) 953.82.29/ (0212) 519.17.12

www.institutointernet.com.ve
Diseño Responsivo: Web Mòvil www.institutointernet.com.ve
86