Your SlideShare is downloading. ×
0
MAQUETACIÓNEN LOS NUEVOS MEDIOSBLAS HERNÁNDEZ PERIS
01 ANTECEDENTES
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                               1ª ETAPA                               ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                       1993 - 1995          GRANDES                  S...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   RESULTADO  NULA  LEGIBILIDAD  FALTA...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                               2ª ETAPA                    EN BUSCA DE...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS            APARICIÓN DE LAS PRIMERAS RETÍCULAS                ASIMILA...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                ESTANDARIZACIÓN DE LA RESOLUCIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                               USO DE ICONOGRAFÍA
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCONTINÚAN LASLIMITACIONESDE VELOCIDADCONCEPTO DE USABILIDADAPARECE LA ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                               3ª ETAPA                            INT...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                             AUMENTA LA VELOCIDAD                     ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                         MACROMEDIA   LANZA FLASH
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   EXPLOSIÓN CREATIVA
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                    NUEVOS SISTEMAS DE NAVEGACIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS              ¿ES ACCESIBLE NUESTRO CONTENIDO?
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                        ACCESIBILIDAD / USABILIDAD
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                          PERFECCIONAMIENTO DE LAS                    ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2007 APPLE LANZA EL IPHONE ORIGINAL Y TODO CAMBIA…
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2008 GOOGLE LANZA ANDROID
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                           98% AUMENTAN LOS ACCESOS DE...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCOMIENZAN AAPARECER ENLAS ESTADÍSTICASDE NAVEGACIÓNNUEVASRESOLUCIONESL...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA VISUALIZACIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR DE USABILIDAD
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA ADAPTACIÓN DE LOS CONTENIDOS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   SOLUCIÓN                           ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS   DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                        ALTOS COSTES +   DIVERSIDAD
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   SOLUCIÓN                           ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS               DESARROLLOS ALTERNATIVOS PARA MÓVILES                  ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                           ELPAIS.COM   ELPAIS.COM/M
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2011 COMIENZAN A APARECER LAS PRIMERAS TABLETS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MÁS FORMATOS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS           APARICIÓN DE MÚLTIPLES FORMATOS          EN LAS ESTADÍSTICA...
02SITUACIÓNACTUAL
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                 ESTADÍSTICAS                         ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                       NUEVA SOLUCIÓN                        RESPONSIV...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS      ¿QUÉ ES EL RESPONSIVE DESIGN?          WWW                      ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                            ¿CÓMO FUNCIONA?                       @med...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   @MEDIA QUERY                       ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                     ¿QUÉ RESULTADOS DA?
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                          ¿QUÉ RESULTADOS DA?                         ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                               COMPARATIVA          APP               ...
03PLANIFICACIÓNY EJECUCIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                   ¿QUÉ DEBEMOS TENER                       EN CUENTA?...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                         WIREFRAMES                        LA PLANIFIC...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                ¿CÓMO PODEMOS REALIZAR UN WIRE FRAME?    Procedimiento...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                PLANIFICANDO UNA                      ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                          EJECUCIÓN                   IMPORTANCIA DE L...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                    ¿CÓMO MANTENER EL ÁREA                       DE PR...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN ELÁSTICA http://www.buildwindows.co m/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-ESCALADO http://builtwithmomentum.c om/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN AL ESPACIO http://moderngreenhome.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.luciopiunti.it/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCAMBIO DE PRESENTACIÓN http://shinydemos.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISSIMPLIFICACIÓN http://www.it.eku.edu/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                       OPTIMIZACIÓN                            DE     ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stury.in/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://colly.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stoppress.co.nz/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                  DIFERENCIAS EN                   LA NAVEGACIÓN      ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   24X24 PX    ¿CUÁNTO MIDE UN DEDO?  ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                   ¿CÓMO OPTIMIZAR                    LA NAVEGACIÓN?
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN http://www.regent- college.edu/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.williamcsete.com /
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISAGRUPACIÓNhttp://www.bostonglobe.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-DISEÑO DE LA NAVEGACIÓNhttp://cabinetguerin.eu/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS            ADAPTACIÓN DE LA               INFORMACIÓN                ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS             ¿CÓMO ADAPTAR EL CONTENIDO?
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                        FUENTE/TIPOGRAFÍA
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS              SELECCIÓN DE LA FUENTE                    Elige una fuen...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS              SELECCIÓN DE LA FUENTE        No utilices más de tres ti...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                  USO DE LA TIPOGRAFÍA         No abuses de las mayúsc...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                  USO DE LA TIPOGRAFÍA                Emplea un tamaño...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                  USO DE LA TIPOGRAFÍA               Añade títulos, ne...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                  USO DE LA TIPOGRAFÍA                 No justifiques ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                USO DE IMÁGENES                 FACTORES A TENER EN   ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                TAMAÑO DE LA PANTALLA
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                TAMAÑO DE LA PANTALLA
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                DENSIDAD DE LA PANTALLA           100%                ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                          REPRESENTACIÓN                        IMAGEN...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                         REPRESENTACIÓN                       IMAGEN D...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                   CONVERSORES     http://teehanlax.co...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                             CONTENIDOS                             MU...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                             TECNOLOGÍASI HTML5                       ...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS              CONTROL        DE LA REPRODUCCIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                   EVITAR LA       PERMITIR                REPRODUCCIÓ...
04TESTEO
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                PRUEBA TU WEB EN TODOS                   LOS NAVEGADOR...
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                                            REVISA LA                 ...
05INSPIRACIÓN
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS    http://us.illyissimo.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.westerscheldetunn el.nl/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.vogue.co.uk /
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS    http://www.about.com
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS    http://traveloregon.com/
Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS                       MUCHÍSIMAS                        GRACIAS      ...
Upcoming SlideShare
Loading in...5
×

Maquetacion en los nuevos medios

401

Published on

Presentación de Blas Hernández (MASmedios) sobre la ponencia expuesta en el III congreso universitario sobre redes sociales Comunica2, edición "Escribir en internet".

El congreso tuvo lugar los días 21 y 22 de febrero de 2013 en el campus de Gandia de la Universitat Politécnica de Valencia.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
401
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Maquetacion en los nuevos medios"

  1. 1. MAQUETACIÓNEN LOS NUEVOS MEDIOSBLAS HERNÁNDEZ PERIS
  2. 2. 01 ANTECEDENTES
  3. 3. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 1ª ETAPA LOS INICIOS
  4. 4. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 1993 - 1995 GRANDES SIN FALTA DE LIMITACIONES EXPERIENCIA CULTURA DE VELOCIDAD PREVIA GRÁFICA
  5. 5. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS RESULTADO NULA LEGIBILIDAD FALTA DE JERARQUÍAS POCO PROFESIONAL
  6. 6. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2ª ETAPA EN BUSCA DEL ORDEN
  7. 7. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS APARICIÓN DE LAS PRIMERAS RETÍCULAS ASIMILADAS POR LOS USUARIOS
  8. 8. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ESTANDARIZACIÓN DE LA RESOLUCIÓN
  9. 9. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE ICONOGRAFÍA
  10. 10. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCONTINÚAN LASLIMITACIONESDE VELOCIDADCONCEPTO DE USABILIDADAPARECE LA FIGURA DELDISEÑADOR/MAQUETADORMULTIMEDIA
  11. 11. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 3ª ETAPA INTERACTIVIDAD
  12. 12. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS AUMENTA LA VELOCIDAD DE CONEXIÓN
  13. 13. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MACROMEDIA LANZA FLASH
  14. 14. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EXPLOSIÓN CREATIVA
  15. 15. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS NUEVOS SISTEMAS DE NAVEGACIÓN
  16. 16. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿ES ACCESIBLE NUESTRO CONTENIDO?
  17. 17. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ACCESIBILIDAD / USABILIDAD
  18. 18. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PERFECCIONAMIENTO DE LAS TÉCNICAS DE MAQUETACIÓN
  19. 19. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2007 APPLE LANZA EL IPHONE ORIGINAL Y TODO CAMBIA…
  20. 20. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2008 GOOGLE LANZA ANDROID
  21. 21. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 98% AUMENTAN LOS ACCESOS DESDE DISPOSITIVOS MÓVILES 2% MOVIL PC
  22. 22. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCOMIENZAN AAPARECER ENLAS ESTADÍSTICASDE NAVEGACIÓNNUEVASRESOLUCIONESLAS WEBSITESNO ESTÁNPREPARADAS
  23. 23. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA VISUALIZACIÓN
  24. 24. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR DE USABILIDAD
  25. 25. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA ADAPTACIÓN DE LOS CONTENIDOS
  26. 26. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SOLUCIÓN APP
  27. 27. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES
  28. 28. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ALTOS COSTES + DIVERSIDAD
  29. 29. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  30. 30. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SOLUCIÓN .MOBI
  31. 31. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DESARROLLOS ALTERNATIVOS PARA MÓVILES WWW.URL.COM WWW.URL.MOBI
  32. 32. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ELPAIS.COM ELPAIS.COM/M
  33. 33. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2011 COMIENZAN A APARECER LAS PRIMERAS TABLETS
  34. 34. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MÁS FORMATOS
  35. 35. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS APARICIÓN DE MÚLTIPLES FORMATOS EN LAS ESTADÍSTICAS DE NAVEGACIÓN
  36. 36. 02SITUACIÓNACTUAL
  37. 37. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ESTADÍSTICAS ACCESO A INTERNET 90%2012 70% 2015 30% 14% MÓVIL PC MÓVIL PC TABLET TABLET
  38. 38. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS NUEVA SOLUCIÓN RESPONSIVE DESIGN
  39. 39. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ ES EL RESPONSIVE DESIGN? WWW DISEÑO ADAPTADO
  40. 40. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO FUNCIONA? @media query
  41. 41. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS @MEDIA QUERY @media (min-width: xxx px)
  42. 42. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA?
  43. 43. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA? http://foodsense.is/
  44. 44. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS COMPARATIVA APP WEB MOBILE RESPONSIVE Contenidos Contenidos Contenidos a medida a medida adaptados Altos coste Altos coste bajos costes de de producción de producción y producción mantenimiento Versión por Versión por Adaptación a sistema dispositivo dispositivos operativo (resolución)
  45. 45. 03PLANIFICACIÓNY EJECUCIÓN
  46. 46. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ DEBEMOS TENER EN CUENTA? USUARIO ACCESO TECNOLOGÍA TARGET DEL USUARIO COMO LOGRARLO
  47. 47. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS WIREFRAMES LA PLANIFICACIÓN
  48. 48. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  49. 49. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO PODEMOS REALIZAR UN WIRE FRAME? Procedimiento Herramientas de Aplicaciones para manual Edición Wireframes Photoshop www.wireframe.cc Lapiz y papel Illustrator www.cacoo.com Cartulinas Freehand www.powermockup.com Posits Power point www.axure.com
  50. 50. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PLANIFICANDO UNA MAQUETACIÓN MULTIDISPOSITIVO
  51. 51. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EJECUCIÓN IMPORTANCIA DE LA PRESENTACIÓN
  52. 52. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  53. 53. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO MANTENER EL ÁREA DE PRESENTACIÓN?
  54. 54. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN ELÁSTICA http://www.buildwindows.co m/
  55. 55. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-ESCALADO http://builtwithmomentum.c om/
  56. 56. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN AL ESPACIO http://moderngreenhome.com/
  57. 57. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.luciopiunti.it/
  58. 58. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCAMBIO DE PRESENTACIÓN http://shinydemos.com/
  59. 59. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISSIMPLIFICACIÓN http://www.it.eku.edu/
  60. 60. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS OPTIMIZACIÓN DE LA RESOLUCIÓN
  61. 61. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  62. 62. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stury.in/
  63. 63. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://colly.com/
  64. 64. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stoppress.co.nz/
  65. 65. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DIFERENCIAS EN LA NAVEGACIÓN INTERACCIÓN
  66. 66. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 24X24 PX ¿CUÁNTO MIDE UN DEDO? 32X32 PX
  67. 67. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO OPTIMIZAR LA NAVEGACIÓN?
  68. 68. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN http://www.regent- college.edu/
  69. 69. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.williamcsete.com /
  70. 70. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISAGRUPACIÓNhttp://www.bostonglobe.com/
  71. 71. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-DISEÑO DE LA NAVEGACIÓNhttp://cabinetguerin.eu/
  72. 72. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ADAPTACIÓN DE LA INFORMACIÓN EL CONTENIDO
  73. 73. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO ADAPTAR EL CONTENIDO?
  74. 74. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS FUENTE/TIPOGRAFÍA
  75. 75. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SELECCIÓN DE LA FUENTE Elige una fuente diseñada para leer en pantalla
  76. 76. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SELECCIÓN DE LA FUENTE No utilices más de tres tipos de letra en una misma página
  77. 77. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No abuses de las mayúsculas: dificultan la lectura
  78. 78. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA Emplea un tamaño de letra adecuado mínimo 14px
  79. 79. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA Añade títulos, negritas y destacados al texto
  80. 80. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No justifiques el texto
  81. 81. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE IMÁGENES FACTORES A TENER EN CUENTA
  82. 82. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TAMAÑO DE LA PANTALLA
  83. 83. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TAMAÑO DE LA PANTALLA
  84. 84. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DENSIDAD DE LA PANTALLA 100% 150% 200% 225% MDPI HDPI RETINA XHDPI NO-RETINA 20 PX 30 PX 40 PX 45 PX
  85. 85. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300PX NO-RETINA 300PX RETINA 300PX
  86. 86. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300 PX NO-RETINA 300PX RETINA 600 PX
  87. 87. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONVERSORES http://teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html
  88. 88. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONTENIDOS MULTIMEDIA FACTORES A TENER EN CUENTA
  89. 89. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TECNOLOGÍASI HTML5 NO FLASH MP4 SWF M4V FLV WEBM OGG OGV
  90. 90. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONTROL DE LA REPRODUCCIÓN
  91. 91. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EVITAR LA PERMITIR REPRODUCCIÓN EL CONTROL DE INSTANTÁNEA LA REPRODUCCIÓN
  92. 92. 04TESTEO
  93. 93. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PRUEBA TU WEB EN TODOS LOS NAVEGADORES http://browsershots.org/ http://www.browserling.com/
  94. 94. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REVISA LA REPRESENTACIÓN EN MÚLTIPLES DISPOSITIVOS http://screenqueri.es/ http://resizemybrowser.com/ http://mattkersley.com/responsive/ http://www.responsinator.com/
  95. 95. 05INSPIRACIÓN
  96. 96. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://us.illyissimo.com/
  97. 97. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.westerscheldetunn el.nl/
  98. 98. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.vogue.co.uk /
  99. 99. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.about.com
  100. 100. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://traveloregon.com/
  101. 101. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MUCHÍSIMAS GRACIAS Mail: blas@masmedios.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×