Diseno-de-la-interfaz-grafica-del-sitio-circulos-de-aprendizaje

Vista previa del material en texto

UNIVERSIDAD NACIONAL AUTONOMA 
DE ~fEXICO 
ESCUELA NACIONAL DE ARTES PlÁSTICAS 
"DISE~O DE LA INTERFAZ GRAFICA DEL 
SITIO CIRCULOS DE APRENDIZAJE" 
T E s I N A 
QUE PARA OBTENER EL TITULO DE: 
LICENCIADO EN DISERO y 
COMUNICACION VISUAL 
P R E S E N T A 
JOSE ANTONIO 1 SANCHEZ LEON 
DIRECTOR DE TESIS: MTRO SALVADOR SAlAS ZAMUDIO 
MEXICO, D. F. 2005 
 
UNAM – Dirección General de Bibliotecas 
Tesis Digitales 
Restricciones de uso 
 
DERECHOS RESERVADOS © 
PROHIBIDA SU REPRODUCCIÓN TOTAL O PARCIAL 
 
Todo el material contenido en esta tesis esta protegido por la Ley Federal 
del Derecho de Autor (LFDA) de los Estados Unidos Mexicanos (México). 
El uso de imágenes, fragmentos de videos, y demás material que sea 
objeto de protección de los derechos de autor, será exclusivamente para 
fines educativos e informativos y deberá citar la fuente donde la obtuvo 
mencionando el autor o autores. Cualquier uso distinto como el lucro, 
reproducción, edición o modificación, será perseguido y sancionado por el 
respectivo titular de los Derechos de Autor. 
 
 
 
A MI FAMILIA POR SU APOYO INCONDICIONAL 
A MIS AMIGOS POR SU A YUDA (HABER SI YA SE APLICAN) 
Y PRINCIPALMENTE A AQUÉL QUE NOS AMÓ, 
y DERRAMÓ su SANGRE POR NOSOTROS, 
EL QUE ESTUVO MUERTO y VIVIÓ, 
y HA DADO VIDA ETERNA A LOS QUE CREEN EN SU NOMBRE, 
AL QUE LO IMPOSIBLE LO HACE POSIBLE, 
AL ONICO DIOS VERDADERO, 
AL SEÑOR JESUCRISTO. 
Autorizt • 11 DiICd60 -., 
UNA" • dIfuIdIr en t..-...... di ...... '" le .... ",,_tU lIectrdIa .... ti 
COtI .. nldo d. 1111 trtbajo l'ICt I NO"."e· ~' [ -e..... PC~.1. 
FeCHA:::--..w.;¡;~~~ ___ _ 
f't""A: __ ~!Ff~ ___ -== 
INDICE 
2. INTRODUCCIÓN 03 
3. REPORTE DE ACTIVIDADES 09 
4. PLANTEAMIENTO DE LA ACTIVIDAD SELECCIONADA 14 
al Análisis formal y estructural 15 
• Elementos importantes para tomar en cuenta en el diseño de la interfaz gráfica del Sitio Web. 15 
1) Usabilidad y Accesibilidad- Diseño Gráfico 15 
2) La Interfaz Gráfica 15 
3) La Navegación 15 
4) Diseño de la Navegación 15 
5) La Estructura de Navegación 16 
6) Elementos de Navegación 18 
7) El Mapa de Sitio 18 
8) El Diseño Gráfico 19 
9) Resolución 20 
• Aspectos y elementos determinantes en el diseño de un sitio Web. 22 
• Elementos aplicados al proyecto. 23 
1) ¿Qué es un Logotipo? 23 
2) ¿Qué es Identidad Corporativa? 23 
3) ¿Qué es una Marca? 23 
4) Colores Utilizados 24 
5) Tipografía 24 
• Metodología utilizada. 28 
o Proceso Creativo de Solución de Problemas 28 
bl Descripción de la plataforma y las técnicas empleadas 31 
5. DESARROLLO PROYECTUAL 32 
6. GLOSARIO 36 
7. FUENTES DE INFORMACIÓN 39 
, 
INTRODUCCION 
Funciones de la DGSCA 
En la Dirección General de Servicios de Cómputo Académico realizamos investigación, impulsamos 
nuevos desarrollos en métodos numéricos, algoritmos y computación visual. Exploramos las innovaciones 
tecnológicas más recientes, desarrollamos nuevos sistemas. 
Nuestros servicios educativos, Internet, supercómputo, telefonía, visualización, animación por computadora, 
diagnóstico, auditoría, diseño y programación de sistemas, se basan en una infraestructura actualizada. 
Nuestra institución está conformada por personas que conciben el servicio centrado en el usuario. Estamos 
obligados a proveer servicios a la UNAM al más bajo costo posible y con una capacidad consistente. 
Extendemos nuestra capacidad a todas las personas y organizaciones con las que colaboramos y nos soliciten. 
En nuestros grupos de Cómputo Infantil, Multimedia, Productos Interactivos para la Docencia, Servicios 
de Red, Administración de Servidores, Seguridad en Cómputo, Sistemas, Tecnología para la Educación a 
Distancia y muchos más, la actividad realizada se basa en investigaciones propias y en la innovación. 
Educamos y capacitamos. Nuestros cursos, diplomados, programas de becas, y nuestras colaboraciones 
interinstitucionales tienen como objeto la educación de las personas en tecnologías de información, en su 
uso óptimo, y en su integración a las tareas de las organizaciones modernas. Un diseño educativo optimizado 
se acompaña de una capacitación práctica continua, basada en las necesidades reales y actuales de todos 
los sectores. 
Ubicación 
La Dirección General de Servicios de Cómputo Académico de la UNAM es la entidad universitaria encargada 
de la operación de los sistemas centrales de cómputo académico y de las telecomunicaciones de la 
institución; su esfuerzo más amplio es la capacitación en tecnología de la información, de prospección e 
innovación y de asimilación de estas tecnologías en beneficio de la Universidad y de la sociedad en general. 
Somos una organización de gente joven: un tercio de ésta se encuentra formada por estudiantes becarios, 
de servicio social y tesistas. Son jóvenes la gran mayoría de nuestros investigadores, técnicos, académicos, 
líderes de proyecto y directivos. Continuamos con nuestra formación académica en un trabajo que excede 
siempre los marcos del aula. 
Somos una organización flexible: nuestra capacidad de respuesta la adaptamos constantemente a la 
evolución de la tecnología. 
Somos una organización innovadora: nuestra actividad resulta en servicios y productos nuevos, en formas 
de uso de la tecnología de información que permiten a nuestros usuarios realizar actividades nuevas que 
enriquecen su labor cotidiana. 
Trabajamos bajo un principio fundamental de vinculación; nuestra actividad se integra con las actividades 
de escuelas y facultades de la UNAM, con sus institutos y centros de investigación y con muchas otras de 
sus entidades. Nuestro interés es responder continuamente a sus demandas de servicios y de formación 
de recursos humanos. Igualmente trabajamos con el sector público y con empresas privadas, dentro un 
marco de exigencia y creatividad. 
Disponemos de una alta capacidad tecnológica: todos nuestros servIcIos de supercómputo, internet y 
sistemas, están preparados para trabajar con grandes volúmenes de cómputo numérico y visual, con 
tasas altas de transacciones y transmisión de datos, multimedia con elevados niveles de integración de 
información, en un esquema regido por la calidad y seguridad. 
Somos una organización de aprendizaje: en todas nuestras tareas nos aseguramos de generar nuevos 
aprendizajes para las personas y para la institución. Formulamos nuestras actividades para que contribuyan 
a la formación integral de los miembros nuestra organización y nos exigimos que las nuevas tareas que 
emprendemos impliquen retos que redunden en nuevos aprendizajes. 
Creemos en los estándares y la interoperabilidad de las tecnologías y sistemas en que se basa nuestra 
actividad. Impulsamos los usos de las tecnologías de las informaciónes que permiten más eficazmente la 
comunicación e interacción entre personas y organizaciones, así como entre sistemas. Extendemos nuestra 
capacidad de prueba de sistemas como un servicio a todas las organizaciones con las que colaboramos. 
Departamento de Productos Interactivos 
El Departamento de Productos Interactivos esta ubicado en el edificio de Cómputo Académico de la 
Dirección General de Servicios de Cómputo Académico, con dirección en Circuito exterior s/n frente a la 
Facultad de Contaduría y Administración. Tiene como objetivo, realizar material didáctico para impulsar y 
promover la educación a distancia, a través de Internet. 
Actividades realizadas en el Departamento de Productos Interactivos 
El Departamento de Productos Interactivos se encarga del desarrollo de software educativo, participando 
en las etapas de contenido, integración y evaluación de material. 
• Material Didáctico: 
Recursos dinámicos e interactivos que sirven de apoyo para el aprendizaje. Están basados en el auto 
estudio. 
• Talleres: 
Cursos teórico-práctico sobre el desarrollo material educativo en línea e impartidos en diversas 
modalidades. 
• Cursos en Línea: 
Cursos de capacitación y actualización diseñados para aquellas personasque no pueden asistir a un aula. 
• Proyectos de Colaboración: 
Sitios Web de apoyo a cursos y programas de capacitación de la DGSCA. 
• Investigación: 
Proyectos que estudian y analizan diversos aspectos de la educación a través de Internet. 
Material Didáctico 
o Tutoriales 
Introducción a la Computación 
Introducción a Internet 
Virus Informático 
Procesador de Palabras 
Presentaciones Electrónicas 
Hojas de Electrónicas de Cálculo 
Hojas de Electrónicas de Cálculo Técnicas Avanzadas 
HTML 
o Juegos 
Maratán 
Simulador VRML 
O Exámenes 
Introducción a la Computación 
Talleres 
o Desarrollo de Software Educativo 
o Evaluación de Software Educativo 
o Planeación y Desarrollo de Contenidos de Cursos en Línea 
Cursos en Línea 
o Mapas conceptuales 
o Introducción a Javascript 
o Introducción a U N IX 
o HTML 
o Geometers 
o Dreamweaver 
Proyectos de Colaboración 
o Sepacomputo 
o Catálogo de Cursos de la DGSCA 
o Sitio de Apoyo para Cursos Presenciales 
o Sitio de Apoyo para Diplomados 
o Los Transtomos de Ansiedad en la Práctica Medica General 
o Laboratorio de Ingeniería Química 
o Sitio de Apoyo a los Cursos del CELE 
o Taller de Cursos en Línea 
o WALC 
Investigación 
o Generación XY 
o Enseñanza de las Matemáticas Asistida por Computación 
o Círculos de Aprendizaje 
o Matemáticas Mayas 
Organigrama de la Dirección General de Servicios de Cómputo 
Académico 
• Dirección General 
• Dirección de Cómputo para la Investigación 
• Dirección de Cómputo para la Docencia 
• Dirección de Telecomunicaciones 
• Dirección de Sistemas 
• Coordinación General de Servicios Educativos en Red 
• Subdirección de Comunicación 
• Subdirección de Planeación y Administración 
• Cuerpos Colegiados Auxiliares de la DGSCA 
• Dirección General 
Secretaria Particular 
Dirección de Cómputo para la Investigación 
Dirección de Cómputo para la Docencia 
Dirección de Telecomunicaciones 
Dirección de Sistemas 
Coordinación General de Servicios Educativos en Red 
Subdirección de Comunicación 
Subdirección de Planeación y Administración 
Secretaría del Consejo Asesor de Cómputo 
• Dirección de Cómputo para la Investigación 
Departamento de Seguridad en Cómputo / UNAM-CERT 
Coordinación de la Biblioteca 
Departamento de Supercómputo 
Laboratorio de Visualización Científica 
• Dirección de Cómputo para la Docencia 
Subdirección de Planeación Académica 
Subdirección de Tecnologías para la Educación 
Unidad de Movimientos del Personal Académico 
Coordinación de Relaciones y Mercadotecnia 
Coordinación de Cómputo Infantil 
Departamento de Infraestructura y Prospección Tecnológica 
Departamento de Control Escolar 
Departamento de Servicio Social y Becarios 
CENTRO DE EXTENSiÓN EN CÓMPUTO Y TELECOMUNICACIONES COAPA 
Coordinación 
Departamento de Infraestructura y Prospección Tecnológica 
Departamento de Control Escolar 
Departamento de Informes y Mercadotecnia 
CENTRO DE EXTENSiÓN EN CÓMPUTO Y TELECOMUNICACIONES MASCARONES 
Coordinación 
Departamento de Infraestructura y Prospección Tecnológica 
Departamento de Control Escolar 
Departamento de Informes y Mercadotecnia 
CENTRO DE EXTENSiÓN EN CÓMPUTO Y TELECOMUNICACIONES NUEVO LEÓN 
Coordinación 
Departamento de Infraestructura y Prospección Tecnológica 
Departamento de Control Escolar 
Departamento de Informes y Mercadotecnia 
CENTRO DE ESTUDIOS MULTIDISCIPLlNARIOS POLANCO 
Coordinación 
CENTRO DE EXTENSiÓN EN CÓMPUTO Y TELECOMUNICACIONES SAN AGUSTíN 
Coordinación 
SEDE PALACIO DE AUTONOMíA / FUNDACiÓN UNAM-DGSCA 
Coordinadora de cursos y cómputo 
• Dirección de Telecomunicaciones 
Subdirección de Operación 
Equipos de Respuesta Rápida 
Departamento de Administración de Servidores 
Departamento de Tarificación y Servicios al Público 
Coordinación de Control de Ingresos y Egresos 
Departamento de Relación con Proveedores y Clientes 
Departamento de Ventas 
Centro de Atención 
Departamento de Suministro de Potencia 
• Dirección de Sistemas 
Unidad de Proyectos Especiales 
Subdirección de Sistemas 
Subdirección de Servicios Web 
Coordinación de Publicaciones Digitales 
Coordinación de Operación 
Departamento de Integración de Aplicaciones 
Departamento de Gestión del Cambio 
Departamento de Pruebas de Software 
Departamento de Estructuración de Sistemas 
Departamento de Formación de Recursos Humanos 
Departamento de Administración de Servidores 
Departamento de Sistemas Transaccionales en Web 
Departamento de Administración de Servicios Institucionales 
Departamento de Incorporación y Extensión de Servicios 
Departamento de Producción Digital 
Área de Publicaciones Periódicas 
Área de Diagnósticos Informáticos 
Área de Desarrollo de Sistemas 
Área de Diseño de Interfaces 
Área de Supervisión Técnica Administrativa 
Delegación Administrativa 
• Coordinación General de Servicios Educativos en Red 
Subdirección de la Coordinación de Servicios Educativos en Red 
Departamento de Productos Interactivos 
Departamento de Multimedia 
Departamento de Proyectos Educativos 
Departamento de Apoyo 
Departamento de Sistemas 
Departamento d~ Material Educativo 
• Subdirección de Comunicación 
Departamento de Información 
Departamento de Diseño 
• Subdirección de Planeación y Administración 
Coordinación de Planeación 
Coordinación de Centros de Extensión 
Jefatura de la Unidad Administrativa 
Jefatura de Área 
Departamento de Presupuestos y Contabilidad 
Departamento de Servicios Generales 
Departamento de Ingresos Extraordinarios 
Departamento de Compras e Inventarios 
Departamento de Personal 
Área de Análisis y Desarrollo Administrativo 
• Cuerpos Colegiados Auxiliares de la DGSCA 
Consejo Asesor Interno 
Dr. Alejandro Pisanty Baruch 
Mat. Carmen Bravo Chaveste 
Mtra. Ma. de Lourdes Velázquez Pastrana 
Mtro. Juan Voutssás Márquez 
Dra. Genevieve Lucet Lagrifoul 
Mtra. Ma. Dolores Mendoza Guzmán 
Ing. Jesús Díaz Barriga Arcea 
Ing. Juan Ursul Solanes 
Dra. Elizabeth Luna Traill 
Comisión Dictaminadora 
Dr. Pablo Barrera Sánchez 
Mtra. Elisa Viso Gurovich 
Dr. Raúl Guillermo Enriquez Habib 
Dra. Sara Elvia Meza Galindo 
Ing. Armando Ortiz Prado 
Dr. Francisco Xavier Chiapa Carrara 
REPORTE 
DE ACTIVIDADES 
Durante los seis meses de mi Servicio Social en la Dirección General de Servicios de Cómputo Académico, 
participe en cuatro proyectos Web haciendo el diseño gráfico de la interfaz gráfica. 
Los nombres de los proyectos en que colabore son: 
Sitio en Línea Círculos de Aprendizaje 
http://entren.dgsca.unam.mx/circulos/ 
Este sitio tiene la finalidad de brindar un espacio para formar equipos de trabajo interesados en investigar 
y trabajar de manera colaborativa, sobre temas de interés común. Cada grupo es moderado por aquella 
persona creadora del mismo. 
E ........ • .4 Jif' ...... ~~"'~II; ....... ""' ............... ........ J .. . -I"t,,-,-,,-,, .,.... __ .. ",..,.., ....... I .. ~'" 
.-o6w .. JV'1.".~"""'"", "',.. 
------_ ... ---_ .. __ .. 
Sitio del Departamento de Productos Interactivos 
http://entren.dgsca. unam. mx/ 
El departamento de Productos Interactivos tiene como objetivo, realizar material didáctico para impulsar y 
promover la educación a distancia, a través de Internet. 
Sitio de Apoyo para Diplomados 
http://entren.dgsca.unam.mx/diplomados/ 
El sitio de apoyo para diplomados se crea con el propósito de ofrecer un espacio de consulta y comunicación 
para los instructores y alumnos de los diplomados que imparte la DGSCA. 
:.~~ Sitio da apoyo '" 
.:;;;-") para diplomados 
a .... ff..,. .... .". ....... 1" """CIII'"""' ..... ' ....... r ..... 
... fIII¡OOI4.~'IIIh rc_lI"otllf'"'_" .. .....".......,.III"_ .. _ 
.t'Gf"-.!Of.,.~_ltl·,.st. 
--~-~.-.. --' ..... _ ..... ~-
Sitio del Laboratorio de Ingeniería Guímica 
http://entren.dgsca.unam.mx/liq-bame/ 
MATERIALES DE APOYO DOCEN E PARA El 
DE INGr:NIERIA QulMlCA 
Laborator o de Balances de Materia y Ene CJla 
I.i~~"'~ 
l.n ... M.~ ._ ..... 
.... ftICIip '~r 
.. 'lAPu!.: 
"ha; ,\ ....... 
r~:l:'~,e ti 
~_.-
@ 
Universidad Nacional Autónoma de México 
Secretaría Generai 
Dirección General de Servicios de Cómputo Académico 
Asunto reporte bimestral No 1 
Del 4 de febrero al 12 de abril del 2002 
Prof. Lilia Andrea Escalona Picaza 
Jefe del Departamento de Servicio Social 
Escuela Nacional de Artes Plasticas 
Presente: 
Por medio de la presente le informo que el alumno Sánchez León José Antonio 
con número de cuenta 9515459-6 de la licenciatura en Diseño y Comunicación 
Visual, realiza su servicio social desde el 04 de febrero del 2002 hasta el 30 de 
agosto del 2002 en el programa de Diseño e Innovación de Materiales y 
Sistemas en la DGSCA, clave:2002-12/6-2623. Realizando las siguientes 
actividades: 
• Apoyo gráfico en la actualización de páginas para internet, dentro del 
departamento de Productos Interactivos. 
• Apoyo en la elaboración de animaciones para cursos en linea. 
Atentamente 
Mexico, DF. a 13 de mayo del 2002 
Larisa Enríquez V 
Coordinador Directo t:~~··:·!::~c : .~· :".:: C !> \'.~·: .- ~: ~: 
L0j~JJ¿.L~'J..:r C:('!" 
c.c,p. C. José Antonio Sánchez León.-Interesado 
Expediente. 
. /\1 
Juan9Lcf~t'térrez R 
Respdí:!s'atJle Administrativo 
Circuito Exterior, Ciudad Un iversitaria 
VYWVY. dgsca . u na rn . rn x 
TESIS CON 
FALLA DE ORIGEN 
Universidad Nacional Autónoma de México 
~
ComPUTO 
acaoerruco 
~ 
Secretaría General 
Dirección General de Servicios de Cómputo Académico 
Asunto reporte bimestral No 2 
Oel15 de abril al 3 de junio del 2002 
Prof. Lilia Andrea Escalona Picazo 
Jefe del Departamento de Servicio Social 
Escuela Nacional de Artes Plásticas 
Presente: 
Por medio de la presente le informo que el alumno Sánchez León José Antonio 
con número de cuenta 9515459-6 de la licenciatura en Diseño y Comunicación 
Visual, realiza su servicio social desde el 04 de febrero del 2002 hasta el 30 de 
agosto del 2002 en el programa de Diseño e Innovación de Materiales y 
Sistemas en la DGSCA, clave:2002-12/6-2623. Realizando las siguientes 
actividades : 
• Apoyo gráfico en la actualización de páginas para internet, dentro del 
departamento de Productos Interactivos. 
• Apoyo en la elaboración de animaciones para cursos en linea. 
Atentamente 
Mexico, DF. a 10 de junio del 2002 
'" I "' r " \ ,'" " i 1 '-, ', \ 
Larisa Enríquez V 
Coordinador Directo 
c.c.p. C. José Antonio Sánchez León.-Interesado 
Expediente. 
Juana 
Respo 
Ci,' cuito Exterior. Ciudad Universitaria 
\NVJ\I'J, dgG.ca . une rn ,rn x 
" 
" 
: - ..... - . 
.... " .~ 
,"'PIJr 
.:~~ 
.H;i .. DEMICO 
rrez R 
e Administrativo 
TESIS CON 
FALLA DE ORIGEN 
Universidad Nacional Autónoma de México 
Secretaría General 
Dirección General de Servicios de Cómputo Académico 
~
C(jmPUTO 
acaoemlco 
~ 
Asunto reporte bimestral No 3 
Del 17 de junio al 30 de agosto del 2002 
Prof. Lilia Andrea Escalona Picaza 
Jefe del Departamento de Servicio Social 
Escuela Nacional de Artes Plásticas 
Presente: 
Por medio de la presente le informo que el alumno Sánchez León José Antonio 
con número de cuenta 9515459-6 de la licenciatura en Diseño y Comunicación 
Visual. realiza su servicio social desde el 04 de febrero del 2002 hasta el 30 de 
agosto del 2002 en el programa de Diseño e Innovación de Materiales y 
Sistemas en la DGSCA, clave:2002-12/6-2623. Realizando las siguientes 
actividades: 
• Apoyo gráfico en la actualización de páginas para internet, dentro del 
departamento de Productos Interactivos. 
• Apoyo en la elaboración de animaciones para cursos en linea. 
Atentamente 
Mexico. DF. a 11 de septiembre 
Nj"¡ Yf'\ 
Larisa Enríquez V 
Coordinador Directo 
c.c.p. C. José Antonio Sánchez León.-Interesado 
Expediente. 
C ircu ito Exterior. C iudad Universitari a 
vvvvvv. dgsca. unslTl" rn x 
'TESIS CON 
FALLA DE ORIGEN 
DE LA ACTIVIDAD SELECCIONADA 
Diseño de una interfaz gráfica del Sitio en Línea Círculos de Aprendizaje. El sitio se llama "Círculos de 
Aprendizaje", ya que su intención es hacer comunidades o círculos en los cuales la gente se reúna para 
aprender juntos de determinada temática. Los temas que se pueden incluir o tratar en el sitio son 
multidisciplinaríos, por ejemplo se pueden abrir círculos en los que se aborde XML que es un lenguaje de 
programación, hasta una disciplina como el Diseño Industrial. 
Los usuarios a los que va dirigido el Sitio de Círculos de Aprendizaje es a estudiantes de licenciatura o 
mayor grado. interesados en investigar y trabajar en los temas expuestos en este sitio. Como cualquier 
persona puede abrir un círculo. al elegir un tema, se define el usuario que participará en dicho círculo. El 
responsable del círculo evaluará la información que le hagan llegar los otros integrantes. Y será la única 
persona que podrá subir documentos, respecto a ese tema. 
Este sitio tiene la finalidad de brindar un espacio para formar equipos de trabajo interesados en investigar 
y trabajar de manera colaborativa. sobre temas de interés común. Cada grupo es moderado por aquella 
persona creadora del mismo. Este sitio tiene fines educativos. 
El círculo. según el Diccionario de los Símbolos de Jean Chevalier, "es un punto extendido, participa de su 
perfección. También el punto y el círculo tienen propiedades simbólicas comunes: perfección, homogeneidad, 
ausencia de distinción o de división. El movimiento circular es perfecto, inmutable, sin comienzo ni fin, 
ni variaciones; lo que lo habilita para simbolizar el tiempo, que se define como una sucesión continua e 
invariable de instantes todos idénticos unos a otros." 1 
1 lean Chevalier, Diccionario de los símbolos, páginas.300-30 l. 
a) Análisis formal estructural 
• Elementos importantes para tomar en cuenta en el diseño de la interfaz 
gráfica del Sitio Web. 
1) Usabilidad y Accesibilidad-Diseño Gráfico 
La usabifidad (dentro del campo rl""~"'I"l'nlfn web) es la drslcmlllna que estudia la de diseñar sitios 
web para que los usuarios puedan interactuar con ellos de la forma más fácil. cómoda e intuitiva posible. 
La es la de que un producto o servicio web pueda ser accedido y usado por el mayor 
número pOl51blie de personas, indiferentemente de las del individuo o de las 
del contexto de uso. Debe proporcionar los medios con los cuales los tener contacto con 
los contenidos de un sitio sin importar el tipo de computadora y periféricos con que cuente el en 
se trata de facilitar el acceso del a la información. 
-
Actualmente existen ",...,nc,,,''''''''''''' Inl\¡re~5I013aE~S y grupos de trabajo que proponen lineamientos 
,ni"·prc,,,,!,,,,,, para el desarrollo de sitios web accesibles; las más y utilizadas son la Pautas de 
Accesibilidad del Contenido en la Web 1.0 recomendadas por la World Wide Web Consortium (W3C] del 5 
de mayo de 1999. Estas se a el de contenido en la web, se ,.,...",,,,,",,, .... nc, .. ''''" 
únicamente relacionadas al diseño de la interfaz. 
La usabilídad y manera del tratamiento que se le de a la en el 
concepto estructural, su 1""""I""'''':I:>lnr::;,rif.n y la manera de interactuar con es decir la interfaz del sitio. 
2) Interfaz Gráfica 
La interfaz es la combinación entre el sistema de navegación y el de elementos gráficos. dos 
aspectos que van paralelos; arquitectura de navegación y propuesta de diseño. Ésta debe lograr una 
efectividad comunicativa entre el nt"r>rtr",m y el usuario a través de sus elementos gráficos y su distribución, 
así mismo facilitar la realización de tareas y adecuarse a del usuario para favorecer el 
aprendizaje. ser atractiva visualmente. para fomentar en el usuario el interés por interaccionar y 
conducirlo a la exploración del sitio. 
3) Navegación 
Es la forma en que el usuario podrá ir de una página a otra dentro del sitio. Esta depende de cómo esté 
la es decir; la arquitectura la y los elementos para al 
usuario e ir de una página a otra. 
la de la información es el estudio de la organización de la información con el objetivo de 
permitir al usuario encontrar su vía de conducirse hacia el conocimientoy la comprensión de la 
es la forma navegar por la estructura en que esta la El n ... 'n .... "n de 
la arquitectura de la información es el de navegación 
4) Diseño de la Navegación 
Al diseñar la aVE~qalClcln se definir los nh,,,,rl\/nc:: principales y secundarios con el fin de que al 
terminarse el recorrido del sitio se hayan cubierto éstos. El debe estar estructurado en función de 
las necesidades del usuario y contener un esquema de navegación que le permita encontrar lo que busca. 
Debe mantenerse una interna de navegación y del diseño en todo el producto. El número de 
pasos para llegar a un y la de la información ser los mínimos necesarios. 
La flexibilidad del programa debe permitir que la interfaz ser a las 
en el tamaño de la tipografía. ubicación de los menús, etcétera. 
Al comprender la estructura del se debe saber en cualquier momento se esta ubicado. Una 
buena lavea,aCI!On "O'''r'Y1,lro moverse con facilidad en el sitio. 
Se deberán elaborar bocetos board] el total de "",,,1"",,,11<:.,,,, y la distribución la información. 
los enlaces entre la cantidad de nnr'l""1,n""Q por etcétera. 
También es importante considerar la cantidad de e que tendrán primeras 
pantallas, para no a la de enlaces a los que el usuario pueda acceder, cargando el 
contenido y el 001'-''''''''''''' visual del sitio. 
5) la Estructura Navegación 
la secuencia de información distribuida en diferentes pantallas, la jerarquía de la misma y la manera de 
moverse entre las pantallas que conforman el sitio. 
La de los sitios parten de las estructuras de 
a) Lineales 
b) Jerárquicas 
c) No lineales 
a) Lineales. En estas se avanza sobre pantallas de manera permitiendo al 
establecido. Este tipo de usuario 'r"'r"rl.,nr.o avanzar o retroceder en un orden 
estructuras son comunes donde es importante marcar una secuencia en la presentación 
la información, ya sea por el nivel de complejidad que ésta presenta o bien. por la 
que tiene una con la siguiente. Los elementos de na\,eClaCI que 
incluyen estas estructuras son básicamente dos: avanzar y retroceder. En estos casos, 
para avanzar a la siguiente se debe haber pasado por la próxima y por la 
posterior para retroceder. 
I 
L .. L J 
I~ 
~ 
I I ~ F 
b) La Jerárquica o arbolada. En este a pesar que no se induce una 
navegación determinada, sí existe un orden en la manera en que se presenta la información, 
este es En este tipo de estructura uso de <=In<=l!"'l,.",rln", generales 
que introducen a la especificidad de los mismos. El uso de estas arquitecturas parten 
principio cierta flexibilidad a los usuarios en el recorrido del contenido y controlar 
el nivel de profundidad a 
e) Las No lineales. estructuras no establecen una secuencia única entre ni la 
prioridad de alguna información por encima de otra; inclusive, el no está obligado a 
visitar todas las aunque sí es importante que exista la posibilidad de hacerlo_ 
y son de materiales que recurren a este de 
están basados de manera que el usuario goce de gran flexibilidad, no 
solamente para navegar, sino inclusive, para establecer los objetivos a cubrir. 
Por último, cabe mencionar que también se puede considerar una estructura combinada, que como bien 
es resultado de combinar o más de las anteriores estructuras. dice su 
La feo,acllon es libre, pero habrá momentos en los cuales se induce al usuario a una secuencia ri",t-"'P'Tl 
Compuesta 
6) Elementos de Navegación 
Los elementos de navegación y orientación como función básica informar constantemente al usuario 
acerca de dónde se encuentra, que tiene la que está visualizando re!5DE~cto al resto de la 
arquitectura del sitio. ha estado y hacia dónde puede ir; alternativas al botán del 
aVE~oc¡aCIr que al usuario regresar a su punto de n<:>.·t-IrI!a Los elementos de navegación deben ser 
además de i"'nnC!IIC!t',onlc",c> de El U'''''''V'J. no n<'3''''''f'''' al usuario. 
Al usar los consistentemente se provee al usuario de elementos y 
La regla para indicarle a nuestro usuario que sigue estando en nuestra web es manteniendo 
una coherencia diseño. es uniformidad en la estructura de las páginas que forman nuestro 
utilizando mecanismos de navegación de forma rnnctilctt:lF'n1r:p de 
destacar y dar acceso al mecanismo de navegación, y también en los colores 
n",-.nr'''''lnr,,:u' barras para 
u":;Cluun. Es importante 
considerar que la recomienda en la pauta 2: no basarse sólo en el color; y si asegurarse de que los 
textos y gráficos son cuando se vean sin color2. 
Uno de las para indicar al usuario en donde se encuentra exactamente es manteniendo una 
Jerarquía Visual de títulos y subtítulos. 
7) El Mapa del Sitio 
una n .. r·,..",,-n "p.C'rb ... i&',..""""",nl·,, útil Y recomendable para incluir en nuestro proyecto web. El site map 
puede ser un simple índice en texto/html, o una compleja representación gráfica/multimedia. El acceso a 
éste se debería colocar en una zona visual de nivel alto, y ser posible. este enlace deberíamos 
mantenerlo en las páginas del 
Cumple varias funciones: 
o Da una visión del contenido del sitio web 
o Ayuda al 
o 
a encontrar información que navegando enlace en 
a un usuario que se ha perdido 
tardaría más en localizar 
La pauta 13 de la W3C dice: -P,'nr,nl"",órln", mecanismos claros de navegación. Mecanismos de navegación 
claros y [información barras de un mapa del 
para incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio. 
macanismos de navegación claros y consistentes son importantes para las personas con discapacidad 
o ceguera y benefician a los usuarios'. 3 
2 Pautas de Accesibilidad del Contenido en la Web 1.0 recomendadas por la World Wide Web Consornum (W3C) de 5 de 
mayo de 1999. http://usuarios.discapneles/disweb2000IPautaWAlfWCAGI0.htm#p2. 
3Pautas de Accesibilidad del Contenido en la Web 1.0 recomendadas por la World Wide Web Consortium (W3C) del 5 de 
mayo de 1999. http://usuanos.discapnet.es/disweb2000IPauta WAlfW CA G 10 .htm#p 13. 
Al terminar el de la navegación que verificar que el 
o el nn,<>n'tn vínculo 
o información sobre la maquetación npr1pr~1 de un sitio (por ejemplo, mapa del sitio o 
tabla de contenidos) 
o Agrupe los vínculos identifique el grupo 
o Si funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles 
de habilidad y .... "",to,'o,.,,,. 
o Localice la información de:stElcaida al principio de 105 enCalJe2:a etcétera. 
o Proporcione información 
comprendan múltiples 
las colecciones de documentos (por ejemplo, los que 
o I-'r'"'In{)rr,nn,p un medío para saltar sobre un ASCII art de varias líneas 
8) El Diseño Gráfico 
El diseño de la página es la que ve el al acceder a un sitio web. Los flm<>rl\ln", orlnclioales 
del diseño grafico en la elaboración de una página web son: determinar los elementos necesarios y 
sus características para generar un ambiente visual que la estructura de contenido. Además de crear 
el visual de la interfaz como, los fondos, menús, títulos, encabezados e imágenes fijas. 
del diseño global del sitio se debe definir los elementos gráficos que constantes a 
lo del 
proceso creativo y proyectual es Irn,,,nr-t-,,,,,,,t-,,, una metodología para eS1GaClle(;er bases 
en la finalidad del metodología para la re¡3lizaCllón de cualquier de diseño visual 
elementos en el proceso creativo y la de por lo que es de vital Irnln,,,-.r:::.nrl 
los procesos de la establecida. 
El proceso metodológico para la creación visual de cada página deberá 
1. Conocimiento del medio 
Internet 
b) World Wide Web 
lO La navegación 
c) Los objetivos 
2. La global que se dar 
3. Fundamentos generales de diseño gráfico 
4. Conocimiento de la plataforma tecnológica 
Software 
b) Hardware 
y establecerse con base en: 
El diseño """ro,..'" resuelve o,","""r,,,, de 
o cultural mediante la re!31IZaCl!On de mensajes gráficos que 
<I""'"n,,11'" a un determinado grupo social 
las necesidades comunicativas del 
cliente odel 'lPf",,",r-rfl en el que está involucrado. 
Todo o medio es[)eC;If!C;o para su realización y aplilCSICIC)n 
cumplir y sujetarse a ciertas normas, parámetros y ya que 
disminuyan al mínimo problemas de comunicación y funcionalidad en los rn~'n",,,,,~":: 
Al igual que el un el diseño de sitios Web se bajo normas 
np r'::I I 11''''' de diseño como: legibilidad. originalidad, unidad, 
normas que tienen que ver con el manejo de elementos como 
y de manera a 
imagen y color; adecuando cada 
uno de estos elementos a su medio o o::>n'''n.,ro 
Dentro de estas normas en Web encontramos las normas de 
elaboradas por profesionales con 
npno,"'",I''7Q,'''",P en todos los 
en detectar problemas de uso, y que su aplicación no puede 
<lo,n<>,..,rl,>"O de cada del usuario y contexto, por lo cual deben 
estudiarse todas las de cada proyecto para poder diseñar un 'UUUL.l.U lo más usable pm,lbl18. 
El diseño centrarse y conducirse por el para conocer las características de éste para definir 
el perfil, planificar y diseñar el SplsC1;os eSI:;¡e(;It!(;oS como: información sexo, nivel 
de contexto de uso (hardware y c",'rrlA/::>r'p I ¡'.m:;ou 'u, lugar de 
objetivos y preferencias del usuario. 
9) Resolución 
Resolución se refiere a la configuración del monitor de la computadora, las configuraciones más usadas 
son 800x800 y 1024x788, es tomar en cuenta este factor ya que el usuario podrá ver el 
en cualquiera de estas por lo que se el documento Web verificando 
que funcione adecuadamente en ambas. 
La resolución estándar es 800x800 por lo al el monitor a 1024 encontramos sitios que parecen 
estar cortados ya que no ocupan el área de la o que se rompe o el De 
forma pasa con los sitios diseñados para 1024 que al disminuir la configuración no cabe en pantalla el 
contenido del sitio. 
Por lo anterior deben los 001-''''''' ..... '0 en ambas 
o La e~l!bll'ldald es primordial, tanto texto como rl'lTlr,:,,,, deben tener un tamaño adecuado para ser 
leído y visto en ambas resoluciones. 
o Insertar el contenido en tablas ocultas asignando el ancho en 
ajustable al tamaño de la pantalla. 
o 8ila tiene un ancho en resoluciones se verá al mismo 
se ajustará a ese ancho. 
y no fijo para que sea 
yel 
o Es diseñar a nivel de colocando todos los elementos 
incluso texto simulado en un formato que no exceda los 800 píxeles de ancho [área máxima 
disponible de diseño en pensando en la legibilidad en 1 y 
hacer a la configuración 1024 f'O ,n1-r'<> nrl el o mediante el uso de 
ocultas. 
Por lo tanto para un documento en resoluciones deben 
las características del mismo, ya que lo que en una se ve de un tamaño auc;...,'UClI..lU. en otra 
se verá muy o muy sea el caso, por lo que en toda de diseño debe 
que todos los elementos ya sea o textos sean legibles y en ambas. 
lO El uso de las barras de cuando el contenido así lo 
o Por demasiado que no caben en una pantalla, que no 
el contenido y que sin afectar el contenido se puede modificar fácilmente con 
un cambio de tamaño de la misma. 
o Por que el 98% de la pantalla que contiene información que puede 
8ILIS1;i3r.:¡e en una tabla de un tamaño no mayor a un 100% de la o sólo por 
vacío contenido. 
Hemos constantemente la configuración '-''-''-'N ........... '-' como base para realizar una 
de diseño, siendo que se refiere al total despliegue de la sin tomar en 
cuenta los menús del navegador y por lo que en realidad el área para se 
<>n,.."'"rn'''rl·''' ...... or.1-''' a un formato de 760 píxeles por 41 O píxeles en el caso de que todos los elementos o 
los más importantes de la nó,rlln.", principal se vean completos en ese formato al r;:>ir."""",,,,, el documento 
sin tener que recurrir en instancia al uso de barras de:splaz,:¡m 
111 Aspectos y elementos determinantes en el diseño de un sitio Web. 
Estos as~)eGtos y están y de que comparten características 
para lograr el correcto funcionamiento del todo. 
El Usuario.- Es el en importancia, porque es el destinatario del sitio, el diseño debe en torno 
a su COlmC¡dl(ja(t 
Usos y costumbres.- Es que el diseño sitio parámetros de navegación y estructura 
a demás sitios. Mínimo proceso de aprendizaje. intuitivo y rápido. 
Rapidez.- Antes que directa. 
Optimizar sitio. 
Continuidad en el diseño de las pantallas, uniformidad. unidad en estructura de y colores. 
Legibilidad, contraste y tamaño de adecuado. 
Limitar del usuario para el uso del sitio. 
Navegación sencilla opción avance y retroceso sin pásos intermedios que confundan al usuario. 
Menú.- con pocas (máximo ocho), opción activa en menú. 
con tamaños relativos.- el uso de tablas se asegurar que tengan las etiquetas 
html necesarias para que se t',..<.nc,tn'I"IT1¡",n mediante nave(:¡a(jor'es accesibles y otras aplilca!CIO de usuario. 
Las tablas únicamente para marcar la información """'JUI-"" ("tablas de datos"), 
desarrolladores de contenidos deberían evitar usarlas para diagramarlas páginas nablas de composición"). Las 
tablas para cualquier uso n,..,,,,,,,,:>nt·~ también dificultades para los usuarios de lectores de 
Algunas aplicaciones de usuario navegan entre las celdas de las tablas y acceden a los encabezamientos 
y otras informaciones de las celdas. A menos que marquemos tablas, éstas no 
a la aplicación de usuario la información necesaria. 
Evitar de información. Información y eslt:8tlilec:er un orden El de 
documentos Web. no lee ni busca la información de la misma forma que en un impreso: revista, periódico, 
libro, etcétera. A golpe de vista lee algún ve los algún párrafo sin el menor 
pO~5lbile y si encuentra algo de su interés entonces comenzará a o extraer lo que le sirve. 
Se ha encontrado que en la exploración de un documento el usuario presta mayor atención a ciertas áreas 
de manera intuitiva, el conocerlas nos para colocar y"""''''''''''':::'''' el contenido. En este esquema se 
muestra el de lectura que sigue el usuario, estableciendo una jerarquía visual. 
4 
2 
4 
el esquema se indica que el área central es el punto de partida usuario, el lado izquierdo. es el 
segundo en y así ,.,.,,,,nrln como base esta visual podemos ,..",tnl"'l'AI" 
el y la organización total del documento, tomando en cuenta características que cada elemento 
tiene y que aporta por sí al documento. 
111 Elementos aplicados al proyecto. 
1) ¿Qué es un Logotipo? 
Los logotipos son una importante de la marca de un uu'u ...... u o servicio, así como la 
corporativa de una empresa a institución. Los logotipos provocan generan deseos. 
"El logotipo es una marca de una un producto, un servicio o una gama de productos a 
servicias de una misma fuente. Un logotipo es único para la y 
legalmente como marca o símbolo Un logotipo es uno de los 
<=>I",·rn,=>nt·n", oaslc;os en la identidad o en la de una marca" 4. 
"Un logotipo puede ser bidimensional o tridimensional, o en color [aunque por lo 
una versión bidimensional todo logotipo tridimensional y una en blanco y negro de todo logotipo en color]"5. 
10ClotlPCIS que tienen son 
"El proceso del diseño y el resultado final de los logotipos que han tenido éxito es muy dispar: un logotipo 
ser figurativo, o una combinación de estos; pueden ser o 
o números, círculos o animales, o A pesar de estas 
comparten varias CUl:llldlaOes. Una de ellas es que son prácticas. Funcionan tanto en tamaño 
grande como pequeño, en y negro o en se aplicar extraordinariamente bien en una 
gama y tienen posibilidades de animación"B. 
Los logotipos comunican descripción de una empresa, la aspiración de una negocio o una emoción o 
como o cordialidad, 
2) ¿Qué es Identidad Corporativa? 
"Una identidad pnl"n"""'''''~1\ es la ("j"'pl::: ..... "''''rln visual del de una compañía y su función. un de 
comunicación visual a nivel interno con sus accionistas y UleélUIDo. y hacia el con sus proveedores 
y r.llp'nt:F'!': 
La identidad corporativa consiste en el logotipo y el nombre (o nombres y IOQIOl:;IPO:5J propios de una 
íunto con las normas y directricescómo deben ser empleados. por ejemplo en material impreso como 
calt;álc)qcls e en publicidad. marketing y promoción, y en los y" ...... ,,", .. 
qué colores y tipografías han de usarse con los 
y los nombres, y como deben relacionarse entre sí y nfr·p"irl ... ,ct por una misma empresa. 
3) ¿Qué es una Marca? 
"Una marca es la identidad visual de un grupo de productos o servicios relacionados entre sí y ofrecidos por 
una misma empresa. 
La marca esta vinculada al mercado (o a menudo. a un nu ..... r':::.("j' ..... 
general de la compañía. 
4 Conway Lloyd Morgan, Lagos; logotipo, identidad, marca, cultura, 
5 Ídem 
15. 
6 Lisa Diseño de Logotipos pasos para el mejor 11. 
7 Conway Lloyd Lagos; logotipo, identidad, marca, cultura, pág. 15. 
y no a la actividad económica 
La marca se compone de logotipos, colores, nombres, forma y eS'IOalé:lll!8S exclusivos. Puede, 
o no, contener elementos r1"""l\"~r1r,,, de la rl",.,tlr1~r! corporativa de la compañía principal"B. 
4) Colores Utilizados 
o Rojo. El rojo es es brillante, incita a la aunque sea deimalSIEldo 
primitiva y su sentido sea profundo. casi vegetativo. Un rojo suave, matizado, es sinónimo de buena 
relación afectiva. 9 
o Amarillo. El amarillo es 
laxitud y es excéntrico, 
brillo y alegría; manifiesta desinhibíción, 
planificador. arrlbu:;ioso, inquisitivo y sus aSIDe¡;tos afectivos 
son la ex!)ec:tal:;IOI la n::>I,,;::>,,; y el re~Joc:IJo.10 
o Azul. El azul se asocia con la tranquilidad y la pasividad, lo perceptivo, lo unificador, la "''''10'<::: t·",,...,... 11, la 
ternura, lo sensible y el afecto. El azul """""",,,,,,,,nr ",,,,lc¡,,,t·"'r',...,n,n y logro, así como los más ideales 
de la humanidad: verdad, confianza, dedicación y o,..,'t-.... "' • .-.o 11 
el de o Blanco. Aunque el blanco no se considera propiamente un color, 
es la integración de todos los colores. Este color es positivo, luminoso, brillante, 
delicado, puro, y significa calStUJa(]. inocencia y "<",'",,,n 12 
o Negro. Usado con el blanco es bajeza y su temperamento es severo; entonces, significa, melancolía, 
y 13 
5) Tipografía 
La tipografía se encarga del estudio rasgos las letras, cuerpo, "'''''''''v''''' a 
letra se le denomina . Todos los tipos que comparten mismas características se les 
conoce como fuentes "",t'If"""::' y a una serie de fuentes tipográficas que comparten rasgos nPlnpr'AI~>C:: 
se le llama familias nnnn.r:<>rlr 
La elección y el uso de estas familias tipográficas r!PI-¡prH1p,n de sus calra(~terístlcas. ",n'f'\r· .. ~t-", aplicación, 
ejemplo de su uso. contexto y usuario. Para ello a se define cada una de ellas y se 
, .... ,remate 
8 Conway Lloyd Morgan, logotipo, identidad, marca, cultura, pág. 15. 
9 Georgina Hernández, El significado de los colores, 88. 
10 Ibídem. 90. 
1l Ibídem. pág. 97. 
12 Ibídem. pág. 103. 
l3 
Las tipográficas se han clasificado en 
Sin Remate o de Palo Seco: 
Esta familia de fuentes no tiene remates triangulares o sus son 
rectas. En documentos Web es ideal pues es muy cómoda la lectura e identificación rápida de cada tipo. 
El carácter esta fuente es a 
Entre tipográficas que pertenecen a esta familia 
Arial Verdana Tahoma AvanfGarde 
Egipcias y Antiguas: 
Estas dos familias tienen un remate o rectangular re~¡pectl'lfarnerlte al que la anterior 
se utilizan en publicaciones, bloques de texto extensos, aunque en Web no es tan recomendable precisamente 
por el tipo de remate que ya que es débil dificultando su identificación y por tanto su lectura. 
El trazo de la fuente es fino. 
Entre fuentes tipográficas que n"""I"",,n&>,-'''' a esta familia están: 
Couri Times New Roman 
Caligráfica: 
La r.;::¡Ir';::¡r~t:PI·í"lt:írJ'l de esta le da el rasga en la continua y adornada, nr"',,,Q;nrQ dificultad en la 
identificación de las caracteres, por la que su uso es muy restringido. 
El de esta se con antiguo. festiva y 
Entre las fuentes tipográficas que pertenecen a esta familia están: 
Fantasía: 
La de estas familias es que na comparten r:::l<~nr,"I '''''''''''0'''''' con 
para aplicaciones la una de ellas refuerza o con el 
otra, se crearon 
total. 
Se utilizan sólo en cortas, para títulos. que complementen gráficamente un concepto. 
Jamás se utilizan en bloques de texto pues su legibilidad es baja y difícil. 
Entre las fuentes f- ... " ... nF',ói'If'OC! que nF',"I"F'nF'(~F'n a esta están: 
AL6E.RIAN )Jllt'.l,,\"IJlt.I'I::ltS))(,Z;J::N 
Es importante que el texto este acomodado de manera que pueda comprenderse con facilidad y tenga 
una secuencia lógica. 
Los colores deben facilitar la lectura del texto en la Igualmente la tipografía debe estar en función 
de una fácil lectura. también es estos enla de impresión, 
Jerarquías en Tipografía 
las jerarquías permiten establecer un orden de importancia en el contenido e de los 
Al establecer una a vista lI'ic'nr.h .... "' ... títulos, vU'U""'U 
texto informativo, enlaces, texto complementario, etcétera; y al mantener esta en el del 
contenido la con el mismo y la rápida identificación de elementos. 
Por ello es primordial establecer e identificar el nivel de que le vamos a asignar a cada elemento 
una vez los niveles podemos de la misma fuente 
para diferenciar un nivel de otro a través de nPI"lrlt·",,,, cursivas) o el uso del calar. 
En un documento Web es coma máximo usar dos familias una de que 
rnrnr>I""rrI<:.nro ", .. 6t..,. .. ",......,.::."'t·o el concepto sitio [1\Jambre sitio, y otra para los bloques de texto 
(jerarquizando a través de tamaño, uso de negritas o cursivas), con estas variantes de la misma tipografía 
no es recurrir al uso de una fuente apoyar la la 
vuelve confusa y con un sucio, sólo es válido en casos muy específicos y en los que el 
diseño así lo Es importante aclarar que no necesariamente debe la de fantasía, 
sólo que el proyecto así lo requiera y abuso del mismo recurso. 
el aspecto estético podemos mencionar que el de fuentes que se está utílízando actualmente en 
Web tiene un carácter de vanguardia. de trazo sencillo relacionado con la el muy 
relacionado con los videojuegos. las tendencias de los sitios van de la mano con lo que se ve en 
'"'v.,... •. ,....,... arte popular. 
video, 
aSlpe!::tCIs y características de la nnl'oh,,,, podemos establecer los siguientes puntos 
en relación USJ3bllldé3d-'tel<to. que se aplican con base en la 
o 
notas de 
rli",hn'l"nQ tamaños de tipografía para 
etcétera. 
qUI,zaclon de 
subtítulos, bloque de texto, 
o Uso de negritas, para aunque el uso de las cursivas debe ser limitado a palabras 
cortas pues en Web su nivel de legibilidad es 
o Colocar texto de mayor importancia en el área para facilitar la búsqueda. 
o Un de ocho opciones en una barra de na\/eaiaC!IOn o menú. 
o textos con efectos no tienen gran de ",t-r''''''l"'lñ,n ya que por uso en banners 
publicitarios, el usuario ya los percibe como información extra relevancia. como un anuncio. 
o No saturar de elementos de gran importancia a de se es1~at,le(;er un equilibrio, 
de la contrario se corre el de saturar elementos con la misma fuerza visual que finalmente 
entre ellos. 
o El tamaño de la fuente debe ser relativo que se ajuste a la del monitor. 
o No usar para remarcar un texto pues se puede confundir con el enlace. 
o La alineación que más facilita la lectura es la pero además de facilitar la lectura, 
visualmente los textos son la de los usuarios prefieren los textos 
y cuando se trate de bloques extensos que una distribución adecuada de las 
palabras. Algunos autores que una linea de texto para ser justificada no debe medir menos 
de5DO 
se dice que debe ser fijo el tamaño del bloque texto, Por otro 
mayor lineas de texto muy que pueden nuevamente 
elección dependerá de la cantidad de información. 
que al cambiar a una resolución 
la por lo tanto la 
111 Metodología utilizada 
• Proceso creativo de solución de problemas 
Bernd lobach 
Bernd Lobach considera al proceso de diseño como el conjunto de fJU;""UI~;:' relacionesentre el 
el objeto para que éste resulte un producto re[lro,dulctble tlacr1oJ¡D~lcame 
y 
que funcione el proceso, el diseñador como productor de ... """,-,r' ...... informaciones diversas 
con las que trabaja para un de diseño, donde son las facultades 
para los datos correctos y aplicarlos en 
La forma de manifestar el 
y 
dado. La cantidad de 
"""':>01"'"m es el establecimiento de relaciones novedosas basadas en 
anteriores que se vinculan con la un npl.hl,pm,,,, 
",r,inn,,,,,,,, posibles y la probabilidad de soluciones diferentes se derivan del 
abordamíento 
El proceso de diseño implica tanto lo """,1-I\"n como los procedimientos de de problemas siguen 
como constantes: 
o Un nr"f"hl.o.,.-.n existe y es descubierto 
o Se reúnen informaciones sobre el se valoran y se creativamente 
o Se desarrollan para el problema que se enjuician según criterios establecidos 
o Se la solución más adecuada 
Lo importante es el del en cada una de las fases por y enfocar hacia la solución: 
un de cuyo uso se cubrirán necesidades de duradera. 
define cuatro fases del proceso del diseño; se na,,,,,,,,.,,,,., de una forma más 
compleja lo que se expresa, ya que cada momento no se delimita en su transcurso real. siempre se 
entrelaza con otros y su movimiento considera tanto avances como retrocesos. 
• 4 T:::aCi~OCi! de acciones a desarrollar por parte del diseñador 
.. 1: Análisis del problema 
El de partida es el descubrimiento del cuyo en 
le es presentado al diseñador por la empresa. 
Para el análisis del con la .nr",nr,("1,n de brindar la mejor <>U"U,","J' es indispensable recopilar 
todos aquellos que le atañen. dato contribuye a la base en la que se una 
Lobach desglosa las posibilidades: 
o En el análisis de la se cuántas personas se interesan en la solución del 
o En el análisis 
considerando la 
la relación social se ... ""l"""r'"" al vínculo entre un probable usuario y el objeto, 
de 
o el análisis de las relaciones con el entorno se considera el en que se ,n",,,,,,""'''''·''' 
el especiales a que se expondrá el objeto y las pOisibles 
:::01"',/",11"1,"""'''' del entorno etc.) y viceversa 
entorno, contaminación, etcétera]. 
o En el análisis del desarrollo histórico se considera la evolución del diseño del objeto de que se trate. 
o En el análisis del mercado se integran los datos sobre objetos similares y su comportamiento para 
obtener puntos comunes de referencia. Se considera también como el análisis comparativo del 
producto. 
o En el análisis de la función se incluyen los datos técnicos acerca del uso del objeto. Aquí se 
estructuran las características de un objeto por sus cualidades funcionales. el sistema de 
representación. 
o En el análisis estructural se revelan los componentes del objeto y sus relaciones con base en los 
cuales se toman decisiones para la llamada madurez tecnológica del objeto. 
o En el análisis de la configuración se especifican los puntos de apariencia estética de un objeto. Se 
establecen las características formales y sus posibles variantes. 
o En el análisis de materiales y procesos de fabricación se consideran las posibilidades. 
o En el análisis de riesgos se consideran las patentes, determinaciones y normas que pudieran 
afectar la solución del problema. 
o En el análisis del sistema, se determinan las relaciones del objeto con el conjunto al que pertenece. 
si fuera el caso. 
o En el análisis de elementos de distribución. se revisan aspectos como montaje. servicio al cliente y 
mantenimiento. 
La definición del problema se expresa verbal y visualmente, a partir de ello se valoran y clasifican los 
factores que intervienen en la solución. 
• Fase 2: Soluciones al problema 
Con base en las relaciones de información y la conclusión de condiciones para la solución del problema, 
el diseñador incursiona en la fase propiamente creativa. En ella se seleccionan procedimientos para la 
solución organizada (la prueba. el error y la inspiración). 
La elaboración de ideas implica definir diversas probabilidades para resolver el problema en cuestión. es 
fundamental que se dibujen bocetos o se construyan modelos de prueba de las soluciones pensadas. 
• Fase 3: Valoración de las soluciones del problema 
Aquí tiene lugar el examen minucioso de las alternativas presentadas entre las que se elige aquélla 
que responde a un enfrentamiento cuidadoso con los valores exigibles fijados como conclusiones de 
la fase 1. Los procedimientos de valoración no se describen en el texto pero sí se relacionan con dos 
dimensiones: la importancia del nuevo objeto para el usuario y la importancia para la empresa. 
• Fase 4: Realización de la solución al problema 
En ella se concreta la respuesta y afinan los mínimos detalles con dibujos y explicaciones gráficas 
necesarias. 
ESTA TESIS NO SAl.l. 
OE LA BIBIJOTECA 
• 5: Aplicación 
Para identificar el en Línea de Aprendizaje, decidí crear un logotipo, para """""",c,,:>nr<, ... 
la idea que envuelve a este sitio. Para resolver el de Círculos de 
primeramente me basé en el esquema proceso de comunicación, de emisor y receptor, pues 
la finalidad de Círculos de Aprendizaje es el enriquecimiento mutuo de los temas a tratar entre los 
Basado en lo anterior, utilicé un círculo de color rojo, con el borde muy definido, para que el 
interés del usuario por participar en el sitio y para reflejar movimiento y dinamismo; Para dar el sentido 
de movimiento. tratándose de una información donde la retroalimentación es importante, coloque 
al fondo, un círculo difuminado de color rojo y dos de color negro para dar énfasis y dirección 
(la información del creador del "Circulo" y del usuario se enriquece mutuamente}. El fondo de la página 
es de color 1">1",nr'" 
Las fuentes hnn,... ... "'t'r""" usadas en el titulo del sitio de Círculos de Aprendizajé son; Arial Black, en la frase 
. y Arial en la Ude aprendizaje". Distorsionando el texto en el Programa con 
el filtro esferizar, para dar un sentido de profundidad en el resto de los elementos y como si fuera una 
esfera que es rodeada por el texto. 
Los de las páginas interiores, son muy palrec;ldclS al logotipo de la página principal. con 
diferencias de que son de menor de tamaño y de que el texto lleva escrito el título 
se esta accesando. 
la página en la que 
los de los botones de la pagina principal, utilicé la fuente New ITC by de 
color colocándolos sobre un rectángulo de color y al un rollo ver se invierten 
los 1"'",1 n 0'",,"" quedando en la orilla un borde azul. El botón de "Créditos· es el único en el que el fondo es 
blanco con borde azul y que al cambia al coloro azul, el texto pasa de azul a blanco, 
Las interiores tienen el fondo blanco, y en la parte yen la un de color azul, 
Los botones interiores los diseñe como si estuvieran transparentes, poniendo el texto y el ovalo que lo 
rodea, con una sombra, para que no se viera plano y diera la de profundidad. 
b) Descripción de la plataforma y técnicas empleadas 
A. Técnicas empleadas 
lB Producción Digital 
Producción Digital, es producir documentos digitales interactivos para publicar en Internet, 
OVO, CO y otros canales 0I011::818S. 
Dimensiones 
JI 778 pixels x 431 pixels. 
JI Resolución 150 PIXE~le~3/ IJ'J'LlC'U 
Materiales empleados 
lB Adobe Photoshop 5 
Adobe fue el programa en el que desarrollé todo el diseño del 
Círculos de Aprendizaje. 
El programa lo utilicé por los efectos que se pueden lograr: Este es un programa de mapas 
de bits y un mayor realismo en una imagen 
lB Adobe lIIustrator 7 
Adobe IIlustrator 7 lo utilicé para abrir los logotipos de las instituciones que aparecen en la 
n"",.. .. n::> principal del Sitio 
Los programas de dibujo o 
de n ... ".nrl,.,.",,''''' y para modificar su tamaño. 
(Oraw) crean las formas como obretcls 
una combinación de líneas rectas y curvas, abiertas o con un contorno de grosor 
y color a elegir, y con relleno o sin él. Los objetos pueden ordenarse unos respecto de otros,o mantenerse independientes. Resultado: que difícilmente ser 
tan realistas como los pero que pueden escalarse a tamaño sin 
calidad. Idóneos para ilustraciones y estilizadas, esquemas, texto y dibujo técnico. 
lB Macromedia Freehand 9 
I\/k',.....,,... ..... ol"l,.'" Freehand 9 también es un ..,"("1 .... <:>',..,.,'" de vectores. En este n,.,r,,,,,cr"n diseñe 
los botones las páginas interiores y los fondos azules. Freehand es un programa muy 
parecido a Adobe lIIustrator, los resultados que se obtienen son y lo utilicé 
porque más 
D. Plataforma empleada 
• pe 
Illl'IlC'17l'.rlf1 con este programa que con IIlustrator. 
DESARROLLO 
PROYECTUAL 
Las medidas del archivo del diseño gráfico del Sitio de Círculos de Aprendizaje son de 778 pixeles x 431 pixeles. 
Esta medida es estándar para el diseño de las páginas dentro del departamento de Productos Interactivos 
de la D.G.S.C.A. Esto es para que el integrador no tenga problemas en el momento en que ajusta la página 
Web para los navegadores de Internet Explorer y de Netscape, además de que en el tiempo en el que hice el 
Servicio Social, la resolución que la mayoría de los usuarios utilizaba en su pantalla era de 800 x 600 pixeles. 
La resolución del archivo fue de 150 pixeles/ pulgadas. 
Al diseño gráfico del Sitio de Círculos de Aprendizaje, no se le hicieron modificaciones, el primer boceto que 
fue presentado fue aceptado, el diseño se respeto, solo hubo cambios en algunas páginas internas en el 
acomodo de los botones, para que todos los botones aparecieran en el mismo lugar. 
En meses posteriores de que este proyecto fue puesto en servicio, se tramitó el registro de derechos de 
autor. Los derechos de autor fueron tramitados por la misma institución. Los diseñadores firmamos una 
carta en la que cedimos los derechos de autor a la Universidad Nacional Autónoma de México. 
Estructura de navegación del proyecto "Círculos de Aprendizaje" 
-----_.--_ .. _ .. _-
----------
1 Pantalla 
principal 
I 
I I I 
2 Objetivo 3 Temas 4 Crear círculo 
I 
5 Círculo 
seleccionado 
I 
6 Proyectos 
... _ .... _u. ... ~_ 
---~ .. -~ .. _ .. _....."...--
E$I~1I"'W!'H~ilttQ'-ltltIJot-bnfdau!'l~J.~"\AIMf.fJ.I\oIü5;4't1rW~k~1~vf. 
bf,""~'¡)i1 r If~ ¡Jt Mt'~a CQQWtMM ,d;t" ~ ~~j (.~~ t . 1itWW(t ~ 
""OIf!t~~~"L-tlIlt.IUt~'ofa~.l iIr/t(, 
¡I;!~ftP .. ~ O'MU\ 1<» ¡).I,fJI'IqIf,(:iI<::¡J.\l "'-ft.:(t'l'ldWut».jI!. "1<». t..¡nJ,J,(»t'I 
.... ~Ikt)'(f""I1Y'~t.;.tMr.cn:.u.., 
_ ..... 
I 
I 
7 Foro 
1 Pantalla principal 
Botones: Objetivo 
Temas 
Crear circulo 
Créditos 
Imágenes: lago UNAM 
LogoOGSCA 
Texto: Presentación 
2 Objetivo 
Botones: Principal 
Imágenes: Titulo Objetivo 
Texto: ElCpIicación 
3 Temas 
Botones: Consullar temas 
Principal 
Imágenes: Titulo temas 
Vit\etas 
Texto: UsIa de temas por 
consullar 
....................... - ....................... ,,-. 
" ........... .,,..... ....... ~ ............... -....... ,. .... ~ ,....... ... ,... ............. ,....._--
.... la, ..... ~ ...... _· --.-.¡ .............. .... 
... 
XML 
IIITROCUcelOU 
XlIL 
1!' .. ...,.._~ ...... ~A'~" .. ,.toeoI~...,_. 11r,~ -"'- ..... c ..... ~ .. ~ 
...... 'ti • ....-_ 
"-,-, .. ,._.. ''''non 
.. ~ ............ t..N&t .. rV ......... 
JH. ... _ - __ ...,... ...... 4~ .. t".t6lrTV"f ................ _ .... , ~ 
t" ... ,.. •• ad ·""",Jtw ...... _u.li.rn:riIr."''''"..Iwq-...tw. ......... l:Atll"'--..;. .......... . 
''IInC"".JrN_~1rft ~ . .,.,. rft'Wld <'" ...... 'blt ........... ~. J'loT.<.w.tI ....... ..,.1t 
' .. ;!toklW"~ ...... 'fIlM' .. h:Y~"''''''''' 
4 Crear círculo 
Botones: Enviar 
Principal 
Imágenes: Titulo crear 
circulo 
Texto: Forma de registro del circulo 
por abrir. incluYendo un cuadro de texto 
para anadir fa información. o bien. 
la opción de subir un archivo de texto 
que pueda tener imágenes 
5 Círculo seleccionado 
Botones: Proyectos 
Foro 
Póncipal 
Imágenes: Titulo cltculo 
Texto: Presentación del circulo 
6 Proyectos 
Botones: Principal 
Regreso a circulo 
Imágenes: Titulo proyecto 
Villelas 
Texto: Propuesta de proyeeto 
Forma pare Insertar un proyecto 
nuevo 
7 Foro 
Botones: Pñncipal 
Regreso a circulo 
Imágenes' Necesarias para el foro 
GLOSARIO 
archivo - fichero (file) 
Unidad significativa de información que puede ser manipulada por el sistema operativo de un computador. Un fichero 
tiene una identificación única formada por un "nombre" y una "extensión", en el que el nombre suele ser de libre elección 
del usuario y la extensión suele identificar el contenido o el tipo de fichero (usualmente viene dado por la aplicación 
que se utilizó para crear el archivo). Así, en el fichero prueba.txt el apellido "txt" señala que se trata de un fichero que 
contiene texto plano. En la estructura arborescente con la que se estructuran los contenidos de un computador, los 
archivos se ubican dentro de directorios. 
ASCII - American Standard Code for Information Interchange 
(Estándar Americano de Codificación para el Intercambio de Información) Conjunto de normas de codificación de 
caracteres mediante caracteres numéricos, de amplia utilización en informática y telecomunicaciones. 
banner (anuncio, pancarta) 
Formato de publicidad para sitios web consistente en una franja o rectángulo, con textos y gráficos animados, que 
enlaza con el sitio del anunciante. El banner se sitúa normalmente en la parte superior y, a veces, en la inferior de la 
página, aunque depende de la diagramación de cada sitio web. La tarifa para cobrar esta publicidad se establece según 
el número de impresiones del banner o los banners de la campaña. Y a la hora de medir la efectividad de una campaña, 
el dato más importante es el ratio de "click-through" o porcentaje de impresiones que se convierten en visita en el sitio 
del anunciante, a través del link en el banner. 
GIF (Graphics Interchange Format) 
(Formato de Intercambio Gráfico). Formato de imágenes utilizado para representar ficheros en la red. Los gráficos GIF, 
que pueden ser incluidos en páginas HTML. son reconocidos y visualizados por los programas navegadores. 
hardware (equipo fisico) 
Componentes físicos de un computador o de una red, en contraposición con los programas o elementos lógicos que 
los hacen funcionar. 
hiperenlace (hyperlink) 
Marcador existente en un documento hipertexto que enlaza éste a otro archivo, que puede ser otro documento 
hipertexto u otro tipo de archivo (gráfico, video). Uamado también simplemente enlace. 
HTML (HyperText Markup Language) 
(Lenguaje de Marcado de Hipertexto). Lenguaje de programación en el que se generan las páginas web, elemento base 
de la navegación WWW. Nacido como un lenguaje de formateo de texto para su visualización en los navegadores, con 
el tiempo se ha ido complejizando, y admitiendo componentes de otros lenguajes (javascript, por ejemplo). El HTML 
se estructura por medio de etiquetas o tags, que van definiendo los elementos de la página: texto, tablas, enlaces, 
formularios; o llamando desde el documento a otros archivos conexos (gráficos, audio, video, etc.). La definición del 
estándar HTML está a cargo del Web Consortium. 
inteñaz (inteñace) 
Zona de contacto, conexión entre dos componentes de "hardware", entre dos aplicaciones o entre un usuario y una 
aplicación. En este último sentido, interfaz es la cara visible de los programas, con la cual los usuarios interactúan. 
Pantallas, íconos, mensajes y lenguaje utilizado forman parte de la interfaz. 
Internet Explorer (Explorador Internet) 
Navegador WWW creado por la empresa norteamericana Microsoft. Es uno de los navegadores Internet más 
difundidos. 
Internet 
Internet es la mayor red de interconexión de redes del mundo. Tiene una jerarquía de tres niveles formados por redes 
de eje central (backbones como, por ejemplo, NSFNET y MILNET), redes de nivel intermedio, y redes aisladas (stub 
networks). Internet es una red multiprotocolo, que permite a todos sus usuarios la utilización de sus servicios(World 
Wide Web, correo electrónico, grupos de noticias, etc.) por medio de la simple conexión a uno de los millones de 
servidores que proporcionan acceso a la red. 
JPEG, JPG (Joint Photographers Expert Group) 
(Grupo Conjunto de Fotógrafos Expertos) Éste es el nombre de un formato gráfico muy utilizado para representar 
ficheros en la red, capaz de comprimir las imágenes hasta 20 veces su tamaño original, con la consiguiente pérdida 
de calidad. Los gráficos JPEG (cuya extensión es .jpg) pueden ser incluidos en páginas HTML y son reconocidos y 
visualizados por los programas navegadores. 
navegación 
Se llama así al acto de buscar (dirigida o aleatoriamente) documentos WWW, explorar un sitio web o simplemente 
seguir enlaces de hipertexto, de acuerdo a los intereses y deseos del usuario. 
navegador (browser) 
Aplicación para visualizar documentos html y seguir enlaces de hipertexto. El navegador funciona realizando una 
"petición" o "request· al servidor, mediante una dirección URL o Ip, y despliega el documento en la pantalla. Los 
navegadores integran habitualmente todas las herramientas necesarias para acceder a los diferentes servicios 
Internet, como WWW, FTp, grupos de noticias o correo electrónico. A su vez, cuentan con ·plug-ins· para aumentar 
sus capacidades, y de este modo presentan animaciones, video, audio y otros archivos. El primer navegador se llamó 
Line Mode Browser, pero hoy en día los navegadores más populares son Navigator de Netscape, Internet Explorer de 
Microsoft y Mosaic. 
Netscape Cornmunicator 
Navegador WWW creado por la empresa norteamericana Netscape. Es uno de los navegadores Internet más 
difundidos que, como todos los programas navegadores hoy en día, integra en uno solo las aplicaciones de correo 
electrónico, chat y lector de news. 
page (página) 
Archivo que constituye una unidad significativa de información accesible en la WWW a través de un programa 
navegador. El sitio web está habitualmente creado como un conjunto de páginas, a las cuales se accede mediante los 
hiperenlaces instalados entre ellas. 
PC (Personal Computer - Computador personal) 
Máquina de computación de tamaño sobremesa y de prestaciones cada vez más elevadas. La computación personal 
tiene algo más de una década, y cada día forma parte de la vida de más hogares. 
software (programas) 
Programas o elementos lógicos que hacen funcionar un ordenador o una red, o que se ejecutan en ellos, en 
contraposición con los componentes físicos del ordenador o la red, agrupados bajo el nombre de hardware. 
TIFF (Tagged Image File Format) 
Formato de Fichero de Imagen con Etiquetas. Formato gráfico utilizado para representar ficheros en la red. Los gráficos 
TIFF, que pueden ser incluidos en páginas HTML. son reconocidos y visualizados por los programas navegadores, 
aunque este formato no comprime la imagen y su peso es mayor que el del JPEG, por ejemplo. 
usuario (user) 
Se llama usuario en sentido amplio a toda aquella persona que utiliza recursos variados en Internet. Puede decirse que 
el "usuario" es la personalidad electrónica de una persona, ya sea como cliente de un ISP o realizando compras en un 
sitio web de comercio en Internet. 
web 
El término se utiliza para definir el universo del World Wide Web, los sitios, la información y los servicios de la 
"teleraña". Han existido diversos intentos de imponer una traducción adecuada al español, pero continúa utilizándose, 
sin más, "web". 
WWW (World Wide Web) 
Sistema de información distribuido, basado en hipertexto, creado a principios de los años 90 por Tim Berners Lee, 
investigador en el CERN, Suiza. La información puede ser de cualquier formato (texto, gráfico, audio, imagen fija o 
en movimiento) y es fácilmente accesible a los usuarios mediante los programas navegadores. La popularización del 
WWW facilitó en gran medida el acceso masivo del público a Internet. 
FUENTES 
DE INFORMACIÓN 
Chevalier, Jean. Diccionario de los Símbolos. Barcelona. Herder, 1986. 1107 págs. 
Lloyd Morgan, Conway. Logos, logotipo, identidad, marca, cultura. México. Mc Graw-Hill, 1999. 
Ortiz Hernández, Georgina. El significado de los colores. México. Trillas, 1992. 279 págs. 
Silver, Lisa. Diseño de Logotipos pasos para conseguir el mejor diseño. México. G, Gili, 2001 . 
144 págs. 
Vilchis, Luz del Carmen. Metodología del Diseño. México. 2a ed. UNAM, 2000. 
http://www.htmlweb.netldisenolgraficos_digitales/graficos_2.htm I 
http://www.tejedoresdelweb.com/307/printer-7588.html 
http://platea.cnice.mecd.es/-jmas/manual/html/taller_dibujo_vectoriaL1.html 
http://www.dgsca.unam.mxl 
http://entren.dgsca.unam.mxl 
http://www.amipci.org.mxlglosario.html 
	Portada
	Índice
	2. Introducción 
	3. Reporte de Actividades 
	4. Planteamineto de la Actividad Seleccionada
	5. Desarrollo Proyectual 
 
	6. Glosario 
	7. Fuentes de Información