Maquetacion en los nuevos medios

  • 327 views
Uploaded 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". …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
327
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MAQUETACIÓNEN LOS NUEVOS MEDIOSBLAS HERNÁNDEZ PERIS
  • 2. 01 ANTECEDENTES
  • 3. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 1ª ETAPA LOS INICIOS
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS RESULTADO NULA LEGIBILIDAD FALTA DE JERARQUÍAS POCO PROFESIONAL
  • 6. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2ª ETAPA EN BUSCA DEL ORDEN
  • 7. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS APARICIÓN DE LAS PRIMERAS RETÍCULAS ASIMILADAS POR LOS USUARIOS
  • 8. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ESTANDARIZACIÓN DE LA RESOLUCIÓN
  • 9. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE ICONOGRAFÍA
  • 10. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCONTINÚAN LASLIMITACIONESDE VELOCIDADCONCEPTO DE USABILIDADAPARECE LA FIGURA DELDISEÑADOR/MAQUETADORMULTIMEDIA
  • 11. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 3ª ETAPA INTERACTIVIDAD
  • 12. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS AUMENTA LA VELOCIDAD DE CONEXIÓN
  • 13. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MACROMEDIA LANZA FLASH
  • 14. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EXPLOSIÓN CREATIVA
  • 15. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS NUEVOS SISTEMAS DE NAVEGACIÓN
  • 16. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿ES ACCESIBLE NUESTRO CONTENIDO?
  • 17. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ACCESIBILIDAD / USABILIDAD
  • 18. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PERFECCIONAMIENTO DE LAS TÉCNICAS DE MAQUETACIÓN
  • 19. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2007 APPLE LANZA EL IPHONE ORIGINAL Y TODO CAMBIA…
  • 20. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2008 GOOGLE LANZA ANDROID
  • 21. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 98% AUMENTAN LOS ACCESOS DESDE DISPOSITIVOS MÓVILES 2% MOVIL PC
  • 22. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCOMIENZAN AAPARECER ENLAS ESTADÍSTICASDE NAVEGACIÓNNUEVASRESOLUCIONESLAS WEBSITESNO ESTÁNPREPARADAS
  • 23. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA VISUALIZACIÓN
  • 24. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR DE USABILIDAD
  • 25. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ERROR EN LA ADAPTACIÓN DE LOS CONTENIDOS
  • 26. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SOLUCIÓN APP
  • 27. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES
  • 28. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ALTOS COSTES + DIVERSIDAD
  • 29. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  • 30. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS SOLUCIÓN .MOBI
  • 31. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DESARROLLOS ALTERNATIVOS PARA MÓVILES WWW.URL.COM WWW.URL.MOBI
  • 32. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ELPAIS.COM ELPAIS.COM/M
  • 33. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2011 COMIENZAN A APARECER LAS PRIMERAS TABLETS
  • 34. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MÁS FORMATOS
  • 35. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS APARICIÓN DE MÚLTIPLES FORMATOS EN LAS ESTADÍSTICAS DE NAVEGACIÓN
  • 36. 02SITUACIÓNACTUAL
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS NUEVA SOLUCIÓN RESPONSIVE DESIGN
  • 39. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ ES EL RESPONSIVE DESIGN? WWW DISEÑO ADAPTADO
  • 40. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO FUNCIONA? @media query
  • 41. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS @MEDIA QUERY @media (min-width: xxx px)
  • 42. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA?
  • 43. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA? http://foodsense.is/
  • 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. 03PLANIFICACIÓNY EJECUCIÓN
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS WIREFRAMES LA PLANIFICACIÓN
  • 48. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PLANIFICANDO UNA MAQUETACIÓN MULTIDISPOSITIVO
  • 51. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EJECUCIÓN IMPORTANCIA DE LA PRESENTACIÓN
  • 52. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  • 53. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO MANTENER EL ÁREA DE PRESENTACIÓN?
  • 54. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN ELÁSTICA http://www.buildwindows.co m/
  • 55. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-ESCALADO http://builtwithmomentum.c om/
  • 56. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN AL ESPACIO http://moderngreenhome.com/
  • 57. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.luciopiunti.it/
  • 58. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCAMBIO DE PRESENTACIÓN http://shinydemos.com/
  • 59. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISSIMPLIFICACIÓN http://www.it.eku.edu/
  • 60. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS OPTIMIZACIÓN DE LA RESOLUCIÓN
  • 61. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
  • 62. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stury.in/
  • 63. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://colly.com/
  • 64. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.stoppress.co.nz/
  • 65. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DIFERENCIAS EN LA NAVEGACIÓN INTERACCIÓN
  • 66. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 24X24 PX ¿CUÁNTO MIDE UN DEDO? 32X32 PX
  • 67. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO OPTIMIZAR LA NAVEGACIÓN?
  • 68. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISADAPTACIÓN http://www.regent- college.edu/
  • 69. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-UBICACIÓN http://www.williamcsete.com /
  • 70. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISAGRUPACIÓNhttp://www.bostonglobe.com/
  • 71. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISRE-DISEÑO DE LA NAVEGACIÓNhttp://cabinetguerin.eu/
  • 72. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ADAPTACIÓN DE LA INFORMACIÓN EL CONTENIDO
  • 73. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO ADAPTAR EL CONTENIDO?
  • 74. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS FUENTE/TIPOGRAFÍA
  • 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. 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No abuses de las mayúsculas: dificultan la lectura
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA Añade títulos, negritas y destacados al texto
  • 80. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No justifiques el texto
  • 81. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE IMÁGENES FACTORES A TENER EN CUENTA
  • 82. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TAMAÑO DE LA PANTALLA
  • 83. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TAMAÑO DE LA PANTALLA
  • 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. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300PX NO-RETINA 300PX RETINA 300PX
  • 86. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300 PX NO-RETINA 300PX RETINA 600 PX
  • 87. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONVERSORES http://teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html
  • 88. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONTENIDOS MULTIMEDIA FACTORES A TENER EN CUENTA
  • 89. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TECNOLOGÍASI HTML5 NO FLASH MP4 SWF M4V FLV WEBM OGG OGV
  • 90. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONTROL DE LA REPRODUCCIÓN
  • 91. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EVITAR LA PERMITIR REPRODUCCIÓN EL CONTROL DE INSTANTÁNEA LA REPRODUCCIÓN
  • 92. 04TESTEO
  • 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. 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. 05INSPIRACIÓN
  • 96. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://us.illyissimo.com/
  • 97. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.westerscheldetunn el.nl/
  • 98. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.vogue.co.uk /
  • 99. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://www.about.com
  • 100. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS http://traveloregon.com/
  • 101. Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS MUCHÍSIMAS GRACIAS Mail: blas@masmedios.com