• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Maquetacion en los nuevos medios
 

Maquetacion en los nuevos medios

on

  • 578 views

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.

Statistics

Views

Total Views
578
Views on SlideShare
578
Embed Views
0

Actions

Likes
2
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Maquetacion en los nuevos medios Maquetacion en los nuevos medios Presentation Transcript

    • MAQUETACIÓNEN LOS NUEVOS MEDIOSBLAS HERNÁNDEZ PERIS
    • 01 ANTECEDENTES
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 1ª ETAPA LOS INICIOS
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 1993 - 1995 GRANDES SIN FALTA DE LIMITACIONES EXPERIENCIA CULTURA DE VELOCIDAD PREVIA GRÁFICA
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS RESULTADO NULA LEGIBILIDAD FALTA DE JERARQUÍAS POCO PROFESIONAL
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 2ª ETAPA EN BUSCA DEL ORDEN
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS APARICIÓN DE LAS PRIMERAS RETÍCULAS ASIMILADAS POR LOS USUARIOS
    • 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 FIGURA DELDISEÑADOR/MAQUETADORMULTIMEDIA
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 3ª ETAPA INTERACTIVIDAD
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS AUMENTA LA VELOCIDAD DE CONEXIÓN
    • 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 TÉCNICAS DE MAQUETACIÓN
    • 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 DESDE DISPOSITIVOS MÓVILES 2% MOVIL PC
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERISCOMIENZAN AAPARECER ENLAS ESTADÍSTICASDE NAVEGACIÓNNUEVASRESOLUCIONESLAS WEBSITESNO ESTÁNPREPARADAS
    • 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 APP
    • 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 .MOBI
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS DESARROLLOS ALTERNATIVOS PARA MÓVILES WWW.URL.COM WWW.URL.MOBI
    • 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ÍSTICAS DE NAVEGACIÓN
    • 02SITUACIÓNACTUAL
    • 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
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS NUEVA SOLUCIÓN RESPONSIVE DESIGN
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ ES EL RESPONSIVE DESIGN? WWW DISEÑO ADAPTADO
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO FUNCIONA? @media query
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS @MEDIA QUERY @media (min-width: xxx px)
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA?
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ RESULTADOS DA? http://foodsense.is/
    • 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)
    • 03PLANIFICACIÓNY EJECUCIÓN
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿QUÉ DEBEMOS TENER EN CUENTA? USUARIO ACCESO TECNOLOGÍA TARGET DEL USUARIO COMO LOGRARLO
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS WIREFRAMES LA PLANIFICACIÓN
    • 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 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
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PLANIFICANDO UNA MAQUETACIÓN MULTIDISPOSITIVO
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS EJECUCIÓN IMPORTANCIA DE LA PRESENTACIÓN
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS ¿CÓMO MANTENER EL ÁREA DE PRESENTACIÓN?
    • 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 LA RESOLUCIÓN
    • 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 INTERACCIÓN
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS 24X24 PX ¿CUÁNTO MIDE UN DEDO? 32X32 PX
    • 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 EL CONTENIDO
    • 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 fuente diseñada para leer en pantalla
    • 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
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No abuses de las mayúsculas: dificultan la lectura
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA Emplea un tamaño de letra adecuado mínimo 14px
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA Añade títulos, negritas y destacados al texto
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE LA TIPOGRAFÍA No justifiques el texto
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS USO DE IMÁGENES FACTORES A TENER EN CUENTA
    • 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% 150% 200% 225% MDPI HDPI RETINA XHDPI NO-RETINA 20 PX 30 PX 40 PX 45 PX
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300PX NO-RETINA 300PX RETINA 300PX
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS REPRESENTACIÓN IMAGEN DE A 300 PX NO-RETINA 300PX RETINA 600 PX
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONVERSORES http://teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS CONTENIDOS MULTIMEDIA FACTORES A TENER EN CUENTA
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS TECNOLOGÍASI HTML5 NO FLASH MP4 SWF M4V FLV WEBM OGG OGV
    • 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ÓN EL CONTROL DE INSTANTÁNEA LA REPRODUCCIÓN
    • 04TESTEO
    • Maquetación en los nuevos mediosBLAS HERNÁNDEZ PERIS PRUEBA TU WEB EN TODOS LOS NAVEGADORES http://browsershots.org/ http://www.browserling.com/
    • 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/
    • 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 Mail: blas@masmedios.com