Desarrollo de Un Portal Con IWeb

DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA
INSTITUTO TECNOLÓGICO DE CD. VALLES
RESIDENCIA PROFESIONAL
DESARROLLO DE UN PORTAL PARA LOS PROCESOS ACADÉMICO-

ADMINISTRATIVOS DE LA UNIVERSIDAD PEDAGÓGICA NACIONAL UNIDAD
242 DE CIUDAD VALLES, S.L.P
LICENCIATURA EN INFORMÁTICA
GONZÁLEZ MEDINA KARINA GUADALUPE 04690399

RONQUILLO FLORES NETTIE 04690349
ASESOR INTERNO: ASESOR EXTERNO:

ING. ROSA IMELDA GARCIA CHI C.PRIV. IRMA NORIEGA
IT. CD. VALLES. RESIDENCIA PROFESIONAL
INDICE
INTRODUCCIÓN .............................................................................................. 1
1 JUSTIFICACIÓN ......................................................................................... 2
2 OBJETIVOS ................................................................................................ 3
2.1 Objetivo general ................................................................................... 3
2.2 Objetivos específicos............................................................................ 3
3 CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ ....................... 4
3.1 Descripción del área de trabajo ............................................................ 4
3.2 Descripción del área de trabajo ............................................................ 5
3.3 Antecedentes de la empresa ................................................................ 6
3.4 Misión ................................................................................................... 8
3.5 Visión.................................................................................................... 8
3.6 Organigrama ........................................................................................ 9
4 FUNDAMENTO TEÓRICO ....................................................................... 10
4.1 Internet y la web ................................................................................. 10
4.2 La World Wide Web............................................................................ 10
4.3 Qué es un Portal................................................................................. 11
i
4.4 Funciones y objetivos de un Portal ..................................................... 11
4.5 Bloque de construcción HTML ........................................................... 12
4.5.1 Los URL ........................................................................................ 13
4.5.2 Como Diseñar Su Sitio .................................................................. 14
4.5.3 Hojas de estilo............................................................................... 16
4.5.4 Herramientas HTML ...................................................................... 17
4.6 Dreamweaver ..................................................................................... 17
4.7 PHP .................................................................................................... 18
4.8 MySQL ............................................................................................... 19
4.9 Como publicar la página en la Web .................................................... 20
4.9.1 Como conseguir un dominio.......................................................... 21
4.10 Ingeniería web ................................................................................. 22
4.10.1 Estratos de la ingeniería web de WebApp .................................. 22
4.11 El proceso de la ingeniería Web ..................................................... 24
4.11.1 Definición del marco de trabajo ................................................... 24
4.12 Formulación y planeación para IWeb .............................................. 25
4.12.1 Formulación de sistemas en Web ............................................... 26
ii
4.12.2 Modelado de análisis para aplicaciones web .............................. 28
4.12.3 Modelado de diseño para aplicaciones web ............................... 33
4.13 Pirámide de diseño IWeb ................................................................ 36
4.14 Diseño de la interfaz de la WebApp ................................................ 37
4.14.1 Principios y directrices del diseño de interfaz.............................. 37
4.14.2 Mecanismos de control de la interfaz .......................................... 37
4.14.3 Flujo de trabajo en el diseño de la interfaz .................................. 38
4.15 Diseño estético................................................................................ 39
4.16 Diseño del contenido ....................................................................... 39
4.17 Diseño arquitectónico ...................................................................... 40
4.18 Diseño de navegación ..................................................................... 40
4.19 Diseño a nivel de componentes ...................................................... 41
4.20 Prueba de conceptos para WebApp ............................................... 42
4.21 Prueba del contenido ...................................................................... 44
4.22 Prueba de la interfaz de usuario ..................................................... 44
4.23 Prueba al nivel de componentes ..................................................... 44
4.24 Prueba de navegación .................................................................... 45
iii
4.25 Prueba de la configuración.............................................................. 45
5 ALCANCES Y LIMITACIONES ................................................................. 46
5.1 Alcances ............................................................................................. 46
5.2 Limitaciones ....................................................................................... 46
6 PROBLEMAS A RESOLVER .................................................................... 47
7 DESARROLLO DE ACTIVIDADES ........................................................... 48
7.1 Planteamiento y Formulación ............................................................. 48
7.1.1 Entrevista con el cliente ................................................................ 48
7.1.2 Identificación de necesidades y requerimientos ............................ 48
7.2 Planteamiento y Formulación ............................................................. 49
7.2.1 Entrevista con el cliente ................................................................ 49
7.2.2 Identificación de necesidades y requerimientos ............................ 49
7.2.3 Determinar objetivos de la WebApp .............................................. 51
7.2.4 Recopilación de requisitos ............................................................ 51
7.2.5 Establecer alcances y limitaciones................................................ 52
7.3 Planificación ....................................................................................... 52
7.3.1 Análisis de recursos y factibilidad ................................................. 52
iv
7.3.2 Análisis de riesgos ........................................................................ 53
7.4 Análisis ............................................................................................... 54
7.4.1 Análisis Relación-Navegación ....................................................... 54
7.4.2 Análisis de Configuración .............................................................. 54
7.4.3 Análisis Funcional ......................................................................... 55
7.4.4 Análisis de Interacción .................................................................. 55
7.4.5 Análisis de Contenido ................................................................... 56
7.5 Ingeniería ........................................................................................... 56
7.5.1 Diseño de componentes ............................................................... 56
7.5.2 Diseño arquitectónico.................................................................... 57
7.5.3 Diseño de navegación................................................................... 57
7.5.4 Diseño de contenido ..................................................................... 58
7.5.5 Diseño de las bases de datos ....................................................... 58
7.5.6 Diseño de la interfaz ..................................................................... 59
7.6 Generación de páginas y pruebas ...................................................... 59
7.6.1 Prueba de configuración ............................................................... 60
7.6.2 Prueba de componentes ............................................................... 60
v
7.6.3 Prueba de navegación .................................................................. 63
7.6.4 Prueba de contenido ..................................................................... 66
7.6.5 Prueba de la interfaz ..................................................................... 67
7.7 Evaluación del cliente ......................................................................... 67
7.7.1 Validación del avance ................................................................... 67
7.8 Implementación .................................................................................. 68
7.8.1 Configuración del servidor ............................................................ 68
7.8.2 Webhosting ................................................................................... 71
8 RESULTADOS .......................................................................................... 72
9 CONCLUSIONES Y RECOMENDACIONES ............................................ 73
9.1 Conclusiones ...................................................................................... 73
9.2 Recomendaciones .............................................................................. 74
10 BIBLIOGRAFÍA ...................................................................................... 75
11 GLOSARIO ............................................................................................ 76
12 ANEXOS ................................................................................................ 80
13 ÍNDICE DE ILUSTRACIONES ............................................................. 135
14 INDICE ANALÍTICO ............................................................................. 136
vi
IT.CD. VALLES. RESIDENCIA PROFESIONAL
INTRODUCCIÓN
Hoy en día, el Internet es un medio de comunicación pública, cooperativa y
autosuficiente en términos económicos, accesible a cientos de millones de personas
en el mundo entero.
Físicamente, el Internet usa parte del total de recursos actualmente existentes

en las redes de telecomunicaciones.
El componente más usado en el Internet es definitivamente el Web.
Un portal en internet representa un medio de comunicación entre el usuario y

la organización, lo que permite una mayor proyección.
Un portal de Internet es un sitio web cuyo objetivo es ofrecer al usuario, de

forma fácil e integrada, el acceso a una serie de recursos y de servicios, entre los
que suelen encontrarse buscadores, foros, documentos, aplicaciones, compra
electrónica, etc. Principalmente están dirigidos a resolver necesidades específicas de
un grupo de personas o de acceso a la información y servicios de una institución
pública o privada.
Este proyecto de residencia profesional describe el desarrollo de un portal

para la Universidad Pedagógica Nacional Unidad 242 a través del proceso de
desarrollo de software orientado objetos utilizando el UML como lenguaje de
modelado y aplicando las fases de desarrollo del modelo IWeb.
En este documento se describe en el Fundamento teórico lo referente a

desarrollo de software Web, así mismo, en la sección de actividades se refleja la
aplicación del modelo IWeb de manera detallada y en los anexos se representan
todos los diagramas generados.
1
1 JUSTIFICACIÓN
La Universidad Pedagógica Nacional Unidad 242 de Ciudad Valles establece
un compromiso con sus alumnos en la educación y formación, como su lema lo dice
“Educar para Transformar”, sustentada en la calidad del Proceso Educativo que ésta
Institución maneja; para cumplir con los requerimientos que la Unidad 242 necesita
para mantenerse a la vanguardia y sobre todo cumplir con las necesidades de sus
alumnos y docentes. Por esta razón se desarrolla un Portal para gestionar el proceso
Académico-Administrativo.
Al desarrollar el Portal para la Universidad, se tendrá como finalidad la difusión

de la información de las calificaciones, eventos académicos, así como el catálogo de
bibliografía de la institución; además fungirá como gestor administrativo del usuario
(alumno o maestro).
La importancia de tener un control en el proceso Académico-Administrativo de

la Universidad Pedagógica Nacional Unidad 242 de Ciudad Valles sería una parte
primordial en el desarrollo del Portal, por otra parte contendrá el catalogo de los
libros con los que cuenta la biblioteca de dicha Institución, para que el usuario tenga
conocimiento de la bibliografía disponible.
2
2 OBJETIVOS
2.1 Objetivo general
Desarrollar un Portal para los procesos académico-administrativos de la

Universidad Pedagógica Nacional Unidad 242 de Ciudad Valles, para agilizar el
informe de calificaciones, integrar los datos académicos y la difusión de la
información entre la comunidad universitaria.
2.2 Objetivos específicos
 Plantear y formular los objetivos que se alcanzarán a través de la

implementación del Portal, así mismo delimitar el alcance de éste.
 Planificar las estimaciones enfocadas a los costos durante el desarrollo,
además de los riesgos y esfuerzos que se originarán.
 Analizar los requerimientos técnicos, gráficos y de contenido que se
emplearán durante el desarrollo del Portal para la Universidad Pedagógica
Nacional Unidad 242.
 Efectuar el diseño de contenido y producción integrando a ésta etapa: texto,
gráficas, videos, etc.
 Generar páginas y pruebas para evaluar si la información contenida se
generará correctamente, aplicando pruebas de configuración, componentes,
navegación, contenido y de interfaz.
3
3 CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ

3.1 Descripción del área de trabajo
La Universidad Pedagógica Nacional Unidad 242 en sus inicios el 30 de mayo

de 1992 no contaba con un laboratorio de cómputo, lo que dificultaba las actividades
del alumnado de dicha institución, por lo que optaron por realizar una gran inversión
con el único fin de cubrir las necesidades que actualmente en esa fecha se
presentaban, ya validado el proyecto se construyó en la parte trasera de la institución
a un costado del departamento de servicios escolares un pequeño salón o área para
que ahí se llevarán a cabo las actividades que más demandaban los estudiantes.
Actualmente esta área con un total de 21 máquinas distribuidas

uniformemente además instalaron Internet inalámbrico Prodigy Infinitum con 4MB de
banda ancha para dar confort a los que ahí se encuentran trabajando atendiendo las
exigencias del alumnado, pero ahora surge una gran necesidad la cuál consta de la
implementación de un Portal Web para Informar a la sociedad en general y al
alumnado de la Universidad Pedagógica Nacional Unidad 242 de Ciudad Valles
sobre los eventos y/o actividades de la Institución, asimismo automatizar los
procesos Académico-Administrativos mediante la implementación de éste para la
mejora del servicio del área administrativa obteniendo como beneficios aumento en
la demanda de población estudiantil, incremento de los recursos económicos e
impulso hacia una mejor infraestructura, por consiguiente se pretende en un mañana
acarrear mayores bienes acrecentando el capital deseado por los directivos de la
institución académica.
4
3.2 Descripción del área de trabajo
La Universidad Pedagógica Nacional Unidad 242 en sus inicios el 30 de mayo

de 1992 no contaba con un laboratorio de cómputo, lo que dificultaba las actividades
del alumnado de dicha institución, por lo que optaron por realizar una gran inversión
con el único fin de cubrir las necesidades que actualmente en esa fecha se
presentaban, ya validado el proyecto se construyó en la parte trasera de la institución
a un costado del departamento de servicios escolares un pequeño salón o área para
que ahí se llevarán a cabo las actividades que más demandaban los estudiantes, por
lo que ahora ya cuenta con dicha área de cómputo con un total de 21 máquinas
distribuidas uniformemente además instalaron Internet inalámbrico Prodigy Infinitum
con 4MB de banda ancha para dar confort a los que ahí se encuentran trabajando
atendiendo las exigencias del alumnado, pero ahora surge una gran necesidad la
cuál consta de la implementación de un Portal Web para Informar a la sociedad en
general y al alumnado de la Universidad Pedagógica Nacional Unidad 242 de Ciudad
Valles sobre los eventos y/o actividades de la Institución, asimismo automatizar los
procesos Académico-Administrativos mediante la implementación de éste para la
mejora del servicio del área administrativa obteniendo como beneficios aumento en
la demanda de población estudiantil, incremento de los recursos económicos e
impulso hacia una mejor infraestructura, por consiguiente se pretende en un mañana
acarrear mayores bienes acrecentando el capital deseado por los directivos de la
institución académica.
5
3.3 Antecedentes de la empresa
Al principio en el mes de octubre de 1979, nace la Unidad UPN 242, en

Ciudad Valles. Siendo gobernador en el Estado el Profr. y Lic. Carlos Jonguitud
Barrios (1979-1985), quien fuera el cabecilla del grupo “Vanguardia Revolucionaria”
del SNTE, quien a su vez, iniciará las gestiones para la creación de la UPN, durante
el gobierno de José López Portillo, a nivel nacional.
En sus inicios, la Unidad UPN 242 tuvo sus oficinas en el tercer nivel del
edificio que se encuentra ubicado en la esquina de Abasólo y Carranza de la Zona
Centro. Este edificio albergaba la oficina administrativa, y además, dos pequeñas
instalaciones que servían para realizar reuniones de los asesores, así como para
atender a los maestros-alumnos que lo solicitaban.
Las gestiones iniciales para la creación de la Unidad UPN 242, en esta ciudad,
estuvo a cargo del Profr. Bonifacio Ramírez Olvera quien fuera el primer Director de
ésta Institución Académica y estando como Jefa Administrativa la Profra. Ma.
Enedina Méndez Montaño.
La instalación de la Unidad UPN 242, estuvo mediada por una fuerte presión
por parte de un grupo de Tamazunchale, quienes argumentaban que en ese lugar,
existía un mayor número de maestros que podrían ser beneficiados con esta nueva
institución.
En octubre de 1989, asume la Dirección de la Unidad UPN 242, la Profra. Elba

Lidia López Jiménez, como Directora de la Unidad, las oficinas de éstas se
trasladaron al inmueble que actualmente ocupa, el cual se ubica en la calle
Mozambique, Esquina con Damas. S/n, Fraccionamiento Valle Alto, 3a Sección, en
Ciudad Valles.
6
La construcción del edificio se inicio el 26 de febrero de 1982, siendo

Gobernador del Estado el Lic. Carlos Jonguitud Barrios, quien fuese el responsable
de poner la primera piedra. Las gestiones para la construcción de dicha obra estuvo
a cargo de la Jefa Administrativa Profra. Ma. Enedina Méndez Montaño, en apoyo a
la Directora. Elba Lidia López Jiménez, las cuales se realizaron frente al Director de
la CAPFSE, Lic. Guillermo Fonseca Álvarez. Cabe aclarar, que el proyecto de
construcción estaba destinado al Estado de Michoacán, pero debido a la alta
inscripción registrada por la apertura de la Licenciatura en Educación Preescolar y
Educación Primaria, orientada al medio indígena, Plan 90 (LEPEPMI), el proyecto se
trasladó a esta ciudad.
El 30 de mayo de 1992, se inauguró formalmente el edificio que hoy ocupa la

UNIDAD UPN 242, fungiendo como Director el Mtro. Bernardo Guillermo Bravo
Rodríguez (1991-1996). En ese periodo de administración fungen como jefas
administrativas, la Profra. Ana Rosa García Navarrete, la L.A.E. Ernestina Ramírez
Lárraga, la Lic. Carmen de la Fuente y de la Rosa y, finalmente en abril de 1995, la
C. Irma Noriega, quien sigue en el cargo hasta la fecha.
En Noviembre de 1996, asume el cargo de Director de la Unidad UPN 242, EL

Lic. Juan Bernardo Escamilla Hernández, y quien se retira en Mayo de 2000,
asumiendo el cargo como Director de la mencionada Unidad, desde entonces y hasta
la fecha, el Mtro. Daniel Cruz Laureano.
7
3.4 Misión
La Universidad Pedagógica Nacional Unidad 242 tiene como misión: “formar

investigadores y profesionales de la educación capaces de generar y aplicar
conocimientos con una concepción humanística acorde con las necesidades
nacionales, estatales, regionales y locales; así como diseñar, elaborar, producir y
difundir materiales de la cultura pedagógica, realizar investigación educativa y
proporcionar servicios de intercambio académico con otras instituciones educativas
públicas o privadas y de la sociedad en general”.
3.5 Visión
La Universidad Pedagógica Nacional Unidad 242 tiene como visión: “ofrecer

una propuesta de formación educativa a los profesionales de la educación de la
región huasteca y zona media del estado que les proporcione elementos científicos,
humanísticos e innovadores que contribuyan al mejoramiento de sus prácticas
educativas en todos sus niveles”. (DIRECCIÓN ADMINISTRATIVA DE LA UPN)
8
IT. CD. VALLES RESIDENCIA PROFESIONAL
3.6 Organigrama
DIRECCIÒN
MTRO. DANIEL CRUZ LAUREANO
SUBDIRECCIÒN ACADÈMICA JEFATURA ADMINISTRATIVA

MTRO. JUAN JOSE AMARO VARGAS IRMA NORIEGA
COMISIÒN DE TITULACIÒN DEPENDENCIAS DE PERSONAL SERVICIOS

MTRO. BLAS LARA BARRON EDUCACIÒN SUPERIOR ADMINISTRATIVO ESCOLARES
Y DE APOYO MA.
GRISELDA
BARRA
CENTRO DE
CÓMPUTO
LICENCIATURA EN EDUCACIÒN PARA EL MEDIO LICENCIATURA EN EDUCACIÒN

INDIGENA MAESTRIA EN EDUCACIÒN, CAMPO FORMACIÒN DE
LICENCIATURA EN INTERVENCIÒN EDUCATIVA DOCENTES Y PRÀCTICA PROFESIONAL.
MTRO. RAYMUNDO AVALOS PEREZ (Coordinador) MTRO. JUAN JOSÈ AMARO VARGAS (Coordinador)
SUBSEDE TAMAZUNCHALE, S.L.P SEDE CD. VALLES SUBSEDE RIOVERDE, S.L.P.

PROFRA. ANGELINA HERNÀNDEZ MENDEZ MTRO. BLAS LARA BARRÒN PROFR. FELIPE MARTINEZ RIVERA
COORDINADORA COORDINADOR COORDINADOR
FUENTE: DIRECCIÓN ADMINISTRATIVA DE LA UPN.
Ilustración 1. Organigrama de la UPN Unidad 242.
9
4 FUNDAMENTO TEÓRICO
4.1 Internet y la web
El Internet, algunas veces llamado simplemente "La Red", es un sistema

mundial de redes de computadoras, un conjunto integrado por las diferentes redes de
cada país del mundo, por medio del cual un usuario en cualquier computadora
puede, en caso de contar con los permisos apropiados, accesar información de otra
computadora y poder tener inclusive comunicación directa con otros usuarios en
otras computadoras.
Hoy en día, el Internet es un medio de comunicación pública, cooperativa y

autosuficiente en términos económicos, accesible a cientos de millones de personas
en el mundo entero. Físicamente, el Internet usa parte del total de recursos
actualmente existentes en las redes de telecomunicaciones. Técnicamente, lo que
distingue al Internet es el uso del protocolo de comunicación llamado TCP/IP
(Transmission Control Protocol/Internet Protocol).
El componente más usado en el Internet es definitivamente el Web. Su

característica sobresaliente es el texto remarcado, un método para referencias
cruzadas instantáneas. La exploración en el Web se realiza por medio de un software
especial denominado Browser o Explorador. La apariencia de un Sitio Web puede
variar ligeramente dependiendo del explorador que use. (LEMAY, 1998)
4.2 La World Wide Web
WWW es un sistema hipermedia interactivo desarrollado sobre Internet. La

idea de hipermedia es la de juntar texto, imágenes, audio y vídeo dentro de un
mismo envoltorio llamado documento. WWW se asienta sobre el protocolo HTTP
(Hyper Text Transfer Protocol) y sobre el lenguaje de definición de documentos
hipermedia HTML (HyperText Markup Language).
10
El primer precedente del WWW se puede encontrar en un tratado escrito por

Vannevar Bush titulado “As We May Think”, de 1954, en el que básicamente
animaba a los científicos a hacer más accesible a todo el mundo sus conocimientos y
experiencia. En este tratado surgieron las nociones de hipertexto e hipermedia. Así,
WWW es el sistema de difusión del conocimiento más importante que implementa
estas nociones. (MORRIS, 1997) (MORRIS, 2006)
4.3 Qué es un Portal
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. Principalmente están dirigidos a resolver
necesidades específicas de un grupo de personas o de acceso a la información y
servicios de una institución pública o privada. Un Sitio Web no alcanza el rango de
Portal sólo por tratarse de un sitio robusto o por contener información relevante. Un
Portal es más bien una plataforma de despegue para la navegación en el Web.
(MORRIS, 1997) (PRESSMAN, 2007)
4.4 Funciones y objetivos de un Portal
El término Portal tiene como significado puerta grande, y precisamente su

nombre hace referencia a su función u objetivo: punto de partida de un usuario que
desea entrar y realizar búsquedas en la web u obtener información importante de él.
Se puede decir que un Portal ofrece servicios para la navegación en el internet,
logrando incrementar la intensidad de tráfico en el mismo.
11
Un Portal de Internet puede ser un Centro de contenido intermediario entre

compradores y vendedores de rubros específicos, estos se pueden complementar
con herramientas que le ayuden a identificar empresas que satisfagan necesidades
de un comprador, visualizar anuncios de vendedores, ofrecer cotizaciones, brindar
correos electrónicos, motores de búsqueda, etc.
El Portal es considerado un intermediario de información que tiene como

fuente de ingreso la publicidad de empresas que ahí se anuncian. (MORRIS, 1997)
4.5 Bloque de construcción HTML
Puede crear un documento en HTML con cualquier editor o procesador de

textos entre los que se incluyen los más básicos Teach Text o SimpleText Packmak y
el bloc de notas Wordpad para Windows; todos ellos se incluyen gratuitamente con
un sistema operativo correspondiente. También puede comprar un editor de páginas
web, como PageMill o Dreamweaver.
Etiquetas HTML. Las etiquetas HTML son comandos escritos entre los signos
“menor que” (<) y “mayor que” (>), también llamados corchetes angulares, que indica
cómo debe el navegador mostrar el texto. Existen versiones de apertura y cierre para
la mayor parte de las etiquetas (pero no de todas) y afectan al texto que esta
contenido entre las dos etiquetas. Tanto en las etiquetas de apertura como las de
cierre emplean el mismo comando, pero la etiqueta de cierre lleva una barra
inclinada adicional /. (CASTRO, 2001)
Atributos. El atributo se introduce entre el nombre del comando y el símbolo

“>” del final. Normalmente puede emplear una serie de atributos dentro de una
misma etiqueta. Simplemente escriba uno tras otro (en cualquier orden) con un
espacio entre ellos. (CASTRO, 2001)
12
4.5.1 Los URL
El Localizador Uniforme de Recursos, o URL, es una forma imaginativa de

decir dirección. Contiene información sobre donde se encuentra el archivo y sobre
qué debe hacer un navegador con él. Cada archivo de Internet dispone de un URL
único. La primera parte de un URL se denomina esquema. Informa al navegador de
cómo tratar con el archivo que va a abrir. Uno de los esquemas que vera es http
(HipperText Transfer Protocol, Protocolo de Transferencia de HiperTexto). La
segunda parte del URL es el nombre del servidor donde se encuentra ubicado el
archivo, seguido por la ruta que conduce el archivo y del propio nombre del archivo.
Otros esquemas habituales son: HTTPS, para páginas Web seguras, FTP (File
Transfer Protocol, Protocolo de Transferencia de Archivos).
Los URL pueden ser absolutos o relativos. Un URL absoluto muestra la ruta
completa del archivo, incluyendo el esquema, el nombre del servidor, la ruta
completa y el propio nombre de archivo. Un URL absoluto es como la dirección
completa de un domicilio, que incluye nombre, calle y número, ciudad, provincia,
código postal y país. El URL absoluto no depende en sí misma de la ubicación del
archivo referenciado (no importa que una Portal esté en un servidor o en el de otra
persona; si el URL es absoluto, será exactamente igual que cualquiera de los casos).
Del mismo modo, un URL relativo describe la ubicación del archivo deseado
con relación a la ubicación del archivo que contiene el propio URL. Por tanto, podría
encontrar que el URL dice algo similar a “muestra la imagen xyz que se encuentra en
el mismo directorio que el archivo actual”. Así el URL relativo para un archivo que
está en el mismo directorio que el archivo actual (esto es él, archivo que contiene el
URL en cuestión), es, simplemente, el nombre del archivo y la extensión. Para crear
el URL de un archivo que se encuentra en un subdirectorio actual, sólo es necesario
el nombre del directorio seguido por una barra inclinada y el nombre del archivo y la
extensión. (CASTRO, 2001)
13
4.5.2 Como Diseñar Su Sitio
Aunque puede lanzarse directamente a escribir páginas HTML, es una buena

idea empezar por pensar como debe ser su sitio y esbozar un diseño inicial. De esta
forma, dispondrá de un camino a seguir y se ahorrara tener que reorganizarlo con
posterioridad.
Para diseñar su sitio:
1. Pregúntese porque quiere crear esta página. ¿Qué es lo que quiere que
transmita?
2. Piense en su audiencia. ¿Cómo puede ajustar su contenido para atraer a

esta audiencia? Por ejemplo, ¿Debería añadir gran cantidad de gráficos o
es más importante que su página se descargue rápidamente?
3. ¿Cuántas páginas necesitará? ¿Qué tipo de estructura le gustaría que

tuviera? ¿Desea que sus visitantes avance por su sitio web en una
dirección concreta o quiere que le sea fácil avanzar en cualquier dirección?
4. Esboce su sitio sobre el papel.
5. Idee un sistema simple y coherente para denominar a sus páginas,

imágenes y otros archivos externos.
Para crear una página Web:
1. Abra cualquier editor o procesador de textos.
2. Elija Archivo, Nuevo, para crear un documento nuevo en blanco.
14
3. Cree el contenido HTML.
4. Asegúrese de guardar su archivo. (CASTRO, 2001)
Como colocar los cimientos. La mayoría de las páginas Web están divididas
en dos secciones: HEAD y BODY. En la sección HEAD es donde se define el título
de la página, se incluye información sobre su página para los motores de búsqueda,
se establece la ubicación de su página, se añade información avanzada de formato y
donde se escribe las secuencias de comandos.
Para crear la sección HEAD:
1. Directamente después de la etiqueta HTML escriba <HEAD>.
2. Deje algo de espacio para el contenido de la sección HEAD.
3. Escriba </HEAD>.
La sección BODY de su documento HTML encierra el contenido de su página

web, la parte que sus visitantes verán, incluyendo el texto y los gráficos.
Para crear la sección BODY:
1. Detrás de la etiqueta final </HEAD>, escriba <BODY>.
2. Deje algo de espacio para los contenidos de su página web.
3. Escriba </BODY>. (CASTRO, 2001)
15
4.5.3 Hojas de estilo
El lenguaje HTML fue originariamente desarrollado como sistema de

codificación universal que debería permitir a cualquiera ver las mismas páginas, con
independencia de la plataforma que utilizará. HTML ofrece un formato estructural,
pero no permite a los diseñadores mucho control sobre la apariencia de la página.
Las hojas de estilo en cascada, también conocidas como CSS, o simplemente

estilo, permiten asignar de una vez varias propiedades a todos los elementos de una
Portal marcados con una etiqueta en particular.
Además, los estilos le permiten controlar el texto que queda fuera del ámbito
de las etiquetas HTML. Puede ajustar el espacio entre líneas, el color de fondo y
eliminar el formateo de negritas y cursivas, entre otras cosas. También puede usar
estilos junto con JavaScript para crear efectos dinámicos conocidos como DHTML.
La mayor desventaja del uso de hojas de estilo es que ningún navegador las soporta
completamente. Netscape 4, en particular, no soporta muy bien las hojas de estilo.
(CASTRO, 2001)
Cada definición contiene una propiedad, los puntos, y uno o más valores. Las
hojas internas de estilo son ideales para páginas individuales con mucho texto.
Permiten crear, al principio de la página, el estilo que se usará a lo largo de un
documento HTML.
Las hojas de estilo externas son ideales para otorgar un aspecto común a
todas las páginas de un sitio web. En lugar de crear los estilos a partir de las hojas
de estilo internas individuales, es posible indicar a cada página que consulte la hoja
externa asegurando así que todas tengan los mismos ajustes. (CASTRO, 2001)
16
4.5.4 Herramientas HTML
Puede utilizar cualquier editor de textos para escribir HTML, incluyendo

SimpleText o Teach Text sobre Macintosh, WordPad para Windows o para sistemas
Unix.
Dreamweaver (M, W) 300$. Macromedia. http://www.macromedia.com/

Probablemente el más Software/Dreamweaver; demo disponible.
popular editor entre los
profesionales de la Web.
Adobe GoLive (M, W) 300$. Anteriormente http://www.adobe.com/prodindex

GoLive CyberEstudio. El /GoLive/main.html; demo disponible.
principal competidor de
Dreamweaver.
NetObjects Fusion (M, W) 300$. Net Objects editor http://www.netobjects.com/products

WYSIWYG para /html/nof.html; demo disponible.
webmasters profesionales.
Ilustración 2. Cuadro comparativo de herramientas.
4.6 Dreamweaver
Macromedia Dreamweaver: Este editor, programa para crear páginas Web,

es tipo WYSIWYG creado por Macromedia (actualmente de Adobe Systems). Es la
aplicación de este tipo más usada en el sector de diseño y programación Web.
Posee, como toda la línea Macromedia/Adobe, excelentes funcionalidades e
integración con otras herramientas. Su éxito data desde 1990 y en la actualidad
capta el 90% del mercado de editores HTML.
Ventajas:
 Permite muchas cosas.
 es muy flexible, sobre todo para el diseño.

17
 Tiene muchas opciones como botones flash, botones normales y formularios.
 Todas las herramientas se encuentras rápidamente.
Desventajas:
 Las nuevas versiones no facilitan nada respecto a las anteriores.
 Se necesita dar de alta resolución para manejar todas las barras.
 Falta implementación de DHTML.
 Su precio es considerable y carga muy lentamente. (SORIA, 1997)
4.7 PHP
El lenguaje PHP es un lenguaje de programación de estilo clásico, con esto

quiero decir que es un lenguaje de programación con variables, sentencias
condicionales, bucles, funciones, etc.
PHP se ejecuta en el servidor, por eso nos permite acceder a los recursos que
tenga el servidor como por ejemplo podría ser una base de datos. El programa PHP
es ejecutado en el servidor y el resultado enviado al navegador. El resultado es
normalmente una Portal HTML pero igualmente podría ser una página WML.
Ilustración 3. Modelo PHP.
18
Al ser PHP un lenguaje que se ejecuta en el servidor no es necesario que su

navegador lo soporte, es independiente del navegador, pero sin embargo para que
sus páginas PHP funcionen, el servidor donde están alojadas debe soportar PHP. La
ventaja que tiene PHP sobre otros lenguajes de programación que se ejecutan en el
servidor (como podrían ser los script CGI Perl), es que nos permite intercalar las
sentencias PHP en las paginas HTML. (ULLMAN, 2003)
4.8 MySQL
MySQL es un gestor de base de datos sencillo de usar y increíblemente

rápido. También es uno de los motores de base de datos más usados en Internet, la
principal razón de esto es que es gratis para aplicaciones no comerciales.
Las características principales de MySQL son:
 Es un gestor de base de datos. Una base de datos es un conjunto de datos

y un gestor de base de datos es una aplicación capaz de manejar este
conjunto de datos de manera eficiente y cómoda.
 Es una base de datos relacional. Una base de datos relacional es un

conjunto de datos que están almacenados en tablas entre las cuales se
establecen unas relaciones para manejar los datos de una forma eficiente y
segura. Para usar y gestionar una base de datos relacional se usa el lenguaje
estándar de programación SQL.
 Es Open Source. El código fuente de MySQL se puede descargar y está

accesible a cualquiera, por otra parte, usa la licencia GPL para aplicaciones
no comerciales.
19
 Es una base de datos muy rápida, segura y fácil de usar. Gracias a la

colaboración de muchos usuarios, la base de datos se ha ido mejorando
optimizándose en velocidad. Por eso es una de las bases de datos más
usadas en Internet.
MySQL (algunas veces referido como "monitor MySQL") es un programa

interactivo que permite conectarnos a un servidor MySQL, ejecutar algunas
consultas, y ver los resultados. MySQL puede ser usado también en modo batch: es
decir, se pueden colocar toda una serie de consultas en un archivo, y posteriormente
decirle a MySQL que ejecute dichas consultas. (ULLMAN, 2003)
4.9 Como publicar la página en la Web
Como conseguir un host para su web. A no ser que tenga su propio

servidor, seguramente tendrá que pagar a alguien para que actúe como host de su
sitio. Al considerar un host, hay un cierto número de cosas a tener en cuenta.
 ¿Cuánto espacio en disco necesitará para su sitio web?
 ¿Ofrecen soporte técnico? Si es así ¿por teléfono o por email? ¿Cuánto

tiempo tardarán en responder?
 ¿Registrarán para usted un nombre de dominio? ¿Cuánto le costará esto?
 ¿Es rápida la conexión a internet? Esto determinará la rapidez con que sus
páginas se ofrecerán a sus visitantes. ¿Cuentan con conexiones múltiples
para el caso en que una de ellas no funcione?
 ¿Incluyen acceso por marcación telefónica a Internet? ¿Lo incluirán si lo

necesita usted?
20
 ¿Le dejarán poner en marcha guiones CGI personalizados, Server Side

Includes, extensiones FrontPage, RealAudio y otras funciones avanzadas?
¿Hay por ello una tarifa extra?
 ¿Ofrecen un servicio de estadística web para permitirle saber cuánta gente ha
visitado su sitio? (CASTRO, 2001)
4.9.1 Como conseguir un dominio
Si no quiere que el nombre de su host web aparezca en el URL de su página

web, puede registrar su propio nombre de dominio (por una tarifa) y luego pedirle a
su compañía de host web que cree un dominio virtual en su servidor con su nombre
de dominio. Suponga, por ejemplo, que sus Portales están en el servidor
ServidorWeb y que tiene registrado el dominio mi sitio: la dirección para acceder a
sus páginas, a pesar de estar almacenadas realmente en ServidorWeb, será
www.misitio.com, lo que da a entender que las páginas están en un servidor de su
propiedad.
Para conseguir su propio nombre de dominio:
 Dirija su navegador a www.nic.es y verifique si el dominio que quiere está

disponible.
 Cuando haya encontrado un nombre de dominio, pídale a su servicio de
Hosting en la Web que lo establezca para usted. Podría pedirle una tarifa
estándar (unas 25.000 pesetas por un dominio .es). Los demás dominios son
más baratos y rondan las 6.000 pesetas. (CASTRO, 2001)
21
4.10 Ingeniería web
4.10.1 Estratos de la ingeniería web de WebApp
El desarrollo de sistemas y aplicaciones basados en Web Incorpora modelos

de proceso especializados, métodos de la ingeniería del software adaptados a las
características del desarrollo de WebApps y un conjunto de importantes tecnologías
habilitadoras. (PRESSMAN, 2005)
Proceso.
Los modelos de procesos IWeb adoptan las filosofías de desarrollo ágil. El

desarrollo ágil enfatiza un enfoque de desarrollo riguroso que incorpora rápidos ciclos
de desarrollo. Aún cuándo rápidos ciclos de tiempo dominan la reflexión acerca del
desarrollo, es importante reconocer que el problema todavía debe analizarse, debe
desarrollarse un diseño, la implementación debe proceder en una forma incremental
y se debe iniciar un enfoque organizado de prueba. (PRESSMAN, 2005)
Métodos.
El panorama de los métodos de IWeb abarca un conjunto de labores técnicas

que permiten al ingeniero web comprender, caracterizar y luego construir una
WebApp de alta calidad.
 Métodos de comunicación: Definen el enfoque con que se facilita la

comunicación entre ingenieros web y los demás participantes de la WebApp.
Las técnicas de comunicación son particularmente importantes durante la
recolección de requisitos y siempre que sea evaluado un incremento en la
WebApp.
22
 Métodos de análisis de Requisitos: Proporcionan una base para

comprender el contenido que entregará una WebApp, la función que
proporcionará al usuario final y los modos de interacción de cada clase de
usuario requerirá mientras ocurra la navegación por medio de la WebApp.
 Métodos de diseño: Abarcan una serie de técnicas de diseño que abordan el

contenido, la aplicación y la arquitectura de información así como el diseño de
interfaz y la estructura de navegación de la WebApp.
 Métodos de prueba: Incorpora revisiones técnicas formales tanto del
contenido y el modelo de diseño como de una amplia variedad de técnicas de

prueba que abordan conflictos a nivel de componente y arquitectónicos,
pruebas de navegación, pruebas de facilidad de uso, pruebas de seguridad y
pruebas de configuración. (PRESSMAN, 2005)
Herramientas y tecnología.
A lo largo de la década pasada a evolucionado un amplio conjunto de

herramientas y tecnologías conforme las WebApp se han vuelto más complejas y
extendidas. Dichas tecnologías abarcan un amplio conjunto de descripción de
contenido y lenguajes de modelación (por ejemplo, HTML, VRML, XML), lenguajes
de programación, recursos de desarrollo basados en componentes, navegadores,
herramientas multimedia, herramientas de autoría de sitios, herramientas de
conectividad de bases de datos, herramientas de seguridad, servidores y utilidades
de servidor, y herramientas de administración y análisis de sitio. (PRESSMAN, 2005)
23
4.11 El proceso de la ingeniería Web
Los atributos de los sistemas y aplicaciones basados en web tienen una

profunda influencia sobre el proceso de ingeniería web que se elija. Sin la inmediatez
y la evolución continua son atributos principales de una WebApp, un equipo de
ingeniería web debe elegir un modelo de proceso ágil que produzca liberaciones de
WebApp a un ritmo vertiginoso.
La intensa naturaleza de las aplicaciones de la red en este dominio sugiere

una diversa población de usuarios y una arquitectura de aplicación que puede ser
altamente especializada. (PRESSMAN, 2005)
4.11.1 Definición del marco de trabajo
La efectividad de cualquier proceso de ingeniería depende de su

adaptabilidad. Esto es, la organización del equipo de proyecto, los modos de
comunicación entre miembros del equipo, las actividades de ingeniería y las tareas
que deben realizarse, la información que se recolecte y cree, y los métodos
empleados para producir el producto de alta calidad debe estar adaptados a la gente
que realiza el trabajo, el plazo y las restricciones del proyecto, y al problema que se
quiera resolver.
Comunicación con el cliente. Dentro del proceso IWeb, la comunicación con

el cliente se caracteriza por medio de dos grandes tareas: el análisis del negocio y la
formulación. El análisis del negocio define el contexto empresarial- administrativo
para la WebApp. La formulación es una actividad de recopilación de requisitos que
involucra todos los participantes. El intento es describir el problema que la WebApp
habrá de resolver con el aprovechamiento de la mejor información disponible.
24
Planeación. Se crea el plan del proyecto con el incremento de la WebApp. El

plan consiste de una definición de tareas y un calendario de clases respecto al
periodo proyectado para el desarrollo del incremento de la WebApp.
Modelado. Las labores convencionales de análisis y diseño de ingeniería del

software se adaptan al desarrollo de la WebApp., se mezclan y luego se funden en la
actividad de modelado IWeb.
Construcción. Las herramientas y la tecnología IWeb se aplican para

construir la WebApp que se ha modelado.
Despliegue. La WebApp se configura para su ambiente operativo, se entrega

a los usuarios finales y luego comienza un periodo de evaluación. La
retroalimentación acerca de la evaluación se presenta al equipo IWeb y el
incremento se modifica conforme se requiera. (PRESSMAN, 2005)
4.12 Formulación y planeación para IWeb
A pesar de las declaraciones radicales de que la web representa un nuevo

paradigma definido por reglas nuevas, los desarrolladores profesionales se están
dando cuenta de que las lecciones acerca del desarrollo de software, aprendidas en
los días previos al internet todavía se aplican. Las páginas Web son interfaces de
usuario, la programación HTML, es programación, y las aplicaciones desplegables en
el navegador son sistemas de software que pueden beneficiarse de los principios
básicos de la ingeniería Web.
Entre los principios fundamentales de la ingeniería de software destaca el de:

comprender el problema antes de comenzar a resolverlo, y estar seguro de que la
solución concebida es aquella que la gente realmente quiere. Esta es la base de la
formulación, la primera gran actividad en la ingeniería Web. (PRESSMAN, 2005)
25
4.12.1 Formulación de sistemas en Web
La formulación de sistemas y aplicaciones basados en web representa una

secuencia de acciones de ingeniería web que comienza con la identificación de las
necesidades del negocio, se mueve hacia la descripción de los objetivos de la
WebApp, define grandes características y funciones y realizan la recopilación de
requisitos que conduce al desarrollo de un modelo de análisis. La formulación
permite que los clientes y el equipo de ingeniería web establezcan un conjunto
común de metas y objetivos para la construcción de la WebApp. La formulación se
enfoca sobre el “gran cuadro”: en las necesidades y objetivos del negocio y en la
información relacionada. (PRESSMAN, 2005)
a. Recopilación de requisitos.
Los métodos para la recopilación de requisitos, los objetivos globales de la

recopilación de requisitos propuestos para la ingeniería de software permanecen
inalterados.
 Identificar requisitos de contenido.
 Identificar requisitos funcionales.
 Definir escenarios de interacción para diferentes clases de usuarios.

(PRESSMAN, 2005)
b. Análisis de la información recopilada.
El objetivo es desarrollar listas de objetos de contenido, operaciones que se

aplican a los objetos de contenido dentro de una transacción de usuario específica,
funciones que la WebApp proporciona a los usuarios finales, y otros requisitos no
funcionales que se advierten durante las actividades de comunicación. (PRESSMAN,
2005)
26
c. Desarrollo de casos de uso.
Los casos de uso describen como interactuará con la WebApp una categoría
de usuario específica (llamada actor) para lograr una acción específica. La acción
puede ser tan simple como adquirir contenido definido, o tan compleja como el
usuario realice un análisis detallado de registros seleccionado que se mantiene en
una base de daros en línea.
Los casos de uso 1) ayudan al desarrollador a entender como perciben los

usuarios su interacción con la WebApp; 2) proporcionan el detalle necesario para
crear un modelo de análisis efectivo; 3) ayudan a dividir en compartimientos el
trabajo de IWeb; y 4) ofrecen una guía importante para quienes deben probar la
WebApp. (PRESSMAN, 2005)
d. Medición para web y WebApps.
Los ingenieros web desarrollan sistemas complejos y, al igual que otros

tecnólogos que realizan esta tarea, deben usar mediciones para mejorar el proceso
de ingeniería web y el producto. La medición de ingeniería Web, si se caracteriza de
manera adecuada, podría lograr todos estos beneficios y también mejorar la facilidad
de uso, el desempeño de la WebApp y la satisfacción del usuario.
En el contexto de ingeniería Web, las mediciones tienen tres metas

principales:
1. Proporcionar un indicador de la calidad de la WebApp desde el punto de

vista tecnológico.
2. Proporcionar una base para la estimación del esfuerzo.
3. Proporcionar una indicación del éxito de la WebApp desde el punto de vista

empresarial. (PRESSMAN, 2005)
27
4.12.2 Modelado de análisis para aplicaciones web
Los sitios Web, por lo general, son complejos y enormemente dinámicos.

Requieren fases de desarrollo cortas con la finalidad de tener listo el producto y
ejecutarlo rápidamente. Con frecuencia, los desarrolladores van directo hacia la fase
de codificación sin comprender que están tratando de construir o como quieren
construirlo. La codificación respecto del servidor con frecuencia se hace ad hoc, las
tablas de bases de datos se agregan conforme se necesitan y la arquitectura
evoluciona en una forma a veces no intencional. (PRESSMAN, 2005)
4.12.2.1 Requisitos para el análisis de las WebApps

El análisis de requisitos para las WebApps abarca tres grandes tareas:
Formulación, recopilación de requisitos, y modelado de análisis. Durante la
formulación se identifica la motivación (metas) y los objetivos básicos para la
WebApp, y también se define las categorías de usuario. Los requisitos de contenido
y funcionales se enlistan y se desarrollan los escenarios de interacción (casos de
uso) descritos desde el punto de vista del usuario final.
La jerarquía de usuario. Las categorías de usuario finales que interactuarán

con la WebApp se identifican como parte de las tareas de formulación y de
recopilación de requisitos. En la mayoría de los casos las categorías de usuario son
relativamente limitadas y no necesitan de representación UML.
Desarrollo de casos de uso. Los casos de uso se desarrollan par cada

categoría de usuario descrita en la jerarquía de usuario. En el contexto de ingeniería
Web, el caso de uso en sí mismo es relativamente informal: un párrafo narrativo que
describe una interacción específica entre un usuario y la WebApp. (PRESSMAN, 2005)
28
4.12.2.2 El modelado de análisis para WebApps

El modelado de análisis para una WebApp se basa en la información que
contienen los casos de uso desarrollados para la aplicación. Las descripciones de los
casos de uso se analizan gramaticalmente para identificar potenciales clases de
análisis y las operaciones y atributos asociados con cada clase. Se identifica el
contenido que presentará la WebApp y se extraen las funciones que se desarrollarán
a partir de las descripciones de caso de uso.
 Análisis de contenido: Identifica todo el espectro del contenido que ofrecerá la

WebApp. El contenido incluye texto, gráficas e imágenes, así como datos de
video y audio.
 Análisis de interacción: describe como interactúa el usuario con la WebApp.
 Análisis de funciones: Define las operaciones que se aplicarán al contenido de

la WebApp y describe otras funciones de procesamiento, independientes del
contenido pero necesarias para el usuario final.
 Análisis de configuración: Describe el ambiente y la infraestructura en la que

reside la WebApp.
El modelo en sí mismo contiene elementos estructurales y dinámicos. Los

elementos estructurales identifican las clases de análisis y los objetos de contenido
que se requieren para crear una WebApp que satisfagan las necesidades de los
clientes. (PRESSMAN, 2005)
29
4.12.2.3 Modelo de contenido

Contiene elementos estructurales que proporcionan una importante visión de
los requisitos de contenido para una WebApp. Dichos elementos estructurales
incluyen objetos de contenido (por ejemplo: texto, imágenes, graficas, fotografías,
imágenes de video, audio) que se presentan como parte de la WebApp. Además,
este modelo incluye todas las clases de análisis: entidades visibles para el usuario
que se crea o manipulan conforme éste interactúa con la WebApp.
Definición de objetos de contenido. Las aplicaciones Web presentan

información preexistente -llamada a contenido recursiva- a un usuario final. El tipo y
forma de contenido abarca un amplio espectro de elaboración y complejidad. El
contenido puede desarrollarse antes de la implementación de la WebApp, mientras
que esta se construye mucho después de que la WebApp se encuentra en
operación. Un objeto de contenido puede ser una descripción textual de un producto,
un artículo que describe un evento noticioso, una fotografía de acción tomada en un
cotejo deportivo, etc.
Los objetos de contenido se extraen de los casos de uso al examinar la

descripción del escenario para referencias directas e indirectas al contenido.
(PRESSMAN, 2005)
4.12.2.4 El modelo de interacción

Lo componen cuatro elementos: 1) casos de uso, 2) diagramas de secuencia,
3) diagramas de estado, y 4) prototipo de interfaz de usuario.
Casos de uso. Los casos de uso son el elemento dominante del modelo de
interacción para las WebApps.
30
Diagrama de secuencia. Los diagramas de secuencia ofrecen una

representación abreviada de la forma en la cual las acciones del usuario (los
elementos dinámicos de un sistema que definen los casos de uso) colaboran con las
clases de análisis (los elementos estructurales de un sistema que definen los
diagramas de clase).
Diagramas de estado. El diagrama de estado UML ofrece otra representación

del comportamiento dinámico que la WebApp conforme sucede una interacción.
Prototipo de la interfaz de usuario. La plantilla de la interfaz de usuario, el

contenido que presenta, los mecanismos de interacción que implementa y la estética
global de las conexiones usuario-WebApp, tienen mucho que ver con la satisfacción
del usuario y aceptación global de la WebApp. (PRESSMAN, 2005)
4.12.2.5 Modelo funcional

Aborda dos elementos de procesamiento de la WebApp y cada uno representa
un grado diferente de la abstracción de procedimiento:
1. Funcionalidad observable respecto al usuario y que entrega al usuario final

la WebApp, comprende cualesquiera funciones d procesamiento que el
usuario inicia directamente. Dichas funciones en realidad puede
implementarse mediante operaciones dentro de las clases de análisis pero
desde el punto de vista del usuario final, la función es el resultado visible.
2. Las operaciones dentro de las clases de análisis que implementan

comportamientos asociados con la clase, dichas operaciones manipulan
atributos de la clase y están involucradas como clases que colaboran entre
sí para lograr algún comportamiento requerido. (PRESSMAN, 2005)
31
4.12.2.6 El modelo de configuración

Las WebApp se deben diseñar e implementar de forma que se acomoden a
una diversidad de ambiente, tanto en lado del servidor como en clientes. La WebApp
puede recibir en un servidor que proporcione acceso vía Internet, una intranet o una
extranet. Se deben especificar el hardware del servidor y el ambiente del Sistema
Operativo. Además, se deben considerar aspectos de interoperabilidad en el lado del
servidor.
Si la WebApp debe tener acceso a una gran base de datos o interoperar con
las aplicaciones corporativas existentes en el lado del servidor, se deben especificar
las interfaces apropiadas los protocolos de comunicación y la información
complementaria necesaria. El software del lado del cliente proporciona la
infraestructura que permite el acceso a la WebApp desde la ubicación del usuario.
(PRESSMAN, 2005)
4.12.2.7 Análisis relación-navegación

“La navegación” no solo es la acción de saltar de página a página, sino la idea
de moverse a través de un espacio de información. El análisis relación-navegación
(ARN) proporciona una serie de pasos de análisis que luchan por identificar
relaciones entre los elementos descubiertos como parte de la creación del modelo de
análisis:
El ARN proporciona a los analistas de sistemas una técnica sistemática para

determinar la estructura de relación de una aplicación, lo que les ayuda a descubrir
las relaciones potencialmente útiles en los dominios de la aplicación y que se pueden
implementar como vínculos más adelante.
El enfoque ARN se organiza en 5 pasos:
32
 Análisis de los participantes: identifica las diversas categorías de usuario y

establece una apropiada jerarquía de participantes.
 Análisis de elementos: identifica los objetos de contenido y los elementos

funcionales de interés para los usuarios finales.
 Análisis de relaciones: describe las relaciones entre los elementos WebApp.
 Análisis de navegación: examina como los usuarios pueden acceder a

elementos individuales o grupos de elementos.
 Análisis de evaluación: considera temas pragmáticos (costo/beneficio)
asociados con la implementación de la relación definidas con anterioridad.

(PRESSMAN, 2005)
4.12.3 Modelado de diseño para aplicaciones web
Durante la primera década del desarrollo web, la idea artística fue el enfoque
que eligieron muchos desarrolladores. El diseño ocurrió en una forma ad hoc y
usualmente está dirigido conforme se generaron el HTML. El diseño evolucionó de
una visión artística que en sí misma evolucionó conforme ocurrió la construcción de
la WebApp. (PRESSMAN, 2005)
Diseño y calidad de una WebApp.
a. Diseño es la actividad de ingeniería que conduce un producto de gran

calidad. La percepción del usuario de lo que esa “bueno” (y la resultante
aceptación o rechazo de la WebApp como consecuencia) puede ser más
importante que cualquier discusión técnica de la calidad de la WebApp. Las
características generales de la calidad de software más relevantes son:
facilidad de uso, funcionalidad, confiabilidad, eficiencia y facilidad de
mantenimiento, que conduce a WebApps de gran calidad. (PRESSMAN, 2005)
33
Comprensibilidad global del sitio

Fácil de uso
Caracterización de la interfaz y estética
Características especiales
Capacidades de búsqueda y recuperación
Características de navegación y visualización

Funcionalidad Características de la aplicación real.
Calidad de la Correcto procesamiento de vínculos

aplicación
Web Confiabilidad Recuperación de errores
Validación y recuperación de entrada de usuario
Desempeño en tiempo de respuesta
Eficiencia Rapidez de generación de Portal
Rapidez de generación de gráficos
Fácil de corregir
Facilidad de
Adaptabilidad
mantenimiento
Extensibilidad
Ilustración 4 Árbol de requisitos de calidad
b. Seguridad. La medida clava de la seguridad es la habilidad de la WebApp

y su ambiente de servidor de rechazar el acceso no autorizado e impedir
un franco ataque malévolo.
c. Disponibilidad. Es la medida del porcentaje del tiempo que una WebApp

está disponible para usarla.
d. Escalabilidad. Es la facilidad con que la WebApp y su ambiente de

servidor pueden escalar para manejar 100, 1000, 10000 o 100000
usuarios.
34
e. Tiempo en el mercado. La primera WebApp en el mercado usualmente

captura un número desproporcionado de usuarios finales. (PRESSMAN, 2005)
Metas de diseño.
a. Simplicidad. Existe una tendencia entre algunos diseñadores a

proporcionar al usuario final “demasiado”: exhaustivo, efectos visuales
extremos, animación entrometida, enormes páginas web, es mejor luchar
por la moderación y la simplicidad.
b. Consistencia. Se aplica virtualmente a cada elemento del modelo de

diseño, el contenido se debe construir de manera consistente. El diseño
gráfico (estética) debe presentar una apariencia consistente en todas las
partes de la WebApp. El diseño arquitectónico debe establecer plantillas
que conduzcan a una estructura Hipermedia consistente. El diseño de
interfaz debe definir modos consistentes de interacción, navegación y
despliegue de contenido.
c. Identidad. La estética, la interfaz y el diseño de navegación de una

WebApp deben ser consistentes con el dominio de la aplicación para la
cual se va a construir. La arquitectura de WebApp será completamente
diferente, las interfaces se construirán para acomodar diferentes categorías
de usuario, la navegación estará organizada para lograr diferentes
objetivos.
d. Robustez. Con base en la identidad establecida, usualmente una WebApp

hace una “promesa” implícita al usuario. El usuario espera contenido y
funciones robustas que sean relevantes para sus necesidades.
35
e. Navegabilidad. Ya se ha señalado que la navegación debe ser simple y

consistente. También debe estar diseñada de modo que sea intuitiva y
predecible; esto es, el usuario debe entender cómo moverse por la web sin
tener que buscar vínculos o instrucciones de navegación.
f. Apariencia visual. De todas las categorías de software, las aplicaciones

web son incuestionables las más visuales, las más dinámicas y sin duda
las más estéticas.
g. Compatibilidad. Una WebApp se utilizará en una diversidad de ambientes
(por ejemplo, diferentes equipos, tipos de conexión a internet, sistemas

operativos, navegadores) y se debe diseñar para que sea compatible con
cada uno. (PRESSMAN, 2005)
4.13 Pirámide de diseño IWeb
El diseño conduce a un modelo que contiene la mezcla adecuada de estética,

contenido y tecnología. La mezcla variará dependiendo de la naturaleza de la
WebApp, y, como consecuencia, las actividades de diseño también variarán.
Diseño
de la
Interfaz
Diseño estético
Diseño de contenido
Diseño de navegación
Diseño arquitectónico
Diseño de componentes
Ilustración 5 Pirámide de diseño para la Ingeniería Web.
36
4.14 Diseño de la interfaz de la WebApp
Toda interfaz de usuario debe presentar las siguientes características: fácil de

usar, fácil de aprender, fácil de navegar, intuitiva, consistente, eficiente, libre de
errores y funcional. Debe ofrecer al usuario final una experiencia satisfactoria y
gratificante. Los conceptos, principios y métodos de diseño de la interfaz brindan al
ingeniero web las herramientas requeridas para lograr esta lista de atributos.
(PRESSMAN, 2005)
4.14.1 Principios y directrices del diseño de interfaz
Bruce Tognozzi [TOG01] define un conjunto de características fundamentales

que deben presentar todas las interfaces y, al hacerlo, establece una filosofía que
debe seguir todo diseñador de interfaz de WebApp:
Las interfaces efectivas son visualmente aparentes e indulgentes, e implantan

en sus usuarios una sensación de control. Las interfaces efectivas no preocupan al
usuario con los trabajos internos de la computadora. El trabajo se guarda de manera
cuidadosa y continua, con la opción total de que el usuario deshaga cualquier
actividad en cualquier tiempo. Las aplicaciones y servicios efectivos realizan un
máximo de trabajo mientras demandan un mínimo de información a los usuarios.
(PRESSMAN, 2005)
4.14.2 Mecanismos de control de la interfaz
Los objetivos de la interfaz de una WebApp son 1) establecer una ventana

consistente con el contenido y la funcionalidad que proporciona, 2) guiar al usuario a
través de una serie de interacciones con la WebApp, y 3) organizar las opciones de
navegación y el contenido disponible para el usuario. Las opciones de navegación
las implementa el diseñador seleccionando de entre varios mecanismos de
interacción:
37
 Menús de navegación: menús clave que mencionen contenido o funcionalidad

clave.
 Iconos gráficos: botón, interruptores e imágenes gráficas similares que

permitan al usuario seleccionar alguna propiedad o especificar una decisión.
Imágenes gráficas: alguna representación gráfica que el usuario pueda
seleccionar y que implemente un vínculo hacia un objeto de contenido o
funcionalidad de la WebApp. (PRESSMAN, 2005)
4.14.3 Flujo de trabajo en el diseño de la interfaz
Una vez que se han identificado las tareas del usuario, se crean y analizan sus
escenarios (casos de uso) para definir un conjunto de objetos y acciones de interfaz.
Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño de
la interfaz WebApp.
1. Revisar la información contenida en el modelo de análisis y refinarla

conforme se requiera.
2. Desarrollar un bosquejo aproximado de la plantilla de la interfaz

WebApp.
3. Correlacionar los objetivos el usuario con acciones específicas de la

interfaz.
4. Definir un conjunto de tareas de usuario que estén asociadas con cada

acción.
5. Elaborar bosquejos con imágenes de la pantalla para cada acción de la

interfaz.
6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas

desde el diseño estético.
38
7. Identificar los objetivos de la interfaz de usuario que se requiera para

implementarlo.
8. Desarrollar una representación de procedimiento de la interacción del

usuario con la interfaz.
9. Desarrollar una representación del comportamiento de la interfaz.
10. Describir la plantilla de la interfaz para cada estado.
11. Refinar y revisar el modelo de diseño de la interfaz. (PRESSMAN, 2005)
4.15 Diseño estético
Es llamado también diseño grafico, es un esfuerzo artístico que complementa

los aspectos técnicos de la ingeniería web. El diseño grafico considera cada aspecto
de la presentación y percepción de una WebApp. El proceso de diseño grafico
comienza con la plantilla y procede hacia la consideración de esquemas de color
globales, tipos de fuentes, tamaños y estilos, el uso de medios audiovisuales
complementarios y todos los demás elementos estéticos de una aplicación.
(PRESSMAN, 2005)
4.16 Diseño del contenido
Desarrolla una representación de diseño para los objetos de contenido y

representa los mecanismos que se requieren para que establezcan sus relaciones
uno con otro. Además, el diseño de contenido se ocupa de la representación de la
información dentro de un objeto de contenido específico. Una vez modelados todos
los objetos de contenido, la información que cada objeto entregará debe crearse y
luego formatearse para satisfacer mejor las necesidades del cliente. (PRESSMAN,
2005)
39
4.17 Diseño arquitectónico
Está enlazado con las metas establecidas para la WebApp, el contenido que
se presentará, los usuarios que la visitarán y la filosofía de navegación que se
establezca. El diseño de la arquitectura de contenido se centra en la definición de la
estructura hipermedia global de la WebApp.
El diseño se puede elegir de cuatro diferentes estructuras de contenido.
 Estructuras lineales.
 Estructuras en retícula.
 Estructuras jerárquicas.
 Estructuras en red o “Web pura”.
La arquitectura de WebApp describe una infraestructura que permite a un

sistema o aplicaciones basadas en web lograr sus objetivos de negocios. (PRESSMAN,
2005)
4.18 Diseño de navegación
Una vez establecida la arquitectura de WebApp y la identificación de los

componentes, el diseñador debe definir las rutas de navegación que habiliten para
los usuarios el acceso al contenido y las funciones de la WebApp. Para lograr esto el
diseñador debe 1) identificar la semántica de navegación para diferentes usuarios del
sitio y 2) definir la mecánica que logra la navegación.
40
El diseño de navegación comienza con una consideración de la jerarquía de

usuario y los casos de uso desarrollados para cada categoría de usuario (actor).
Cada actor puede usar la WebApp de manera un poco diferente y, por tanto tener
diferentes requisitos de navegación. Conforme el diseño se lleva acabo se define la
mecánica de navegación. Entre muchas posibles soluciones están:
 Vinculo de navegación individual.
 Barra de navegación horizontal.
 Columna de navegación vertical.
 Pestañas.
 Mapas de sitio. (PRESSMAN, 2005)
4.19 Diseño a nivel de componentes
Patrones de diseño hipermedia.
Los patrones de diseño aplicados en la Ingeniería Web abarcan dos grandes

clases:
1) patrones de diseño genérico que son aplicables a todos los tipos de

software
2) patrones de diseño hipermedia que son específicos de la WebApp. En el

contexto de los sistemas basados en Web German y Cowan sugieren las siguientes
categorías de patrones:
 Patrones arquitectónicos.
 Patrones de construcción y componentes.
41
 Patrones de navegación.
 Patrones de presentación.
 Patrones de interacción comportamiento/usuario. (PRESSMAN, 2005)
4.20 Prueba de conceptos para WebApp
Dimensiones de calidad.
La calidad se incorpora en una aplicación Web como consecuencia de un

buen diseño. Se evalúa al aplicar una serie de revisiones técnicas que valoran varios
elementos del modelo de diseño y al aplicar un proceso de prueba. Dimensiones de
calidad:
 El contenido se evalúa tanto en el ámbito sintáctico (ortografía, puntuación y

gramática se valoran para los documentos basados en texto) como semántico
(se valoran la exactitud de la información presentada, la consistencia y la falta
de ambigüedad).
 La función se prueba para descubrir errores que indiquen que no hay

concordancia con los requisitos del cliente.
 La estructura se valora para asegurarse de que entrega adecuadamente

contenido y función de la WebApp.
 La navegabilidad se pone a prueba para garantizar que toda la sintaxis y
semántica de navegación se ejercen para descubrir cualquier error de
navegación.
 La compatibilidad se prueba al ejecutar la WebApp en varias configuraciones

huésped.
42
 La seguridad se prueba al valorar las vulnerabilidades potenciales e intentar

explotar cada una de ellas.
Los procesos de prueba para ingeniería Web comienzan con pruebas que
ejercitan el contenido y la funcionalidad de la interfaz que es inmediatamente visible
para los usuarios finales. Conforme se realizan las pruebas, se ejercitan los aspectos
de la arquitectura de diseño y de navegación. (PRESSMAN, 2005)
Prueba de
contenido
U Prueba de
la interfaz
suari
o
Diseño Prueba de
de la navegación
interfaz
Diseño estético
Diseño de contenido
Prueba de
Diseño de navegación componentes
Diseño arquitectónico
Diseño de componentes Prueba de

configuración
Tecnología
Prueba de Prueba de
desempeño seguridad
Ilustración 6. El proceso de prueba.
43
4.21 Prueba del contenido
Combina tanto revisiones como la generación de casos de prueba ejecutables.

La revisión se aplica para descubrir errores semánticos en cualquier objeto de
contenido presentado conforme ocurra la navegación y hallar errores en la
organización o estructura del contenido que se presenta al usuario final.
La prueba de contenido tiene tres objetivos importantes: 1) descubrir errores

sintácticos en los documentos basados en texto, representaciones gráficas y otros
medios audiovisuales, 2) descubrir errores semánticos en cualquier objeto de
contenido presentado conforme ocurra la navegación, y 3) hallar errores en la
organización o estructura del contenido que se presenta al usuario final. (PRESSMAN,
2005)
4.22 Prueba de la interfaz de usuario
La verificación y validación de la interfaz del usuario de una WebApp ocurre

en tres puntos distintos durante el proceso de ingeniería Web. Durante la
formulación y el análisis de requisitos se revisa el modelo de la interfaz para
garantizar que se ajusta a los requisitos del cliente y a otros elementos del modelo de
análisis. Durante el modelo se revisa el modelo de diseño de la interfaz para
garantizar que se han alcanzado los criterios genéricos de calidad establecidos para
todas las interfaces de usuario, y que los conflictos en el diseño de la interfaz
específicos de la aplicación se han abordado adecuadamente. (PRESSMAN, 2005)
4.23 Prueba al nivel de componentes
Son también llamadas pruebas de función, se enfocan sobre un conjunto de

pruebas que intentan descubrir errores en las funciones de la WebApp. Los casos de
prueba al nivel de componentes con frecuencia se alimentan con entrada al nivel de
formularios. Son comunes los siguientes métodos de diseño de casos de prueba.
44
 Partición de equivalencia.
 Análisis de valores límite.
 Pruebas de ruta. (PRESSMAN, 2005)
4.24 Prueba de navegación
El trabajo de probar la navegación es 1) garantizar que todos los mecanismos

que permiten al usuario de la WebApp viajar a través de ella son funcionales, y 2)
validar que cada unidad semántica de navegación (USN) pueda ser alcanzada por la
categoría de usuario adecuada.
La primera fase de la prueba de navegación en realidad comienza durante la

prueba de la interfaz. Los mecanismos de navegación se prueban para asegurar que
cada uno realiza la función que se busca. (PRESSMAN, 2005)
4.25 Prueba de la configuración.
La variabilidad y la inestabilidad de la configuración son factores importantes

que hacen de la ingeniería Web un desafío.
La labor de probar la configuración no es ejercitar toda posible configuración

del lado del cliente. Más bien, es probar un conjunto de probables configuraciones de
los lados del cliente y del servidor para garantizar que la experiencia del usuario será
la misma en todos ellos y para aislar errores que puedan ser específicos de una
configuración particular.
45
5 ALCANCES Y LIMITACIONES
5.1 Alcances
 El Portal permitirá el acceso a la información sobre las boletas de

calificaciones a los alumnos por medio de su número de control.
 Difundirá a toda la sociedad el catalogo de la bibliografía con la que cuenta la

UPN Unidad 242 en su biblioteca.
 Publicará la información Académico-Administrativos de la Universidad

Pedagógica Nacional Unidad 242.
5.2 Limitaciones
 El uso de tecnologías y software con licencia.
 El pago del hospedaje por parte de la institución.
 La adquisición de un servidor para colgar el Portal.
 La continúa capacitación del administrador de la aplicación, para que actualice

la base de datos y las publicaciones del Portal.
46
6 PROBLEMAS A RESOLVER
1. Con la implementación del Portal se tendrá un control automatizado del
proceso Académico Administrativo de la Universidad Pedagógica Nacional
Unidad 242 a través de la Internet.
2. La difusión de la información será veraz, oportuna, concisa y significativa

para la comunidad estudiantil, y para la sociedad en general.
3. Aglomeramiento en servicios escolares.
47
7 DESARROLLO DE ACTIVIDADES
Para la realización de las siguientes actividades se tomó como referencia el
Lenguaje Unificado de Modelado mejor conocido como UML, que sirvió como base
para modelar algunos de los requisitos que se establecieron por el cliente durante la
etapa de planteamiento y formulación apoyado al mismo tiempo de la Ingeniería Web
(IWeb).
7.1 Planteamiento y Formulación
7.1.1 Entrevista con el cliente
Versión 1
En esta actividad se procedió a realizar una entrevista con el Director de la

Universidad Pedagógica Nacional Unidad 242, el Mtro. Daniel Cruz Laureano, con el
propósito de recabar la información, determinando así los requisitos funcionales y de
contenido que forma la estructura del Portal. (VER ANEXO 3).
Versión 2
En esta versión se realizaron algunos ajustes de acuerdo a lo establecido por

la Jefa Administrativa de la institución, sólo se eliminaron algunos componentes del
Portal.
7.1.2 Identificación de necesidades y requerimientos
Versión 1
Para la realización de las siguientes actividades se tomó como referencia el

Lenguaje Unificado de Modelado mejor conocido como UML, que sirvió como base
para modelar algunos de los requisitos que se establecieron por el cliente durante la
etapa de planteamiento y formulación apoyado al mismo tiempo de la Ingeniería Web
(IWeb).
48
Versión 2
En esta fase de las necesidades y requerimientos no se realizaron ajustes, ya

que los establecidos en la etapa de planteamiento y formulación no sufrió
alteraciones.
7.2 Planteamiento y Formulación
7.2.1 Entrevista con el cliente
Versión 1
En esta actividad se procedió a realizar una entrevista con el Director de la

Universidad Pedagógica Nacional Unidad 242, el Mtro. Daniel Cruz Laureano, con el
propósito de recabar la información, determinando así los requisitos funcionales y de
contenido que forma la estructura del Portal. (VER ANEXO 3).
Versión 2
En esta versión se realizaron algunos ajustes de acuerdo a lo establecido por

la Jefa Administrativa de la institución, sólo se eliminaron algunos componentes del
Portal.
7.2.2 Identificación de necesidades y requerimientos
Versión 1
Mediante la actividad anterior y otras técnicas de recopilación de requisitos,

como la observación, se analizaron las respuestas y se llegó a la conclusión, que la
Universidad Pedagógica Nacional Unidad 242 requiere de un Portal para gestionar
los procesos académico-administrativos, el informe de calificaciones, estos a su vez
se integraron los datos académicos del alumnado de la comunidad universitaria.
Estos son algunos de los requerimientos que se establecieron por parte del cliente:
49
 El Portal se diseño con los colores que distinguen a la institución: blanco y

azul, logrando una mejor estética de éste.
 Se manejo el envío de correos electrónicos a los docentes de la institución.
 Se incluyó un catálogo bibliográfico de los libros existentes en la UPN Unidad

242.
 En toda la estructura del Portal aparecen los logotipos que distinguen a la

institución.
 Se incluyó una sección para servicios escolares, que permite al usuario-

alumno conocer sus calificaciones durante el periodo cursado.
 Los alumnos acceden a las calificaciones mediante un password que se les

asigno.
Requerimientos por parte de los desarrolladores:
 Un servidor.
 Software para el diseño y programación del Portal, como lo es la Macromedia

de Dreamweaver, el Sistema Operativo Linux, PHP, MySQL, etc.
 Un espacio dentro de la Institución para trabajar sobre el proyecto.
 Apoyo económico por parte de la Dirección y la Jefatura Administrativa.
Versión 2
No se llevó a cabo ningún cambio ya que en la versión 1, se establecieron

definitivamente las necesidades y requerimientos.
50
7.2.3 Determinar objetivos de la WebApp
Versión 1
Con los análisis anteriores se determinó que el objetivo principal es desarrollar

un Portal para los procesos académico-administrativos de la Universidad Pedagógica
Nacional Unidad 242 de Ciudad Valles, para gestionar el informe de calificaciones, la
integración de los datos académicos y la difusión de la información entre la
comunidad universitaria.
Versión 2
En esta etapa no se replantearon los objetivos del Portal, ya que se

determinaron claramente los objetivos y las metas en la versión anterior.
7.2.4 Recopilación de requisitos
Versión 1
Esta actividad se realizó con el fin de recopilar los requisitos que impone el
cliente: requisitos de contenido, requisitos funcionales, definición de las interacciones
que existen entre los diferentes usuarios y la aplicación, mediante las técnicas
mencionadas anteriormente y realizando diferentes tipos de modelados para tener
una idea clara de lo que se pretende desarrollar. (VER ANEXO 3)
Versión 2
No hubo necesidad de modificar los modelados de análisis realizados en la

versión anterior.
51
7.2.5 Establecer alcances y limitaciones
Versión 1
En mutuo acuerdo entre los desarrolladores y la Universidad Pedagógica

Nacional se establecieron los alcances y limitaciones para no comprometer a los
desarrolladores a realizar trabajos o actividades fuera del lapso programado para el
desarrollo del Portal y además para identificar el contenido que formará parte de
éste.
Versión 2
No se llevaron a cabo cambios en esta actividad por el motivo del tiempo en

que se desarrolló el Portal, además de ser esta etapa una de las más importantes
durante la formulación de todo proyecto.
7.3 Planificación
7.3.1 Análisis de recursos y factibilidad
Versión 1
Se realizó mediante un análisis detallado en el cuál se obtuvieron los

siguientes requerimientos divididos en cuatro categorías:
 El equipo o maquinaria con el que cuenta la Universidad Pedagógica Nacional

Unidad 242 (Factibilidad Técnica).
 El recurso humano disponible y capaz para la manipulación del proyecto

(Factibilidad Operativa).
 Capital actual disponible por parte de la Institución para cubrir los costes que
se generaron durante el desarrollo del proyecto (Factibilidad Económica).
52
 Autorización de requerimientos de los programas, así como las licencias

requeridos para el proyecto que se desarrolló. (Factibilidad Legal).(VER
ANEXO 2)
Versión 2
La Factibilidad quedó establecida en la versión 1 con costos reales, por lo que

no existió modificación.
7.3.2 Análisis de riesgos
Versión 1
En este proceso existieron diferentes tipos de riesgos tales como el tiempo

destinado para el desarrollo del mismo, perdida de hardware por desastres naturales,
etc., éstos amenazaron el plan del proyecto. Por ejemplo, si dicho riesgo se hubiese
vuelto real, es muy probable que la calendarización del proyecto pudiera haberse
modificado y por ende también los costos. Para realizar este análisis se realizaron
una serie de cuestiones y una estimación del riesgo del proyecto. (VER ANEXO 4)
Versión 2
No existió ningún conflicto por parte de la dirección de la institución y

desarrolladores, por lo que las dos partes involucradas estuvieron colaborando en
cada una de las necesidades que surgieron en su momento.
53
7.4 Análisis
7.4.1 Análisis Relación-Navegación
Versión 1
En esta fase se identificaron las relaciones que existen entre la información

que contiene la aplicación con las funciones de procesamiento que el usuario del
Portal inicia directamente.
Esto se llevó a cabo con el propósito de establecer los principales requisitos

para especificar los vínculos de navegación que le permiten al usuario lograr el
propósito de su visita al sitio, de manera que le haga más práctica el cambio de un
contenido hacia otro contenido. (VER ANEXO 5)
Versión 2
Esta actividad no se modificó respecto a la versión anterior ya que se llevó un

análisis detallado para evitar cambios constantemente.
7.4.2 Análisis de Configuración
Versión 1
La página de la Universidad Pedagógica Nacional Unidad 242, se desarrolló

de manera que pueda acoplarse a los diferentes ambientes; tanto del lado del
servidor como de los usuarios de la aplicación.
Los navegadores que se usarán para las pruebas de navegación del Portal de
la UPN Unidad 242 será: Mozilla FireFox e Internet Explorer por ser éstos unos de
los más comunes entre los usuarios. (VER ANEXO 6)
54
Versión 2
En la versión 1 de esta actividad se mencionaron los únicos navegadores

sobre los cuáles se trabajó para llevar a cabo cada una de las pruebas requeridas
por lo que no hubo necesidad de especificar otros.
7.4.3 Análisis Funcional
Versión 1
El análisis funcional representa el grado de abstracción respecto al usuario de

la WebApp, es decir la función de acuerdo a la jerarquía de usuario; las actividades
de cada uno es diferente ya que cada uno realiza diferentes tipos de operaciones.
(VER ANEXO 7)
Versión 2
Esta fase no requirió de nuevos análisis y por ende ajustes, ya que en las
etapas anteriores se especificaron cada uno de los usuarios y operaciones que éstos
ejecutarán.
7.4.4 Análisis de Interacción
Versión 1
En este análisis se procedió a la realización de jerarquías de usuario y

dependiendo de ésta se desarrollaron casos de uso para los usuarios del Portal.
Esto permitió tener una visión más amplia acerca de los objetos de contenido
con los que el usuario querrá trabajar. (VER ANEXO 8, 9 y 10)
55
Versión 2
Se especificaron en la versión 1 cada uno de los usuarios que interactuarán

con el Portal y la manera en que trabajarán con éste, por tal motivo no se realizaron
ajustes en esta fase.
7.4.5 Análisis de Contenido
Versión 1
En esta etapa del análisis se incluyeron los componentes que forman parte de
la aplicación; es decir, imágenes, logotipos de la institución, fotografías, graficas, etc.,
así como también los atributos que los describen.
El contenido bien, puede desarrollarse antes de la implementación del Portal,

mientras éste se encuentra en construcción o mucho después de que el Portal se
encuentre en funcionamiento. (VER ANEXO 11)
Versión 2
No se requirió llevar a cabo un re-análisis de contenido, ya que en la fase de

análisis se especificaron concretamente los requisitos que contiene el Portal.
7.5 Ingeniería
7.5.1 Diseño de componentes
Versión 1
En este proceso se aplicó la ingeniería que es una parte esencial que se llevó
a cabo para el desarrollo del Portal.
En esta apartado del diseño se establecieron los componentes con los que
está estructurado el Portal. (VER ANEXO 12)
56
Versión 2
En esta fase del diseño de componentes existieron modificaciones, ya que se

omitieron y se agregaron algunos componentes, así como la modificación de títulos
en el menú desplegable para dar una mejor presentación.(VER ANEXO 1)
7.5.2 Diseño arquitectónico
Versión 1
En esta actividad se realizó el diseño arquitectónico del Portal, ya que se tiene

una estrecha relación con el contenido que se presenta a los usuarios, además de la
forma de cómo éste navega en el sitio. (VER ANEXO 13)
Versión 2
En esta versión del diseño arquitectónico existieron modificaciones; ya que

como se menciono anteriormente en el diseño de componentes de las
modificaciones que se realizaron en esta, por lo tanto sufre modificaciones en esta
fase de diseño. (VER ANEXO 2)
7.5.3 Diseño de navegación
Versión 1
Se diseñaron diferentes rutas de navegación de manera que se le haga más

fácil al usuario encontrar el contenido que busca, para ello se hizo una
reconsideración de las jerarquías de usuario y los casos de uso establecidos para
cada actor o usuario, estos diseñados anteriormente en el modelo de análisis de
navegación. (VER ANEXO 14)
57
Versión 2
En el diseño de navegacional existieron alteraciones en las rutas de

navegación; se omitieron y se agregaron rutas de acceso, así como también la
modificación de títulos en el menú desplegable. (VER ANEXO 3)
7.5.4 Diseño de contenido
Versión 1
En esta fase se diseñaron los objetos de contenido de los que está compuesto
el Portal; es decir se realizó la representación de la información dentro de un objeto
de contenido específico, así como de la descripción de sus componentes. (VER
ANEXO 15)
Versión 2
Se rediseñaron algunos objetos de contenido en esta fase del diseño, así

como la descripción de los componentes de éstos, con el fin de dar una mejor
apariencia del Portal. (VER ANEXO 4)
7.5.5 Diseño de las bases de datos
Versión 1
Para la realización de la base de datos se procedió a la elaboración de las

tablas, así como los campos que contiene la misma; por otra parte también se
estableció la llave primaria con la que el alumno puede acceder a la base de datos.
(VER ANEXO 16)
Versión 2
Existieron alteraciones en las tablas establecidas en la versión 1, se omitieron

e incrementaron unos campos en las tablas; por otra parte también se descartaron
algunas relaciones que existían entre una tabla y otra. (VER ANEXO 5)
58
7.5.6 Diseño de la interfaz
Versión 1
La interfaz fue una parte esencial para la Universidad Pedagógica Nacional

Unidad 242, ya que en esta se estableció la estructura del Portal, así como los
colores, ubicación de los logotipos, botones, etc. (VER ANEXO 17)
Versión 2
No existieron alteraciones en esta fase del diseño, es decir lo establecido en la

versión 1, acerca de la ubicaron de los logotipos, colores, etc., no sufrió cambios; ya
que las modificaciones solo se realizaron en el menú desplegable.
7.6 Generación de páginas y pruebas
Versión 1
Se procedió en esta fase a la generación de cada una de las páginas que el

cliente solicitó que se agregaran al Portal, para ello se tomaron en cuenta los
requisitos mencionados en la fase de análisis y de diseño de páginas.
Posteriormente se realizaron las siguientes pruebas.
Versión 2
Se generaron e incrementaron algunas páginas que no se establecieron en las

fases de análisis y de diseño.
59
7.6.1 Prueba de configuración
Versión 1
En ésta actividad se evaluaron cada una de las interfaces que se diseñaron en

la etapa de generación de páginas, para ello cada una de éstas se probaron
mediante dos de los navegadores más usados por los usuarios: Internet Explorer y
Mozilla Firefox, con el fin de corregir los errores de presentación de los componentes
y contenidos (imágenes, texto, menús de navegación, color, etc.) de cada una de las
páginas. (VER ANEXO 19)
Versión 2
Como se indico en la versión 1, se evaluaron y probaron en los 2 navegadores

mencionados anteriormente, para poder mostrar la diferencia entre un navegador y
otro. (VER ANEXO 6)
7.6.2 Prueba de componentes
Versión 1
Se centran sobre las funciones del Portal, es decir se llevaron a cabo para
descubrir errores sobre éstas, teniendo, estrecha relación con las pruebas de
navegación y de contenido.
60
Navegadores
Componente Mozilla Internet
Firefox Explorer
Inicio  
Bienvenida  
Convenios X X
Directorio X X
Documentos descargables X X
Unidades UPN  
Carrera LIE  
Carrera LEP  
Carrera LEPEPMI  
Admisión LIE  
Admisión LEP  
Admisión LEPEPMI  
Servicios de Comedor  
Sala de cómputo  
Servicio Social  
Servicios Culturales  
Servicios Escolares  
Publicaciones de Libros X X
Publicaciones de Convocatorias X X
Publicaciones de Revistas X X
Noticias UPN X X
Noticias Culturales X X
Noticias Varios X X
Mapa de sitio  
Biblioteca  
Correo electrónico  
Páginas UPN  
Quejas y sugerencias  
Ilustración 7 Prueba de componentes
61
Versión 2
En esta versión se centran las funciones del Portal, aquí es donde se

muestran los resultados que se generaron con las pruebas de navegación y de
contenido.
Navegadores
Componente Mozilla Internet
Firefox Explorer
Inicio  
Bienvenida  
Convenios  
Directorio  
Documentos oficiales  
Carrera Lic. Intervención Educativa  
Carrera Lic. Educación  
Carrera Lic. Educación Preescolar  
Admisión Requisitos LIE  
Admisión Requisitos LEP  
Admisión Requisitos LEPEPMI  
Sala de Cómputo  
Servicio de Cafetería  
Publicación de Libros  
Publicación de Revistas  
Publicación de Convocatorias  
Noticias Locales  
Noticias Escolares  
Noticias Culturales  
Continúa en la siguiente página
62
…Continúa
Noticias Varios  
Biblioteca  
Consulta de Calificaciones  
Boleta de Calificaciones  
Galería de fotos  
Ilustración 8 Prueba de componentes versión 2
7.6.3 Prueba de navegación
Versión 1
Se llevó a cabo para verificar que todos las opciones que permiten navegar al
usuario final del Portal de la UPN 242 a través de éste, es decir que se encuentre
trabajando correctamente. Los mecanismos de navegación se probaron para
asegurar que cada uno realice la función que debe hacer.
Navegadores
Navegación Mozilla Internet
Firefox Explorer
Inicio  
Bienvenida  
Convenios X X
Directorio X X
Documentos descargables X X
Carrera LIE  
Carrera LEP  
Carrera LEPEPMI  
63
…Continúa
Admisión LIE  
Admisión LEP  
Admisión LEPEPMI  
Servicios de Comedor  
Sala de cómputo  
Publicaciones de Libros X X
Publicaciones de Convocatorias X X
Publicaciones de Revistas X X
Noticias UPN X X
Noticias Culturales X X
Noticias Varios X X
Biblioteca  
Ilustración 9 Prueba de navegación
64
Versión 2
En esta versión se verificaron todas las opciones que permiten al usuario

navegar en el Portal de la UPN 242.
Navegadores
Navegación Mozilla Internet
Firefox Explorer
Inicio  
Bienvenida  
Convenios  
Directorio  
Documentos oficiales  
Carrera Lic. Intervención Educativa  
Carrera Lic. Educación  
Carrera Lic. Educación Preescolar  
Admisión Requisitos LIE  
Admisión Requisitos LEP  
Admisión Requisitos LEPEPMI  
Sala de Cómputo  
Servicio de Cafetería  
Publicación de Libros  
Publicación de Revistas  
Publicación de Convocatorias  
Noticias Locales  
Noticias Escolares  
Noticias Culturales  
Noticias Varios  
65
…Continúa
Biblioteca  
Consulta de Calificaciones  
Boleta de Calificaciones  
Galería de fotos  
Ilustración 10 Prueba navegación versión 2
7.6.4 Prueba de contenido
Versión 1
En la prueba de contenido se revisaron pruebas ejecutables del Portal para

descubrir errores semánticos en los objetos de contenido, estructura y organización
presentados, es decir cuándo el usuario esta navegando de una Página a otra.
La prueba de contenido tiene tres objetivos importantes: 1) descubrir errores

sintácticos en los documentos basados en texto, representaciones gráficas y otros
medios audiovisuales 2) descubrir errores semánticos en cualquier objeto de
contenido presentado conforme ocurra la navegación, y 3) hallar errores en la
organización o estructura del contenido que se presenta al usuario final. (PRESSMAN,
2005) (VER ANEXO 19)
Versión 2
En esta prueba de contenido se revisaron las pruebas ejecutables del Portal,

la semántica de los objetos de contenido, estructura y organización presentados, es
decir cuándo el usuario esta navegando de una Página a otra. (VER ANEXO 6)
66
7.6.5 Prueba de la interfaz
Versión 1
Para realización de la prueba de la interfaz ocurrieron distintos puntos

generados en el proceso de la Ingeniería Web; es decir la formulación y el análisis de
los requisitos de la Universidad Pedagógica Nacional, así como la aplicación de la
Métrica Orientada a la Función; estos se revisaron en el modelo de la interfaz, con el
propósito de garantizar los requerimientos y/o necesidades especificados por la
Institución. Además, se revisaron los modelos de diseño para que la UPN242
especificara los criterios establecidos y alcanzados para todas las interfaces que se
usan en el Portal. (VER ANEXO 17 y 18)
Versión 2
En la fase de prueba de interfaz, se replanteo la Métrica Orientada a la

Función; con el propósito de obtener resultados óptimos y concretos en cuanto a las
pruebas y así garantizar un mejor resultado del Portal. (VER ANEXO 6 y 7)
7.7 Evaluación del cliente
7.7.1 Validación del avance
Versión 1
En esta fase la Universidad Pedagógica Nacional Unidad 242 realizó una

inspección del Portal para evaluar aspectos tales como la estructura, organización y
contenido de las Páginas que se requirieron para el desarrollo del Portal.
Versión 2
Se presento a la Universidad Pedagógica Nacional Unidad 242 la presentación

del Portal.
67
7.8 Implementación
7.8.1 Configuración del servidor
Versión 1
Esta actividad se pospuso debido a que la Universidad Pedagógica Nacional

acaba de realizar la compra del servidor y aún no se hace la entrega del equipo, por
lo tanto la configuración se concluirá en la segunda versión de dicha actividad.
Versión 2
Se procedió a la configuración del servidor de marca HP ProLiant ML 110

(G5), se le instaló un Sistema Operativo Linux-Ubuntu y la siguiente paquetería:
 PHP 5
 Apache 2
 Postgresql 8.3
Se eligió Linux para el servidor por los siguientes motivos y se procedió a la

comparación frente al Sistema Operativo Windows:
WINDOWS LINUX
Instalación: Instalación:
 La instalación es mínimamente  No resulta sencillo siempre,
configurable aunque es muy pero permite personalizar
sencillo. totalmente los paquetes que
se quieran instalar.
Software: Software:
68
 Windows al ser el mas fácil de  Linux al tener menos software

usar en las empresas, posee en algunos campos sufre una
una gran cantidad de software. menor aceptación por parte de
La copia y distribución es un las empresas, aunque gracias
delito. a los apoyos de empresas
Shareware: es aquel que tras como Sun Microsystems o
un periodo de prueba es IBM se ha logrado muchos
necesario pagar o comprar. avances. Freeware: permiten
la copia y distribución de
Software.
Robustez:
Robustez:
 En Windows siempre hay que

 Linux se ha caracterizado
reiniciar cuando se cambia la
siempre por la robustez de su
configuración del sistema, se
sistema ya que pueden pasar
bloquea fácilmente cuando
meses e incluso años sin la
ejecuta operaciones
necesidad de apagar o
aparentemente simples por lo
reiniciar el equipo, también si
que hay que reiniciar el equipo.
una aplicación falla
simplemente no bloquea
totalmente al equipo.
Seguridad:
Seguridad:
 Muy poco seguro, existen miles
de virus que atacan sistemas  Extremadamente seguro, tiene
Windows. varios sistemas de protección.

No existen virus para Linux.
Ilustración 11 Comparación de sistemas operativos
69
Además se realizaron comparaciones y se justifica el porque usar Postgresql y

no MySQL, plasmando mediante una tabla las siguientes diferencias de cada
manejador de Base de Datos:
POSTGRESQL MYSQL
 Costo de adquisición bajo o  Lo mejor de MySQL es su

nulo. velocidad a la hora de realizar
las operaciones, lo que le hace
 Cero problemas de licencias.
uno de los gestores que
 Es capaz de ajustarse al ofrecen mayor rendimiento.
número de CPUs y a la
cantidad de memoria que
posee el sistema de forma
óptima, haciéndole capaz de
soportar una mayor cantidad
de peticiones simultáneas de
manera correcta (en algunos
benchmarks se dice que ha
llegado a soportar el triple de
carga de lo que soporta
MySQL).
Ilustración 12 Diferencias entre PostgreSQL y MySQL
70
7.8.2 Webhosting
Versión 1
Se cotizaron algunos Hosting y el que más ventajas y servicios ofrece, de

acuerdo a las necesidades de la UPN 242, tiene un costo anual de $ 2,080.00, por lo
que se procedió a darle informes al cliente sobre los movimientos que se requieren
para efectuar el hospedaje.
Versión 2
De acuerdo a la cotización del Hosting que se realizó en la versión 1, se

procedió a la adquisición de ésta para poder hospedar la página de la Universidad
Pedagógica Unidad 242.
71
8 RESULTADOS
Los resultados que se obtuvieron en el Desarrollo e Implementación del
proyecto son los siguientes:
 El conocimiento y manejo del Software Macromedia Dreamweaver 8,

que se utilizó para el diseño de cada una de las páginas que contiene el
Portal.
 Otra herramienta del que se hizo uso para el diseño del botones,
encabezados, subtítulos de cada página, etc., fue CorelDRAW 12.
 Conocimiento acerca de la instalación y configuración del servidor que

se utilizó para el almacenamiento de la base de datos, así como del
Portal.
 Administración de sitios, esto se realizo para poder accesar de forma

remota de la maquina virtual que es donde se encuentra almacenada el
Portal.
72
9 CONCLUSIONES Y RECOMENDACIONES
Al llevar a cabo la realización de proyecto para la Universidad Pedagógica
Nacional Unidad 242 se llego a lo siguiente:
9.1 Conclusiones
 El desarrollo del Portal siguió las fases de desarrollo del modelo IWeb
conocido como modelo de ingeniería Web.
 El software desarrollado utilizo una metodología orientada a objetos utilizando

el UML como lenguaje de modelado.
 Los requerimientos técnicos, gráficos y de contenidos se recabaron en tiempo

y forma logrando el desarrollo de software con las pruebas pertinentes
desarrolladas en las actividades.
 El desarrollo e implementación del Portal fue creado con las especificaciones

recopiladas y propuestas por la Institución, fueron cumplidas de la forma
adecuada en que se especificaron al inicio del proyecto.
 Se configuró el servidor con un sistema operativo de código abierto (open

source) lo cual garantiza la funcionalidad y no ocasiona problemas con
licenciamiento.
 Se llevaron a cabo las gestiones ante Nic México para la adquisición del .edu
así como el hospedaje en el servidor de Teléfonos de México.
73
9.2 Recomendaciones
 Se recomienda que el servidor en el que se encuentra almacenada el

contenido del Portal no se desconecte la corriente eléctrica, ya que es
necesario que esté disponible para la Web.
 Darle el mantenimiento adecuado al servidor para dar mejor rendimiento.
 También se recomienda que este se encuentre a una temperatura ambiente

ya que podría llegar a ocurrir un fallo.
74
10 BIBLIOGRAFÍA
CASTRO, Elizabeth. HTML 4, cuarta edición., Prentice Hall, PAG. 16
DUBOIS, Paul. MySQL Prentice Hall, Madrid, 2001, pp. 5-48, 383-412, 535-
552
MORRIS, Brouce. HTML avanzado herramientas y trucos para hacer una Web
de primera, Microsoft press, México, 1997, pp. 81-82,522-529
PRESSMAN Roger S. 6ta Edición MC Graw Hill INGENIERIA DEL

SOFTWARE un enfoque práctico, pp. 501-638
SEEN, James A. Análisis y diseño de sistemas de información; segunda

edición, Mc Graw Hill, México, 1992, pp. 116-147
SOMMERVILLE, Ian. Ingeniería de software, sexta edición, Pearson

Educación, México 2002, pp.
SORIA, Ramón. HTML diseño y creación de páginas Web, Ra-Ma, México,

1997
75
11 GLOSARIO
ARQUITECTURA: Conjunto de elementos de programación adecuadamente
estructurados dentro de un sistema, con el fin de crear una programación lógica y
fiable para el diseño de aplicaciones.
ATRIBUTOS: Las propiedades de una etiqueta HTML. Un atributo es un

campo que contiene valores para cada objeto que pertenece a una relación.
BODY: Es el cuerpo de la página, donde va lo que se ve en el navegador al

cargar una web. En el Body van los textos, las imágenes y todos los contenidos de la
web.
BROWSER: Programa utilizado para visualizar las páginas web. Los más
utilizados son el Internet Explorer y Netscape.
CGI: Sistema normalizado de intercambio de datos (protocolo) entre

servidores web y otras aplicaciones.
CSS: Son plantillas que se pueden utilizar para crear documentos HTML y dar
formato a los textos que se presenten en pantalla.
DREAMWEAVER: Programa desarrollado por Macromedia (ahora Adobe)

para diseño, desarrollo, publicación y administración de sitios y aplicaciones Web.
ETIQUETA HTML: HTML, es un lenguaje simple de marcado utilizado para

crear documentos de hipertexto para WWW.
FTP: Protocolo que permite la transferencia de archivos desde ya un servidor

de alojamiento.
HEAD: Define la cabecera del documento HTML, esta cabecera suele

contener información sobre el documento que no se muestra directamente al usuario.
76
HIPERMEDIA: Combinación de los términos “hipertexto” y “multimedia”. Se

refiere a las páginas Web que integran información en distintos tipos de formato:
texto, imágenes, sonidos y video, principalmente.
HOST: Computadora que, mediante la utilización de los protocolos TCP/IP,

permite a los usuarios comunicarse con otros sistemas anfitriones de una red.
HOSTING: Servicio que brindan determinadas empresas que tienen

servidores conectados a Internet, de forma que ofrecen espacio en sus discos para
que usted pueda alojar en el los archivos que componen su sitio web.
HTTP: Es el protocolo de transferencia de hipertexto, o sea el protocolo que

los servidores de World Wide Web utilizan para mandar documentos HTML a través
de Internet.
INTERNET: Es un sistema mundial de redes de computadoras, un conjunto

integrado por las diferentes redes de cada país del mundo, por medio del cual un
usuario en cualquier computadora puede tener acceso a cualquier tipo de
información.
LINUX: Es un sistema operativo, compatible Unix. Dos características muy

peculiares lo diferencian del resto de los sistemas que podemos encontrar en el
mercado, la primera, es que es libre, esto significa que no tenemos que pagar ningún
tipo de licencia a ninguna casa desarrolladora de software por el uso del mismo, la
segunda, es que el sistema viene acompañado del código fuente.
MYSQL: Es un gestor de Bases de Datos multiusuario que gestiona bases de

datos relacionales
PHP: Es un lenguaje de programación interpretado, diseñado originalmente

para la creación de páginas web dinámicas.
77
PORTAL: Un portal de Internet es un sitio web cuyo objetivo es ofrecer al

usuario, de forma fácil e integrada, el acceso a una serie de recursos y de servicios.
POSTGRESQL: Postgresql es un servidor de base de datos relacional

orientada a objetos de software libre, liberado bajo la licencia BSD.
SERVIDOR: Se encarga de proporcionar al navegador los documentos y

medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de
archivos por parte de un navegador.
SISTEMA UNIX: Unix es un sistema operativo robusto, estable, multiusuario,

multitarea, multiplataforma y con gran capacidad para gestión de redes, Linux fue
creado siguiendo estas características.
SITIO: También denominado lugar de la red, para referirnos a cualquier

recurso en la misma, normalmente un servidor donde se ubican cuentas de clientes
con páginas web.
TCP/IP: (Transport Control Protocol/Internet Protocol) Protocolo en el que se

basa la comunicación de la red Internet; el primero se encarga de dividir la
información en paquetes en origen, para luego recomponerla en destino, mientras
que el segundo se responsabiliza de dirigirla adecuadamente a través de la red.
UML: Lenguaje gráfico para especificar, construir, visualizar las partes o

artefactos que son información utilizada y originada mediante un proceso de
software. Es un lenguaje estándar de modelado orientado a objetos.
URL: Es el Localizador Uniforme de Recursos, o dicho más claramente, es la

dirección que localiza una información dentro de Internet.
VINCULO: Conexión que se establece entre páginas web o textos mediante

una referencia insertada.
78
WEB: El término se utiliza para definir el universo del World Wide Web, los
sitios, la información y los servicios de la “telaraña”.
WEBAPP: Se denomina aplicación web a aquellas aplicaciones que los

usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una
intranet mediante un navegador.
WWW: Siglas que corresponden a la frase en inglés World Wide Web y que se
refiere al principal servicio de Internet por medio del cual se agrupan los distintos
sitios o páginas electrónicas.
79
12 ANEXOS
80
ANEXO 2. ESTUDIO DE FACTIBILIDAD

VERSIÓN 1
Se realizó mediante un análisis detallado en el cuál se obtuvieron los

siguientes requerimientos divididos en cuatro categorías:
 El equipo o maquinaria con el que cuenta la Universidad Pedagógica Nacional

Unidad 242 (Factibilidad Técnica).
 El recurso humano disponible y capaz para la manipulación del proyecto (Fac-
tibilidad Operativa).
 Capital actual disponible por parte de la Institución para cubrir los costes que
se generaron durante el desarrollo del proyecto (Factibilidad Económica).
 Autorización de requerimientos de los programas, así como las licencias re-
queridos para el proyecto que se desarrolló. (Factibilidad Legal).
TÈCNICO.
En lo que a este estudio se refiere, la Universidad Pedagógica Nacional
Unidad 242 cubrió las necesidades y/o requerimientos para el desglose de las
actividades de diseño, el desarrollo e implementación del Portal dentro de ésta
institución como lo son:
 Diseño, Desarrollo e Implementación del Portal:

 Equipo dentro del laboratorio de cómputo:
81
UPN REQUERIDO
Cuenta con 15 1 servidor con las
computadoras de siguientes características:
las cuales cada una tiene
por especificaciones
técnicas del CPU:
Sistema: Microsoft Windows Sistema: Sistema
XP Profesional operativo Linux
Versión 2002
Pentium 4 HP ML 110G5
CPU 2.40 GHz Intel E2 160 1.8
Equipo: 80 GB en disco Equipo: GHz, 1GB RAM
duro RED DVD ROM
256 MB de RAM
Monitor Monitor
Teclado Teclado
Mouse Mouse
La institución no contaba con un servidor con las características necesarias

para implementar el proyecto; pero se formuló una cotización del precio total de éste
a los directivos y administrativos llegando a la conclusión de la adquisición del
mismo, de acuerdo a las especificaciones técnicas mencionadas anteriormente por
los desarrolladores.
 La Universidad Pedagógica Nacional Unidad 242 puso a disposición los len-

guajes de programación necesarios para el desarrollo del proyecto que son los
siguientes:
 Linux
 HTML
 Dreamweaver
82
 PHP
 MySQL
Dichos lenguajes fueron facilitados por la Universidad Pedagógica Nacional
Unidad 242 para la elaboración de la Pagina Web.
 Implementación:
 La institución ya cuenta con Internet inalámbrico Prodigy Infinitum, que es
el requerimiento indispensable para poner en marcha el Portal, pero este
servicio contiene limitantes que no satisfacen las necesidades de la institu-
ción, es por esto que se opto por la adquisición de un servicio de Hosting
que ofrece a la UPN mayores beneficios que costo.
 Y en lo que al servidor se refiere la UPN adquirió un servidor con las carac-
terísticas establecidas.
83
OPERATIVA.
Una vez implementado el proyecto, la funcionalidad de éste se lleva a cabo

por el Administrador de la WebApp de la Universidad Pedagógica Nacional Unidad
242; mismo que es el encargado de la mantenibilidad de ésta, refiriéndonos a las
actualizaciones correspondientes que implican el manejo de la información asociados
a la Institución y que se encuentran en constante cambio; por efecto, a él se le brindó
una capacitación previa a la implementación; con un tiempo aproximado de 2 horas
durante 4 días alcanzando un costo total de $1400.00 MN, esto facilitó al
administrador la forma en que se llevan a cabo los reajustes de la información de
manera óptima, obteniendo como derivado un buen manejo administrativo de los
datos que contiene el Portal. La persona encargada de administrar éste; tiene como
compromiso el mantenimiento del mismo, ya que ésta actividad se realiza
constantemente de acuerdo a las necesidades de la Institución.
ECONÓMICA.
Este estudio consistió en el desglose de las actividades que se generaron
durante el desarrollo del proyecto, además se describieron los costos que arrojaron
cada actividad durante su proceso.
En la tabla siguiente se muestran los costos monetarios desglosados de

acuerdo a cada movimiento que se realizo durante el desarrollo del proyecto
arrojando como resultado el costo total referente a las etapas de las que se compone
una Aplicación Web.
84
ACTIVIDADES Días Tarifa Costo

PLANTEAMIENTO Y FORMULACIÓN
Entrevista con el cliente 1 $50.00
Identificación de necesidades y
Requerimientos 1 $50.00
Determinación de objetivos de la
WebApp 1 $50.00
Recopilación de requisitos 2 $100.00
Establecer alcances y limitaciones 1 $50.00 $300.00
PLANIFICACIÓN
Análisis de recursos y factibilidad 3 $200.00
Análisis de riesgos 3 $150.00 $350.00
ANÁLISIS
Análisis relación-navegación 3 $150.00
Análisis de configuración 2 $150.00
Análisis functional 2 $150.00
Análisis de interacción 2 $150.00
Análisis de contenido 3 $150.00 $750.00
INGENIERIA
Diseño de componentes 4 $200.00
Diseño arquitectónico 4 $200.00
Diseño de navegación 5 $250.00
Diseño de contenido 4 $250.00
Diseño de las bases de datos 3 $200.00
Diseño de la interfaz 5 $250.00 $1,350.00
GENERACIÓN DE PÁGINAS Y
PRUEBAS
Generación de las páginas del Portal 60 3,000
85
Prueba de configuración 2 $100.00

Prueba de componentes 2 $100.00
Prueba de navegación 3 $150.00
Pruebas de contenido 3 $150.00
Pruebas de la interfaz 2 $100.00 $3,600.00
EVALUACIÓN DEL CLIENTE
Validación del avance 1 $100.00 $100.00
IMPLENTACIÓN
Configuración del servidor 3
Webhosting 1
DOCUMENTACIÓN
Manual de usuario 3 $200.00
Manual técnico 2 $200.00 $400.00
CAPACITACIÓN
Curso de capacitación 5 $1,500.00 $1,500.00
OTROS GASTOS
Servidor HP ML 110GHz $10,690.00
Hosting /costo anual $2,080.00
Costo de recurso humano $5,000.00
COSTO TOTAL $26,120.00
Considerando que el proyecto que se desarrollo no fue de tipo comercial, sino

académico, la institución sólo aporto el capital necesario para la compra del servidor
y del Hosting; por lo tanto se estima como máximo un costo total de $12,770.00 MN.
86
LEGAL
La seguridad Informática debe vigilar principalmente las propiedades de
Privacidad, Integridad de datos y/o programas, así como la disponibilidad de los
mismos en un ambiente dado.
El problema básicamente está en que no se respeten los derechos de los

autores, usando nuevas tecnologías de una manera inadecuada, por lo cual surgen
problemas como la piratería.
Al llevarse a cabo el desarrollo del proyecto se tomó en cuenta las especifica-

ciones de la adquisición del software requerido para el desarrollo del Portal; es decir
el software necesario para su diseño, así como para la programación del mismo.
87
ANEXO 3. ENTREVISTA
VERSIÓN 1
NOMBRE: Mtro. Daniel Cruz Laureano_____________________________________
PUESTO: Director de la Universidad Pedagógica Nacional Unidad 242____________
FECHA: Martes 26 de Agosto de 2008_____________________________________
OBJETIVO DE LA ENTREVISTA: Recabar los requisitos de contenido y requisitos__

funcionales que estructurarán al Portal._____________________________________
1. ¿Cuáles son las principales necesidades de la UPN Unidad 242 para querer
implementar un Portal?
Dar a conocer la Universidad Pedagógica Nacional de Cd. Valles vía medios_
de comunicación como lo es la Internet._______________________________
2. ¿Quién es la persona que solicita la creación del Portal y que puesto funge en
la institución?
Mtro. Daniel Cruz Laureano, director de la Institución____________________
3. ¿Cuáles son los objetivos que debe cubrir la creación e implementación de

ésta?
Debe de mantener informado a los alumnos y al público en general_________
4. ¿Cuáles son las metas que se deben de cumplir con la implementación del
Portal?
Mantener informado al alumnado sobre el proceso administrativo y eventos de
la misma._______________________________________________________
5. ¿Qué problemas solucionara la aplicación?

La aglomeración en servicios escolares_______________________________
88
6. ¿Qué funciones o tareas se lograrán cuándo se use la página Web de la UPN

Unidad 242?
Informar sobre calificaciones, registros, eventos y convocatorias de carreras_
entre otros._____________________________________________________
7. ¿Quién administrará la página?

C. Celia Rangel Rocha____________________________________________
8. ¿Quién(es) usarán la página Web?

Personal administrativo, docente, alumnado y público en general.__________
9. ¿El personal requerido cuenta con el profesionalismo y experiencia que se re-

quiere para el mantenimiento de la página?
Sí_____________________________________________________________
10. ¿Qué clase de contenido se proporcionará a los usuarios de la página Web?

Cultural, educativo y de información acerca de algunos otros eventos_______
referentes a la institución.__________________________________________
11. ¿La UPN Unidad 242, está dispuesta a cubrir los gastos que se requieran para
el desarrollo e implementación de la página Web?
Sí_____________________________________________________________
12. ¿Alguna otra persona o algún departamento de la institución que podría pro-
porcionar información adicional?
Sí, el departamento de servicios escolares, administrativo y docencia_______
89
ANEXO 4. ANÁLISIS DE RIESGOS

VERSIÓN 1
El riesgo que se considero para el desarrollo del proyecto es el tiempo

destinado para el mismo, pérdida de hardware por desastres naturales, etc., éstos
amenazaron el plan del proyecto. Por ejemplo, si dicho riesgo se hubiese vuelto real,
es muy probable que la calendarización del proyecto pudiera haberse modificado y
por ende también los costos.
Para el análisis del riesgo global del producto se formularon las

siguientes preguntas y una tabla de riesgos:
1. ¿El director del plantel y la jefatura administrativa se han comprometido for-

malmente a apoyar el desarrollo de una página para la UPN Unidad 242?
2. ¿Los desarrollares de la aplicación y la UPN Unidad 242 han definido y enten-

dido el cumplir con los requisitos?
3. ¿Los requisitos que se estipularon para el desarrollo de la aplicación son esta-

bles?
4. ¿Las desarrolladoras de la página cuentan con conocimiento amplio acerca de

las herramientas y tecnologías que están usando?
5. ¿Es adecuado el número de participantes que trabajan sobre el proyecto?
90
ESTIMACIÓN DE RIESGOS DEL PROYECTO
RIESGOS CATEGORIAS PROBABILIDAD IMPACTO
La estimación del TP 50% 2

tamaño de la
aplicación no es la
correcta.
Los usuarios de la CO 20% 1

aplicación se resisten
al uso de éste.
No soporte el número TP 30% 1

de usuarios
(concurrencia)
La fecha de entrega CO 60% 2

del proyecto estará
ajustada.
Los directivos de la CL 30% 1

UPN Unidad 242 no
apoyan el proyecto
económicamente.
Las herramientas y RT 10% 1

tecnologías utilizadas
no sean satisfactorias
con el cliente.
Personal inexperto. PE 40% 1
Definición de nuevos TP 80% 3

requisitos.
Perdida de hardware CL 20% 1

por desastres
naturales.
Falta de propaganda RV 20% 1

adecuada para
difundir por todos los
medios de
comunicación a la
aplicación.
91
ANEXO 5. ANÁLISIS RELACIÓN-NAVEGACIÓN
VERSIÓN 1
En esta fase se identificaron las relaciones que existen entre la información

que contiene la aplicación con las funciones de procesamiento que el usuario de la
página inicia directamente.
Esto se llevó a cabo con el propósito de establecer los principales

requisitos para especificar los vínculos de navegación que le permiten al usuario
lograr el propósito de su visita al sitio, de manera que le haga más práctica el cambio
de un contenido hacia otro contenido.
Para poder realizar un mejor análisis de relación entre el contenido del

sitio se formularon las siguientes cuestiones:
1. ¿Cuál es el contenido que requiere la institución que se muestre en diferentes

ubicaciones dentro de la página UPN Unidad 242?
2. De acuerdo al cuestionamiento anterior, ¿dónde pretende que se coloque la

información solicitada dentro de la página?
3. ¿Qué elementos de la página deben de aparecer siempre en conjunto con

otros elementos que la conforman? ¿cuáles son los otros elementos?
4. ¿Cuáles son los objetos de contenido que siempre deben de aparecer en el

mismo lugar; es decir, misma ubicación de la página?
92
Una vez que se identificaron los elementos que se relacionan, se procedió a

realización de un análisis de navegación que indica la manera en que navega cada
categoría de usuario dentro de la página UPN Unidad 242.
En este análisis se plantearon las siguientes preguntas:
1. ¿Qué información debe ser más fácil de alcanzar respecto a otros elementos
de la página? ¿y en qué orden se deben presentar?
2. ¿Cuál es la información que debe resaltarse para llamar la atención de los

usuarios y lograr que navegue hacia esa dirección?
3. ¿La navegación de un contenido hacia otro, dentro de la página se debe de

realizar por medio de vínculos u otro medio?
4. ¿Debe de estar disponible un mapa o menú de navegación completo, dentro

de cada punto en donde puede interactuar el usuario? ¿o es mejor un simple
vínculo de retroceso?
5. ¿Un usuario puede acceder a todos los elementos, funciones u objetos de

contenido dentro de la aplicación? ¿habrá restricciones para las diferentes
clases de usuario?
93
ANEXO 6. ANALISIS DE CONFIGURACIÓN

VERSIÓN 1
El Portal de la Universidad Pedagógica Nacional Unidad 242, se desarrollo de

manera que es acoplable a los diferentes ambientes; tanto del lado del servidor como
el de los usuarios de la aplicación.
Los navegadores que se usaron para las pruebas de navegación de la página

UPN Unidad 242 fueron:
 Mozilla FireFox. Se está consolidando poco a poco como uno de los mejores
navegadores del mercado y un poderoso competidor del omnipresente Inter-
net Explorer. Una de las ventajas más sobresalientes es la navegación por
pestañas que consiste en abrir pequeñas pestañas dentro del mismo navega-
dor para navegar sin tener que abrir tantas ventanas, es como abrir muchos
archivos de Flash al mismo tiempo, pero más coherente. Firefox ha avanzado
muchísimo en lo que a usabilidad se refiere, es muy intuitivo y para los usua-
rios fanáticos de Internet Explorer les resultara muy fácil migrar a él.
 Internet Explorer. Cuándo se navega con Explorer en cualquier página que

se abra se tiene una peste de igual difusión que el spam, las ventanas emer-
gentes de publicidad. Estas llenan la barra de tareas de basura publicitaria
que no interesan, tales como casinos, porno, cámaras de seguridad y mas
porno, etc.
94
Estos navegadores son los más comúnmente usados por los usuarios por lo
tanto son los que se tomaron para la mejora de la calidad del Portal. El ambiente del
sistema operativo es Linux para el servidor, ya que al trabajar en este ambiente de
sistema es más seguro el alojamiento de la página en cuanto a seguridad de datos,
es decir los datos no están propensos a los diferentes tipos de virus que circulan por
la red.
95
ANEXO 7. ANÁLISIS FUNCIONAL DE LA UPN UNIDAD 242
VERSION 1
Página de
Bienvenida
Categoria Registro Usuario

de usuario externo
Asigna
categoría Consultar
Catálogo Convocatorias
bibliográfico
Usuario Carreras Requisitos

externo que ofrece de admisión
Usuario Consultar Eventos

alumno calificaciones educativos
Usuario
docente
Información de
calificaciones
Avisos
Cerrar
sesión
96
ANEXO 8. ANÁLISIS DE INTERACCIÓN DE LA UPN UNIDAD 242

VERSIÓN 1
Para llevar a cabo los análisis siguientes se procedió a jerarquizar a los

usuarios que visitan o que hacen uso del Portal, obteniendo como resultado:
JERARQUIA DE USUARIOS
USUARIO DE
UPN242Valles.edu
VISITANTE ADMINISTRADOR
DEL SITIO
USUARIO USUARIO USUARIO

DOCENTE ALUMNO EXTERNO
97
CASO DE USO
PARA EL ADMINISTRADOR
Actualizar
Base de datos
Inspeccionar
USUARIO
contenido
ADMINISTRADOR
general
Actualizar contenido
de la página
Este es el caso de uso para la jerarquía de usuario administrador, quien

realiza una inspección del contenido del Portal y decide junto con los directivos de la
UPN Unidad 242 si actualiza la base de datos y el contenido del Portal o bien realizar
ambas tareas.
CASO DE USO PARA USUARIO DOCENTE
Inspeccionar
contenido
general
Realizar avisos
Usuario docente
Ingresar a interfaz de
Capturar Calificaciones
captura de calificaciones
Consultar catalogo
bibliográfico
98
El caso de uso docente, muestra las actividades que realiza este tipo de
usuario, es decir el docente que labora en esta institución.
CASOS DE USO PARA

USUARIO ALUMNO
Inspeccionar Contestar
contenido test
Accesar
USUARIO a página
ALUMNO UPN242
Ingresar a Ingresar
Desplegar
servicios número de
boleta
escolares control
Este caso de uso es aplicado a todos los alumnos inscritos en la Universidad

Pedagógica Unidad 242, son los que tendrán acceso al Portal.
99
CASOS DE USO PARA

USUARIO EXTERNO
Inspeccionar Contestar
contenido test
Visualizar
carreras
que ofrece
Accesar
USUARIO a página
EXTERNO UPN242 Visualizar
requisitos de
admisión
Biblioteca
Servicios
de la UPN242
Otros
En el caso del usuario externo está dirigido a cualquier tipo de persona que
esté dispuesto a visitar el Portal de la Universidad Pedagógica Nacional Unidad 242.
100
ANEXO 9. DIAGRAMA DE SECUENCIA USUARIO ALUMNO
VERSIÓN 1
Usuario
alumno
Página UPN 242 Interfaz de servicios Base de datos Interfaz de
Navegador Valles escolares calif_alumnos Servidor Password calificaciones
Introduce
URL
Se envía URL
Mostrar petición
Visualizar contenido
Selecciona opción del menú
Teclea número de control
Número de control validado
Envía datos
Muestra información
101
ANEXO 10. DIAGRAMA DE SECUENCIA USUARIO ADMINISTRADOR
VERSIÓN 1
Base de Interfaz de Actualizar

Navegador Servidor Password
datos actualización información
Usuario Administrador
Teclea URL
Envía URL
Envía menú
Solicta id
Valida id
Envía el contenido
Envía información
Envía actualizaciones
102
ANEXO 11. MODELO DE CONTENIDO DE LA UPN UNIDAD 242
VERSIÓN 1
Autor
Imágenes
Nombre del
Logotipo libro
Componentes UPN Catálogo de
estructurales libros
Editorial
Fotos
Año de edición
Bienvenida
Nombre Quien lo
publica
Fecha
Eventos A quien va
Académicos dirigido
Lugar Convocatorias
Nombre de la
Hora convocatoria
Fecha
103
ANEXO 12. DISEÑO DE COMPONENTES DEL PORTALDE LA UPN

VERSIÓN 1
¿Qué es la UPN?
Bienvenida Directorio Unidades UPN Convenios Documentos UPN

descargables
Nombre
Puesto que funge
Mostrar () Correo electrónico Mostrar ()
Cerrar () Teléfono Mostrar () Cerrar () Mostrar ()
Regresar () Dirección Cerrar () Regresar () Cerrar ()
Regresar () Regresar ()
Mostrar ()
Cerrar ()
Regresar ()
Admisión
¿Qué estudiar en la UPN?
Licenciaturas
Licenciaturas Especialidades Maestria
Mostrar ()
Mostrar () Mostrar () Mostrar () Cerrar ()
Cerrar () Cerrar () Cerrar () Regresar ()
Regresar () Regresar () Regresar ()
Servicios
Comedor Sala de Cómputo Servicio social Servicios culturales Servicios escolares
Mostrar () Mostrar () Mostrar () Mostrar () Mostrar ()

Cerrar () Cerrar () Cerrar () Cerrar () Cerrar ()
Regresar () Regresar () Regresar () Regresar () Regresar ()
Publicaciones
Libros Revistas Convocatorias
Nombre Nombre Nombre

Autor Año Publicador
Año Mostrar () A quien dirigido
Edición Cerrar () Fecha
Mostrar () Regresar () Mostrar ()

Cerrar () Cerrar ()
104
Noticias UPN
Culturales Escolales Varios

Tipo Tipo Tipo
Publicador Publicador Fecha
Fecha Fecha
Mostrar ()
Mostrar () Mostrar () Cerrar ()
Cerrar () Cerrar () Regresar ()
Biblioteca Correos electrónicos

Catálogo bibliográfico
Correo Maestros Correo UPN’s
Nombre
Autor Nombre Unidad
Año Correo electrónico Dirección
Edición Correo electrónico
Mostrar ()
Mostrar () Cerrar () Mostrar ()
Cerrar () Regresar () Cerrar ()
Buzón de quejas y sugerencias

Mapa de sitio
Quejas Sugerencias
Ubicación
Nombre Nombre
Fecha Fecha
Comentario Sugerencia
Depto. dirigido Depto. dirigido Mostrar ()
Cerrar ()
Mostrar () Mostrar () Regresar ()
Cerrar () Cerrar ()
105
ANEXO 13. DISEÑO ARQUITECTÓNICO DEL PORTAL DE LA UPN
VERSIÓN 1
PRINCIPAL ¿QUE ES LA UPN? CARRERAS

Mapa del sitio Bienvenida Licenciaturas
Biblioteca Directorio Especialidades
Correos electrónicos Unidades UPN Maestrías
Páginas UPN Convenios
Buzón de quejas y Documentos
sugerencias UPN(descargables)
BIBLIOTECA ADMISIÓN SERVICIOS
Catálogo bibliográfico Licenciaturas Comedor

Sala de cómputo
Servicio social
Servicios culturales
Servicios escolares
NOTICIAS CORREOS BUZON DE QUEJAS

ELECTRÓNICOS Y SUGERENCIAS
Escolares
Culturales Correos-Docentes Quejas
Varios Direcciones UPN’s Sugerencias
106
ANEXO 14. DISEÑO NAVEGACIONAL DEL PORTAL DE LA UPN
VERSIÓN 1
INICIO
Mapa de
sitio
¿Qué es la
UPN? Buzón de
quejas y
sugerencias
Áreas Noticias
Carreras Admisión
académicas UPN
Correos
Biblioteca
electrónicos
Documentos Publicaciones
Unidades UPN Quejas Sugerencias
Bienvenida
UPN descargables Licenciaturas
Noticias Noticias
Servicios culturales Correos Direcciones
escolares
maestros UPN
Directorio Convenios Licenciaturas Maestrías
Noticias Catálogo
varios bibliográfico
Comedor
Servicios Servicios
Libros Revistas
culturales escolares
Servicio
social Sala de
cómputo Convocatorias
107
ANEXO 15. DISEÑO DE CONTENIDO DEL PORTAL DE LA UPN
VERSIÓN 1
Bienvenida
Mostrar ()
Cerrar ()
Regresar ()
Descripción de
componente
Descripcióndetexto Fotografíabienvenida Testdemejora Menú Logotipo

Color texto Color texto Color texto Posición logotipo
Estiloborde
Estilo fuente Estilo fuente Estilo fuente tamaño logotipo
Dimensión horizontal
Tamaño texto Tamaño texto Tamaño texto
Dimensión vertical
Espaciadoenlíneas Alineación texto Alineación texto
Color fondo Color fondo Color fondo
Botoneslinks
Color texto
Estilo fuente
Tamaño texto
Alineación texto
Posición botón
Tamaño botón
Color fondo
108
Directorio
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente
Descripcióndetexto Botoneslinks Testdemejora Menú Logotipo

Color texto Color texto Color texto Color texto Posición logotipo
Estilo fuente Estilo fuente Estilo fuente Estilo fuente Tamaño logotipo
Espaciado líneas Tamaño texto Espaciado líneas Tamaño texto
Tamaño texto Alineación texto Tamaño texto Alineación texto
Color fondo Posición botón Color fondo Color fondo
Tamaño botón
Color fondo
UnidadesUPN
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
109
Licenciaturas
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Maestrías
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
110
Servicodecomedor
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
Posición fotografía
AdmisiónLicenciaturas
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
111
Saladecómputo
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
Serviciosculturales
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
112
Interfazdeacceso
Descripciónde-
componente
Mostrar ()
Serviciosescolares Consultar ()
Regresar ()
Cerrar ()
Mostrar ()
Consultar () Botones
Cerrar () Color texto
Texto
Regresar () Estilo fuente
Color texto
Tamaño texto
Estilo fuente
Alineación texto
Espaciado líneas
Posición botón
Tamaño texto
Descripciónde- Tamaño botón
Color fondo
componente Color fondo

Tamaño botón
Color fondo
Fotografía
Estilo borde
Dimensión vertical
113
ANEXO 16. DISEÑO DE LA BASE DE DATOS
VERSION 1
ALUMNO CARRERA
PK matricula PK clavecarrera
apellidopat nombrecarrera
apellidomat plan
nombre FK1 clavemateria
nivel
FK1 clavecarrera
FK3 clavemateria
ASESORES
PK claveasesor
apellidopatase
apellidomatase
MATERIAS nombreasesor
PK clavemateria clavemateria
FK1 clavecarrera
nombremateria
clavecarrera
creditos
FK1 clavecarrera
FK2 matricula
CALIFICACIONES
FK1 matricula
calificacion
observacion
periodo
tipo
FK2 clavemateria
114
ANEXO 17. DISEÑO DE INTERFAZ DEL PORTAL DE LA UPN
VERSIÓN 1
LOGOTIPO
LOGOTIPO
DE LA UPN
UNIVERSIDAD PEDAGÓGICA NACIONAL UNIDAD 242 DE LA
SEGEST
¿QUE ES LA UPN? CARRERAS ADMISION SERVICIOS AREAS ACADÉMICAS PUBLICACIONES NOTICIAS UPN
GRÁFICO
MAPA DEL
SITIO
GRÁFICO
GRAFICO
BIBLIOTECA
CORREOS GÁFICO
ELECTRO-
NICOS
TEXTO DE LA PAGINA INICIAL

PAGINAS
UPN
BUZON DE
QUEJAS Y TEST DE
SUGEREN-
CIAS
MEJORA
DEL
PORTAL
115
ANEXO 18. MÉTRICA ORIENTADA A LA FUNCIÓN

VERSIÓN 1
Parámetros Factor de Ponderación

de
Cuenta $
Simple Medio Complejo
medición
Números de 7 X 3 4 6 = 28
entradas de
usuario
salidas de
usuario
Número de 29 X 3 4 6 = 116
peticiones de
usuario
Número de 3 X 7 10 15 = 30
archivos
Número de 32 X 5 7 10 = 224
interfaces
externas
Cuenta Total 423
PF=423 * [ 0.65 + 0.01 * 6 (Fi) ]

=423 [ 0.65 + 0.01 * 6 (56) ]
= 423 [ 0.66 * 336 ]
= 423 [ 221.76 ]
PF =93804.48
116
ANEXO 19. PRUEBAS DE CONFIGURACIÓN

VERSIÓN 1
Prueba del index.php en Internet Explorer con un Sistema Operativo en

Windows Vista Home:
117
Prueba del index.php en Mozilla Firefox con un Sistema Operativo en Windows

XP Profesional Versión 2002:
118
ANEXO 1. DISEÑO DE COMPONENTES
VERSION 2
UPN 242
Bienvenida Directorio Unidades UPN Convenios Documentos

Oficiales
Nombre
Puesto que funge
Mostrar () Correo electrónico Mostrar ()
Cerrar () Teléfono Mostrar () Cerrar () Mostrar ()
Regresar () Dirección Cerrar () Regresar () Cerrar ()
Mostrar ()
Cerrar ()
Regresar ()
Admisión
Carreras
Licenciaturas
Licenciaturas Maestria
Mostrar ()
Mostrar () Mostrar () Cerrar ()
Cerrar () Cerrar () Regresar ()
Servicios
Cafetería Sala de Cómputo Servicio social Servicios culturales Servicios escolares
Mostrar () Mostrar () Mostrar () Mostrar () Mostrar ()

Cerrar () Cerrar () Cerrar () Cerrar () Cerrar ()
Regresar () Regresar () Regresar () Regresar () Regresar ()
Publicaciones
Libros Revistas Convocatorias
Nombre Nombre Nombre

Autor Año Publicador
Año Mostrar () A quien dirigido
Edición Cerrar () Fecha
Mostrar () Regresar () Mostrar ()

Cerrar () Cerrar ()
119
Noticias UPN
Locales Escolales Culturales Varios
Tipo Tipo Tipo Tipo

Publicador Publicador Publicador Fecha
Fecha Fecha Fecha Mostrar ()
Mostrar () Mostrar () Mostrar () Cerrar ()
Cerrar () Cerrar () Cerrar () Regresar ()
Regresar () Regresar () Regresar ()
Biblioteca Correos electrónicos

Catálogo bibliográfico
Correo Maestros Correo UPN’s
Nombre
Autor Nombre Unidad
Año Correo electrónico Dirección
Edición Correo electrónico
Mostrar ()
Mostrar () Cerrar () Mostrar ()
Cerrar () Regresar () Cerrar ()
Buzón de Quejas
y Sugerencias
Mapa de sitio
Quejas y
Sugerencias Ubicación
Nombre
Fecha h
Comentario
Depto. dirigido Mostrar ()
Cerrar ()
Mostrar () Regresar ()
Cerrar ()
Regresar ()
120
Consulta y Registro
de Calificaciones
Boleta de
Calificaciones
Interfaz del Interfaz del
Administrador Alumno
Mostrar ()
Cerrar ()
Mostrar () Mostrar () Regresar ()
Cerrar () Cerrar ()
Cubo de
Fotos
Cubo fotográfico
Mostrar ()
Cerrar ()
Regresar ()
121
ANEXO 2. DISEÑO ARQUITECTÓNICO
VERSION 2
INICIO UPN 242 CARRERAS
Mapa del sitio Bienvenida Licenciaturas

Biblioteca Directorio Maestrías
Correos electrónicos Unidades UPN
Páginas UPN Convenios
Buzón de quejas y Documentos oficiales
sugerencias
BIBLIOTECA
Consulta y registro de
calificaciones Catálogo bibliográfico
ADMISIÓN SERVICIOS NOTICIAS
Licenciaturas Servicios escolares Locales

Servicio social Escolares
Servicios culturales Culturales
Sala de cómputo Varios
cafetería
CONSULTA Y
CORREOS BUZON DE QUEJAS REGISTRO DE
ELECTRÓNICOS Y SUGERENCIAS CALIFICACIONES
Correos-Docentes Quejas y sugerencias Interfaz de acceso del
Direcciones UPN’s alumno y
administrador.
Boleta de
calificaciones.
GALERÍA Interfaz de ingreso de
FOTOGRÁFICA calificaciones.
Cubo fotográfico
122
ANEXO 3. DISEÑO DE NAVEGACIÓN
VERSION2
Galería Cubo
INICIO fotográfico
fotográfica
Consulta y
registro de
calificacion
Boleta de
calificacion
es
Mapa de
UPN 242 sitio
Ingreso de
calificacion
Noticias Buzón de es
Carreras Admisión quejas y
UPN
Correos sugerencias
Biblioteca
electrónicos
Publicaciones
Interfaz de
Documentos acceso
Unidades
Bienvenida oficiales alumn-
UPN Licenciaturas administrad
or
Noticias
escolares Noticias
Servicios culturales Correos Direcciones
maestros UPN
Directorio Convenios Licenciaturas Maestrías
Noticias
varios
Catálogo
bibliográfico Quejas y
sugerencias
Cafetería
Servicios Servicios Noticias
Libros Revistas
culturales escolares locales
Servicio
social Sala de
cómputo Convocatorias
123
ANEXO 4. DISEÑO DE CONTENIDO
VERSION 2
Bienvenida
Mostrar ()
Cerrar ()
Regresar ()
Descripción de
componente
Descripcióndetexto Fotografíabienvenida Testdemejora Menú Logotipo

Estiloborde
Estilo fuente Estilo fuente Estilo fuente tamaño logotipo
Tamaño texto Tamaño texto Tamaño texto
Dimensión vertical
Espaciadoenlíneas Alineación texto Alineación texto
Color fondo Color fondo Color fondo
Botoneslinks
Color texto
Estilo fuente
Tamaño texto
Alineación texto
Posición botón
Tamaño botón
Color fondo
124
Directorio
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
UnidadesUPN
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
125
Licenciaturas
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Maestrías
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
126
Cafetería
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
AdmisiónLicenciaturas
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
127
Saladecómputo
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
Serviciosculturales
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente

Tamaño botón
Color fondo
Fotografíaservicio
Estilo borde
Dimensión vertical
128
Galería fotográfica
Mostrar ()
Cerrar ()
Regresar ()
Descripciónde-
componente
Botoneslinks Testdemejora Menú Logotipo

Estilo fuente Estilo fuente Estilo fuente Tamaño logotipo
Tamaño texto Espaciado líneas Tamaño texto
Alineación texto Tamaño texto Alineación texto
Posición botón Color fondo Color fondo
Tamaño botón
Color fondo
Fotos diversos
Estilo borde
Dimensión vertical
Interfaz de acceso
alumno-
administrador
Ingresar ()
Cerrar ()
Regresar ()
Descripciónde-
componente
botonesacceso Logotipo
Color texto Posición logotipo
Estilo fuente Tamaño logotipo
Tamaño texto
Alineación texto
Posición botón
Tamaño botón
Color fondo
129
Boleta de
calificaciones
Consultar ()
Cerrar ()
Regresar ()
Descripciónde-
componente
Botonconsulta Logotipo
Tamaño texto
Alineación texto
Posición botón
Tamaño botón
Color fondo
Interfaz de ingreso
de calificaciones
Insertar ()
Guardar ()
Cerrar ()
Descripciónde-
componente
Botonguardar Logotipo
Tamaño texto
Alineación texto
Posición botón
Tamaño botón
Color fondo
130
ANEXO 5. DISEÑO DE LA BASE DE DATOS
VERSION 2
ALUMNO
CARRERA
PK matricula
PK clavecarrera
apellidopat
apellidomat nombrecarrera
nombre FK1 clavemateria
nivel
FK1 clavecarrera
FK3 clavemateria
ASESORES
MATERIAS
PK clavemateria
PK clavemateria
apellidopatase
nombremateria
apellidomatase
clavecarrera
nombreasesor
creditos
CALIFICACIONES
FK1 matricula
calificacion
observacion
periodo
tipo
FK2 clavemateria
promedio
131
ANEXO 6. PRUEBA DE CONFIGURACIÓN
VERSION 2
Prueba del index.php en Internet Explorer con un Sistema Operativo en

Windows Vista Home:
132
Prueba del index.php en Mozilla Firefox con un Sistema Operativo en

Windows XP Profesional Versión 2002:
133
ANEXO 7. METRICA ORIENTADA A LA FUNCIÓN
VERSION 2
Parámetros Factor de Ponderación

De
Cuenta $
Simple Medio Complejo
medición
Números de 10 X 3 4 6 = 40
entradas de
usuario
salidas de
usuario
Número de 31 X 3 4 6 = 124
peticiones de
usuario
Número de 7 X 7 10 15 = 70
archivos
Número de 36 X 5 7 10 = 252
interfaces
externas
Cuenta Total 521

PF = cuenta-total * [0.65 + 0.01 * 6(Fi)]
PF = 521* [0.65 + 0.01 * 6 (Fi)]
= 521 [0.65 + 0.01 * 6 (56)]
= 521 [0.66 * 336]
= 521 [221.76]
PF = 115536.96
134
13 ÍNDICE DE ILUSTRACIONES
Ilustración 1. Organigrama de la UPN Unidad 242. ...............................................9
Ilustración 2. Cuadro comparativo de herramientas.............................................17
Ilustración 3. Modelo PHP. ..................................................................................18
Ilustración 4 Árbol de requisitos de calidad ..........................................................34
Ilustración 5 Pirámide de diseño para la Ingeniería Web. ....................................36
Ilustración 6. El proceso de prueba......................................................................43
Ilustración 7 Prueba de componentes..................................................................61
Ilustración 8 Prueba de componentes versión 2 ..................................................63
Ilustración 9 Prueba de navegación .....................................................................64
Ilustración 10 Prueba navegación versión 2 ........................................................66
Ilustración 11 Comparación de sistemas operativos ............................................69
Ilustración 12 Diferencias entre PostgreSQL y MySQL .......................................70
135
ingeniería, ii, 24, 25, 27, 28, 29, 30, 31, 32, 37, 43, 46, 48,
14 INDICE ANALÍTICO
49, 61, 79
Internet, 1, 5, 6, 12, 13, 14, 15, 22, 23, 35, 51, 59, 64, 65,
A 66, 68, 70
Análisis, iv, v, 30, 32, 33, 35, 36, 48, 56, 57, 58, 59, 60, 81,
91 L
Apache, 73
Linux, 54, 73, 84, 88, 102
B M
BODY, 17, 18, 82
medición, 30, 126, 145
Métrica, 72
C Modelo, 21, 33, 34, 147
Componente, 65, 66 MySQL, ii, 22, 23, 54, 75, 81, 89, 147
Configuración, v, vi, 58, 73, 92

N
D Navegación, v, 58, 68, 69
Datos, 75
desarrollo, 1, 3, 4, 25, 26, 28, 29, 31, 37, 56, 57, 61, 72, O
79, 82, 87, 88, 90, 93, 95, 96, 101
Open Source, 22
Diseño, iii, v, 37, 40, 43, 44, 45, 61, 62, 63, 87, 91, 92
P
F
Portal, i, ii, 3, 4, 5, 6, 13, 14, 15, 18, 21, 50, 51, 52, 53, 54,
funcional, 34, 40, 59
55, 56, 58, 59, 60, 61, 62, 63, 64, 65, 66, 68, 69, 71,
72, 78, 79, 80, 87, 89, 90, 92, 93, 94, 95, 101, 102,
H 105, 106, 107, 108
HEAD, 17, 18, 83 Postgresql, 73, 75, 84
HTML, ii, 12, 14, 16, 17, 18, 19, 20, 21, 26, 28, 37, 81, 82, Proceso, 3, 25
83, 88 Prueba, iii, iv, v, vi, 45, 47, 48, 49, 64, 65, 66, 68, 69, 71,
72, 92, 127, 128, 143, 144, 147
I
R
Implementación, vi, 73, 78, 87, 89
Requerimientos, 54, 91
136
S UPN, 7, 8, 9, 10, 11, 50, 54, 59, 65, 66, 67, 68, 69, 70, 71,
76, 88, 89, 94, 95, 96, 98, 99, 100, 101, 103, 104, 106,
Servidor, 92 111, 112, 115, 117, 118, 125, 147
Sistema, 35, 54, 73 URL, ii, 15, 16, 24, 84
Sitio, ii, 12, 13, 16
Software, 19, 54, 73, 78 W
U Web, i, ii, 1, 5, 6, 12, 13, 15, 17, 19, 20, 23, 24, 25, 27, 28,
29, 30, 31, 32, 33, 40, 44, 45, 46, 48, 49, 52, 72, 79,
UML, 1, 32, 34, 52, 79, 84 80, 81, 82, 83, 85, 89, 90, 95, 147
www, 19, 20, 24
137

Desarrollo de Un Portal Con IWeb

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desarrollo de Un Portal Con IWeb

Uploaded by

Copyright:

Available Formats

DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA

INSTITUTO TECNOLÓGICO DE CD. VALLES

DESARROLLO DE UN PORTAL PARA LOS PROCESOS ACADÉMICO-

GONZÁLEZ MEDINA KARINA GUADALUPE 04690399

ASESOR INTERNO: ASESOR EXTERNO:

2.1 Objetivo general ................................................................................... 3

2.2 Objetivos específicos............................................................................ 3

3 CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ ....................... 4

3.1 Descripción del área de trabajo ............................................................ 4

3.2 Descripción del área de trabajo ............................................................ 5

3.3 Antecedentes de la empresa ................................................................ 6

3.4 Misión ................................................................................................... 8

3.6 Organigrama ........................................................................................ 9

4 FUNDAMENTO TEÓRICO ....................................................................... 10

4.1 Internet y la web ................................................................................. 10

4.2 La World Wide Web............................................................................ 10

4.3 Qué es un Portal................................................................................. 11

4.4 Funciones y objetivos de un Portal ..................................................... 11

4.5 Bloque de construcción HTML ........................................................... 12

4.5.1 Los URL ........................................................................................ 13

4.5.2 Como Diseñar Su Sitio .................................................................. 14

4.5.3 Hojas de estilo............................................................................... 16

4.5.4 Herramientas HTML ...................................................................... 17

4.6 Dreamweaver ..................................................................................... 17

4.7 PHP .................................................................................................... 18

4.8 MySQL ............................................................................................... 19

4.9 Como publicar la página en la Web .................................................... 20

4.9.1 Como conseguir un dominio.......................................................... 21

4.10 Ingeniería web ................................................................................. 22

4.10.1 Estratos de la ingeniería web de WebApp .................................. 22

4.11 El proceso de la ingeniería Web ..................................................... 24

4.11.1 Definición del marco de trabajo ................................................... 24

4.12 Formulación y planeación para IWeb .............................................. 25

4.12.1 Formulación de sistemas en Web ............................................... 26

4.12.2 Modelado de análisis para aplicaciones web .............................. 28

4.12.3 Modelado de diseño para aplicaciones web ............................... 33

4.13 Pirámide de diseño IWeb ................................................................ 36

4.14 Diseño de la interfaz de la WebApp ................................................ 37

4.14.1 Principios y directrices del diseño de interfaz.............................. 37

4.14.2 Mecanismos de control de la interfaz .......................................... 37

4.14.3 Flujo de trabajo en el diseño de la interfaz .................................. 38

4.15 Diseño estético................................................................................ 39

4.16 Diseño del contenido ....................................................................... 39

4.17 Diseño arquitectónico ...................................................................... 40

4.18 Diseño de navegación ..................................................................... 40

4.19 Diseño a nivel de componentes ...................................................... 41

4.20 Prueba de conceptos para WebApp ............................................... 42

4.21 Prueba del contenido ...................................................................... 44

4.22 Prueba de la interfaz de usuario ..................................................... 44

4.23 Prueba al nivel de componentes ..................................................... 44

4.24 Prueba de navegación .................................................................... 45

4.25 Prueba de la configuración.............................................................. 45

5 ALCANCES Y LIMITACIONES ................................................................. 46

5.1 Alcances ............................................................................................. 46

5.2 Limitaciones ....................................................................................... 46

6 PROBLEMAS A RESOLVER .................................................................... 47

7 DESARROLLO DE ACTIVIDADES ........................................................... 48

7.1 Planteamiento y Formulación ............................................................. 48

7.1.1 Entrevista con el cliente ................................................................ 48

7.1.2 Identificación de necesidades y requerimientos ............................ 48

7.2 Planteamiento y Formulación ............................................................. 49

7.2.1 Entrevista con el cliente ................................................................ 49

7.2.2 Identificación de necesidades y requerimientos ............................ 49

7.2.3 Determinar objetivos de la WebApp .............................................. 51