Diseo Responsivo:

Web mvil

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

Ingeniero Industrial.

Especialidad en Aplicaciones de
Tecnologas del Habla.
Desarrollador de Apple, Android y
Actualizacin Docente en Informtica
Blackberry.
y Diseo 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.
objetos de aprendizaje dinmicos.

Profesor de Creacin de eBooks.

Diseo Responsivo: Web Mvil www.institutointernet.com.ve
2
TEMARIO Diversidad de dispositivos conectados

Qu es la Web hoy? Cmo ser maana?

Caractersticas resaltantes de la Web como ecosistema

Necesidad del diseo responsivo

Metodologas de diseo

Diseo Responsivo: Web Mvil 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 metodologas de diseo Web.

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

4
 Percepciones y sensaciones

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

 Percepciones y sensaciones

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

 Veamos al cliente de hoy y
de maana

Nia presenta dificultades para comprender una revista impresa tras usar iPad.

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

7
 Dispositivos para navegar
en la Web

www.institutointernet.com.ve
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
8
 Cmo percibimos la Web?

Ambiente
increblemente
inestable

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

9
 Dispositivos para navegar en la Web

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

10
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
11
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
12
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
13
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
14
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
15
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
16
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
17
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
18
 Smartphone

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

19
 Smartphone

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

20
 Tablets

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

21
 WebTV

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

22
 [Contenidos del curso. Lmina tipo de Contenido]

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

23
 [Contenidos del curso. Lmina tipo de Contenido]

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

24
 Wii

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

25
 [Contenidos del curso. Lmina tipo de Contenido]

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

26
 Google Glass

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

27
 Adems

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

28
 Qu es la Web hoy?
Cmo ser maana?

www.institutointernet.com.ve
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
29
 Entonces qu es la Web

http://bradfrostweb.com/

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

30
 Esto es la Web

CV

http://bradfrostweb.com/

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

31
 Esto ser la Web

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

32
 Qu es la Web?

La Web es:

u__v____l
u__c__
m______e
f_______

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

33
 Tamaos y formatos

Tamaos y
formatos de
dispostivos
mviles.

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

34
 Conectividad y comunicacin

Conectividad y
comunicacin
entre dispositivos

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

35
 Conectividad y comunicacin

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

36
 Contexto mvil

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

37
 Presencia u omnipresencia

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

38
 Qu hacer para confrontar la
fragmentacin?

Crear experiencias
separadas para cada
situacin

Reto o batalla
perdida?

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

39
 Sitios separados

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

40
 Qu es responsivo?

Hacia lo responsivo

qu significa?

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

41
 Ethan Marcotte

Public un artculo
de diseo web
responsivo en 2010 y
lo ha convertido en el
tema ms candente
en la industria del
diseo Web.

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

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

 Primer sitio Web responsivo

http://bit.ly/ZnLNyV

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

43
 Una cita que vale la pena mencionar

Ethan Marcotte expres:

When Im 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 its not about designing for the desktop,
either.

Rather, its about adopting a more flexible, device-agnostic

approach to designing for the web.
http://unstoppablerobotninja.com/

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

44
 Actividad

Visualizar y describir sitios Web responsivos

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

http://bit.ly/ztLeI6

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

45
 Reflexin

El sitio de tu
empresa es
responsivo?

Sugeriras a tu
empresa tener un
sitio responsivo?

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

46
 Metodologas de Diseo Web y UX

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

47
 Sitio Web = cebolla

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

48
 Cuando el tamao importa

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

49
 Graceful degradation

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

50
 Graceful degradation

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

51
 Progressive enhancement: lo mvil primero

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

52
 Recomendaciones

Pensar en el usuario y no
en el navegador.

No es decirle al
usuario descrgate la
ltima versin del
navegador!

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

53
 Comparando metodologas

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

54
 Capas de un sitio Web

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

55
 UX y eCommerce

Progressive enhancement =
excelente servicio al cliente

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

56
 Actividad

Analizar casos de sitios Web

de marcas reconocidas

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

57
 Adaptive design

Ofrecer alternativas
relacionadas con la
UX

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

58
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
59
 Ejemplo de alternativas

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

60
 Ejemplo de alternativas

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

61
 Ejemplo de alternativas

http://bit.ly/dvUSYT

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

62
 Reactive design

Responsivo
respecto a las
necesidades de los
usuarios.

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

63
 Analoga de PE & RWD

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

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

64
 Ejemplo de reactive design

http://reactivewebdesign.net/Home

Diseo Responsivo: Web Mvil www.institutointernet.com.ve

65
 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
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
66
 www.institutointernet.com.ve

Facebook.com/Institutointernet

@InstInternet

contactenos@institutointernet.com.ve

(0212) 624.02.60/ (0212) 519.16.81

www.institutointernet.com.ve
Diseo Responsivo: Web Mvil www.institutointernet.com.ve
67
www.institutointernet.com.ve
Para ser exitoso en la web