CARRERA:

TECNOLOGIAS DE LA INFORMACIN

MATERIA:
Desarrollo de Aplicaciones Web

TRABAJO REALIZADO:

ARQUITECTURA DE LA INFORMACIN

NOMBRE DE LOS INTEGRANTES:

Carlos Alfredo Palafox Salas

Osvaldo Mauricio Flores

Ral Hernndez Reyes

Miguel ngel Sandoval barrera

Francisco Hernndez Jimnez

NOMBRE DEL PROFESOR:

PROFESOR: ARENAS ENRIQUEZ ERIKA

ARQUITECTURA DE EMPRESA

TECNOLOGIAS DE LA INFORMACION Y
COMUNICACIN
UNIVERSIDAD TECNOLOGICA DE

LA INFORMACION HUEJOTZINGO

[Subttulo del documento] Turno Vespertino

9 I
 Arquitectura de la Informacin

Contenido
Definicin del tipo de sitio ........................................................................................................................................3
Definicin de Objetivos del Sitio ..............................................................................................................................3
Definicin de Audiencia ............................................................................................................................................3
Pginas de competencia (benchmarking). ...............................................................................................................4
INTRODUCCIN ........................................................................................................................................................4
AUTNOMA DE MXICO ..........................................................................................................................................5
INSTITUTO POLITCNICO NACIONAL ........................................................................................................................7
BENEMRITA UNIVERSIDAD AUTNOMA DE PUEBLA .............................................................................................9
UNIVERSIDAD AUTNOMA DE QUERTARO..........................................................................................................11
Ttulos y URLS ........................................................................................................................................................13
Diseo del sitio web ...............................................................................................................................................14
Tamao formato y resolucin de las imgenes dentro de los sitios ......................................................................15
Animaciones ...........................................................................................................................................................16
Videos y Audio ........................................................................................................................................................17
BENEMRITA UNIVERSIDAD AUTNOMA DE PUEBLA ...........................................................................................17
Universidad autnoma de Quertaro ....................................................................................................................17
Determinar requerimientos funcionales o no funcionales ....................................................................................18
Definicin Diagramas de Caso de Uso (aplicacin web).........................................................................................18
Diagramas de B .......................................................................................................................................................20
D E-R (Pagina web) .................................................................................................................................................20
Definicin de Contenidos del Sitio .........................................................................................................................22
Definicin de pginas estticas y dinmicas ..........................................................................................................22
Imagen corporativa ................................................................................................................................................23
................................................................................................................................................................................23
................................................................................................................................................................................23
Serigrafa o aplicaciones en tinta directa: ........................................................................................................24
Definicin de la Estructura del Sitio (uso de Balsamiq, Visio, Smartdraw, draw.io) ..............................................25
Estructura de Directorio y Archivos ........................................................................................................................25
Definicin del Mapa de Navegacin (uso de Balsamiq, Visio, Smartdraw, draw.io)..............................................26

M.A. Erika Arenas Enrquez Pgina 1

 Arquitectura de la Informacin

Diseo Visual Wireframes (uso de Balsamiq, Visio, Smartdraw, draw.io) ................................. 26

Plantilla Home ....................................................................................................................................................26
Plantilla de 1er. Nivel..........................................................................................................................................27
Plantilla de 2er. Nivel..........................................................................................................................................28
Nombre propuesto del dominio .............................................................................................................................28

M.A. Erika Arenas Enrquez Pgina 2

 Arquitectura de la Informacin

Definicin del tipo de sitio

El sitio es informativo e interactivo, para generar ms popularidad entre la comunidad estudiantil y
aspirantes a la carrera de TICS, as como la oferta educativa que ofrece y las principales reas que se puede
desempear

Definicin de Objetivos del Sitio

Objetivo Principal:

1. Informar a la comunidad estudiantil sobre las actividades y ofertas acadmicas, tambin dar a conocer
informacin especfica sobre la manera de inscripcin y de cmo ser parte de la institucin.

Objetivos Secundarios:

1. Informar sobre las ventajas de cursar esta carrera.

2. Dar a conocer nuestra bolsa laboral.
3. Formal a alumnos de excelencia para el mbito laboral.

Definicin de Audiencia
Nuestro sitio Web est dirigido a personas de sexo indistinto, entre edades de 25 a 45 aos, de estatus
socioeconmico alto, que les guste el ambiente familiar y que no escatimen econmicamente por recibir
un servicio de calidad.

El sitio web est dirigido a un pblico desde los 18 aos en adelante, con ganas de superarse y tener una
carrera tcnica o una ingeniera en esta especialidad.

M.A. Erika Arenas Enrquez Pgina 3

 Arquitectura de la Informacin

Pginas de competencia (benchmarking).

INTRODUCCIN

En este trabajo realizado se encontrarn cuadros de obtencin de informacin de empresas que tienen el mismo
giro comercial que nuestro cliente, en los cuadros se muestran aspectos especficos que sobresalen en una
pgina web como son ttulo, descripcin, imgenes de catlogo, videos, animaciones y paleta de colores, solo
por mencionar algunos de estos aspectos.

M.A. Erika Arenas Enrquez Pgina 4

 Arquitectura de la Informacin

AUTNOMA DE MXICO

Ttulo: UNIVERSIDAD AUTNOMA DE MXICO

Direccin https://www.unam.mx/

Entidad: Educacin superior

Categora: Ofrece informacin de la institucin

Contenido: Cuenta con secciones como men, comunidad, oferta educativa,

investigacin, cultura y deportes

Pblico objetivo: Est dirigido al pblico en general.

Descripcin En la ventana principal que lleva por nombre Inicio se

encuentran en la parte superior el logotipo de la institucin de
un color blanco y con letras blancas el nombre de la institucin,
debajo hay un slider con 5 imgenes, debajo de este slider se
encuentra un segundo men que tiene l acerca de la institucin,
la seccin de vinculacin calendario acadmico y transporte.
Debajo de ello tiene la seccin de boletines y debajo de esta
seccin de noticias y ms noticias. Hasta el pie de la pgina se
encuentra un men que contienen preguntas frecuentes,
telfonos y mapa de sitio.

Imgenes en No cuenta con un catlogo de imgenes

catalogo:
Recursos que captan la atencin del pblico:

Imgenes del Las imgenes con las que cuenta en el resto del sitio se
resto del sitio: encuentran en las diferentes secciones del sitio estas estn en
formato jpg con una resolucin de 1280x920 px otras de ellas
tienen tamao de 687x163 px, las imgenes que aparecen en la
seccin d eventos cuentan con una resolucin de 390 x 390

Sonido: S cuenta con un audio que da explicacin de lo que ofrece la

universidad mediante un video de YouTube con una duracin de
07:02 minutos

Videos: Cuenta con un video vinculado de YouTube de una breve

explicacin de lo que ofrece la universidad

M.A. Erika Arenas Enrquez Pgina 5

 Arquitectura de la Informacin

Animaciones: Cuenta con un slider de imgenes que tienen transicin de una

imagen a otra el efecto de desplazamiento hacia la derecha
adems cuenta con una barra vertical con el efecto parrallax que
se queda fija en su posicin no importa que el scroll Wheel del
mouse se baje o suba.

Virtudes: Cuenta con un buscador para hacer bsquedas rpidas

Defectos: La pgina es muy poco atractiva, la mayora de las imgenes que

se muestran en la pgina no son de impacto

#FFFFFF Fondo principal

#3B4042 Fondo del panel de logotipo

Paletas de colores: #FFFFFF, #000 Y #0073CA Color de texto

#3A45A5 Color de fondo del men principal de men

#F5F6F8 Color de fondo de imgenes de eventos

#333333Texto en general

M.A. Erika Arenas Enrquez Pgina 6

 Arquitectura de la Informacin

INSTITUTO POLITCNICO NACIONAL

Ttulo: INSTITUTO POLITCNICO NACIONAL

Direccin http://www.ipn.mx/Paginas/inicio.aspx

Entidad: INSTITUTO POLITCNICO NACIONAL

Categora: Educacin superior

Contenido: Contiene secciones como son: Concepto, Ubicaciones,

Productos, Franquicias, Contacto, Home.

Pblico objetivo: Est dirigido para alumnos egresados de educacin media

superior que quieran seguir estudiando.

Descripcin El contenido abarca toda la pantalla, en la parte superior

izquierda de la pantalla se encuentra el logotipo de la SEP el
escudo nacional y el logo tipo de la universidad. Debajo de
ello est el men principal y debajo del men un slider, por
debajo de este se encuentran las secciones de noticias,
agenda poltica, egresados, servicios y estudiantes. De bajo
de ello vienen enlaces de sitios de inters. Por ltimo, tiene
informacin de bolsa de trabajo y su comunicacin por
redes sociales.

Imgenes en No cuenta con un catlogo de imgenes

Recursos que captan la atencin del

catalogo:

Imgenes del resto Cuenta con una variedad de imgenes de diversos tamaos
del sitio: ubicados en distintas partes del sitio. Los tamaos de estas
son de 272 x125 px en las imgenes de noticias, los logotipos
de la parte superior son de resolucin es de 689 x 143 px y
todas estn en formato jpg acepto los logos esos estn en
png

Sonido: No contiene sonido alguno.

pblico:

Videos: No contiene video alguno.

M.A. Erika Arenas Enrquez Pgina 7

 Arquitectura de la Informacin

Animaciones: Solo cuenta con animaciones de transicin en el slider de

imgenes

Virtudes: La pgina tiene buena esttica y combinacin de colores

adems tiene un buscador para realizar bsquedas rpidas,
tambin es responsiva en las resoluciones de pantalla.

Defectos: Debe tener informacin de inters al inicio de la pgina

como convocatorias en grande all se muestra de una forma
pequea que no llama la atencin

#FFFFFF Fondo principal

#28292A fondo de barra de la parte superior de inicio

#6D6D6D Color de fondo del men

Paletas de colores: #28292, 28292A Colores de piel de pagina

#36355 Colores de texto general

#ECECEC Colores de texto de men y de banners de pie de

pagina

M.A. Erika Arenas Enrquez Pgina 8

 Arquitectura de la Informacin

BENEMRITA UNIVERSIDAD AUTNOMA DE PUEBLA

Ttulo: Buap

Direccin http://www.buap.mx/

Entidad: Educaciones publicas

Categora: ofrece informacin de la institucin

Contenido: inicio/aspirantes/estudiantes/investigacion/academicos/administrativos/
extension/oferta educativa

Pblico Para todo pblico.

objetivo:

Descripcin Es una institucin muy respetada en el estado de puebla con un alto grado
de estudios y gran calidad en su oferta educativa. Ofrece un amplio
catlogo de carreras

Imgenes No contienen catalogo

Recursos que captan la atencin del

en
catalogo:

Imgenes Cuenta con publicidad sobre las ofertas educativas y prximos exmenes
del resto de admisin al igual que eventos que han tenido y fotos de cmo est
del sitio: constituido la universidad.

Sonido: No contienen sonido

Videos: No contienen videos

pblico:

Animacion Solo cuenta con pequeos slider en cada categora presentando cada uno
es: de los servicios que ofrece.

Virtudes: Ofrece una gran atencin visual lo cual genera que atraiga muchos
usuarios al igual que su pgina va de acuerdo a su imagen corporativa sin
tener algn defecto sobre colores ajenos y visualiza de una manera sencilla
todo lo que ofrece al publico

M.A. Erika Arenas Enrquez Pgina 9

 Arquitectura de la Informacin

Defectos: Cuesta mucho encontrar lo que uno busca hay demasiadas sub-categoras
que no tiene nada que ver sobre lo que se busca y demasiada informacin
innecesaria.

Fondo

Fondo principal

Rectngulo superior

iconos

Paletas de Fondo del icono

colores:
Relleno del icono

Texto

Texto en general

Ttulos y subttulos

Texto en submens

M.A. Erika Arenas Enrquez Pgina 10

 Arquitectura de la Informacin

UNIVERSIDAD AUTNOMA DE QUERTARO

Ttulo: Universidad autnoma de Quertaro

Direccin http://movilidad.uaq.mx/index.php/universidades-internacionales

Entidad: Educaciones publicas

Categora: ofrece informacin de la institucin

Contenido: inicio/movilidad nacional/movilidad internacional/movilidad de

profesores/apoyos econmicos/alumnos visitantes/English

Pblico objetivo: Para todo pblico.

Descripcin Es una universidad que ofrece movilidad nacional e internacional a diferentes

centros de estudios con altos estndares de educacin con limitante de grupo
de aspirantes y carreras.

Imgenes en No contiene catalogo

Recursos que captan la atencin del

catalogo:

Imgenes del Cuenta con imgenes de los diferentes grupos de estudiantes que han
resto del enviado a las universidades que ofrece para la movilidad
sitio:

Sonido: No contiene sonido

Videos: No contiene video

pblico:

Animaciones: No contiene muchas animaciones solo la slider que se repite en todas las
categoras.

Virtudes: Cuenta con informacin detallada de cmo se lleva a cabo la solicitud de

movilidad a otras universidades, como los requisitos necesarios para llevarlo
a cado.

Defectos: Su sitio es muy bsico y no cuenta con muchos delates que atraigan a un
pblico extenso de usuarios interesados al igual que su repetida slider de
imgenes que no cambian en cada una de las categoras como sus
estructuras que se ve la diferencia de cambio de una a la otra

M.A. Erika Arenas Enrquez Pgina 11

 Arquitectura de la Informacin

Fondo

Fondo principal

Rectngulo superior encima del men

iconos

Fondo del icono

Paletas de colores: Relleno del icono

Texto

Texto en general

Ttulos y subttulos

Texto en submens

Hipervnculos

M.A. Erika Arenas Enrquez Pgina 12

 Arquitectura de la Informacin

Ttulos y URLS
Ttulo: Ttulo

https://www.unam.mx/ http://www.ipn.mx/Paginas/inicio.aspx

UNIVERSIDAD AUTONOMA DE MXICO INSTITUTO POLITCNICO NACIONAL

http://www.buap.mx/ http://movilidad.uaq.mx/index.php/universidades-
internacionales

Universidad autnoma de Quertaro

BENEMRITA UNIVERSIDAD AUTNOMA
DE PUEBLA

Recomendaciones:

Los ttulos son cortos entendibles y fciles de recordar. Si al cliente le es llamativo el ttulo le
interesara conocer ms del lugar y el servicio que ofrece que ofrece.

Sugerencias:

Se recomienda anotar los ttulos largos con abreviaturas del mismo por ejemplo UNAM
(Universidad autnoma de Mxico).

M.A. Erika Arenas Enrquez Pgina 13

 Arquitectura de la Informacin

Diseo del sitio web

UNIVERSIDAD AUTNOMA DE MXICO INSTITUTO POLITCNICO NACIONAL

BENEMRITA UNIVERSIDAD AUTNOMA DE UNIVERSIDAD AUTNOMA DE QUERTARO

PUEBLA

M.A. Erika Arenas Enrquez Pgina 14

 Arquitectura de la Informacin

Tamao formato y resolucin de las imgenes dentro de los sitios

UNIVERSIDAD AUTNOMA DE MXICO INSTITUTO POLITCNICO NACIONAL

Cuenta con una variedad de imgenes de

Las imgenes con las que cuenta en el resto
diversos tamaos ubicados en distintas
del sitio se encuentran en las diferentes
partes del sitio. Los tamaos de estas son de
secciones del sitio estas estn en formato jpg
272 x125 px en las imgenes de noticias, los
con una resolucin de 1280x920 px otras de
logotipos de la parte superior son de
ellas tienen tamao de 687x163 px, las
resolucin es de 689 x 143 px y todas estn
imgenes que aparecen en la seccin d
en formato jpg acepto los logos esos estn en
eventos cuentan con una resolucin de 390 x
png.
390

BENEMRITA UNIVERSIDAD AUTNOMA UNIVERSIDAD AUTNOMA DE QUERTARO

DE PUEBLA

Cuenta con imgenes de los diferentes

Cuenta con publicidad sobre las ofertas grupos de estudiantes que han enviado a las
educativas y prximos exmenes de admisin universidades que ofrece para la movilidad
al igual que eventos que han tenido y fotos de
cmo est constituido la universidad.

M.A. Erika Arenas Enrquez Pgina 15

 Arquitectura de la Informacin

Animaciones

UNIVERSIDAD AUTNOMA DE MXICO INSTITUTO POLITCNICO NACIONAL

Cuenta con un slider de imgenes que tienen

transicin de una imagen a otra el efecto de
desplazamiento hacia la derecha adems
cuenta con una barra vertical con el efecto Solo cuenta con animaciones de transicin
parrallax que se queda fija en su posicin no en el slider de imgenes
importa que el scroll Wheel del mause se baje
o suba.

ENEMRITA UNIVERSIDAD AUTNOMA DE Universidad autnoma de Quertaro

PUEBLA

No contiene muchas animaciones solo la

Solo cuenta con pequeos slider en cada slider que se repite en todas las categoras.
categora presentando cada uno de los
servicios que ofrece.

M.A. Erika Arenas Enrquez Pgina 16

 Arquitectura de la Informacin

Videos y Audio

UNIVERSIDAD AUTNOMA DE MXICO INSTITUTO POLITCNICO NACIONAL

No cuenta con videos ni vnculos a YouTube

S cuenta con un audio que da explicacin de lo
que ofrece la universidad mediante un video de
YouTube con una duracin de 07:02 minutos

Cuenta con un video vinculado de YouTube de

una breve explicacin de lo que ofrece la
universidad

BENEMRITA UNIVERSIDAD Universidad autnoma de

AUTNOMA DE PUEBLA Quertaro

No cuenta con videos ni vnculos a YouTube No cuenta con videos ni vnculos a YouTube

M.A. Erika Arenas Enrquez Pgina 17

 Arquitectura de la Informacin

Determinar requerimientos funcionales o no funcionales

ID: RF001 Nombre: Inicio de sesin

Usuario(s): Alumno, docente, administrador

Entradas Usuario, contrasea

Salidas: Acceso a la aplicacin web o mensaje de Usuario y/o contrasea

incorrecta o mensaje de debe ingresar todos los datos

Precondiciones Direccionar el navegador a la aplicacin web y mostrar interfaz en

funcin del usuario

Definicin Diagramas de Caso de Uso (aplicacin web)

Modificar perfil

Crear y eliminar
perfil

Modificar archivos

Administrador

M.A. Erika Arenas Enrquez Pgina 18

 Arquitectura de la Informacin

Subir archivos

Eliminar archivos

Subir y consultar
horario

Docente

Descargar archivos

Ver informacin

Consultar horario

Alumno

M.A. Erika Arenas Enrquez Pgina 19

 Arquitectura de la Informacin

Ver informacin
sobre la carrera

Aspirante
Diagramas de B

D E-R (Pagina web)

M.A. Erika Arenas Enrquez Pgina 20

 Arquitectura de la Informacin

M.A. Erika Arenas Enrquez Pgina 21

 Arquitectura de la Informacin

Definicin de Contenidos del Sitio

Secciones del sitio

Inicio
Contendr una imagen de fondo de la institucin educativa con el logotipo correspondiente, al igual que
las principales especialidades que ofrece la carrera de tics.
Oferta Educativa
Esta parte explica de que trata la carrera de T.S.U con sus 3 especialidades con su respectivo plan de
estudios al igual que la Ing. En tecnologas de la informacin.
Certificaciones
Describe las 2 certificaciones (Cisco Network, Microsoft office) que se puede obtener dentro de la
universidad gratis.
Examen de admisin
Brinda informacin sobre los requisitos que se debe tener para el saque de ficha al igual que las fechas
de los exmenes y requisitos para la inscripcin.
Aspirante
Muestra un video sobre el perfil que debe tener el aspirante a la carrera de tics
Recorrido
Muestra un recorrido en 360 del edificio de la carrera y los laboratorios
Contctanos
Aqu puedes enviarnos un mensaje para resolver tus dudas sobre la carrera
Login
Aqu solo es para estudiantes y docentes que ingresaran a un sistema

Definicin de pginas estticas y dinmicas

Inicio
Oferta educativa

Multimedia y comercio electrnico

Sistemas Informticos

Redes

Ing. En tecnologas de la Informacin

Certificaciones

Examen de admisin

Aspirante

M.A. Erika Arenas Enrquez Pgina 22

 Arquitectura de la Informacin

Recorrido

Contctanos

Login

Imagen corporativa

La sigla de la Universidad representa la abreviatura de nuestro nombre. Diseado de acuerdo con el Manual
de identidad grfica de la coordinacin general de Universidades Tecnolgicas.

Las siglas UTh no pueden ser usadas de manera independiente,

debern ser acompaadas por el Escudo o algunos de sus
elementos, como se muestra ms adelante en el Manual.

M.A. Erika Arenas Enrquez Pgina 23

 Arquitectura de la Informacin

Serigrafa o aplicaciones en tinta directa:

CMY

RGB

El Escudo en su uso formal deber ser usado completo, con todos los elementos.

M.A. Erika Arenas Enrquez Pgina 24

 Arquitectura de la Informacin

Definicin de la Estructura del Sitio (uso de Balsamiq, Visio, Smartdraw,

draw.io)

1er. Nivel

Estructura de Directorio y Archivos

Nombre de
Ruta Descripcin
archivo/carpeta
UTics \ UTics Contenedor de los archivos de la web

imagenes \ UTics \imgenes Contiene las imgenes del sitio

index.html \ UTics \index.html Pgina principal del sitio

Tiene informacin de la filosofa de la

Multimedia.html \ UTics \Especialidades\filosofia.html
empresa.

Sistemas.html \ UTics \Especialidades\sistemas.html Contiene el plan de estudios

Redes.html \ UTics \Especialidades\Redes.html Contiene el plan de estudios

Ing.html \ UTics \Especialidades\Ing.html Contiene el plan de estudios

M.A. Erika Arenas Enrquez Pgina 25

 Arquitectura de la Informacin

Definicin del Mapa de Navegacin (uso de Balsamiq, Visio, Smartdraw,

draw.io).

Diseo Visual Wireframes (uso de Balsamiq, Visio, Smartdraw, draw.io)

Plantilla Home

M.A. Erika Arenas Enrquez Pgina 26

 Arquitectura de la Informacin

Plantilla de 1er. Nivel

M.A. Erika Arenas Enrquez Pgina 27

 Arquitectura de la Informacin

Plantilla de 2er. Nivel

Nombre propuesto del dominio

An no est definido

M.A. Erika Arenas Enrquez Pgina 28