Diseno-de-interfaz-grafica--tour-Web-de-seguridad-en-el-IFUNAM

Vista previa del material en texto

UNIVERSIDAD NACIONAL AUTÓNOMA DE MÉXICO
ESCUELA NACIONAL DE ARTES PLÁSTICAS
Diseño de Interfaz Gráfica: 
“Tour Web de Seguridad en el IFUNAM”
Tesina
Que para obtener el titulo de:
Licenciado en Diseño y Comunicación Visual
Presenta
José Nemesio Barrera Contreras
Director de Tesina: Maestro Joel Pérez Morales.
México, D.F., 2009
 
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. 
 
 
 
Agradecimientos
A mis padres
Nemesio Barrera Gutiérrez
Guadalupe Contreras Lama
 A ustedes que me dieron la oportunidad de 
estudiar y alcanzar una meta en la vida.
A mis hermanos
Aldo Barrera Contreras
Andrés Barrera Contreras
 Por su apoyo incondicional durante todo este 
tiempo que hemos pasado juntos.
A mi director 
Mtro. Joel Pérez Morales
Por su confianza y apoyo 
durante este trabajo.
A ti Cynthia 
 Por tus consejos y conocimientos en el 
desarrollo de este trabajo. 
 ¡Gracias amiga!
A la UNAM
 Por la formación profesional que me dio.
A todos mis amigos
Instituto de Física
DiezyMedia
ENAP
ENP1
Por su amistad y conocimentos que 
compartieron conmigo.
Dedicatorias
A mis padres
 A ti papá, a ti mamá, que me dieron todo en la vida para 
llegar hasta donde estoy, gracias a sus esfuerzos y sacrificios 
juntos hemos alcanzado este logro ¡para ustedes este trabajo!
A mis hermanos
 A ustedes camaradas por estar siempre conmigo en las 
buenas y en las malas.
A todos ustedes ¡Gracias!
Índice
Introducción................................................................................... 7
Capítulo 1....................................................................................... 8
Antecedentes 
1.1 Instituto de Física 8
 1.1.1 Secretarías Comisiones y Representantes 9
 1.1.2 Medidas de Seguridad e Higiene 9
1.2 Antecedentes del Internet 11
 1.2.1 Inicios 11
 1.2.2 World Wide Web 12
1.3 Algunos términos importantes 13
1.4 Elementos de una pagina Web 16
1.5 CMS (Sistema de gestión de contenidos) 18
1.6 Interfaz Grafica 20
1.7 Interactividad 23
1.8 Sitio Web de los Institutos 25
 
Capítulo 2....................................................................................... 27
Necesidad de desarrollo del “Tour Web de seguridad en el 
IFUNAM”
2.1 Origen de la problemática 27
2.2 Necesidades del Sitio Web enfocadas al diseño 32
2.3 Requerimientos 37
Capítulo 3....................................................................................... 39
Desarrollo y construcción del “Tour Web de seguridad en el 
IFUNAM”
3.1 Planificación del sitio 39
 3.1.1 Objetivos 40
 3.1.2 Audiencia 41
 3.1.3 Contenidos 43
 3.1.4 Investigación 46
 3.1.5 Organización de la información 56
 3.1.6 Mapa del sitio 59
Capítulo 4....................................................................................... 60
Diseño de la Interfaz Gráfica
4.1 Diseño de la Interfaz Gráfica 60
 4.1.1 Bocetaje 60
 4.1.2 Color 65
 4.1.3 Tipografía 66
 4.1.4 Imágenes 67
 4.1.5 Organización de los elementos en el espacio 69
4.2 Puesto en marcha en Joomla 74
4.3 Optimización 79
4.4 Aplicaciones interactivas 80
 4.4.1 Diseño y construcción 81
Conclusiones..................................................................................87
Bibliografía..................................................................................... 90
Anexos............................................................................................ 93
Introducción
En este proyecto de tesina se presenta el desarrollo y diseño de interfaz grá-
fica, para el “Tour Web de seguridad” del Instituto de Física de la UNAM; la 
información que se expone en este documento muestra un planteamiento 
de trabajo, con el cual se obtuvo una solución grafica que responde a 
necesidades enfocadas con la Web. La información generada durante 
el desarrollo de este proyecto, es un referente para el aprendizaje en 
la construcción y diseño de sitios Web, así como ampliar los conoci-
mientos en el uso de nuevas tecnologías y análisis de problemáticas 
con relación a la Web, desarrollando una Interfaz Gráfica eficiente en 
su diseño y en la interacción hombre–computadora. 
Es un sitio Web distinto a los habituales dentro de la institución, el uso de 
nuevas tecnologías y contenidos interactivos que presenta son en esencia 
las características que lo distinguen de los demás sitios Web de la institu-
ción. El documento se compone de cuatro capítulos, a través de los cuales 
se explica el proceso de análisis y construcción de la interfaz grafica, 
así como de los contenidos interactivos que conforman este proyecto; 
adicional a ello se incluye material grafico, en el que se muestra algunos 
elementos de los contenidos del sitio Web de seguridad y que fueron 
empleados por el Instituto de Física en otros proyectos.
El proyecto no tiene un antecedente de sitio Web en la institución, por lo 
que elaborar de principio a fin todo el sitio Web, permitió poner en práctica 
mis conocimientos y habilidades en el ámbito de la Web e incrementarlas; 
esto ayudará para afrontar con mayor eficiencia problemáticas de esta índole 
y poder dar soluciones que cumplan con las necesidades requeridas.
La información contenida en este documento, podrá ser considerada por 
el entorno académico y estudiantil, como una fuente de información que 
sea de apoyo en la realización de actividades profesionales y de docencia, 
relacionados al diseño de sitios Web.
7
1 Antecedentes
1.1 Instituto de Física de la UNAM
Fue creado en 1938 y su desarrollo laboral se da en el ámbito de la 
ciencia realizando investigaciones en diversas especialidades de la física 
contemporánea y áreas afines. En 1933 se reorganizan los estudios cien-
tíficos y técnicos dentro de la Universidad que dan origen a la creación de 
dos facultades: la de Ciencias Físicas y Matemáticas (que agrupa a las 
Escuelas de Ingeniería, Química y las Secciones de Física y Matemáticas) 
y la de Ciencias Médicas-Biológicas que reúne a las Escuelas de Medi-
cina, Odontología y al Departamento de Biología. Un año después se da 
otra reforma universitaria que desbarata la organización anterior dejando 
que las escuelas se independizaran; para el año de 1935 el Departamento 
de Física y Matemáticas imparte dos carreras, Física y Matemáticas con 
el grado académico de Maestro en Ciencias. 
Finalmente en el año de 1938 se funda el Instituto de Ciencias Físicas y 
Matemáticas; para el año de 1939, se promueve la creación de la Facultad 
de Ciencias más la creación del Colegio de Biología y de Institutos aso-
ciados a cada departamento de la Facultad. Actualmente el IF1 continúa 
con sus líneas de investigación, funge como promotor de la ciencia entre 
la comunidad universitaria y público en general a través de sus programas 
de divulgación como “Día de puertas Abiertas” así como a la formación de 
académicos e investigadores.
1 IF. Instituto de Física 
8
Antecedentes
 1.1.1 Secretarías, Comisiones y representantes
La estructura de la institución esta compuesta por secretarías, depar-
tamentos, comisiones y representantes; cuenta con un total de 154 
académicos de los cuales 108 son investigadores, 46 son técnicos y 9 
investigadores posdoctorales. El personal académico esta agrupado en 
seis departamentos de investigación:Estado Sólido, Física Experimental, 
Física Química, Física Teórica, Materia Condensada y Sistemas Complejos; 
también se han incorporado grupos de investigación como: grupo de Aná-
lisis y Modificación de Materiales con Aceleradores de Iones (GAMMAI), 
grupo de Biocomplejidad y Redes, grupo de Dosimetría y Física Médica, 
grupo de Propiedades Dinámicas de Haces de Luz por Medio de Pinzas 
Ópticas y sus Aplicaciones, grupo de Propiedades Ópticas de Defectos 
en Sólidos, grupo Experimental Nuclear y de Altas Energías y grupos de 
Investigación en Nanociencias (REGINA).
 
El IF cuenta además con diversos servicios de apoyo técnico como: biblio-
teca especializada, cómputo, electrónica, taller mecánico, fotografía y 
seguridad radiológica; el área académico-administrativa está encabezada 
por una dirección cuyo apoyo se basa en tres secretarías: Secretaría 
Académica, Secretaría Técnica y Secretaría Administrativa. Su 
funcionamiento se da a través de diversos cuerpos colegiados y órga-
nos de consulta y apoyo: el Consejo Interno; la Comisión Dictaminadora; 
la Comisión Evaluadora del PRIDE y del PAIPA; Comisión de Higiene y 
Seguridad, el Comité de Biblioteca; el Comité Asesor de Cómputo, la 
Coordinación Docente y la Subcomisión de Superación Académica del 
Personal Académico. 
 1.1.2 Medidas de Seguridad e Higiene
En las instituciones del medio científico (Instituto de Física) que utilizan 
equipo y materiales peligrosos para realizar sus operaciones, por normati-
vidad (Constitución Política de los Estados Unidos Mexicanos, Ley federal 
9
Antecedentes
del estado del Trabajo, Reglamento Federal de Seguridad e Higiene y Medio 
Ambiente de Trabajo) están obligados a prestar las condiciones necesarias 
para mantener la integridad y seguridad de las personas. 
Para ello existe un Comité de Higiene y Seguridad, integrado por el 
director del Instituto de Física así como representantes del área acadé-
mico, administrativo, sindicato de trabajadores, estudiantes y personal 
de otras comisiones académicas, que llevan acabo tareas de prevención 
de siniestros, realizando simulacros para prevenir fenómenos natura-
les (temblores, incendios), dando mantenimiento a las Instalaciones así 
como incorporar equipo de seguridad y crear accesos y salidas (ram-
pas para sillas de ruedas) para personas con capacidades diferentes; 
la importancia de tener en buenas condiciones el inmueble surge debido 
a que:
“La edificación que ocupa actualmente el IF fue construida a mediados de los años 
setenta, por lo que después de 30 años de servicio ha comenzado a mostrar sig-
nos de deterioro físico. Por ello, durante el 2006 se llevaron a cabo las siguientes 
acciones de remodelación: sala de ex directores y dirección, laboratorios, salo-
nes de clases, cubículos de estudiantes, auditorios, salones de clase, salas de 
seminario y baños”.2 
Apegándose a los lineamientos establecidos en los documentos antes men-
cionados, el IF realiza estas actividades con el fin de crear una cultura de 
seguridad en su comunidad, que ayude a disminuir los riegos de acciden-
tes y tener más seguridad en sus actividades laborales, por ello “se llevo a 
cabo la Primera Jornada de Seguridad el 23 de abril del 2006 en la unidad 
de seminarios “Ignacio Chávez”.3 Periódicamente la Comisión de Higiene y 
Seguridad hace una evaluación de las instalaciones y equipo de seguridad, 
que ayudan de manera fundamental al desarrollo y funcionamiento del IF; 
tales revisiones son actividades que el personal de la comisión realiza:
2 Menchaca A. Informe de Actividades, México 2007, p.19
3 Loc. Cit. 
10
Antecedentes
“Con el objetivo de verificar que los sistemas de alarmas se mantengan funcionando 
adecuadamente, el primer miércoles de cada mes, a las 15:00 horas, se activan 
manualmente las alarmas de todos los edificios. El 20 de septiembre de 2006 se 
realizó con un gran éxito un simulacro de desalojo de edificios. Finalmente, preocu-
pados por el bienestar y fácil acceso al IF de personas con capacidades diferentes, 
se establecieron lugares de estacionamiento especiales con sus correspondientes 
señalamientos”.4
1.2 Antecedentes del Internet
 
 1.2.1 Inicios
Internet (Internacional Network) es una red mundial de computadoras con-
formada a su vez por distintos tipos de redes, una combinación entre 
hardware y software que permite a los usuarios compartir datos, recursos 
y servicios de una manera rápida y fácil. La comunicación entre los ordena-
dores esta dada a través de protocolos que siguen reglas ya establecidas 
para la conexión con otros sistemas: TCP/IP Transfer Control Protocol-
Internet Protocol establecen las reglas para encontrar un equipo de entre 
todas las maquinas del resto del mundo y asegura la llegada integra de 
los datos. 
El nacimiento de la red tiene sus inicios en 1964 durante la época de la 
“guerra fría”, el problema para comunicarse entre autoridades de los EUA 
y poder transmitir órdenes a todos los puntos estratégicos, bases militares, 
ciudades, estados, etc., es la raíz de su aparición. En 1969 la agencia de 
nombre ARPA (Advanced Research Projects Agency) del gobierno de Esta-
dos Unidos, crea la primera red de computadoras encargada de cumplir con 
dichas funciones conocida inicialmente como ARPANET; a falta de un proto-
colo de comunicación que fuese común entre todas las computadoras que 
variaban en tipo y sistemas operativos (IBM, Unisys, etc.), para que pudieran 
comunicarse entre sí, se crea el InterNetworking Working Group. 
4 Loc. Cit. 
11
Antecedentes
Una vez establecidos los protocolos de comunicación (TCP/IP) en 1978, 
el termino de Internet empezó a utilizarse hacia 1983 convirtiéndose en una 
forma más avanzada y segura de transmitir la información; para mediados 
de los 80´s, comienzan a surgir nuevas redes como NSFNET, NSINETY 
ESNET. Para 1989 el CERN (European High-Energy Particle Physics Lab), 
era el mayor centro de Internet en Europa. 
La tecnología de Internet es una vía de acceso rápido a la información en 
línea, que permite proporcionar a colegios, bibliotecas, empresas y hoga-
res consultar innumerables bancos de información, que eduque, informe y 
entretenga. Actualmente son millones el número de personas que tienen 
entrada a la información en red y este se incrementa con el tiempo, debido a 
su alta demanda como fuente de consulta para realizar trabajos de investiga-
ción. Internet ha pasado de ser una red con propósitos gubernamentales, 
militares y de investigaciones, a ser un lugar donde es posible expresar 
opiniones, comunicarse, participar en foros y conferencias, localizar infor-
mación de cualquier tipo, realizar compras desde casa etc., y las posibi-
lidades aumentan día a día.
 1.2.2 World Wide Web
También conocida como WWW, W3 o Web, “es un sistema de docu-
mentos de hipertexto y/o hipermedios enlazados y accesibles a través de 
Internet”5, su función se da en base a un localizador uniforme de recursos 
URL (en inglés Uniform Resource Locator) que especifica el protocolo de 
transferencia HTTP (HyperText Transfer Protocol) y por el cual se hace el 
enlace con los documentos HTML (http://www.fisica.unam.mx). La World 
Wide Web fue desarrollada en 1989 por el informático británico Timothy 
Berners-Lee para el consejo europeo de Investigación Nuclear (CERN, 
Centre Europeen de la Recherche Nucleaire), con la finalidad de facilitar a 
5 Wikipedia Foundation Inc. (2008). World Wide Web, obtenido el 14 de mayo de 2008, de
 http://es.wikipedia.org/wiki/World_Wide_Web
12
Antecedentes
los físicos de ese lugar el intercambio de información y materiales de in-
vestigación con otros científicos, actualmente la WWW es el servicio que 
más usuarios concentra. Los componentes de la Web son documentos 
de hipertexto (HTML) y son la base del WWW para presentar la informa-
ción en documentos que contienen enlaces o vínculos a otras páginas. El 
soporte utilizado por estosdocumentos esta basado en programas informá-
ticos denominados navegadores Web (Web browsers), tales como Firefox, 
Internet Explorer, Safari etc. Cabe remarcar que la World Wide Web es uno 
de varios servicios que nos ofrece Internet y que debido al crecimiento de la 
red y a los avances tecnológicos en la Web, se han desarrollado nuevas 
aplicaciones Web que permiten tener sitios más complejos y dinámicos; 
es así que se creo la W3C (World Wide Web Consortium) cuya labor es 
marcar estándares para la Web que aseguren su funcionalidad en todo 
el mundo.
1.3 Algunos términos importantes
 Página Web
Término utilizado en la WWW para identificar a los documentos que vemos 
en pantalla, una vez que accedemos a la red y navegamos en ella; es así 
que al referirnos a ella hablamos de que: 
“Una página de Internet o página Web es un documento electrónico que contiene 
información específica de un tema en particular y que es almacenado en algún 
sistema de cómputo que se encuentre conectado a la red mundial de información 
denominada Internet, de tal forma que este documento pueda ser consultado por 
cualquier persona que se conecte a esta red mundial de comunicaciones y que 
cuente con los permisos apropiados para hacerlo”.6 
6 Informática Milenium, SA. de CV. (2008). Principales definiciones de los términos más 
 usados en Internet, obtenido el 28 de mayo de 2008, de http://www.informaticamilenium.com.
 mx/Paginas/espanol/sitioweb.htm 
13
Antecedentes
A diferencia de los medios impresos, en la Web se rompe con el esquema 
lineal a que el usuario esta acostumbrado, pues la lectura en las páginas 
Web no sigue un orden como en los textos.
 Sitio Web
Conocidos en inglés como Website, es un término que se utiliza para 
referirse a “un conjunto de archivos electrónicos y páginas Web referentes 
a un tema en particular, que incluye una página inicial de bienvenida, gene-
ralmente denominada home page, con un nombre de dominio y dirección 
en Internet específicos.”7 Un sitio Web es tan extenso o pequeño según 
el tema y los contenidos que presente; ellos representan el trabajo de una 
persona, empresa u otra organización. 
 Portal
Ofrece toda una serie de servicios y contenidos cuya organización, ayuda 
al usuario a encontrar lo que necesita sin salir de dicho sitio, su uso es de 
manera eventual que se convierte en un hábito de uso diario, por ello:
“Portal es un término, sinónimo de puente, para referirse a un Sitio Web que sirve o 
pretende servir como un sitio principal de partida para las personas que se conectan 
al World Wide Web. Son sitios que los usuarios tienden a visitar como sitios ancla. 
Los portales tienen gran reconocimiento en Internet por el poder de influencia que 
tienen sobre grandes comunidades”.8 
Un portal es una plataforma de despegue para la navegación en la Web; 
comúnmente es adoptado por el usuario como pagina de inicio en su 
browser (navegador) cuando ingresa a la WWW.
7 Loc. Cit. 
8 Loc. Cit. 
14
Antecedentes
 Buscador
Es un sitio en la Web cuya función es proporcionar información acerca 
del contenido de otros sitios en Internet, facilita al usuario la búsqueda de 
información o sitios Web, cuando se desconoce la dirección (URL) del 
sitio o pagina Web que busca. Generalmente, poseen una base de datos 
muy amplia del registro de algunas paginas Web, que se genera cuando 
los que han creado sus paginas Web las dan de alta en los buscadores; 
de lo contrario la página no aparecerá en los resultados de búsqueda. Las 
búsquedas se realizan utilizando palabras clave o por temas, el resultado 
de la búsqueda es un listado de direcciones Web todas ellas relacionadas 
con la información que proporciono en un principio el usuario; este sistema 
funciona mediante “robots” quienes incorporan en la lista de resultados las 
paginas Web localizadas.
 Robots
Conocidos también como “Spiders” (arañas de búsqueda), son progra-
mas que poseen los buscadores para rastrear en la base de datos de los 
servidores Web información referente a la solicitada por el usuario; ellos 
recopilan los enlaces y todos los enlaces referenciados allí en el servidor. 
Ellos procesan una gran cantidad de información que exploran de acuerdo 
a la palabra clave, para identificar y seleccionar las páginas Web que hace 
suponer contienen la información requerida por el usuario. Debido a que 
esta acción la realiza un programa y no la persona en ocasiones los conte-
nidos presentados no son los esperados por la gente.
15
Antecedentes
1.4 Elementos de una página Web
 Lenguaje HTML
Conocido en inglés como Hyper Text Markup Language (Lenguaje 
para Marcado de Hipertexto), es el lenguaje en el que se definen los 
documentos que hoy vemos en la World Wide Web. HTML posee un 
carácter documental y gráfico, los contenidos se presentan en forma de 
texto y son complementados con imágenes; ello visualizado a través de 
navegadores Web que reciben la información en el lenguaje HTML, para 
al final ser interpretada en formas y colores.
La estructura del Lenguaje HTML se compone de etiquetas (en inglés 
TAGS) de apertura y de cierre, mediante las cuales se organiza a los 
contenidos; son instrucciones que informan al navegador Web, de las 
propiedades y valores aplicados en el código. A través de los atributos 
tenemos la opción de manipular la apariencia de los documentos; estos 
se colocan dentro de la etiqueta de apertura antes del ultimo símbolo “>” 
y comienzan por el nombre del atributo seguido del signo “=” con un valor 
añadido a la propiedad que se muestra encerrado entre comillas (“0”). 
Un ejemplo de ello es:
<FONT SIZE=”2”>Esta propiedad aplica un tamaño a este texto</FONT>
Los TAGS los distinguimos en el código por los símbolos “<” “>” y su 
estructura consta de tres partes: etiqueta de inicio, contenidos y etiqueta 
final o de cierre (<etiqueta de inicio>Contenido</ etiqueta final>). Cabe 
aclarar que no todas las etiquetas llevan contenido por lo que se omite la 
etiqueta de cierre al final (</>) y se les conoce como etiquetas vacías, tal 
es el ejemplo de la etiqueta <br> que eventualmente se utiliza para dar 
espacios entre párrafos. 
El Lenguaje HTML fue diseñado bajo ciertos estándares establecidos por 
la WC3 (World Wide Web Consortium) para un óptimo desempeño en la 
16
Antecedentes
Web; como se menciono anteriormente es una organización internacional 
que se encarga de desarrollar estándares Web que ayuden a quienes se 
desenvuelven en este medio hacer su trabajo de una manera correcta y 
funcional.
 CSS
En inglés Cascading Style Sheets (Hojas de Estilo en Cascada) es un 
lenguaje formal con el cual podemos controlar el aspecto o la presenta-
ción de un documento HTML; facilita la construcción de las páginas Web, 
puesto que:
“Es una tecnología desarrollada con el fin de separar la presentación de la estructura 
del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que 
incluyen, tamaño, color de fondo, color del texto, posición de los elementos, márge-
nes, tipos de letra, etc.. Quedando de esta manera toda lo que tiene que ver con la 
parte gráfica de la Web, separada completamente de la estructura del HTML”9 
Las hojas de estilo se pueden aplicar directamente en el documento HTML 
o por medio de un enlace a un archivo CSS externo; la estructura de los 
estilos se integra por elementos HTML los cuales contienen propiedades y 
valores que se encuentran encerrados entre los siguientes símbolos “{” “}”. 
La manera de redactar los estilos es la siguiente:
 h1 {Color : #000000;}
 (elemento) (propiedad) (valor)
CSS es un recurso en la Web que nos dará como resultado un mejor flujo 
de trabajo, mayor organización de nuestro código, menos peso en las 
páginas, y más flexibilidad al momento de realizar algunos cambios en los 
documentos. 
9 Cristalab. (2005). Tutorial básico de CSS, obtenido el 17 de junio de 2008, dehttp://www.
 cristalab.com/tutoriales/94/tutorial-basico-de-css.html 
17
Antecedentes
 Hipertexto
El Hipertexto es un avance tecnológico que alude a un desarrollo dentro 
de los medios impresos, abandona lo tradicional para entrar en lo digital; 
el texto ha pasado del papel a los bits en un cambio que se debe a las 
nuevas formas de comunicación que la tecnología nos ha aportado. Los 
primeros indicios de este lenguaje “se debe a Vannevar Bush, cuando 
en 1945, en su artículo As we may think, describe el dispositivo MEMEX 
en el cual un individuo almacena sus libros, anotaciones, registros y comu-
nicaciones, y esta colección de información es mecanizada de forma que 
puede ser consultada con alta velocidad y mucha flexibilidad”.10 El término 
“Hypertext” fue empleado por Ted Nelson en 1965, para referirse a “un 
cuerpo de material escrito o pictórico interconectado en una forma com-
pleja que no puede ser representado en forma conveniente haciendo uso 
de papel”.11
El hipertexto contrario al texto no se disuelve en un sistema lineal como 
en los impresos; la estructura de la información es no secuencial, acce-
demos a él por medio de un soporte electrónico/digital cuyo dispositivo 
de salida es a través de una pantalla y los contenidos que lo integran son 
interactivos.
1.5 CMS (Sistema de gestión de contenidos)
Un Sistema de administración de contenidos CMS (en inglés Con-
tent Management System), es un programa utilizado en el desarrollo de 
páginas Web a través del cual podemos organizar y llevar un control de 
los contenidos que integran nuestro sitio. Su incursión en la Web surge 
10 Bianchini A. (2000). Conceptos y definiciones de hipertexto, obtenido el 10 de septiembre 
 de 2008, de http://www.ldc.usb.ve/~abianc/hipertexto.html 
11 Loc. Cit. 
18
Antecedentes
de la necesidad de publicar extensos bancos de información por parte 
de algunas organizaciones como revistas en línea, periódicos y publica-
ciones corporativas. Para 1995 el CNET, un sitio de noticias tecnológicas 
hace público su sistema de administración de documentos y se crea 
la Vignette, compañía que se encargaría de abrir el mercado para los 
CMS. 
El uso de los CMS en la Web es cada vez más recurrente, ofrece el soporte 
para trabajar de la forma más eficiente y organizada nuestros contenidos 
e implementar aplicaciones Web que den solución a necesidades espe-
cíficas. Su diseño de interfaz facilita su manejo del CMS a usuarios con 
un nivel avanzado hasta un nivel básico, facilitando el trabajo de realizar 
con mayor rapidez y tranquilidad sus labores. La funcionalidad de un CMS 
parte de cuatro principales elementos que son: creación de contenido, 
administración, publicación y presentación; estos son los pasos a seguir 
en el proceso de creación de una pagina, el acceso a los CMS es a través 
de los navegadores Web. Los CMS cuentan con Templates (plantillas) 
que permiten darle una presentación predeterminada al documento y a la 
que aun es posible modificar el diseño, también cuenta con una bases de 
datos y lenguajes de programación como PHP que permite crear páginas 
Web más dinámicas. 
PHP (Hypertext Pre-processor) es como se menciono un lenguaje de 
programación aplicado a la Web, creado originalmente por el programador 
danés-canadiense Rasmus Lerdof en 1994; “generalmente se ejecuta en 
un servidor web, tomando el código en PHP como su entrada y creando 
páginas web como salida. Puede ser desplegado en la mayoría de los 
servidores web y en casi todos los sistemas operativos y plataformas sin 
costo alguno”12. 
12 Wikipedia Foundation Inc. (2008). PHP, obtenido el 18 de septiembre de 2008, de http:// 
 es.wikipedia.org/wiki/PHP
19
Antecedentes
Es un lenguaje compatible con la mayoría de los sistemas operativos, esta 
tecnología cuyo uso está orientada a la libre distribución, es una alternativa 
más en el desarrollo de páginas Web mucho más complejas y dinámicas, 
que lo que permite el lenguaje HTML. 
1.6 Interfaz Gráfica
IGU (Interfaz Grafica de Usuario) ó GUI en inglés (Graphical User Inter-
faces) es el vínculo de comunicación entre el usuario y el ordenador; la 
interfaz es la vía a la información que permite a los usuarios ver, oír, y tocar 
en pantalla recursos como textos e imágenes, para poder realizar sus 
tareas.
Es por medio de la IGU que el usuario puede interactuar con la compu-
tadora pues, “una interfaz gráfica funciona como una “conversión de idio-
mas”, que en realidad se trata de un conjunto de elementos que recurren a 
la metáfora para presentar información al usuario, permitiéndole interactuar 
con la computadora”13.
La aparición de la interfaz gráfica está ligada al desarrollo de la informática, 
y fue evolucionando paralelamente con la de los sistemas operativos, las 
primeras interfaces estaban basadas en caracteres y se interactuaba con 
ellas por medio de líneas de comandos; a estas se les conoce como CUI 
(Character User Interface / interfaz de usuario basada en caracteres). En 
un principio el uso del ordenador parecía ser un campo reservado para 
expertos en computación, por lo que poca gente podía acceder a ellas si 
no contaba con el conocimiento previo. Un ejemplo de ello es el sistema 
operativo MS-DOS de la plataforma PC que contaba con una interfaz de 
usuario basada en caracteres. La apertura de esta tecnología entre la 
13 Córdova D. (2005). Origen del Diseño de la Interfaz Gráfica, [en línea]. Mati, obtenido el 25
 de septiembre de 2008, de http://www.mati.unam.mx/index.php?option=com_content&task=vie 
 w&id=92&Itemid=35
20
Antecedentes
sociedad permite que más usuarios empiecen a usar más el ordenador y 
aparecen las interfaces de menús como: menús de barra, menús desple-
gables, los menús en cascada, menús contextuales o pop-up, los cuales 
eran estructurados jerárquicamente.
 
Para facilitar la interacción del ordenador con el humano, comienzan a 
desarrollarse las Interfaces graficas, donde el usuario puede iniciar pro-
gramas, ver listas de archivos y otras opciones utilizando representacio-
nes visuales (iconos) y listas de elementos del menú. En el año de 1960, 
Douglas Engelbart desarrolló la primera interfaz gráfica en EE.UU. en los 
laboratorios de XEROX Corporation para su sistema de información estrella 
8010 (810 Star Information System) cuya interfaz estaba basada en gráficos 
bitmaps. Fue introducida posteriormente al público en las computadoras 
“Apple Macintosh” en 1984, y a las masas hasta 1993 con la primera 
versión popular del sistema operativo Windows 3.0.
La IGU fue diseñada para permitir a las personas establecer una comuni-
cación en común entendimiento con sus computadoras personales, entre 
más accesible, entendible y fácil de usar sea la interfaz, mejor será la 
interacción que se tendrá.
 Estilos de Interfaz
Entre los estilos de interfaz gráfica más comunes encontramos:
	 • WYSIWYG, “Lo que se ve es lo que hay”.
	 •	Manipulación	directa
	 •	Interfaces	de	usuarios	basados	en	iconos
En el primero de los casos una interfaz gráfica del tipo WYSIWYG (en 
inglés What You See Is What You Get), hace hincapié en la concordancia 
que hay entre lo que visualizamos en la pantalla del ordenador y la salida 
impresa del documento.
21
Antecedentes
En una interfaz WYSIWYG, las representaciones graficas con las que el 
usuario interactúa son esencialmente las mismas que vera en la aplica-
ción final sobre el papel; de acuerdo con Nielsen (2000) “el documento 
aparecía de la misma forma en pantalla que impreso”. Este estilo ayudo 
a solucionar los errores en las salidas de impresión de los documentos, 
pues anteriormente era habitual que el procesamiento de textos se hiciera 
mezclando códigos de formato crípticos con el texto, donde no se podía 
ver exactamente lo realizado hasta ser impreso.
La interfaz gráfica de manipulación directa, es aquella donde el usua-
rio realiza acciones físicas sobre elementosgráficos en la pantalla, co-
múnmente llevadas a cabo utilizando el mouse (ejemplo, arrastrando y 
soltando un icono dentro de la papelera de reciclaje), reemplazando así 
a las ordenes o instrucciones ejecutadas desde el teclado. De acuerdo 
con Shneiderman (2006), los principios que caracterizan a la interfaz de 
manipulación directa son: 
Una representación permanente de los objetos y acciones posibles.•	
Acciones físicas o selección de botones etiquetados en lugar de una •	
sintaxis muy compleja..
Las operaciones son rápidas, reversibles, su efecto sobre el objeto es •	
inmediatamente visible.
La interfaz de manipulación directa simplifica las tareas de los usuarios 
y pude ser un estilo muy fácil de aprender pero mucho depende de las 
habilidades que el usuario posea para aprovechar su funcionamiento. 
Interfaz gráfica basada en iconos, emplea imágenes pequeñas para repre-
sentar un objeto o acción; cuando el usuario se familiariza con este tipo de 
gráficos le puede resultar más fácil y rápido de identificar los contenidos o 
ejecutar una acción. Por otra parte es importante señalar que este tipo de 
interfaz aplicaría solo en acciones sencillas ya que representar acciones 
complejas mediante un icono es poco probable.
22
Antecedentes
Un icono de acuerdo con Ray Kristof y Amy Satran en el diseño de interfa-
ces, es un término utilizado para describir cualquier imagen de una pantalla 
sobre la que se puede hacer clic, su importancia radica en representar 
particularmente un contenido al que se accede por medio de él. Ejemplos 
de este tipo de interfaces los encontramos en sistemas operativos, aplica-
ciones, CD-ROM interactivos y páginas Web. 
1.7 Interactividad
La interactividad con relación a las siglas en ingles HCI (Human–Computer 
Interaction) y en español IPO (Interacción-Persona Ordenador), com-
prende todo lo que ocurre cuando un hombre y un sistema computa-
rizado realizan tareas juntos; el intercambio de la información entre las 
personas y los ordenadores.
La ACM, Association for Computer Machinery, organización internacional 
de investigadores y profesionales en computación, a través de su grupo 
especial de trabajo en temas de IPO denominado SIGCHI, Special Interest 
Group in Computer Human Interaction, propuso la siguiente definición:
“Es la disciplina relacionada con el diseño, evaluación e implementación de siste-
mas informáticos interactivos para el uso de seres humanos, y con el estudio de los 
fenómenos más importantes con los que está relacionado.”14
La IPO como proceso de comunicación, acción y reacción frente al orde-
nador se da a través de una interfaz de usuario; medio por el cual usuario 
y ordenador interactúan en común entendimiento su objetivo reside en la 
eficacia de este intercambio, minimizando los errores, incrementando la 
satisfacción y disminuyendo la frustración. El diseño de las interfaces de 
usuario para la IPO es fundamental para la usabilidad del sistema, pues 
14 ACM SIGCHI. (2008). CAPÍTULO	 2:	 Interacción	 hombre-computadora, obtenido el 20 de
septiembre de 2008, de http://www.sigchi.org/cdg/cdg2.html
 
23
Antecedentes
como menciona Shneiderman (2006) “disponer de interfaces eficaces 
para profesionales significa que los médicos pueden realizar diagnósticos 
más precisos y que los pilotos pueden pilotar sus aviones de forma más 
segura; por otro lado los niños pueden aprender de manera más eficaz y 
los artistas gráficos explorar posibilidades creativas con más fluidez.”
Cuando el diseño de interfaz no es eficiente la IPO se ve disminuida y 
habría en el usuario baja productividad, un tiempo de aprendizaje inacep-
table y niveles de errores inaceptables que produce frustración y proba-
blemente el rechazo hacia el sistema, por ello toda interfaz de usuario es 
diseñada de acuerdo a las necesidades de los usuarios a quienes este 
dirigida.
Esta disciplina de surge a partir de la explosión tecnológica que se dio en 
los 70s se hizo necesaria la comunicación directa entre el hombre y los 
ordenadores. Del estudio de este fenómeno surgió el área de interacción 
hombre máquina man-machine interaction (MMI) o más específicamente 
interacción hombre computadora, human computer interaction (HCI).
Su nacimiento está ligado al de la informática, ya que se trata de estudiar 
la comunicación que se produce entre los ordenadores y las personas 
que los usan y es paralelo al de la ergonomía, que estudia el manejo de 
las máquinas por parte de las personas. A pesar de que podemos situar 
su inicio en los años 50, hasta la década de los 70 no se aprecia la gran 
cantidad de publicaciones científicas que se dan en este campo ni los 
avances de sus aplicaciones, que son más notables a partir de los años 
80, momento en que comienzan a extenderse los ordenadores persona-
les dirigidos a usuarios no expertos en informática.
24
Antecedentes
1.8 Sitio Web de los Institutos
En el mundo las instituciones avocadas a la ciencia, en su mayoría cuen-
tan ya con un Sitio Web, donde publican todos sus trabajos y estudios 
de investigación así como diversa información sobre el ámbito científico; 
como ya se menciono anteriormente el impacto que ha tenido en el mundo 
Internet ha servido para que muchas instituciones puedan utilizar este medio 
y a través de el difundir contenidos de interés para toda la comunidad 
internacional que estudia esta disciplina. Los Sitios Web de carácter cien-
tífico concentran la mayor parte de su investigación en Internet y debido a 
ello los sitios suelen ser demasiado grandes, que en términos técnicos la 
estructura de los sitios se compone por un extenso número de pantallas; 
el diseño de interfaz gráfica que se puede observar y que prevalece en 
ellos es un estilo formal, en el que emplean colores muy significativos para 
la institución e imágenes relacionadas con la ciencia. 
Para efectos de este trabajo se visitaron solo algunos sitios de institucio-
nes científicas, que tuvieran en su página Web alguna sección o apartado 
alusivo a las medidas de Seguridad e Higiene; cabe decir que son muy 
pocos los sitios que muestran alguna información sobre seguridad en su 
sitio quedando de manifiesto que no todos atienden esta necesidad por 
demás importante al menos en su página Web. Los sitios que si presen-
tan esta información, todos lo hacen por medio de documentos escritos, 
que en algunos casos inclusive se descargan en formato PDF, en ninguno 
se recurre al uso de imágenes.
Direcciones URL de algunas páginas Web de otros instituciones que 
cuentan con alguna sección referente a Seguridad e Higiene:
1.- Instituto de Física de la Universidad de Harvard 
 http://www.physics.harvard.edu/ 
2.-Instituto de Física de la Universidad Antioquia.
 http://fisica.udea.edu.co/
25
Antecedentes
3.- Instituto de Física de la Universidad Guanajuato (México)
 http://www.ifug.ugto.mx/Investigacion/FisicaAplicadaInvestigadores.php
 
4.- Asociación Nacional de la Industria Química
 http://www.aniq.org.mx/
26
2 Necesidad de desarrollo del “Tour Web de 
seguridad en el IFUNAM“
2.1 Origen de la problemática
A pesar de que el instituto cuente con reglamentos internos, un comité de 
seguridad así como instalaciones señalizadas y equipo para prevención 
de riesgos, carece de un medio informativo (carteles, trípticos o algún 
apartado en su sitio Web) que muestre a sus visitantes y personal las 
señalizaciones de seguridad a tomar en cuenta durante su estancia o 
visita.
La señalización y equipo de seguridad con el que se cuenta en las insta-
laciones del IF, pasan muchas veces inadvertidas por la comunidad y sus 
visitantes; la falta de difusión e información impiden a los usuarios conocer 
y saber sobre ello. La confianza sobreentendida acerca de los riesgos en 
instalaciones que los tienen, puede ser entendida como negligencia. 
El instituto a través de su Secretaría Técnica de Taller y Electrónica,recientemente realizó algunos cambios, remodelaciones, reemplazos de 
equipo así como tareas de mantenimiento a las instalaciones, para mejoras 
del mismo y protección de su comunidad, lamentablemente gente externa 
a la institución no tiene conocimiento de ello; las obras realizadas en el 
presente año 2008 a la infraestructura del instituto incluían varios aspectos, 
dentro de los cuales:
“En cuanto a aspectos de higiene y seguridad, se efectuaron obras de dignifica-
ción de sanitarios en el Taller Mecánico, se construyeron rampas para personas 
con discapacidad en el acceso principal del Instituto, se modificó la salida de 
emergencia de la Biblioteca, se cambiaron las rejas en la caseta de entrada al 
Instituto de Física y se cambió de sitio la entrada a la cafetería del IFUNAM. Ade-
más, se instaló un sistema de desalojo de vapores en el Taller de Electrónica”.15 
15 Monsivais G. Informe de Actividades, México 2008, p.41
27
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
No se ha hecho una propuesta gráfica para identificar todo el material de 
seguridad e higiene: diseño de identidad gráfica, propuestas de color, sitio 
Web, diseño editorial para sus publicaciones etc. El Instituto se encuentra 
desprotegido legalmente al no publicar en su entrada los lineamientos de 
seguridad a que debe apegarse el personal que hace uso de sus insta-
laciones. La difusión de esa señalización es una necesidad por demás 
importante, pues ayuda a quienes laboran y visitan el IF tener una estancia 
afable, pero sobre todo segura y confiable.
Debido a que las instalaciones del IF se compone de varios edificios: Edifi-
cio Principal, Aceleradores, Acelerador “VAN de GRAFF”, Colisiones, Taller, 
Biblioteca “Juan B. De Oyarzábal” y Salones de Posgrado; es muy común 
que el personal de cada edificio se familiaricé con el área de trabajo en el 
que pasa más tiempo y que por consiguiente sean imprecisos en identifi-
car algunos aspectos de seguridad referentes a las demás instalaciones. 
Un ejemplo de ello es la biblioteca que tiene una salida de emergencia 
en el primer nivel, ubicada en la parte posterior del lado derecho, cubierta 
por estantes de libros que impiden su visibilidad y que solo personal de la 
biblioteca conoce bien.
Surge entonces la necesidad de elegir un medio que estuviese al alcance 
de muchos usuarios fuera y dentro de la institución, que mostrará la ubi-
cación exacta de la señalización y equipo de seguridad desde dos pers-
pectivas diferentes, una vista panorámica de ellas en las instalaciones 
y una vista zoom16 para cada edificio; además de estar disponible en 
todo momento y actualizar la información cuando se requiera. Los puntos 
anteriores se dieron a conocer en la junta de la Comisión de Higiene y 
Seguridad el día 29 de febrero de 200817 donde se discutió la problemá-
tica de no contar con un sistema que difunda información acerca de las 
medidas de seguridad con que cuenta el instituto. 
16 Vista panorámica y vista zoom, son los contenidos en los que el usuario podrá realizar una
 consulta directa en el mapa de los edificios. 
17 Anexos. Minuta
28
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
Se plantea así el proyecto “Desarrollo de Video de Seguridad”, propuesto 
por el Fís. Héctor Cruz Manjarrez, (integrante de la comisión) y que será 
publicado en la página Web del instituto (www.física.unam.mx), conside-
rando que este medio cumple con las necesidades ya manifestadas.
La Comisión de Higiene y Seguridad solo tiene una sección dentro de la 
página Web del IF en la que presenta información acerca de la gente que 
integra esta comisión y minutas de todas sus reuniones; la sección carece 
de un diseño propio y espacio suficiente para publicar todos los contenidos 
de seguridad por lo que se decide realizar un sitio exclusivo llamado “Tour 
Web de Seguridad”, el cual contendrá todo el material gráfico sobre la 
localización de zonas e instrumentos de seguridad. 
En principio la idea de realizar un video no fue posible, pues no se contaba 
con el equipo y tiempo necesario para su realización. La alternativa que 
se tomo para sustituir el video de seguridad, fue elaborar “aplicaciones 
interactivas”18 empleando los planos arquitectónicos de cada edificio; 
por medio de la Secretaría Académica del instituto se logró obtener los 
planos arquitectónicos de algunos edificios que conforman las instalaciones 
(Edificio Principal, VAN de GRAFF, Colisiones, Aceleradores, Taller). En el 
caso de la Biblioteca se recurrió a tomar fotografías de planos que se 
encuentran en la planta baja y primer nivel del edificio; para la vista general 
de las instalaciones, este se obtuvo de la página Web del IF en la sección 
de localización. 
Para el desarrollo del proyecto “Tour Web de seguridad” no se contaba con 
alguna referencia de página Web, solo elementos gráficos como imágenes 
o colores de su señalización y equipo de seguridad que fueron contem-
plados para la elaboración de su diseño de interfaz gráfica así como de 
su contenido visual. Aun así el material Gráfico con el que se contaba era 
escaso por lo que se opto complementarlo recavando nueva información. 
18 Aplicación interactiva. Entiéndase por aplicación interactiva, el archivo generado en wink, flash,
 director etc., cuyo producto final es una película con extensión .swf
29
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
Fue necesario realizar una captura de imágenes de todos los elementos 
de seguridad que se encuentran en las instalaciones debido a que las imá-
genes que se tenían no eran recientes; se fotografió la señalización de las 
zonas de seguridad, salidas de emergencia, la señalización en las puertas 
de cristal, equipos de seguridad como: extintores, alarmas de pánico, 
detectores de humo y parte del equipo que utilizan los investigadores en 
los laboratorios para realizar sus trabajos; gafas especiales para rayos-x, 
guantes, bata y la señalización que tienen dentro de los mismos. 
A falta de información referente al lugar donde se localizan cada una de 
las medidas de seguridad, hubo que llevar a cabo un sondeo para recabar 
esos datos e indagar en el significado de algunos elementos al no tener 
pleno conocimiento sobre ellos. De la información recopilada surgieron 
algunos imprevistos, los planos obtenidos de la Secretaría Académica y 
página Web no eran recientes por lo que se hicieron las modificaciones 
pertinentes. El Tour Web de Seguridad en el IF es un proyecto de la 
Comisión de Higiene y Seguridad, que se inicio teniendo limitaciones 
técnicas en cuanto a equipo de cómputo (software y hardware); los 
equipos destinados por la Secretaría Técnica de Cómputo para realizar 
las tareas de diseño para la Web del instituto, carecen de recursos en 
programas de diseño y no dan el rendimiento óptimo para trabajar. 
Las necesidades en herramientas para cuestiones de diseño no son cubier-
tas y pasan inadvertidas en el IF. El sitio Web de seguridad se desarrollo 
bajo una plataforma PC limitado en procesador, memoria RAM, disco duro y 
programas para diseño Web; el ordenador en la labor del diseñador gráfico 
es una herramienta indispensable hoy en día, que requiere tener las carac-
terísticas necesarias para realizar un trabajo profesional, que permita darle 
una mejor calidad a los mismos. Ya durante el desarrollo del proyecto se 
realizaron los ajustes necesarios para dar solución al problema que se pre-
sento, lo cual fue satisfactorio aunque obligo a detener momentáneamente 
el proceso mientras se atendían estas necesidades.
30
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
Es importante señalar que no se tenía contemplado que parte del material 
gráfico (planos de edificios) del sitio Web, fueran utilizados por el instituto 
como parte de otros proyectos: Día de puertas abiertas y Directorio 
para el Edificio Principal19. Enel primero de los casos, los planos de los 
edificios que inicialmente fueron diseñados para el Tour Web de Seguridad, 
se modificaron en tamaño de acuerdo a las necesidades ahora presentadas 
pero siguieron conservando el estilo que se les aplico para la Web; sólo 
para el directorio cambio el diseño. Estos imprevistos consumieron tiempo 
y espacio de trabajo, pues dio origen a atender otra problemática ajena a 
la ya suscitada por la creación del Sitio Web.
Como parte del seguimiento que se le dio por parte de la Comisión de 
Higiene y Seguridad, se hizo una presentación de los avances del proyecto 
donde se mostró el diseño de Interfaz Gráfica, contenidos gráficos (apli-
caciones interactivas), estructura del sitio e interacción en el sitio; los asis-
tentes a la exposición realizaron algunas observaciones pero referentes a 
los proyectos anteriormente mencionados, dejando sobreentendido que 
el diseño es funcional para ellos mientras posea un aspecto agradable a 
la vista de todos; comúnmente los proyectos Web para el IF, basan su 
diseño en aspectos muy específicos como el uso del logo de la UNAM y 
colores que tienen que ver con la institución, limitando muchas veces las 
posibilidades de obtener mejores resultados en los diseños de interfaces 
gráficas. El Tour Web de Seguridad será un medio gráfico exclusivamente 
informativo de las medidas de seguridad en el IFUNAM, que no evitara el 
suceso de accidentes o siniestros en las instalaciones, pero ayudará a 
prevenirlos. 
Ayudará a tener un mejor conocimiento de las instalaciones, presentará 
información precisa de las instalaciones (edificios, rutas de evacuación, 
zonas de seguridad, equipos de seguridad etc.) y de las herramientas con 
las que se cuenta.
19 Anexos. Imágenes “Día de puertas abiertas y Directorio Edificio Principal” 
31
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
2.2 Necesidades del Sitio Web enfocadas al diseño
Establecer los lineamientos necesarios para la integración y funcionamiento 
del sistema de seguridad e higiene del instituto, en base a los reglamentos de 
seguridad, para crear en la comunidad una cultura de Seguridad e Higiene 
y así disminuir la incidencia de accidentes de trabajo, evitar condiciones y 
actos inseguros así como factores de riesgo, para lograr la máxima segu-
ridad en las actividades laborales.
Generar la información suficiente, disponer de medios informativos, res-
taurar la señalización deteriorada, dar una identidad propia que identifique 
todo el material de seguridad, fortalecen el conocimiento de la gente con 
respecto a estas a medidas, equipos y obras en la infraestructura. La emi-
sión de esta información a todos los usuarios del IF (internos y externos) 
debe ser publicada en el medio de comunicación más viable de acuerdo 
a las necesidades de la gente; ser presentada de una forma clara y cer-
tera para facilitar el entendimiento de los diversos contenidos de Higiene 
y Seguridad que se formulen para salvaguardar la integridad física de las 
personas. 
Disponer de una buena estrategia de comunicación bien estructurada 
permite que la comunidad y los visitantes del IF estén informados de este 
sistema de seguridad implementado dentro de las instalaciones. Haber 
realizado un sondeo de este sistema en la comunidad, permitió conocer 
la difusión actual de estas medidas de seguridad así como el medio de 
comunicación por el cual se llegan a informar de cualquier actividad en el 
instituto. La fuente de información que consultan son medios impresos 
(carteles, boletines, folletos) y digitales (página Web); tomando en cuenta 
el tipo de información, las necesidades de la Comisión de Higiene y Seguri-
dad así como los usuarios a quienes esta dirigida esa información, se hizo 
la selección del medio para publicar esos contenidos; aportar un sistema 
de información al instituto, que proporcione la información requerida por 
el usuario.
32
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
La construcción del sitio Web de seguridad será un medio de comunica-
ción que proporcionara información oportuna y eficiente para todas aquellas 
personas que laboran y deseen visitar el instituto. Ayudará a la difusión de 
las medidas de seguridad dentro de las instalaciones del IFUNAM, será un 
medio al que se podrá tener acceso desde fuera de las instalaciones (vía 
Internet.) y estará a disposición de cualquier persona ininterrumpidamente. 
Contribuirá a tener un concepto general sobre estas medidas haciendo 
más seguras y confiables las instalaciones para quienes no las conozcan. 
Será decisión del instituto hacer o no forzoso para sus académicos y visi-
tantes el uso del Tour Web de Seguridad previo a su primera visita y facilitar 
a la gente el acceso a este servicio, dentro de las instalaciones; actualizar la 
información de seguridad (tomando en cuenta las continuas obras que se 
realizan dentro de las instalaciones) evitara confusión entre la comunidad. 
Este medio informativo no capacitará a las personas para acciones secun-
darias en caso de accidentes o siniestros como enseñar a usar equipo de 
seguridad. 
La veracidad del contenido presentado en el Tour Web dependerá de 
la información que proporcione el Comité de Higiene y Seguridad; será 
el primer sitio Web en el instituto que proporcionará esta información de 
una manera diferente a la que se observa en la página principal y demás 
páginas anexas a la institución. Sus contenidos serán gráficos pero inte-
ractivos, donde el usuario tiene la posibilidad de consultar la información a 
través de aplicaciones interactivas. El problema técnico que se presento 
con el equipo de cómputo, fue planteado ante gente de la Comisión de 
Higiene y Seguridad, a quienes se les hicieron las observaciones perti-
nentes relacionadas con el rendimiento del ordenador; se hizo el cambio 
oportuno del equipo ya con los ajustes necesarios.
 
Frente a todo lo anterior se establecieron los lineamientos a seguir con 
relación a la construcción del sitio Web de seguridad, se determinó que 
los contenidos expuestos en el tour sean exclusivamente gráficos para 
describir las ubicaciones de estas medidas omitiendo el uso de texto en 
33
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
ello; debido a que existe señalización de seguridad dentro y fuera de los 
edificios el sitio contará con dos opciones para ver estas ubicaciones, 
esto será a través de una vista panorámica o general y una vista zoom o 
de acercamiento.
En la vista panorámica se mostrarán solamente las medidas localizadas 
en el exterior de los edificios y situadas en zonas específicas de las insta-
laciones; en cuanto a la vista zoom se podrá observar de manera parti-
cular cada edificio y la ubicación que guardan los elementos de seguridad 
con respecto a cada nivel, cabe señalar que algunos van desde uno a 
dos niveles de altura. La información publicada en el sitio deberá mostrar 
puntualmente en cualquiera de los dos casos la localización exacta de los 
elementos de seguridad.
En su página de inicio, se expondrá una breve descripción de la función 
que cumplirá dicho sitio y la que presente imágenes referentes a la misma 
temática. Presentará una portada ajena en todo momento al diseño de 
interfaz gráfica, de la cual formarán parte los botones de enlace que 
llevaran a los usuarios a los contenidos gráficos de seguridad. El inicio de 
su página principal carecerá de una presentación animada o con efectos 
animados y sonidos como en el caso de la página Web del instituto y 
demás páginas adicionales a la institución (departamentos, personales, 
proyectos de investigación, etc.) por ser de carácter institucional. 
Sus contenidos gráficos de seguridad, serán presentados a través de 
aplicaciones interactivas funcionales y prácticas, que permita al usuario 
ubicar en los planos de las instalaciones la localización de las medidasde 
seguridad. Contará con un diseño de interfaz gráfica propio, diferente al 
de la página Web y no se necesitará descargar ni instalar algún software 
en especial para su visualización en pantalla.
Cada aplicación interactiva aportará información suficiente según sea la 
edificación elegida al momento por el usuario; así mismo no tendrá ningún 
efecto de animación en la entrada y salida de cada aplicación, los gráficos 
34
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
mostrados estarán limpios de efectos animados aunque únicamente para 
las salidas de emergencia se aplicará una discreta animación que mostrará 
el recorrido de cada salida. 
El diseño de interfaz gráfica de la página Web será formal acorde al perfil 
de la institución, tendrá que ser eficiente y funcional para presentar la infor-
mación requerida por los usuarios así como facilitar la navegación por el 
sitio; no hay un número específico en cuanto al número de pantallas que 
conformen la página Web, de igual manera no se contempló agregar algún 
efecto de animación al momento de acceder o salir de cada pantalla. El 
sitio Web no será complejo, únicamente presentará información de ubica-
ción y señalización de elementos de seguridad dentro de las instalaciones; 
no habrá ningún apartado, noticias, información personal ó anexa sobre 
otro tema que no sea de seguridad aunque está sea del mismo IF.
Retomando el diseño de interfaz gráfica, este manejará elementos gráfi-
cos como: color, imágenes, formas, simbología, utilizados por el instituto 
para identificar zonas de seguridad, salidas de emergencia, señalización, 
equipo de emergencia, los cuales forman parte de reglamentos (NORMA 
OFICIAL MEXICANA NOM-026-STPS-1998, COLORES Y SEÑALES DE 
SEGURIDAD E HIGIENE, E IDENTIFICACIÓN DE RIESGOS POR FLUIDOS 
CONDUCIDOS EN TUBERÍAS.), que establecen los estándares a tomar 
en cuenta para identificar todas las medidas de seguridad y prevención 
de riesgos dentro de instalaciones que las tienen; de tal forma que el 
diseño de interfaz se realizará bajo un concepto gráfico sobre seguridad, 
de acuerdo a lo anterior ya mencionado. Serán prioridades para el funcio-
namiento del sitio Web, la usabilidad del sitio, consistencia en el diseño 
con respecto a la ubicación de los botones del menú principal, menú 
secundario y menú de las aplicaciones interactivas, uso de color para 
resaltar menús, contenidos e interfaz gráfica y composición en el diseño. 
Evitar que el usuario tenga problemas como: acceder a los contenidos de 
la página, tiempos de descarga, visualizar la página con fallas de origen 
que entorpezcan la búsqueda de información para consultar de manera 
rápida y eficaz la información del Tour Web.
35
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
Para los menús se omitirá el uso de algún efecto animado y sonido, todos 
contarán con un diseño propio que ayudara a identificar a los tres menús 
del sitio: menú principal, menú secundario y menú de los contenidos inte-
ractivos. El menú principal será para ir a la página de inicio del Tour Web, 
página del IFUNAM y UNAM; el menú secundario servirá para navegar por 
todos los contenidos de seguridad: Edificio Principal, Edificio Aceleradores, 
Acelerador Van de Graff, Edificio Colisiones, LCM, Taller, Biblioteca, Salones 
de posgrado. 
Con el menú de los contenidos interactivos el usuario podrá manipular 
las aplicaciones interactivas de cada edificio; en ellos se encontraran las 
localizaciones de los elementos de seguridad del IF. El orden de aparición 
referente a los botones de cada menú fue determinado por la Comisión 
de Higiene y Seguridad. La ruta de navegación una vez que se haya ingre-
sado a la página, comenzará por el contenido de la vista Panorámica para 
posteriormente pasar a la vista Zoom; el sitio cumplirá con un esquema de 
navegación no lineal para dar al usuario la opción de consultar y despla-
zarse hacia los demás contenidos de manera eficiente y rápida. Cabe 
aclarar que en el caso de la vista Zoom está posee más información a 
diferencia de la vista Panorámica, por lo cual se agregó una pantalla en la 
que el usuario observará la simbología que aparecerá en las aplicacio-
nes interactivas con sus respectivos significados, previniendo errores de 
confusión o desconocimiento. Para la vista panorámica se incluyó en la 
misma aplicación la simbología con su respectivo significado. 
El material fotográfico así como las imágenes recopiladas, estarán sujetas 
a tratamientos digitales para su incorporación en el diseño de interfaz; en 
el caso de las aplicaciones interactivas, los planos de las edificaciones y 
la simbología serán generados a partir de referentes como fotografías e 
imágenes obtenidas durante el acopio de información. Para darle Segu-
ridad no utilizar el material gráfico que se obtuvo, a fin de dar una mejor 
calidad a los gráficos que ilustrarán la localización de las medidas de 
seguridad. El uso de herramientas y programas para elaboración de la 
página Web además de sus contenidos interactivos es libre, no obstante 
36
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
se tomarán en cuenta los recursos de software utilizados por la Secretaría 
de Cómputo y Telecomunicaciones para la creación de la página Web del 
IF, páginas personales, departamentos y proyectos de investigación. 
2.3 Requerimientos
Es importante señalar que al Tour Web de Seguridad le anteceden proyec-
tos Web, que requirieron cubrir necesidades en cuestión de hardware y 
software para poder publicar en Internet las páginas Web del IF, por lo 
que el instituto cuenta ya actualmente con plataformas establecidas para 
el desarrollo de todos sus proyectos Web. 
Muy brevemente se hace una descripción adicional de los requisitos que 
el Tour Web de Seguridad necesita para su funcionamiento en la Web. El 
Sitio Web de Seguridad requiere de un soporte físico (Servidor Web) que 
dé alojamiento (Hosting) a toda la información que conforma dicho sitio, 
por lo cual es necesario disponer de un equipo de computó que alma-
cene el sitio Web de Seguridad; entiéndase el término Servidor Web 
“para referirse al ordenador físico en el cual funciona ese software, una 
máquina cuyo propósito es proveer datos de modo que otras máquinas 
puedan utilizar esos datos”20. 
Es indispensable que el equipo disponga de espacio suficiente en su 
dispositivo de almacenamiento (disco duro) para contener la información 
que en su mayoría será gráfica. Alternativamente a la parte física del orde-
nador, es necesario incluir el uso de un software que implemente el proto-
colo HTTP (hypertext transfer protocol) para transferir lo que llamamos 
hipertextos, páginas Web o páginas HTML (hypertext markup language); 
adicional e ello un sistema operativo. 
20 masadelante. (2009). ¿Qué es un servidor? - Definición de servidor, obtenido el 20 de 
 diciembre de 2008, de http://www.masadelante.com/faq-servidor.htm
37
Necesidad de desarrollo del “Tour Web de seguridad en el IFUNAM”
Tomando en cuenta que habrá la necesidad de realizar pruebas de diseño 
y funcionamiento del sitio, es necesario asignar otra maquina que será 
exclusivamente para llevar a cabo en ella todas las pruebas pertinentes 
antes de ser puesto en marcha en la Web (servidor de pruebas ulk.fisica.
unam.mx). Dará alojo al sitio de manera temporal, pues una vez supera-
das las pruebas de diseño y funcionamiento habrá que migrar todo el sitio 
al Servidor Web que estará conectado en red con todo el mundo.
Finalmente para su construcción es indispensable contar con herramientas 
básicas como: un ordenador que tenga la capacidad de procesar trabajos 
enfocados al que hacer del diseñador gráfico así como el software básico 
para diseño de páginas Web: Photoshop, Ilustrator, Flash, Dream weaver 
etc... Es necesario precisar que constantemente salen al mercado nuevas 
versiones de programas,que en muchos casos se vuelven incompatibles 
con programas anteriores, por lo que es recomendable actualizar los pro-
gramas para evitar problemas de esta índole.
38
3 Desarrollo del “Tour Web de seguridad 
en el IFUNAM”
3.1 Planificación del sitio
Todo desarrollo y construcción de un proyecto de diseño Web, requiere 
siempre de un proceso o método a seguir que es puesto en práctica 
durante el desenvolvimiento del trabajo; el IF por medio de su Secretaría 
Técnica de Cómputo específicamente en el área de desarrollo Web, plan-
tean algunas recomendaciones a tomar en cuenta para el desarrollo de un 
sitio Web, enfocados a agilizar el proceso y publicación de la información 
electrónica.
Así mismo en Web Style Guide, Patrick Lynch y Sarah Horton definen 
un desarrollo de construcción para el diseño de sitios Web a partir de lo 
siguiente: “Careful planning and a clear purpose are the keys to success in 
building Web sites”21 (Una cuidadosa planificación y un objetivo claro son 
las claves del éxito en la construcción de sitios Web).
Planificar el desarrollo de un sitio Web antes de iniciar con la edición de 
dicho sitio, nos permite llegar a minimizar los errores para llegar a una solu-
ción y un resultado final que resuelva la necesidad del cliente. En un artícu-
lo de Internet de 2008 el diseñador gráfico Allan Cruz menciona que “una 
buena metodología es aquella que resuelve de manera práctica y funcional 
las necesidades del proyecto que se esté tratando de solucionar”.22 Patrick 
Lynch menciona que la planificación de un sitio Web es un proceso de dos 
etapas: la primera de ellas abarca todo lo relacionado con el análisis de las 
necesidades y objetivos encaminados a las tareas de elaboración. 
21 Web Style Guide. (2004). WEB STYLE GUIDE, PROCESS, obtenido el 20 de diciembre 
 de 2008, de http://webstyleguide.com/process/index.html
22 estímulo. (2008). Objetos y objetivos del diseño de información, obtenido el 20 de 
 diciembre de 2008, de http://estimulo.wordpress.com/
39
Desarrollo del “Tour Web de seguridad en el IFUNAM”
En la segunda parte del proceso hay que especificar el como se va hacer, 
lo que se necesita en tecnología, que contenidos así como las actividades 
que se harán para desarrollar el sitio.
Primera Etapa: Desarrollo
Objetivos •	
Audiencia destino •	
Contenidos•	
Investigación•	
Organización de la información•	
Mapa del sitio•	
Segunda Etapa: Construcción
Bocetaje •	
Color•	
Tipografía•	
Imágenes•	
Diagramación•	
Organización de los elementos en el espacio•	
Puesto en marcha en Joomla •	
Optimización•	
 3.1.1 Objetivos
Ellos son la base del desarrollo y construcción de cualquier proyecto, a 
partir de los cuales se proyecta un plan de trabajo enfocado a cumplir con 
esas metas. Los objetivos fueron definidos por la Comisión de Higiene y 
Seguridad en colaboración con el área de desarrollo Web del instituto. 
Los objetivos a lograr para este proyecto Web de seguridad del IF son 
dos muy concretos de acuerdo con las necesidades de la Comisión de 
Higiene y Seguridad en relación al Instituto de Física.
40
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Proveer de un medio ininterrumpido, accesible y dinámico, que estará •	
al alcance de muchos usuarios fuera y dentro de la institución, el cual 
proporcionará la información requerida por el usuario.
Establecer un diseño de Interfaz Gráfica para el sitio Web de segu-•	
ridad del Instituto de Física, en el que se difundirá a los visitantes la 
simbología de seguridad de las instalaciones y herramientas de uso, 
en caso de siniestro o accidente. 
El desarrollo y construcción del sitio Web de seguridad estará supervisado 
en todo momento por gente del área de desarrollo Web del Instituto de 
Física así como de la Comisión de Higiene y Seguridad.
 3.1.2 Audiencia
Conocer a los usuarios potenciales que harán uso de este medio, es parte 
esencial en el desarrollo de nuestro sitio, la construcción y diseño del sitio 
estarán guiados a satisfacer las necesidades y expectativas del usuario. 
El proyecto Web de seguridad se realizará en el Instituto de Física de la 
Universidad Nacional Autónoma de México, es un proyecto de carácter 
informativo para que todos aquellos estudiantes, investigadores o público 
en general que usen las instalaciones, cuenten con un medio informativo 
de prevención de siniestros durante su permanencia.
Será un proyecto Web destinado a un entorno docente donde la audiencia 
principal será toda la comunidad del IF, así como público en general donde 
la mayoría es audiencia estudiantil por las visitas que realizan a la institución 
alumnos de otras escuelas; estas actividades se realizan con regularidad en 
el IF. El proyecto aspira a promover oportunamente la información necesaria 
en la institución y da la posibilidad de ser consultado remotamente (vía Inter-
net), dejándolo a consideración de todo aquel público que desee realizar 
una visita a las instalaciones. La comunidad del IF es la audiencia princi-
pal hacia quienes estará dirigido el desarrollo del sitio Web de seguridad, 
41
Desarrollo del “Tour Web de seguridad en el IFUNAM”
pero es importante señalar que también se contempló como usuarios del 
Tour Web de seguridad a los estudiantes que permanecen de manera 
temporal dentro de las instalaciones hasta gente externa a la institución 
que visita las instalaciones por diferentes razones, de acuerdo con los 
siguientes datos:
Personal Académico
En el primer trimestre del 2007, el personal académico del Instituto de Física esta 
compuesta por un total de 158 miembros, de los cuales 111 corresponden a inves-
tigadores y 47 a técnicos académicos. Finalmente se cuenta con 127 trabajadores 
de base, 13 empleados de confianza y 21 plazas asignadas a funcionarios.23 
Estudiantes Asociados
A febrero de 2007 se tenían registrados un total de 227 estudiantes asociados 
distribuidos de la siguiente manera:
23 Menchaca A. Informe de Actividades, México 2007, p.11 
Estado Sólido
Computo
Electrónica
Total
16 11 3912
3 26 26 10 65
19 6 13 38
8 8
Física Química
Física Experimental
Física Teórica
Materia Condensada
Sistemas Complejos
Departamento Otro Licenciatura Maestría Doctorado Subtotal
25 41
9 3 8 20
1 8 8 17
6 6
1 1
3 86 63 75 227
42
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Día de Puertas Abiertas
Evento que el IFUNAM realiza en noviembre de cada año dirigido a estudiantes de 
todos los niveles educativos. En 2006 el IFUNAM recibió a más de 1600 jóvenes.
Visitas a laboratorios
En coordinación con la Dirección General de Divulgación de la Ciencia, UNAM, 
se organizaron visitas mensuales de estudiantes de distintos niveles. En 2006 se 
realizaron 8 visitas.24
Una vez revisado los datos anteriores se llegó a la conclusión de que la 
audiencia del sitio Web de seguridad, son todos aquellos usuarios que 
visitan y hacen uso de las instalaciones, pese a que solo permanezcan 
dentro de ellas por un tiempo determinado, aún sin no forman parte de la 
comunidad del IFUNAM. Finalmente el proyecto Web de seguridad aspira 
a promover oportunamente la información necesaria en la institución y da 
la posibilidad de ser consultado remotamente (vía Internet), dejándolo a 
consideración de todo aquel público que desee realizar una visita a las 
instalaciones.
 3.1.3 Contenidos
Los contenidos son toda la información que estará publicada en el sitio Web, 
la cual podrá ser consultada por el usuario vía Internet; de acuerdo con las 
necesidades y finalidad del sitio Web, será la información que aparecerá en 
pantalla. El Tour Web de seguridad en el IFUNAM, es un sitio Web de carác-
ter informativo en el que se hará difusión a todas las medidas de seguridad 
y prevención de siniestros dentro de las instalaciones del IF, por lo que se 
excluye toda información indiferente a la ya mencionada pese a que esta sea 
también de la institución. Los contenidos de seguridaddel sitio Web estarán 
conformados en su mayoría por material gráfico que ilustre de manera clara 
la ubicación correcta de cada medida de seguridad en las instalaciones. 
24 Loc. Cit. 
43
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Medidas de seguridad:
Zonas de seguridad•	
Salidas de emergencia•	
Rampas para personas con capacidades diferentes•	
Señalamientos de precaución en puertas y ventanas de cristal•	
Alarmas de pánico•	
Detectores de humo•	
Extintores•	
Son parte de los contenidos, los planos arquitectónicos de las edificaciones 
que integran las instalaciones: Edificio Principal, Aceleradores, Acelerador 
“VAN de GRAFF”, Colisiones, Laboratorio Central de Microscopia, Taller, 
Biblioteca “Juan B. De Oyarzábal” y Salones de posgrado. Cabe aclarar que 
el edificio de Altas presiones no se contemplo debido a que no fue posible 
obtener información de seguridad dentro de sus instalaciones.
Esta información gráfica será presentada a través de aplicaciones inte-
ractivas eficientes y prácticas que mostrarán la ubicación correcta de los 
elementos de seguridad; cada edificio contará con una de ellas y según 
sea el caso también por cada nivel. No todos los edificios poseen todas 
las medidas de seguridad antes descritas, por lo que en todas variaran 
los contenidos de seguridad.
Los contenidos del Tour Web de seguridad responden a las necesidades 
expuestas anteriormente en este trabajo por parte de la Comisión de Higiene 
y Seguridad, con respecto al Instituto Física; así mismo se realizó un sondeo 
de estas medidas entre la comunidad para conocer la difusión actual entre los 
usuarios que laboran y visitan las instalaciones. Para ello se formuló un cues-
tionario25 que fue aplicado entre la comunidad del IF a usuarios seleccionados 
al azar y en distintos puntos de las instalaciones.
25 Anexos. Cuestionarios. 
44
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Formato de cuestionario•	
Universidad Nacional Autónoma De México
Instituto de Física
Cuestionario
Nombre:
Objetivo: Obtener una opinión empírica de la comunidad que visita y labora en el IFUNAM, 
para la realización del Tour WEB Seguridad en el IFUNAM.
Instrucciones: Marque solo una opción.
1. ¿Sabes si existen normas de seguridad en el IFUNAM?
Si ( ) No ( )
2. ¿Cómo te enteraste?
Medios impresos ( ) Medios Digitales ( )
3. ¿Sabes qué riesgos puede haber?
Si ( ) No ( ) (si respondiste Sí) ¿Cuales?
4. ¿Cómo lo sabes y cuáles crees que son?
 5. ¿Puedes nombrar la señalización del IFUNAM?
Si ( ) No ( ) (si respondiste Si) ¿Puedes mencionar alguna?
6. ¿Cúal?
7.- ¿Entiendes el significado de su simbología?
Si ( ) No ( ) (si respondiste Si) ¿Da un ejemplo?
8.- ¿Sabes para qué son los botones de pánico?
Si ( ) No ( ) (si respondiste Si) ¿Puedes explicarlo?
9.- ¿Crees que debería haber más información?
Si ( ) No ( ) ) (si respondiste Si) ¿Por que?
10.- ¿Puedes nombrar la ruta de evacuación del lugar en el que estás?
Si ( ) No ( ) (si respondiste Si) Menciónala:
11.- ¿Conoces la zona de seguridad de tu edificio?
Si ( ) No ( ) (si respondiste Si) Menciónala:
 
45
Desarrollo del “Tour Web de seguridad en el IFUNAM”
12.- ¿Sabes si hay números de emergencia?
Si ( ) No ( ) 
13.- ¿Los conoces?
Si ( ) No ( ) (si respondiste Si) ¿Dónde están?
14.- ¿Sabes si se tiene servicio Médico?
Si ( ) No ( )
15.- ¿Sabes dónde se encuentran los botiquines?
Si ( ) No ( ) (si respondiste Si) ¿Puedes decirlo?
 3.1.4 Investigación
No teniendo algún referente de página Web sobre seguridad en el IF, se 
realizaron diversas actividades dentro del instituto para recabar la informa-
ción necesaria para elaborar la construcción del sitio Web; la búsqueda de 
información se llevo a cabo consultando diferentes fuentes de información, 
así como a personal de la Comisión de Higiene y Seguridad del IF. 
La información requerida para el sitio Web fue necesariamente en su 
totalidad material gráfico: imágenes, fotografías, simbología de seguridad 
y señalización; para realizar los contenidos interactivos del sitio Web fue 
necesario utilizar los dibujos arquitectónicos de los edificios. Algunos se 
obtuvieron mediante fotografías tomadas a los planos ubicados dentro de 
algunos edificios como es el caso del Edificio principal y la Biblioteca. 
En ellos se muestran las salidas de emergencia que el usuario puede seguir 
en caso de algún siniestro dentro de esa edificación; esta idea es la base 
para recrear más adelante las aplicaciones interactivas a las que se les 
agregarán los elementos de seguridad restantes. Aquí algunas de las foto-
grafías que se tomaron a los planos arquitectónicos del Edificio principal y 
Biblioteca; esta información es parte de la señalización de seguridad que 
se encuentra en el interior de estos edificios, sin embargo no en todos se 
encontró esta información por lo que hubo que recurrir a otros medios.
46
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Debido a eso, los demás planos arquitectónicos se obtuvieron por medio 
de la Secretaría Académica del IF; son imágenes formato JPG, escaneadas 
de los dibujos arquitectónicos realizados en el área de dibujo por los arqui-
tectos Gerardo R., Luis A. y Alberto G. en diferentes fechas; cabe destacar 
que se incluyen los planos de cada nivel según sea el caso aunque faltaron 
los planos de la Biblioteca, Salones de Posgrado y Altas presiones. 
Las imágenes de estos planos no son las más recientes pero son un refe-
rente para crear unas nuevas imágenes a las que se les dará un tratamiento 
digital para incorporarlas posteriormente a las aplicaciones interactivas; 
la información fue de gran ayuda puesto que es una representación fiel de 
la estructura física de cada edificio.
Bibloteca planta baja Bibloteca primer nivel
Edif. principal planta baja Edif. principal primer nivel 
47
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Esta información corresponde únicamente a los contenidos que formarán 
parte de la sección vista Zoom, en la cual el usuario podrá realizar una 
consulta directa a cada uno de los edificios y ver los elementos de segu-
ridad con los que cuenta ese edificio por cada nivel, según sea el caso. 
De la página Web del IFUNAM, se consiguió un mapa de las instalaciones 
que muestra la localización del instituto en ciudad universitaria; es una 
vista general de las instalaciones, en la cual se puede observar a todos 
los edificios ya descritos anteriormente. 
La recopilación de está imagen se aprovechó para generar el contenido 
de las aplicaciones interactivas de la vista panorámica; todo el material 
gráfico recopilado para la producción de los contenidos interactivos, fue 
recreado nuevamente a partir de las referencias obtenidas durante la 
investigación.
Edificio principal Colisiones 
Van de Graff Aceleradores
48
Desarrollo del “Tour Web de seguridad en el IFUNAM”
Para la simbología de seguridad que se generó, hubo que fotografiar parte 
de las medidas de seguridad que se encuentran ubicadas en las insta-
laciones, para ello se necesito el uso de equipo fotográfico el cual fué 
proporcionado por la Secretaría Técnica de Cómputo; el equipo utilizado 
posee las siguientes características: 
Equipo:
 Cámara Digital Canon EOS Rebel Xs
 10.1 Megapixeles
 Objetivo EF-S 18-55mm
Las fotografías se tomaron en exteriores e interiores de las instalaciones: 
laboratorios, salones, espacios de trabajo, salas de conferencias, auditorio 
etc., en algunos casos no fué posible acceder a los espacios por obras 
de mantenimiento y trabajos de investigación que requerían el accionar de 
equipo de radiación; igual que en el caso de los dibujos arquitectónicos, 
esta información fue un referente para generar las imágenes que represen-
tarán a los elementos de seguridad que ilustrarán la ubicación de ellos en 
los edificios.
En el área de desarrollo Web del IF se pudo recopilar material fotográfico