SlideShare une entreprise Scribd logo
1  sur  43
taller 6
                internet y el diseño de la información




                      taller_media
martes 14 de agosto de 2012
“[ ]porque todo diseño
                  comienza cuando se
                  comprende y se
                  interpreta”
                Alan Fletcher




martes 14 de agosto de 2012
The world is complex, dynamic, multidimensional; the
        paper is static, flat. How are we to represent the rich
        visual world of experience and measurement on mere
        flatland?

        Edward Tufte, Envisioning Information, 1990.




         El mundo es complejo, dinámico, multidimensional; el papel es
         estático, plano. ¿Como vamos a representar el rico mundo
         visual de las experiencias y las medidas en un pobre espacio
         plano?


     taller 6 - información y medios digitales
martes 14 de agosto de 2012
programa instruccional
       1. Prepara archivos de proyectos multimedia en Internet

       2. Propone conceptos, herramientas y recursos en un proyecto
       multimedia Internet.

       3 Crea un proyecto interactivo con herramientas digitales de
       autoría




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
programa instruccional
       1. Prepara archivos de proyectos multimedia en Internet

       2. Propone conceptos, herramientas y recursos en un proyecto
       multimedia Internet.

       3 Crea un proyecto interactivo con herramientas digitales de
       autoría




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
programa instruccional
       1. Prepara archivos de proyectos multimedia en Internet

       2. Propone conceptos, herramientas y recursos en un proyecto
       multimedia Internet.

       3 Crea un proyecto interactivo con herramientas digitales de
       autoría




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
programa instruccional
                              subunidades de competencias


       Determina las herramientas digitales según los soportes de
       salida (Internet, CD-Rom) de un proyecto.

       Reúne recursos y herramientas digitales en función de un
       proyecto interactivo (imágenes, videos, sonidos).

       Propone conceptos, herramientas y recursos en un proyecto
       interactivo.




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
taller 6
                tiempos de trabajo




martes 14 de agosto de 2012
experiencia de usuario UX
     Usabilidad
     Factores sociales
     Factores culturales
     Contexto de uso




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
experiencia de usuario UX
     Usabilidad
     Factores sociales
     Factores culturales
     Contexto de uso




     arquitectura de la información AI
     Contenido (card sorting)
     Estudio (blue prints)
     Representación (wireframes)
     Evaluación (test de usuario)




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
diseño de interfaz UI
     Elementos gráficos (el rol del diseñador)
     Elementos activos (el rol del programador)
     La semántica del la web (el rol del usuario)
     Frameworks (pensando en dispositivos)




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
diseño de interfaz UI
     Elementos gráficos (el rol del diseñador)
     Elementos activos (el rol del programador)
     La semántica del la web (el rol del usuario)
     Frameworks (pensando en dispositivos)




     desarrollo web :)

     HTML5, HTML
     CSS3, CSS
     Javascript (lenguajes de interactividad)
     Publicación
     Administración de contenidos



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
taller 6
                evaluaciones




martes 14 de agosto de 2012
evaluaciones
       13 Notas
       5 Individuales
       8 Grupales

       No existen entregas atrasadas
       Correcciones grupales
       Comunicación




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
diseño de la
                información

martes 14 de agosto de 2012
diseño de la información
                El DI puede definirse como el arte y la ciencia de
                preparar la información, de modo que pueda usarse
                por los humanos con eficacia y eficiencia


                                                     Horn (1999)

     taller 6 - información y medios digitales
martes 14 de agosto de 2012
definición de la información
       La información es un conjunto de mecanismos que permiten al
       individuo retomar los datos de su ambiente y estructurarlos de
       una manera determinada, de modo que le sirvan de guía para
       su acción.




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
50 millones de usuarios




                                                 38 años



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
50 millones de usuarios




                                                 13 años



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
50 millones de usuarios




                                                 4 años



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
50 millones de usuarios




                                                 3 años



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
50 millones de usuarios




                                                 2 años



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
la información
                es progresiva y por ende altamente complejizada en
                razón de las nuevas tecnologías




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
3 puntos fundamentales
       1. El diseñar información es trabajar con datos que puedan
       llegar a convertirse en información valiosa para un lector meta

       2. En el diseño se persigue no solo la comunicación de la
       información, sino también su asimilación o aprendizaje a fin de
       convertirse en conocimiento

       3. La información que se diseña, se hace con base en la
       intención, experiencia y pertinencia del usuario final




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
La comprensibilidad del documento
                se puede conseguir mediante la
                visualización de los componentes
                que lo forman




martes 14 de agosto de 2012
documentos                                      El primer requisito del DI es que los
                                                 documentos que transmiten información
 comprensibles                                   deben ser comprensibles.




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
documentos
 comprensibles


                                                 implican la visualización de todos los
 sistemas                                        elementos de la interacción, lo que
 interactivos                                    incluye el entorno social, el estado
                                                 cognitivo del usuario, el sistema de
                                                 diseño




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
documentos
 comprensibles



 sistemas
 interactivos
                                                 Cuando los espacios informativos se
                                                 diseñan, deben ser navegables para los
                                                 usuarios.
 espacios de                                     Por analogía con la navegación real, se
 información                                     debe diseñar la información conectando
 navegables                                      las tareas con el modo de encontrar el
                                                 camino y de poner señales.
     taller 6 - información y medios digitales
martes 14 de agosto de 2012
usabilidad

martes 14 de agosto de 2012
la usabilidad es la facilidad con que las
       personas pueden utilizar una
       herramienta con el fin de alcanzar un
       objetivo concreto




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
taller 6 - información y medios digitales
martes 14 de agosto de 2012
usabilidad
       diseñar es organizar elementos de modo que cumplan una
       necesidad particular de la mejor manera/forma posible.
       (Charles Eames)




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
usabilidad
       diseñar es organizar elementos de modo que cumplan una
       necesidad particular de la mejor manera/forma posible.
       (Charles Eames)



                                         Steve Krug

                                        DON’T MAKE
                                        ME THINK
     taller 6 - información y medios digitales
martes 14 de agosto de 2012
orga
  ni
  zar
  estructura
  clara y
  convincente




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
orga eco
  ni   nomi
  zar zar
  estructura                            lo máximo con
  clara y                               la menor
  convincente                           cantidad de
                                        elementos



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
orga eco co
  ni   nomi muni
  zar zar   car
  estructura                            lo máximo con   presentación a
  clara y                               la menor        la capacidad
  convincente                           cantidad de     del usuario
                                        elementos



     taller 6 - información y medios digitales
martes 14 de agosto de 2012
encargo 1
                estructura para la visualización de datos




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
considerar

          Un lenguaje visual es el conjunto de palabras,
          imágenes y formas que sirven para comunicar.

          Horn afirma que la comprensibilidad de un
          documento se puede evaluar mediante el examen del
          lenguaje visual subyacente que lo compone.




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
la base de lo solicitado
          El material es la selección de una aplicación para
          dispositivos móviles que posea presencia en la web
          pensando en como sería la simpleza de su uso

          Pensar en alfabetizar y encantar en su uso a su grupo
          objetivo utilizando experiencias subjetivas apoyadas
          en elementos objetivos




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
diseño de documento
          Crear un documento basándose en los 3 puntos
          fundamentales del diseño de la información.

          Se deben determinar criterios para migrar desde un
          sistema complejo (aplicación) a un entendimiento y
          aprehender *




          *aprehender: asimilar inmediatamente, llegar a entender.


     taller 6 - información y medios digitales
martes 14 de agosto de 2012
criterios
          1. Resumir: encontrar el objetivo macro relevante que
          contenga a los demás elementos del diseño

          2. Integración: pensar en una información navegable,
          creando un relato por medio de la sucesión y
          profundidad de contenidos

          3. Finalidad: determinar un grupo de personas, un
          contexto donde lo diseñado sea útil en cuanto a su
          información


     taller 6 - información y medios digitales
martes 14 de agosto de 2012
en cuanto a diseño...
          Categorizar visualmente

          Usar las variables visuales de color y tipografía

          Construir una retícula que contenga la información
          entendiendo la naturaleza de esta




     taller 6 - información y medios digitales
martes 14 de agosto de 2012
formato de entrega

          HTML, Flash, PDF interactivo

          Propuesta de contenidos: próxima clase

          Concluye con documento y lámina impresa (21/08)




     taller 6 - información y medios digitales
martes 14 de agosto de 2012

Contenu connexe

Tendances (6)

Examen final
Examen finalExamen final
Examen final
 
Taller Educamp Ppt
Taller Educamp PptTaller Educamp Ppt
Taller Educamp Ppt
 
Practica 04
Practica 04Practica 04
Practica 04
 
Presentacion1
Presentacion1Presentacion1
Presentacion1
 
Entornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativoEntornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativo
 
Alexandra. valencia 11 05
Alexandra. valencia 11 05Alexandra. valencia 11 05
Alexandra. valencia 11 05
 

En vedette

En vedette (8)

Planilla 26 08
Planilla 26 08Planilla 26 08
Planilla 26 08
 
Boletín nº15
Boletín nº15Boletín nº15
Boletín nº15
 
Simplex
SimplexSimplex
Simplex
 
Diseño web
Diseño webDiseño web
Diseño web
 
Trabajo 000315550 power_point
Trabajo 000315550 power_pointTrabajo 000315550 power_point
Trabajo 000315550 power_point
 
Como colocar un power point en tu blogger
Como colocar un power point en tu bloggerComo colocar un power point en tu blogger
Como colocar un power point en tu blogger
 
Práctica5
Práctica5Práctica5
Práctica5
 
Weekly report template
Weekly report templateWeekly report template
Weekly report template
 

Similaire à Diseño de la Información

Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptualesiConstruye
 
Proyectos digitales
Proyectos digitalesProyectos digitales
Proyectos digitalesiConstruye
 
Tarea 3 de tegnologia aplicada a la educacion
Tarea 3 de tegnologia aplicada a la educacionTarea 3 de tegnologia aplicada a la educacion
Tarea 3 de tegnologia aplicada a la educacionnolvillyRodriguez
 
Herramientas para contenidos digital
Herramientas para contenidos digitalHerramientas para contenidos digital
Herramientas para contenidos digitalVanessaMarmolejos
 
Tics equipo1 manualprezi.grupod-toluca
Tics equipo1 manualprezi.grupod-tolucaTics equipo1 manualprezi.grupod-toluca
Tics equipo1 manualprezi.grupod-tolucaLuzperegrina52
 
Jerarquización de contenidos
Jerarquización de contenidosJerarquización de contenidos
Jerarquización de contenidosiConstruye
 
Tarea 5 Tecnología aplicada a la Educación
Tarea 5 Tecnología aplicada a la EducaciónTarea 5 Tecnología aplicada a la Educación
Tarea 5 Tecnología aplicada a la Educaciónloreidiconstanza02
 
Powerpoint
PowerpointPowerpoint
PowerpointLau ch g
 
Indización social
Indización socialIndización social
Indización socialiConstruye
 
Tarea 5 tecnologia aplicada a la educacion
Tarea 5 tecnologia aplicada a la educacionTarea 5 tecnologia aplicada a la educacion
Tarea 5 tecnologia aplicada a la educaciondejesus22
 
Diseño de un PLE - Actividad 2, módulo 4.
Diseño de un PLE - Actividad 2, módulo 4. Diseño de un PLE - Actividad 2, módulo 4.
Diseño de un PLE - Actividad 2, módulo 4. Luis Lastra Cid
 
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...Spacetoshare
 

Similaire à Diseño de la Información (20)

Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
 
Proyectos digitales
Proyectos digitalesProyectos digitales
Proyectos digitales
 
Tarea 3 de tegnologia aplicada a la educacion
Tarea 3 de tegnologia aplicada a la educacionTarea 3 de tegnologia aplicada a la educacion
Tarea 3 de tegnologia aplicada a la educacion
 
Herramientas para contenidos digital
Herramientas para contenidos digitalHerramientas para contenidos digital
Herramientas para contenidos digital
 
Wireframes
WireframesWireframes
Wireframes
 
Tics equipo1 manualprezi.grupod-toluca
Tics equipo1 manualprezi.grupod-tolucaTics equipo1 manualprezi.grupod-toluca
Tics equipo1 manualprezi.grupod-toluca
 
Jerarquización de contenidos
Jerarquización de contenidosJerarquización de contenidos
Jerarquización de contenidos
 
Tarea 5 Tecnología aplicada a la Educación
Tarea 5 Tecnología aplicada a la EducaciónTarea 5 Tecnología aplicada a la Educación
Tarea 5 Tecnología aplicada a la Educación
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Indización social
Indización socialIndización social
Indización social
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
Tarea 5 tecnologia aplicada a la educacion
Tarea 5 tecnologia aplicada a la educacionTarea 5 tecnologia aplicada a la educacion
Tarea 5 tecnologia aplicada a la educacion
 
Tarea 3 de tecnologia
Tarea 3 de tecnologiaTarea 3 de tecnologia
Tarea 3 de tecnologia
 
Diseño de un PLE - Actividad 2, módulo 4.
Diseño de un PLE - Actividad 2, módulo 4. Diseño de un PLE - Actividad 2, módulo 4.
Diseño de un PLE - Actividad 2, módulo 4.
 
Tarea III
Tarea IIITarea III
Tarea III
 
Tarea 3
Tarea 3 Tarea 3
Tarea 3
 
Tarea tres-nairobys
Tarea tres-nairobysTarea tres-nairobys
Tarea tres-nairobys
 
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...
Desarrollo de Habilidades en el uso de la Tecnología, la Información y la Com...
 

Plus de iConstruye

Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4iConstruye
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado WebiConstruye
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion GraphicsiConstruye
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrppiConstruye
 
Examen edicion
Examen edicionExamen edicion
Examen edicioniConstruye
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesigniConstruye
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6iConstruye
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto webiConstruye
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la webiConstruye
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptualesiConstruye
 
Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5iConstruye
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSSiConstruye
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTMLiConstruye
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseñoiConstruye
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición MultimediaiConstruye
 
Temario examen
Temario examenTemario examen
Temario exameniConstruye
 

Plus de iConstruye (20)

Examen taller
Examen tallerExamen taller
Examen taller
 
Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion Graphics
 
Examen imagen
Examen imagenExamen imagen
Examen imagen
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrpp
 
Examen edicion
Examen edicionExamen edicion
Examen edicion
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesign
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
 
Filezilla
FilezillaFilezilla
Filezilla
 
Webhost
WebhostWebhost
Webhost
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto web
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la web
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
 
Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
 
Temario examen
Temario examenTemario examen
Temario examen
 

Dernier

Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTADMaryNavarro1717
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 

Dernier (20)

Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 

Diseño de la Información

  • 1. taller 6 internet y el diseño de la información taller_media martes 14 de agosto de 2012
  • 2. “[ ]porque todo diseño comienza cuando se comprende y se interpreta” Alan Fletcher martes 14 de agosto de 2012
  • 3. The world is complex, dynamic, multidimensional; the paper is static, flat. How are we to represent the rich visual world of experience and measurement on mere flatland? Edward Tufte, Envisioning Information, 1990. El mundo es complejo, dinámico, multidimensional; el papel es estático, plano. ¿Como vamos a representar el rico mundo visual de las experiencias y las medidas en un pobre espacio plano? taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 4. programa instruccional 1. Prepara archivos de proyectos multimedia en Internet 2. Propone conceptos, herramientas y recursos en un proyecto multimedia Internet. 3 Crea un proyecto interactivo con herramientas digitales de autoría taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 5. programa instruccional 1. Prepara archivos de proyectos multimedia en Internet 2. Propone conceptos, herramientas y recursos en un proyecto multimedia Internet. 3 Crea un proyecto interactivo con herramientas digitales de autoría taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 6. programa instruccional 1. Prepara archivos de proyectos multimedia en Internet 2. Propone conceptos, herramientas y recursos en un proyecto multimedia Internet. 3 Crea un proyecto interactivo con herramientas digitales de autoría taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 7. programa instruccional subunidades de competencias Determina las herramientas digitales según los soportes de salida (Internet, CD-Rom) de un proyecto. Reúne recursos y herramientas digitales en función de un proyecto interactivo (imágenes, videos, sonidos). Propone conceptos, herramientas y recursos en un proyecto interactivo. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 8. taller 6 tiempos de trabajo martes 14 de agosto de 2012
  • 9. experiencia de usuario UX Usabilidad Factores sociales Factores culturales Contexto de uso taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 10. experiencia de usuario UX Usabilidad Factores sociales Factores culturales Contexto de uso arquitectura de la información AI Contenido (card sorting) Estudio (blue prints) Representación (wireframes) Evaluación (test de usuario) taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 11. diseño de interfaz UI Elementos gráficos (el rol del diseñador) Elementos activos (el rol del programador) La semántica del la web (el rol del usuario) Frameworks (pensando en dispositivos) taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 12. diseño de interfaz UI Elementos gráficos (el rol del diseñador) Elementos activos (el rol del programador) La semántica del la web (el rol del usuario) Frameworks (pensando en dispositivos) desarrollo web :) HTML5, HTML CSS3, CSS Javascript (lenguajes de interactividad) Publicación Administración de contenidos taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 13. taller 6 evaluaciones martes 14 de agosto de 2012
  • 14. evaluaciones 13 Notas 5 Individuales 8 Grupales No existen entregas atrasadas Correcciones grupales Comunicación taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 15. diseño de la información martes 14 de agosto de 2012
  • 16. diseño de la información El DI puede definirse como el arte y la ciencia de preparar la información, de modo que pueda usarse por los humanos con eficacia y eficiencia Horn (1999) taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 17. definición de la información La información es un conjunto de mecanismos que permiten al individuo retomar los datos de su ambiente y estructurarlos de una manera determinada, de modo que le sirvan de guía para su acción. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 18. 50 millones de usuarios 38 años taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 19. 50 millones de usuarios 13 años taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 20. 50 millones de usuarios 4 años taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 21. 50 millones de usuarios 3 años taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 22. 50 millones de usuarios 2 años taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 23. la información es progresiva y por ende altamente complejizada en razón de las nuevas tecnologías taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 24. 3 puntos fundamentales 1. El diseñar información es trabajar con datos que puedan llegar a convertirse en información valiosa para un lector meta 2. En el diseño se persigue no solo la comunicación de la información, sino también su asimilación o aprendizaje a fin de convertirse en conocimiento 3. La información que se diseña, se hace con base en la intención, experiencia y pertinencia del usuario final taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 25. La comprensibilidad del documento se puede conseguir mediante la visualización de los componentes que lo forman martes 14 de agosto de 2012
  • 26. documentos El primer requisito del DI es que los documentos que transmiten información comprensibles deben ser comprensibles. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 27. documentos comprensibles implican la visualización de todos los sistemas elementos de la interacción, lo que interactivos incluye el entorno social, el estado cognitivo del usuario, el sistema de diseño taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 28. documentos comprensibles sistemas interactivos Cuando los espacios informativos se diseñan, deben ser navegables para los usuarios. espacios de Por analogía con la navegación real, se información debe diseñar la información conectando navegables las tareas con el modo de encontrar el camino y de poner señales. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 29. usabilidad martes 14 de agosto de 2012
  • 30. la usabilidad es la facilidad con que las personas pueden utilizar una herramienta con el fin de alcanzar un objetivo concreto taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 31. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 32. usabilidad diseñar es organizar elementos de modo que cumplan una necesidad particular de la mejor manera/forma posible. (Charles Eames) taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 33. usabilidad diseñar es organizar elementos de modo que cumplan una necesidad particular de la mejor manera/forma posible. (Charles Eames) Steve Krug DON’T MAKE ME THINK taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 34. orga ni zar estructura clara y convincente taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 35. orga eco ni nomi zar zar estructura lo máximo con clara y la menor convincente cantidad de elementos taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 36. orga eco co ni nomi muni zar zar car estructura lo máximo con presentación a clara y la menor la capacidad convincente cantidad de del usuario elementos taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 37. encargo 1 estructura para la visualización de datos taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 38. considerar Un lenguaje visual es el conjunto de palabras, imágenes y formas que sirven para comunicar. Horn afirma que la comprensibilidad de un documento se puede evaluar mediante el examen del lenguaje visual subyacente que lo compone. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 39. la base de lo solicitado El material es la selección de una aplicación para dispositivos móviles que posea presencia en la web pensando en como sería la simpleza de su uso Pensar en alfabetizar y encantar en su uso a su grupo objetivo utilizando experiencias subjetivas apoyadas en elementos objetivos taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 40. diseño de documento Crear un documento basándose en los 3 puntos fundamentales del diseño de la información. Se deben determinar criterios para migrar desde un sistema complejo (aplicación) a un entendimiento y aprehender * *aprehender: asimilar inmediatamente, llegar a entender. taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 41. criterios 1. Resumir: encontrar el objetivo macro relevante que contenga a los demás elementos del diseño 2. Integración: pensar en una información navegable, creando un relato por medio de la sucesión y profundidad de contenidos 3. Finalidad: determinar un grupo de personas, un contexto donde lo diseñado sea útil en cuanto a su información taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 42. en cuanto a diseño... Categorizar visualmente Usar las variables visuales de color y tipografía Construir una retícula que contenga la información entendiendo la naturaleza de esta taller 6 - información y medios digitales martes 14 de agosto de 2012
  • 43. formato de entrega HTML, Flash, PDF interactivo Propuesta de contenidos: próxima clase Concluye con documento y lámina impresa (21/08) taller 6 - información y medios digitales martes 14 de agosto de 2012