Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsiveweb designTona Monjo http://www.latent-design.com
El contexto: diferentes dispositivos                                       http://www.siliconbeachtraining.co.uk/blog/make...
El contexto: diferentes formatos                                                        Un ejemplo: la variedad de formato...
Diseño fijo                                               DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA4    Tona Monjo http:...
Responsive web design                                               DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA5    Tona M...
Responsive web design                     1. Layout basado en una retícula flexible                     2. Imagen y media ...
Responsive web design                                               http://dribbble.com/shots/494207-Responsive-Design-mob...
Responsive web design    1. Layout basado en una retícula flexible                                               http://bo...
Responsive web design    1. Layout basado en una retícula flexible                               http://elliotjaystocks.co...
Responsive web design     1. Layout basado en una retícula flexible                                                http://...
Responsive web design     2. Imagen y media flexibles                                                http://heathlife.co.u...
Responsive web design     3. Comportamientos adaptativos                                       El comportamiento del menú ...
Responsive web design     4. Posición flexible de los elementos                                                http://coll...
Responsive web design     5. Tamaño flexible del texto y elementos interactivos                                           ...
Responsive web design     6. Control de la visibilidad de los elementos                                          Algunos e...
Responsive web design     ¿Cómo?                Media Queries                Permiten comprobar las condiciones del dispos...
Más info Ejemplos     http://mediaqueri.es/ Recursos     http://bradfrost.github.com/this-is-responsive/ Artículos     htt...
Nächste SlideShare
Wird geladen in …5
×

6

Teilen

Herunterladen, um offline zu lesen

Responsive web design

Herunterladen, um offline zu lesen

Responsive web design

  1. 1. DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsiveweb designTona Monjo http://www.latent-design.com
  2. 2. El contexto: diferentes dispositivos http://www.siliconbeachtraining.co.uk/blog/make-your-business-mobile/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA2 Tona Monjo http://www.latent-design.com Responsive web design
  3. 3. El contexto: diferentes formatos Un ejemplo: la variedad de formatos Android http://mashable.com/2012/05/16/android-fragmentation-graphic/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA3 Tona Monjo http://www.latent-design.com Responsive web design
  4. 4. Diseño fijo DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA4 Tona Monjo http://www.latent-design.com Responsive web design
  5. 5. Responsive web design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA5 Tona Monjo http://www.latent-design.com Responsive web design
  6. 6. Responsive web design 1. Layout basado en una retícula flexible 2. Imagen y media flexibles 3. Comportamientos adaptativos 4. Posición flexible de los elementos 5. Tamaño flexible de texto y elementos interactivos 6. Control de la visibilidad de los elementos DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA6 Tona Monjo http://www.latent-design.com Responsive web design
  7. 7. Responsive web design http://dribbble.com/shots/494207-Responsive-Design-mobile-first DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA7 Tona Monjo http://www.latent-design.com Responsive web design
  8. 8. Responsive web design 1. Layout basado en una retícula flexible http://bostonglobe.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA8 Tona Monjo http://www.latent-design.com Responsive web design
  9. 9. Responsive web design 1. Layout basado en una retícula flexible http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA9 Tona Monjo http://www.latent-design.com Responsive web design
  10. 10. Responsive web design 1. Layout basado en una retícula flexible http://www.cmswire.com/images/responsive-grid.png DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA10 Tona Monjo http://www.latent-design.com Responsive web design
  11. 11. Responsive web design 2. Imagen y media flexibles http://heathlife.co.uk/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA11 Tona Monjo http://www.latent-design.com Responsive web design
  12. 12. Responsive web design 3. Comportamientos adaptativos El comportamiento del menú principal se adapta a los diferentes formatos http://www.time.com/time/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA12 Tona Monjo http://www.latent-design.com Responsive web design
  13. 13. Responsive web design 4. Posición flexible de los elementos http://colly.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA13 Tona Monjo http://www.latent-design.com Responsive web design
  14. 14. Responsive web design 5. Tamaño flexible del texto y elementos interactivos http://www.deren.me/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA14 Tona Monjo http://www.latent-design.com Responsive web design
  15. 15. Responsive web design 6. Control de la visibilidad de los elementos Algunos elementos son visibles en escritorio, pero no en smartphone http://thehappybit.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA15 Tona Monjo http://www.latent-design.com Responsive web design
  16. 16. Responsive web design ¿Cómo? Media Queries Permiten comprobar las condiciones del dispositivo (true o false), para aplicar las hojas de estilo o reglas CSS correspondientes. http://alistapart.com/article/responsive-web-design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA16 Tona Monjo http://www.latent-design.com Responsive web design
  17. 17. Más info Ejemplos http://mediaqueri.es/ Recursos http://bradfrost.github.com/this-is-responsive/ Artículos http://alistapart.com/topic/responsive-design Libros http://www.abookapart.com/products/responsive-web-design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA17 Tona Monjo http://www.latent-design.com Responsive web design
  • jordiubanell

    Nov. 16, 2018
  • beatrizhernandezmoreno1

    Oct. 22, 2015
  • geraldinems

    Mar. 30, 2015
  • lalie

    Nov. 27, 2014
  • chjin

    Oct. 15, 2014
  • qinteractiva

    Jan. 27, 2014

Aufrufe

Aufrufe insgesamt

1.534

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

6

Befehle

Downloads

31

Geteilt

0

Kommentare

0

Likes

6

×