Diseno Responsivo Part 2a

Diseño Responsivo:
Web móvil
Parte II
www.institutointernet.com.ve
Para ser exitoso en la web
TEMARIO
Workflow del diseño responsivo
Herramientas para el diseño Web responsivo
Flexibilidad en la Web responsiva
Layouts para el diseño Web responsivo
Diseño Responsivo: Web Móvil www.institutointernet.net

2
Objetivos
 Identificar el workflow utilizado para el diseño

Web responsivo.
 Reconocer las herramientas para el diseño Web responsivo.
 Identificar los tipos de layouts para el diseño Web

responsivo.
 Reconocer fundamentos de programación Web para tratar

aspectos estéticos del diseño responsivo.
3
Actividad

Actividad
Renderización

Actividad

Actividad

Actividad

Reflexión
¿La resolución de pantalla es igual

al tamaño de la ventana del
navegador?
http://bit.ly/UcuprK

Viewport
http://bit.ly/UcuprK

Workflow del diseño
responsivo
11
Equipo de trabajo

12
Presupuesto

Capacidades de diseñadores
y desarrolladores
Respeto
http://bit.ly/155QUWN

¿Es flexible?
¿Qué podemos crear?

15
Línea del tiempo
http://bit.ly/eAftI9

Web dinámica

17
Proceso y comunidades de práctica
http://bit.ly/10Oo3jR

18
Ambiente de trabajo iterativo
Ethan Marcotte
The responsive projects I’ve worked on have had a lot of

success combining design and development into one hybrid
phase, bringing the two teams into one highly collaborative
group.

19
Diseño Web como sistema

20
Mobile first
Drupalcon Denver Keynote Day 3
Luke Wroblewski
http://bit.ly/GHPXUk

21
Herramientas para el
diseño Web responsivo
22
Wireframe
1. Navegación.
2. Logo.
3.Artículo.
4. Encabezados relacionados.
5. Publicidad.
6. Etiquetas.
7. Sección contenido.
8. Otra sección contenido.
9. Pie (repetir navegación)

23
Sketch
http://www.flickr.com/photos/dirtyalpaca/3904628439/

24
Sketch
http://www.flickr.com/photos/rohdesign/3307873748/

25
Sketch

26
Método de la caja gris de
Jason Santa María
http://bit.ly/3fgaIH

27
Mock-ups (maquetas) y
prototipos
http://www.justinmind.com/

28
Guía de estilos y biblioteca
de patrones
Starbucks.
http://bit.ly/GBPRfJ

29
http://bit.ly/XCpbL4

30
Guía de estilos y biblioteca
de patrones
Paul Robert Lloyd
http://bit.ly/126PcD9

31
Reflexión
¿Un sitio Web tiene que verse igual

en distintos navegadores?

¿La Web es flexible?
33
¿Es flexible?
http://goo.gl/EuuRZZ

¿Cuál es el propósito
de ser flexible?

¿Por qué nos interesa
la flexibildad?

¿Solo a los seres humanos nos
interesa la flexibilidad?
http://goo.gl/fw1rvH

Esto será la Web

38
Displays flexibles

39
Soportes flexibles imitan
la función del papel

40
http://phys.org/news/2013-01-revolutionary-paper-tablet-revealed-thin.html

41
Principios del diseño Web flexible
Tipos de layouts
42
Posición relativa a la ventana del
navegador

Tamaño relativo a la ventana del
navegador

Tamaño relativo del contenido en la
ventana del navegador

Actividad

Actividad

47
Actividad

48
Actividad

49
Actividad

50
Mejorando la legibilidad

51
Sitio Web responsivo y
legibilidad
http://simplebits.com/

52
Layouts y legibilidad
http://simplefocus.com/flowtype/

53
Layouts y legibilidad
http://simplefocus.com/flowtype/demo.html

54
Actividad

Reflexión
¿Cuál de los tipos de layouts vistos

anteriormente es el más responsivo?

56
Actividad
Diseñar un layout líquido.
¿Cómo se comportaría
en la ventana de tu
navegador Web?

57
Grid
(escondido)
http://www.thegridsystem.org/
58
Grid
(mostrado)
http://www.thegridsystem.org/
59
Actividad
file:///C:/Z2_Todays_Class/clase2/adaptive_images/profile.htm

60
Actividad
http://www.responsivegridsystem.com/calculator/

61
Fundamentos de programación
Web para el Diseño Responsivo
62
Media Queries

63
Ejemplo de un media query
@media [not|only] type [and]

(expr) {
rules
}

64
Tipos de media queries
@media print {
}

65
Breakpoints

66
Actividad
http://beta.screenqueri.es/

67
Actividad

68
Actividad

69
Actividad

70
Actividad
Vamos a
Analizar sitios Web que utilizan
Media Queries
http://mediaqueri.es/

71
www.apptua.com
facebook.com/Apptua
@educamedia
leomonttenegro@gmail.com
leo@apptua.com
(0414) 121.43.69/ (0214) 119.06.89
72
Facebook.com/Institutointernet
@InstInternet
contactenos@institutointernet.net
(0212) 519.17.12/ (0212) 953.82.29
73

Diseno Responsivo Part 2a

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Diseno Responsivo Part 2a

Hochgeladen von

Copyright:

Verfügbare Formate

Diseño Responsivo:

Herramientas para el diseño Web responsivo

Flexibilidad en la Web responsiva

Layouts para el diseño Web responsivo

Diseño Responsivo: Web Móvil www.institutointernet.net

 Identificar el workflow utilizado para el diseño

 Reconocer las herramientas para el diseño Web responsivo.

 Identificar los tipos de layouts para el diseño Web

 Reconocer fundamentos de programación Web para tratar

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

¿La resolución de pantalla es igual

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

The responsive projects I’ve worked on have had a lot of

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Drupalcon Denver Keynote Day 3

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Paul Robert Lloyd

Diseño Responsivo: Web Móvil www.institutointernet.net

¿Un sitio Web tiene que verse igual

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

Diseño Responsivo: Web Móvil www.institutointernet.net

¿Cuál de los tipos de layouts vistos

Diseño Responsivo: Web Móvil www.institutointernet.net