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