Universidad José Vasconcelos
           Comunicación gráfica 7° semestre

                      Computación gráfica II
   ...
Inicio

                      Desarrollo de la arquitectura de información del sitio Web
Introducción             del plan...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas          Introducción

                 ...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas          Objetivo

                     ...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas          Desarrollo de personas,
       ...
Inicio


Introducción


Objetivo



Desarrollo

                      Invención de Personas
Contexto, acciones,
          ...
Inicio


Introducción

                      Persona 1
Objetivo



Desarrollo
                      Nombre: Wendy Cristale...
Inicio


Introducción


Objetivo

                      Información de la compañía:
                      El colegio Anton...
Inicio


Introducción


Objetivo



Desarrollo            Tareas:
                      Tareas primarias:
                ...
Inicio


Introducción


Objetivo



Desarrollo            Tecnología disponible:
                      Tamaño del monitor:...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas          Wendy es profesora de preparato...
Inicio


Introducción


Objetivo
                      Escenario #1
                      Revisar horarios y precios del p...
Inicio


Introducción


Objetivo



Desarrollo            Escenario #2

                      Checar las novedades del ext...
Inicio


Introducción


Objetivo              Persona 2

Desarrollo            Nombre: Marcos Monnt Santos.

             ...
Inicio


Introducción


Objetivo



Desarrollo
                      Educación:
                      Máximo grado de estu...
Inicio


Introducción


Objetivo
                      Tareas:
                      Tareas primarias:
                   ...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas

                      Marcos tiene seis...
Inicio


Introducción


Objetivo
                      Escenario #1:

                      Marcos quiere ponerse en conta...
Inicio


Introducción


Objetivo



Desarrollo            Escenario #2:

                      A Marcos le atrae conocer s...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,
herramientas          Contexto, acciones, y herramien...
Inicio


Introducción


Objetivo



Desarrollo


Contexto, acciones,   Nundehui
herramientas


Mapa del sitio


Wireframes...
Inicio


Introducción


Objetivo

                      Mapa del sitio
Desarrollo            Se necesita definir cómo se p...
Mapa del sitio
Inicio
                      Wireframes
                      Después de definir el mapa del sitio, se realizan los wire-
...
768 px
  X1024 px




Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Inicio

                      Conclusiones y aprendizaje
Introducción
                      En el presente trabajo se obtu...
Bibliografía




               SITIO WEB
               Planetario Alfa de Nuevo Leon, [Web en línea]. < http://www.plane...
Upcoming SlideShare
Loading in …5
×

Desarrollo de la arquitectura de información del sitio Web...

1,724 views

Published on

Desarrollo de la arquitectura de información del sitio Web del planetario Nundehui de la ciudad de Oaxaca.

Realizado por:
Mendoza Mena Valeria
Rodríguez Martínez Sandy Janet

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,724
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desarrollo de la arquitectura de información del sitio Web...

  1. 1. Universidad José Vasconcelos Comunicación gráfica 7° semestre Computación gráfica II Prof. Jorge Espinoza Colón Mendoza Mena Valeria Rodríguez Martínez Sandy Janet Oaxaca de Juárez, Oaxaca 19 septiembre 2010
  2. 2. Inicio Desarrollo de la arquitectura de información del sitio Web Introducción del planetario Nundehui de la ciudad de Oaxaca. Objetivo Desarrollo Contexto, acciones, herramientas Mapa del sitio Wireframes Conclusiones y aprendizaje
  3. 3. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Introducción En el presente trabajo se realizó un estudio para de- Mapa del sitio sarrollar la arquitectura de información del sitio Web del planetario Nundehui de la ciudad de Oaxaca, donde se utilizaron diversas herramientas como son la creación de personas, escenarios, contexto, ac- Wireframes ciones, herramientas, suministros, etc. Los cuales se puntualizarán a lo largo del presente. Conclusiones y aprendizaje
  4. 4. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Objetivo Lograr el desarrollo de la arquitectura de la infor- Mapa del sitio mación del sitio Web del planetario Nundehui de la ciudad de Oaxaca para obtener un buen funciona- miento, fácil, entendible y sencillo. Wireframes Conclusiones y aprendizaje
  5. 5. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Desarrollo de personas, Perfil de usuarios y escenarios Mapa del sitio Este desarrollo consiste en crear personajes ficticios para que el usuario se pueda sentir identificado(a) lla- madas “personas” ya que éstas representan a los usu- Wireframes arios potenciales, posteriormente desarrollar su perfil, es decir, puntualizar cuáles son las características (de- mográficas, educativas, laborales, etc.). Por otra parte los escenarios son situaciones posibles que podrían re- Conclusiones y alizar dichas personas ficticias en el sitio Web, y a su aprendizaje vez resolverlos para evitar que ocurra algún error con usuarios reales.
  6. 6. Inicio Introducción Objetivo Desarrollo Invención de Personas Contexto, acciones, El concepto de “persona” tiene una relevancia para herramientas la definición de la audiencia. Y de acuerdo con Frank Thissen (2004), Las “personas” no son gente de verdad, pero la representan dentro del proceso de diseño. Es- Mapa del sitio tos son arquetipos hipotéticos de los usuarios poten- ciales… Las “personas” son definidas por sus metas y como un aspecto muy importante, siempre deben de Wireframes tener un nombre. Por otra parte, se debe de considerar, que entre más específica sea definida la persona, más útil ésta será. Conclusiones y (Consultado en: http://www.slideshare.net/Tzek/ arqui- aprendizaje tectura-de-informacin-para-una-empresa; página 15 el día jueves 16 de septiembre 2010 a las 12:00 p.m.)
  7. 7. Inicio Introducción Persona 1 Objetivo Desarrollo Nombre: Wendy Cristales López. Sexo: Mujer. Contexto, acciones, Edad: 35 años. herramientas Ubicación: Oaxaca de Juárez. Nivel socioeconómico: medio- alto. Experiencia ocupacional: Mapa del sitio Cargo actual: Profesora nivel medio superior. Años de trabajo: 10 años. Wireframes Responsabilidades: tener conocimiento de la asignatura que imparte, cubrir el programa, tener el control del grupo, sin el cual no hay proceso educativo posible, que esté perman- Conclusiones y entemente actualizado, saber enseñar, esto es, saber aplicar aprendizaje recursos didácticos.
  8. 8. Inicio Introducción Objetivo Información de la compañía: El colegio Antonio de León es de tamaño medio. Desarrollo Educación: Máximo grado de estudios: grado académico a Nivel Medio Superior en la Universidad Pedagógica Nacio- Contexto, acciones, nal (UPN). herramientas Cursos y capacitaciones: Diplomado en Habilidades Docentes para la Educación Media Superior – Online, curso: el Docente Como Mediador y Educador en Mapa del sitio Valores. Wireframes Experiencia con computadoras: Habilidades específicas: aprendió mediante cursos es- pecíficos de computación. Conclusiones y aprendizaje Años de experiencia: 10años. Horas diarias de uso: 4 horas.
  9. 9. Inicio Introducción Objetivo Desarrollo Tareas: Tareas primarias: • Checar las novedades. • Conocer las fechas disponibles para visitar el Planetario Contexto, acciones, con grupos de su trabajo. herramientas • Enviar e-mails para solicitar información. • Revisar horarios y precios. Mapa del sitio Tareas secundarias: • Consultar servicios (transportación). • Conocer las novedades. • Leer la historia del planetario. Wireframes Dominio del área: El usuario aún no está muy familiarizado con la página del planetario Nundehui debido a que el sistema es nuevo, haci- Conclusiones y endo que el usuario usuario empiece con su dominio. aprendizaje
  10. 10. Inicio Introducción Objetivo Desarrollo Tecnología disponible: Tamaño del monitor: 1024 x 768 px. Velocidad del procesador: 4. Contexto, acciones, herramientas Software: Explorer. Herramientas: Windows XP. Mapa del sitio Actitudes y valores: Positivas hacia la tecnología. Wireframes Forma de aprendizaje: Práctica. Discapacidades: Conclusiones y Débil visual (usa lentes). aprendizaje
  11. 11. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Wendy es profesora de preparatoria, tiene 10 años laborando. Para este ciclo escolar comenzó a dar clases de geografía, por ello se interesó en conocer el planetario de la Ciudad de Oax- Mapa del sitio aca por medio de su sitio Web, con la finalidad de llevar a sus alumnos a conocer este lugar, es por eso que Wendy está intere- sada en familiarizarse con el sitio para así facilitarse el manejo de información y fechas posibles de visita. Wireframes Está familiarizada con el manejo de computadoras, ya que ha contado con diversos cursos y cuenta con una en su hogar, con conexión a internet las 24 horas que a su vez es usada por toda su familia. Conclusiones y aprendizaje
  12. 12. Inicio Introducción Objetivo Escenario #1 Revisar horarios y precios del planetario Nundehui de la ciu- Desarrollo dad de Oaxaca. Wendy está interesada en entrar al sitio del planetario, por lo que desde tiempo atrás desea llevar a sus alumnos de la materia de Geografía, con la finalidad de que les brinden un Contexto, acciones, recorrido por la zona. Por ello primeramente necesita saber herramientas cuáles son los horarios y precios para que posteriormente pu- eda darlo a conocer a su director y alumnos. Mapa del sitio Ejecución: 1.- Iniciar el explorador de Internet Explorer. Wireframes 2.-En la barra de direcciones escribir la página del planetario www.planetario-nundehui.com.mx. 3.- Ir a la sección de servicios. Conclusiones y 4.-Dar clic a la opción horarios y precios. aprendizaje 5.- Finalmente podrá observar todos los horarios disponibles y los precios de los diversos servicios.
  13. 13. Inicio Introducción Objetivo Desarrollo Escenario #2 Checar las novedades del exterior del planetario Nundehui Contexto, acciones, ya que Wendy está interesada en esta área, le gusta estar herramientas informada y conocer cuáles son las nuevas cosas que puede visitar y conocer cuando vaya al planetario. Mapa del sitio Ejecución: 1.- Iniciar el explorador de Internet Explorer. Wireframes 2.-En la barra de direcciones escribir la página del planetario www.planetario-nundehui.com.mx. 3.- Ir a la sección de novedades. 4.-Dar clic a la opción Exterior. Conclusiones y 5.- Finalmente podrá observar todas las novedades actuales aprendizaje del planetario, podrá ver una galería fotográfica que se en- cuentra en dicha área de las primicias.
  14. 14. Inicio Introducción Objetivo Persona 2 Desarrollo Nombre: Marcos Monnt Santos. Sexo: Hombre. Contexto, acciones, Edad: 22 años. herramientas Ubicación: Oaxaca de Juárez. Mapa del sitio Nivel socioeconómico: medio- alto. Wireframes Experiencia ocupacional: Cargo actual: Egresado de la Licenciatura en física por la Universidad Nacional Autónoma de México (UNAM). Conclusiones y Años de estudo universitario: 4 años y medio. aprendizaje Información de la Universidad Vasconcelos: Es de tamaño grande.
  15. 15. Inicio Introducción Objetivo Desarrollo Educación: Máximo grado de estudios: licenciatura. Cursos y capacitaciones: Contexto, acciones, • Colaboración en la organización de conferencias y herramientas eventos académicos para los estudiantes del área de Cien- cias Físico Matemáticas. • Participación constante del 4 al 8° Congreso Integral de Mapa del sitio Física y Astronomía. • Participación en la 6ª Olimpiada Argentina de As- tronomía. Wireframes Experiencia con computadoras: Conclusiones y Habilidades específicas: es un nativo digital. aprendizaje Años de experiencia: 15 años. Horas diarias de uso: 9 horas.
  16. 16. Inicio Introducción Objetivo Tareas: Tareas primarias: • Leer Historia del planetario. • Consultar fechas y horarios del planetario. Desarrollo • Contacto. Tareas secundarias: • Buscar si existen recorridos. Contexto, acciones, • Checar bolsa de trabajo. herramientas Dominio del área: El usuario está familiarizado con la página debido a que tiene medio año consultándola desde su llegada Mapa del sitio a la ciudad de Oaxaca. Tecnología disponible: Tamaño del monitor: 1024 x 768 px. Wireframes Velocidad del procesador: 4. Software: Opera, Explorer, Mozilla Firefox. Herramientas: Windows 2000. Actitudes y valores: Conclusiones y Positivas hacia la tecnología. aprendizaje Forma de aprendizaje: Visual y auditiva.
  17. 17. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Marcos tiene seis meses que egresó de la Licenciatura en Mapa del sitio Física por la UNAM. Regresó a su ciudad de origen, Oaxaca de Juárez. En sus planes está buscar trabajo en el planetario Nundehui, des- de que encontró la página la visita constantemente con Wireframes la finalidad de buscar información diversa; actualmente está familiarizado con ella, cuenta con gran experiencia en el manejo de tecnologías, cuenta con computadora Conclusiones y en su hogar con conexión a internet inalámbrico las 24 aprendizaje horas.
  18. 18. Inicio Introducción Objetivo Escenario #1: Marcos quiere ponerse en contacto con el planetario Nundehui de la ciudad de Oaxaca para hacerles algu- Desarrollo nas preguntas de la zona, sobre todo por lo que está in- teresado en trabajar ahí, por ello para él es importante contactarlos y tener una forma de conexión con el plan- Contexto, acciones, etario. herramientas Ejecución: Mapa del sitio 1.- Iniciar el explorador de Opera, Explorer, Mozilla Firefox. 2.-En la barra de direcciones escribir la página del plan- etario www.planetario –nundehui.com.mx. 3.- Ir a la sección de contacto. Wireframes 4.-Escribir sus datos (nombre, comentarios, etc.). 5.-Al terminar de escribir sus datos dar clic a la opción de enviar. 6.- Finalmente habrá terminado con este proceso sólo Conclusiones y queda esperar que su correo sea respondido por parte aprendizaje del planetario pronto.
  19. 19. Inicio Introducción Objetivo Desarrollo Escenario #2: A Marcos le atrae conocer sobre la historia del plan- etario Nundehui, es por ello que está interesado en en- Contexto, acciones, trar a su sitio web para buscar esta información. herramientas Mapa del sitio Ejecución: 1.- Iniciar el explorador de Opera, Explorer, Mozilla Firefox. Wireframes 2.-En la barra de direcciones escribir la página del plan- etario www.planetario –nundehui.com.mx. 3.- Ir a la sección de Planetario Nundehui. Conclusiones y 4.- Finalmente Marcos podrá leer toda la información aprendizaje acerca de este lugar.
  20. 20. Inicio Introducción Objetivo Desarrollo Contexto, acciones, herramientas Contexto, acciones, y herramientas Con base a las tareas que realizarán los usuarios ante- Mapa del sitio riormente descritos, se crean las acciones, herramien- tas y suministros que debe tener el sitio del planetario Nundehui. Como información complementaria también se to- Wireframes marán en cuenta tres sitios web: Planetario Luis Enrique Erro (Instituto Politécnico Nacional), Imagina-Planetario (Imagina-Museo interactivo de Puebla), Planetario Alfa (Monterrey). Conclusiones y aprendizaje
  21. 21. Inicio Introducción Objetivo Desarrollo Contexto, acciones, Nundehui herramientas Mapa del sitio Wireframes Conclusiones y aprendizaje
  22. 22. Inicio Introducción Objetivo Mapa del sitio Desarrollo Se necesita definir cómo se presentará la información, el orden que se le dará para poder realizar una arqui- tectura, con base a esto se puedan elaborar los wire- Contexto, acciones, frames. herramientas La Arquitectura de la Información no sólo engloba la actividad de organizar información, sino también el re- sultado, la forma que le permita al usuario la naveg- ación por el sitio fácilmente y la compresión de la in- Mapa del sitio formación. (Consultado en: NSU, no solo usabilidad, revista multidisciplinar sobre diseño, personas y tec- nología, <http://www.nosolousabilidad.com/articulos/ Wireframes ai.htm> el día Domingo 19 de septiembre de 2010 a las 05:15 p.m.). De acuerdo al tipo de sitio y al carácter de la infor- mación, la estructura que más se adapta a la necesi- Conclusiones y dad del sitio es jerárquica, ya que el usuario parte de la aprendizaje página principal (Home) a cualquiera de las secciones y las sub-secciones.
  23. 23. Mapa del sitio
  24. 24. Inicio Wireframes Después de definir el mapa del sitio, se realizan los wire- Introducción frames, son los bocetos de diagramación para la infor- mación, sirven en la prevención errores o en la correc- ción antes de tener el sitio finalizado (la previsualización del sitio). Objetivo Los usuarios leen de izquierda a derecha y de arriba ha- cia abajo. Esto significa que si mantenemos la jerarquía visual podemos indicarle al usuario constantemente Desarrollo dónde está. Cuanto más cerca de la esquina superior izquierda de nuestra distribución coloquemos los ele- mentos, mayor nivel jerárquico tendrán, y conforme los coloquemos más hacia la derecha inferior, menor nivel Contexto, acciones, jerárquico, y por lo tanto serán ‘partes de’. (Consultado herramientas en: NSU, no solo usabilidad, revista multidisciplinar sobre diseño, personas y tecnología, <http://www.nosolous- abilidad.com/articulos/orientacion_usuario.htm > el Mapa del sitio día Domingo 19 de septiembre de 2010 a las 05:47 p.m.). El elemento principal de este sitio es el logo, por eso Wireframes se coloca en la esquina superior derecha, que sirve para indicarle al usuario dónde se encuentra y a quién le pertenece la información, los demás elementos que se coloquen serán sub-elementos de éste. Los demás Conclusiones y elementos se irán distribuyendo de acuerdo a su impor- aprendizaje tancia, para indicar el orden y nivel de importancia, así como para que el usuario siempre sepa en donde está.
  25. 25. 768 px X1024 px Wireframes
  26. 26. Wireframes
  27. 27. Wireframes
  28. 28. Wireframes
  29. 29. Wireframes
  30. 30. Wireframes
  31. 31. Wireframes
  32. 32. Wireframes
  33. 33. Wireframes
  34. 34. Wireframes
  35. 35. Wireframes
  36. 36. Wireframes
  37. 37. Wireframes
  38. 38. Wireframes
  39. 39. Wireframes
  40. 40. Wireframes
  41. 41. Wireframes
  42. 42. Wireframes
  43. 43. Wireframes
  44. 44. Wireframes
  45. 45. Wireframes
  46. 46. Wireframes
  47. 47. Wireframes
  48. 48. Wireframes
  49. 49. Inicio Conclusiones y aprendizaje Introducción En el presente trabajo se obtuvieron diversas fortale- zas y se reconocieron debilidades, afortunadamente podemos decir que fueron más fortalezas debido a Objetivo las múltiples tareas realizadas a lo largo de la primera unidad. éstas ayudaron bastante para desarrollarlo de una manera más clara, sencilla y rápida, ya que se tenía una idea de lo que se debía hacer, cuáles eran Desarrollo los pasos a seguir, cuál era la información que se pedía con exactitud, el orden a seguir para desarrollar pun- tualmente el trabajo. Contexto, acciones, herramientas Nuestras debilidades fueron entre otras, la explicación breve de las secciones, dándonos cuenta de una falta de habilidad y agilidad para redactar y ser claras en explicar de qué se trata. Mapa del sitio Como resultado obtuvimos un trabajo que posee una justificación teóricamente fundamentada donde final- Wireframes mente los wireframes son asertivos y favorables con base a los requerimientos y limitaciones encontradas. En general el trabajo no nos resultó complicado ni Conclusiones y muchos menos aburrido, sin embargo, si requirió minu- aprendizaje ciosidad y un gran esmero para obtener los resultados deseados.
  50. 50. Bibliografía SITIO WEB Planetario Alfa de Nuevo Leon, [Web en línea]. < http://www.planetarioalfa.org. mx/>. [Consulta: 16-09-2010] SITIO WEB Planetario Imagina de Puebla, [Web en línea]. < http://www.imagina.puebla. gob.mx/index.php?option=com_content&view=category&layout=blog&id=43 &Itemid=82>. [Consulta: 16-09-2010] SITIO WEB Planetario “Luis Enrique Erro” del Instituto Politécnico Nacional, Distrito Federal, [Web en línea]. < http://www.planetario.ipn.mx/ >. [Consulta: 16-09-2010] SITIO WEB NSU, no solo usabilidad, revista multidisciplinar sobre diseño, personas y tec- nología [Web en línea]. < http://www.nosolousabilidad.com/index.htm>. [Con- sulta: 19-09-2010]

×