Manual usuario informagrafia

1. 1
FACULTAD DE COMUNICACIONES
UNIVERSIDAD DE ANTIOQUIA
MAESTRÍA EN COMUNICACIONES
Línea de Comunicación Digital
Modalidad de profundización
2016-2017
Manual de usuario del recurso digital
Autora: Maritza Ruiz
Título original de la investigación:
La infografía digital interactiva, en tanto recurso periodístico, como apoyo al proceso
educativo para la producción y divulgación de contenidos en la prensa escolar en dos
instituciones oficiales y una privada en Medellín entre 2016 y 2017.
Instituciones Educativas Alfonso Upegüi Orozco e INEM José Félix de Restrepo
(Oficiales) y Colegio Salesiano El Sufragio (Privado).
Es un recurso digital con fines informativos y educativos, elaborado para recopilar información importante
construida durante la investigación; realizar una contribución práctica para el público interesado en el
tema: docentes y estudiantes de instituciones de básica y media; y para alcanzar uno de los objetivos
específicos de la investigación, al sugerir unas pautas o lineamientos para que los docentes y estudiantes
que lideran los periódicos-revistas escolares puedan explorar de manera autónoma la infografía como
recurso periodístico, y así incorporarla en sus medios de comunicación y sus asignaturas.
Con este producto digital, los docentes y estudiantes tendrán acceso a un contenido gratuito, útil, intuitivo,
amigable y cercano. Por lo tanto, aunque no sean expertos en programas de diseño gráfico, publicidad u
otros campos afines, podrán identificar el potencial comunicativo de las infografías periodísticas para
llevarlas a los escenarios educativos, ya que el sitio brinda una serie de referencias teóricas básicas y
elementos prácticos que motivarán al usuario a la lectura con infografías y a generar productos de este
tipo.

2. 2
1. NOMBRE DEL RECURSO DIGITAL
Informagrafía, Infografías para Formación Escolar
Imagen 1. Captura de pantalla del Inicio
2. ESTRUCTURA DEL RECURSO
Para acceder al sitio web ingrese a la URL https://2017informagrafia.wixsite.com/udea y encontrará la
siguiente información la barra de menú: Home, Infografías de referencia, Periódico Escolar,
Infografía, Investigación y Contacto.

3. 3
Imagen 2. Menú del recurso digital
1. Inicio: presenta la indicación general con respecto al marco investigativo que soporta el sitio y los
contenidos a encontrar allí, a partir del Mapa del sitio.
Imagen 3. Inicio
En la parte inferior se estableció una ruta sugerida para la exploración del recurso, pero el usuario tiene
libertad para recorrerlo.
Imagen 4. Orientación al usuario en el sitio.

4. 4
2. Infografías de referencia: se aborda información básica relacionada con los tres periódicos analizados:
El Colombiano, El Tiempo y El País de España; las zonas o micrositios de almacenamiento de las
infografías de libre acceso para los usuarios; las 15 piezas analizadas e información básica acerca del
programa de Prensa Escolar de cada medio.
Imagen 5. Infografías de referencia
3. Periódico Escolar: se brindan unos datos básicos sobre las revistas y periódicos desarrollados en las
instituciones participantes (Instituciones oficiales Alfonso Upegüi Orozco e INEM José Félix de Restrepo,
y el colegio privado El Sufragio), y sus más recientes publicaciones. Allí también se ofrece información
de los periódicos El Colombiano, El Tiempo y El País, que puede servir para divulgar algunos de sus
contenidos y para que los medios escolares implementen varias de sus herramientas.
Imagen 6. Periódico escolar
4. Infografía: se presentan un conjunto de elementos teóricos, esenciales para el nuevo usuario, que le
permiten explorar la infografía periodística (definición y estructura, principales funciones y propiedades
comunicativas), además de varias premisas fundamentales desde la reportería o la investigación para la
conceptualización de la pieza visual y el diseño digital, entre otros; y, por supuesto, su aporte a la
educación básica y media. También se ofrece un espacio para crear infografías, dar a conocer
herramientas, artículos breves y recomendaciones generales para iniciarse en el campo de la infografía
periodística, como “pretexto” o invitación para conocer sus aportes escolares.
Imagen 7. Infografía.

5. 5
5. Investigación: es el punto del sitio dedicado a compartir el artículo resultante de la maestría. Allí se
exponen las conclusiones, recomendaciones y referencias bibliográficas.
Imagen 8. Investigación.
6. Contacto: se brinda un espacio de conversación, por medio de un formulario básico de contacto, para
conocer más sobre la investigación o para resolver alguna inquietud surgida durante la exploración del
sitio. También se encuentra un Manual de Usuario básico para la exploración del sitio.
Imagen 9. Contacto
3. PROCESO DE REALIZACIÓN DEL PRODUCTO DIGITAL
El diseño del sitio implicó varios momentos: planeación del contenido, estructura – arquitectura del sitio,
producción digital, validación y pruebas en versión web y móvil, y publicación y difusión. La página web
fue creada en https://es.wix.com/, una herramienta gratuita, amigable, con diseño Responsive o Móvil y
lenguaje HTML, pensada para los docentes y estudiantes.
Imagen 10. Pasos para alcanzar el producto digital

6. 6
4. EXPERIENCIA DE USUARIO
Se pensó en un estilo sobrio, tranquilo y cercano al público objetivo: docentes y estudiantes de básica y
media; y para esto se seleccionaron imágenes, tipografías, paleta de colores y fondos que faciliten la
exploración del usuario en versión web y Responsive, desde dispositivos móviles. Entre los contenidos se
emplean elementos como video, imágenes, enlaces, archivos en PDF, tutoriales, infografías, etc.
La estructura global del sitio consta del Home o página principal, y de un menú de navegación por
páginas que permite avanzar entre bloques de contenidos de modo hipermedial, razón por lo cual el diseño
se distribuyó en los siguientes componentes:
El cabezote contiene el título de la propuesta y la identificación de la universidad en la que se realiza la
maestría
Imagen 11. Cabezote
El menú principal horizontal contiene el acceso directo a la información principal mediante botones
Imagen 12. Ejemplo Menú principal.
El menú secundario tiene un despliegue vertical, con cada uno de los temas fundamentales
Imagen 13. Ejemplo Menú secundario.

7. 7
La zona de navegación central o principal, es donde se despliegan los contenidos con vínculos internos
y externos.
Imagen 14. Ejemplo zona de navegación central.
El Pie o Footer, en la parte inferior tiene las indicaciones de navegación, y la licencia libre del sitio.
Imagen 15. Pie o Footer.
Versión Móvil del recurso digital

8. 8
Imagen 16. Versión Móvil del recurso digital