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ÉMICOADMINISTRATIVOS DE LA

UNIVERSIDAD PEDAGÓGICA NACIONAL UNIDAD 242 DE CIUDAD VALLES, S.L.P
LICENCIATURA EN INFORMÁTICA
GONZÁLEZ MEDINA KARINA GUADALUPE RONQUILLO FLORES NETTIE
04690399 04690349
ASESOR INTERNO: ING. ROSA IMELDA GARCIA CHI
ASESOR EXTERNO: C.PRIV. IRMA NORIEGA

IT. CD. VALLES.
INDICE
INTRODUCCIÓN ......................................................................
........................ 1 1 2
JUSTIFICACIÓN .....................................................................
.................... 2
OBJETIVOS .........................................................................
....................... 3 2.1 2.2 3 Objetivo
general ...........................................................................
........ 3 Objetivos
específicos........................................................................
.... 3
CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ ....................... 4 3.1 3.2 3.3

3.4 3.5 3.6 Descripción del área de
trabajo ............................................................ 4 Descripción
del área de trabajo ............................................................ 5
Antecedentes de la
empresa ................................................................ 6
Misión ............................................................................
....................... 8
Visión.............................................................................
....................... 8
Organigrama .......................................................................
................. 9
FUNDAMENTO
TEÓRICO ....................................................................... 10
4.1 4.2 4.3 Internet y la
web ...............................................................................
.. 10 La World Wide
Web............................................................................ 10
Qué es un
Portal.............................................................................
.... 11 i
IT. CD. VALLES.
4.4 4.5
Funciones y objetivos de un
Portal ..................................................... 11 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
4.7 4.8 4.9
Dreamweaver .......................................................................
.............. 17
PHP ...............................................................................
..................... 18
MySQL .............................................................................
.................. 19 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
IT. CD. VALLES.
4.12.2 Modelado de análisis para aplicaciones web .............................. 28

4.12.3 Modelado de diseño para aplicaciones web ............................... 33
4.13 4.14 Pirámide de diseño
IWeb ................................................................ 36 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 4.16 4.17 4.18
4.19 4.20 4.21 4.22 4.23 4.24 Diseño
estético...........................................................................
..... 39 Diseño del
contenido .......................................................................
39 Diseño
arquitectónico ....................................................................
.. 40 Diseño de
navegación ..................................................................... 40
Diseño a nivel de
componentes ...................................................... 41 Prueba de
conceptos para WebApp ............................................... 42 Prueba del
contenido ...................................................................... 44
Prueba de la interfaz de
usuario ..................................................... 44 Prueba al nivel de
componentes ..................................................... 44 Prueba de
navegación .................................................................... 45
iii
IT. CD. VALLES.
4.25 5
Prueba de la
configuración.............................................................. 45
ALCANCES Y
LIMITACIONES ................................................................. 46
5.1 5.2
Alcances ..........................................................................
................... 46
Limitaciones ......................................................................
................. 46
6 7
PROBLEMAS A
RESOLVER .................................................................... 47
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
IT. CD. VALLES.
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
IT. CD. VALLES.
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 9
RESULTADOS ........................................................................
.................. 72 CONCLUSIONES Y
RECOMENDACIONES ............................................ 73 9.1 9.2 10 11 12 13
14
Conclusiones ......................................................................
................ 73
Recomendaciones ...................................................................
........... 74
BIBLIOGRAFÍA ......................................................................
................ 75
GLOSARIO ..........................................................................
.................. 76
ANEXOS ............................................................................
.................... 80 ÍNDICE DE
ILUSTRACIONES ............................................................. 135
INDICE
ANALÍTICO .........................................................................
.... 136
vi
IT.CD. VALLES.
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
IT.CD. VALLES.
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
IT.CD. VALLES.
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
IT.CD. VALLES.
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
IT.CD. VALLES.
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
IT.CD. VALLES.
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 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. Administrativa la Profra. Ma.
6
IT.CD. VALLES.
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
IT.CD. VALLES.
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
3.6 Organigrama
DIRECCIÒN MTRO. DANIEL CRUZ LAUREANO
SUBDIRECCIÒN ACADÈMICA MTRO. JUAN JOSE AMARO VARGAS
JEFATURA ADMINISTRATIVA IRMA NORIEGA
COMISIÒN DE TITULACIÒN MTRO. BLAS LARA BARRON
DEPENDENCIAS DE EDUCACIÒN SUPERIOR
PERSONAL ADMINISTRATIVO Y DE APOYO
SERVICIOS ESCOLARES MA. GRISELDA BARRA
CENTRO DE CÓMPUTO
LICENCIATURA EN EDUCACIÒN PARA EL MEDIO INDIGENA LICENCIATURA EN INTERVENCIÒN
EDUCATIVA MTRO. RAYMUNDO AVALOS PEREZ (Coordinador) LICENCIATURA EN EDUCACIÒN
MAESTRIA EN EDUCACIÒN, CAMPO FORMACIÒN DE DOCENTES Y PRÀCTICA PROFESIONAL. MTRO.
JUAN JOSÈ AMARO VARGAS (Coordinador)
SUBSEDE TAMAZUNCHALE, S.L.P PROFRA. ANGELINA HERNÀNDEZ MENDEZ COORDINADORA
SEDE CD. VALLES MTRO. BLAS LARA BARRÒN COORDINADOR
SUBSEDE RIOVERDE, S.L.P. PROFR. FELIPE MARTINEZ RIVERA COORDINADOR
FUENTE: DIRECCIÓN ADMINISTRATIVA DE LA UPN. Ilustración 1. Organigrama de la UPN

Unidad 242.
9
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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. Probablemente el más popular editor entre los profesionales de la

Web. 300$. Anteriormente GoLive CyberEstudio. El principal competidor de
Dreamweaver.
http://www.macromedia.com/ Software/Dreamweaver; demo disponible.
Adobe GoLive (M, W)
http://www.adobe.com/prodindex /GoLive/main.html; demo disponible.
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
IT. CD. VALLES
 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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
 ¿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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
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
IT. CD. VALLES
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 incremento se modifica conforme se requiera. (PRESSMAN, 2005) el
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
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 aplicación Web
Correcto procesamiento de vínculos
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 Extensibilidad
mantenimiento
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
 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 suari o
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
Prueba de la interfaz
Prueba de navegación
Prueba de componentes
Prueba de configuración Prueba de desempeño Prueba de seguridad
Tecnología
Ilustración 6. El proceso de prueba.
43
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
 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 usuarioalumno 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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
 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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
RESIDENCIA PROFESIONAL Navegadores Mozilla Internet Firefox Explorer    X X X 

           X X X X X X      Ilustración 7 Prueba de componentes  X
X X             X X X X X X     
Componente Inicio Bienvenida Convenios Directorio Documentos descargables 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 Publicaciones de Convocatorias
Publicaciones de Revistas Noticias UPN Noticias Culturales Noticias Varios Mapa de
sitio Biblioteca Correo electrónico Páginas UPN Quejas y sugerencias
61
IT. CD. VALLES
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 Mozilla Internet Firefox Explorer                   
                          
Componente Inicio Bienvenida Convenios Directorio Documentos oficiales Unidades UPN

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 Servicios Escolares Sala de Cómputo Servicio Social Servicios Culturales
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
IT. CD. VALLES
…Continúa
Noticias Varios Mapa de sitio Biblioteca Correo electrónico Páginas UPN Quejas y
sugerencias 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 Mozilla Internet Firefox Explorer    X X X      X X X    
Navegación Inicio Bienvenida Convenios Directorio Documentos descargables Unidades

UPN Carrera LIE Carrera LEP Carrera LEPEPMI
Continúa en la siguiente página 63

IT. CD. VALLES
…Continúa
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
Publicaciones de Convocatorias Publicaciones de Revistas Noticias UPN Noticias
Culturales Noticias Varios Mapa de sitio Biblioteca Correo electrónico Páginas UPN
Quejas y sugerencias         X X X X X X      Ilustración 9 Prueba de
navegación         X X X X X X     
64
IT. CD. VALLES
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 Mozilla Internet Firefox Explorer                   
                            
Navegación Inicio Bienvenida Convenios Directorio Documentos oficiales Unidades UPN

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 Servicios Escolares Sala de Cómputo Servicio Social Servicios Culturales
Servicio de Cafetería Publicación de Libros Publicación de Revistas Publicación de
Convocatorias Noticias Locales Noticias Escolares Noticias Culturales Noticias
Varios
Continúa en la siguiente página
65
IT. CD. VALLES
…Continúa
Mapa de sitio Biblioteca Correo electrónico Páginas UPN Quejas y sugerencias
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
IT. CD. VALLES
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
IT. CD. VALLES
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 Instalación:  La
instalación es mínimamente configurable aunque es muy sencillo. Instalación:  No
resulta sencillo siempre, pero permite personalizar LINUX
totalmente los paquetes que se quieran instalar.
Software:
Software: 68
IT. CD. VALLES
 Windows al ser el mas fácil de usar en las empresas, posee una gran cantidad de
software. La copia y distribución es un delito. Shareware: es aquel que tras un
periodo de prueba es
 Linux al tener menos software en algunos campos sufre una menor aceptación por
parte de las empresas, aunque gracias a los apoyos de empresas como Sun
Microsystems o IBM se ha logrado muchos avances. Freeware: permiten la copia y
distribución de Software.
necesario pagar o comprar.
Robustez:  En Windows siempre hay que reiniciar cuando se cambia la configuración

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

Linux.
Ilustración 11 Comparación de sistemas operativos
69
IT. CD. VALLES
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  Costo de adquisición bajo o nulo.  Cero problemas de
licencias.  Es capaz de de de ajustarse al la que MYSQL  Lo mejor de MySQL es su
velocidad a la hora de realizar las operaciones, lo que le hace uno de los gestores
que
ofrecen mayor rendimiento.
número cantidad
CPUs y a memoria
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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, 535552 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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
12 ANEXOS
80
IT. CD. VALLES
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
(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).  Autorización de requerimientos de los programas, así
como las licencias requeridos 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
IT. CD. VALLES
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 CPU
2.40 GHz 80 GB en disco Equipo: duro 256 MB de RAM Monitor Teclado Mouse HP ML
110G5 Intel E2 160 1.8 GHz, 1GB RAM RED DVD ROM
Equipo:
Monitor Teclado 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 lenguajes de programación necesarios para el desarrollo del proyecto que son
los siguientes:  Linux  HTML  Dreamweaver 82
IT. CD. VALLES
 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 institució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 características establecidas.
83
IT. CD. VALLES
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
IT. CD. VALLES
ACTIVIDADES PLANTEAMIENTO Y FORMULACIÓN Entrevista con el cliente Identificación de

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

contenido Pruebas de la interfaz EVALUACIÓN DEL CLIENTE Validación del avance
IMPLENTACIÓN Configuración del servidor Webhosting DOCUMENTACIÓN Manual de usuario
Manual técnico CAPACITACIÓN Curso de capacitación OTROS GASTOS Servidor HP ML
110GHz Hosting /costo anual Costo de recurso humano COSTO TOTAL
2 2 3 3 2
$100.00 $100.00 $150.00 $150.00 $100.00 $3,600.00
$100.00
$100.00
3 1
3 2
$200.00 $200.00 $400.00
$1,500.00
$1,500.00
$10,690.00 $2,080.00 $5,000.00 $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
IT. CD. VALLES
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 especificaciones 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
IT. CD. VALLES
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
IT. CD. VALLES
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 requiere
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
proporcionar información adicional? Sí, el departamento de servicios escolares,
administrativo y docencia_______
89
IT. CD. VALLES
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

formalmente 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 entendido

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

estables?
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
IT. CD. VALLES
ESTIMACIÓN DE RIESGOS DEL PROYECTO

RIESGOS La estimación del tamaño de la aplicación no es la correcta. Los usuarios
de la aplicación se resisten al uso de éste. No soporte el número de usuarios
(concurrencia) La fecha de entrega del proyecto estará ajustada. Los directivos de
la UPN Unidad 242 no apoyan el proyecto económicamente. Las herramientas y
tecnologías utilizadas no sean satisfactorias con el cliente. Personal inexperto.
Definición de nuevos requisitos. Perdida de hardware por desastres naturales. Falta
de propaganda adecuada para difundir por todos los medios de comunicación a la
aplicación. CATEGORIAS TP PROBABILIDAD 50% IMPACTO 2
CO
20%
TP
30%
CO
60%
CL
30%
RT
10%
PE TP
40% 80%
1 3
CL
20%
RV
20%
1
91
IT. CD. VALLES
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
IT. CD. VALLES
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
IT. CD. VALLES
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
Internet 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 navegador 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 usuarios 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 emergentes 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
IT. CD. VALLES
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
IT. CD. VALLES
ANEXO 7. ANÁLISIS FUNCIONAL DE LA UPN UNIDAD 242 VERSION 1
Página de Bienvenida
Categoria de usuario
Registro
Usuario externo
Asigna categoría
Consultar Catálogo bibliográfico
Convocatorias
Usuario externo
Carreras que ofrece
Requisitos de admisión
Usuario alumno
Consultar calificaciones
Eventos educativos
Usuario docente
Información de calificaciones
Avisos
Cerrar sesión
96
IT. CD. VALLES
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 usuarios que
visitan o que hacen uso del Portal, obteniendo como resultado: a los
JERARQUIA DE USUARIOS
USUARIO DE UPN242Valles.edu
VISITANTE DEL SITIO
ADMINISTRADOR
USUARIO DOCENTE
USUARIO ALUMNO
USUARIO EXTERNO
97
IT. CD. VALLES
CASO DE USO PARA EL ADMINISTRADOR
Actualizar Base de datos
USUARIO ADMINISTRADOR
Inspeccionar contenido 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 captura de calificaciones
Capturar Calificaciones
Consultar catalogo bibliográfico
98
IT. CD. VALLES
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 contenido
Contestar test
USUARIO ALUMNO
Accesar a página UPN242
Ingresar a servicios escolares
Ingresar número de control
Desplegar boleta
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
IT. CD. VALLES
CASOS DE USO PARA USUARIO EXTERNO
Inspeccionar contenido
Contestar test
USUARIO EXTERNO
Accesar a página UPN242
Visualizar carreras que ofrece 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
IT. CD. VALLES
ANEXO 9. DIAGRAMA DE SECUENCIA USUARIO ALUMNO VERSIÓN 1

Usuario alumno Navegador Página UPN 242 Valles Interfaz de servicios escolares Base
de datos calif_alumnos Interfaz de calificaciones
Servidor
Password
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
IT. CD. VALLES
ANEXO 10. DIAGRAMA DE SECUENCIA USUARIO ADMINISTRADOR VERSIÓN 1
Navegador
Base de datos
Servidor
Password
Interfaz de actualización
Actualizar 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
IT. CD. VALLES
ANEXO 11. MODELO DE CONTENIDO DE LA UPN UNIDAD 242 VERSIÓN 1
Imágenes Logotipo UPN Fotos Bienvenida
Autor Nombre del libro Editorial
Componentes estructurales
Catálogo de libros
Año de edición
Nombre Fecha Lugar Convocatorias
Quien lo publica A quien va dirigido Nombre de la convocatoria
Eventos Académicos
Hora
Fecha
103
IT. CD. VALLES
ANEXO 12. DISEÑO DE COMPONENTES DEL PORTALDE LA UPN VERSIÓN 1

¿Qué es la UPN?
Bienvenida Directorio Nombre Puesto que funge Correo electrónico Teléfono Dirección
Mostrar () Cerrar () Regresar () Unidades UPN Convenios Documentos UPN descargables
Mostrar () Cerrar () Regresar ()
Admisión ¿Qué estudiar en la UPN?

Licenciaturas Licenciaturas Especialidades Maestria
Servicios
Comedor Sala de Cómputo Servicio social Servicios culturales Servicios escolares
Publicaciones
Libros Nombre Autor Año Edición Mostrar () Cerrar () Regresar () Revistas Nombre
Año Mostrar () Cerrar () Regresar () Convocatorias Nombre Publicador A quien
dirigido Fecha Mostrar () Cerrar () Regresar ()
104
IT. CD. VALLES
Noticias UPN
Culturales Tipo Publicador Fecha Mostrar () Cerrar () Regresar () Escolales Tipo
Publicador Fecha Mostrar () Cerrar () Regresar () Varios Tipo Fecha Mostrar ()
Cerrar () Regresar ()
Biblioteca
Catálogo bibliográfico Nombre Autor Año Edición Mostrar () Cerrar () Regresar ()
Correos electrónicos
Correo Maestros Nombre Correo electrónico Mostrar () Cerrar () Regresar () Correo
UPN’s Unidad Dirección Correo electrónico Mostrar () Cerrar () Regresar ()
Buzón de quejas y sugerencias Mapa de sitio

Quejas Nombre Fecha Comentario Depto. dirigido Mostrar () Cerrar () Regresar ()
Sugerencias Ubicación Nombre Fecha Sugerencia Depto. dirigido Mostrar () Cerrar ()
Regresar ()
105
IT. CD. VALLES
ANEXO 13. DISEÑO ARQUITECTÓNICO DEL PORTAL DE LA UPN VERSIÓN 1
PRINCIPAL Mapa del sitio Biblioteca Correos electrónicos Páginas UPN Buzón de
quejas y sugerencias
¿QUE ES LA UPN? Bienvenida Directorio Unidades UPN Convenios Documentos

UPN(descargables)
CARRERAS Licenciaturas Especialidades Maestrías
BIBLIOTECA Catálogo bibliográfico
ADMISIÓN Licenciaturas
SERVICIOS Comedor Sala de cómputo Servicio social Servicios culturales Servicios

escolares
NOTICIAS Escolares Culturales Varios
CORREOS ELECTRÓNICOS Correos-Docentes Direcciones UPN’s
BUZON DE QUEJAS Y SUGERENCIAS Quejas Sugerencias
106
IT. CD. VALLES
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 académicas Noticias UPN Biblioteca Correos

electrónicos
Carreras
Admisión
Bienvenida
Unidades UPN
Documentos UPN descargables
Publicaciones
Quejas Licenciaturas Sugerencias
Servicios
Directorio Convenios Licenciaturas Maestrías
Noticias escolares
Noticias culturales
Correos maestros
Direcciones UPN
Noticias varios
Catálogo bibliográfico
Comedor
Servicios culturales
Servicios escolares
Libros
Revistas
Servicio social
Sala de cómputo
Convocatorias
107
IT. CD. VALLES
ANEXO 15. DISEÑO DE CONTENIDO DEL PORTAL DE LA UPN VERSIÓN 1

Bienvenida
Descripción de componente
Descripcióndetexto Color texto Estilo fuente Tamaño texto Espaciadoenlíneas Color

fondo
Fotografíabienvenida Estiloborde Dimensión horizontal Dimensión vertical
Testdemejora Color texto Estilo fuente Tamaño texto Alineación texto Color fondo
Menú Color texto Estilo fuente Tamaño texto Alineación texto Color fondo
Logotipo Posición logotipo tamaño logotipo
Botoneslinks Color texto Estilo fuente Tamaño texto Alineación texto Posición botón
Tamaño botón Color fondo
108
IT. CD. VALLES
Directorio
Descripcióndecomponente
Descripcióndetexto Color texto Estilo fuente Espaciado líneas Tamaño texto Color
fondo
Testdemejora Color texto Estilo fuente Espaciado líneas Tamaño texto Color fondo
Logotipo Posición logotipo Tamaño logotipo
UnidadesUPN
fondo
109
IT. CD. VALLES
Licenciaturas
fondo
Maestrías
fondo
110
IT. CD. VALLES
Servicodecomedor
fondo
Fotografíaservicio Estilo borde Dimensión horizontal Dimensión vertical Posición

fotografía
AdmisiónLicenciaturas
fondo
111
IT. CD. VALLES
Saladecómputo
fondo

fotografía
Serviciosculturales
fondo

fotografía
112
IT. CD. VALLES
Interfazdeacceso
Serviciosescolares
Mostrar () Consultar () Regresar () Cerrar ()
Mostrar () Consultar () Cerrar () Regresar ()
Botones Texto Color texto Estilo fuente Espaciado líneas Tamaño texto Color fondo
Color texto Estilo fuente Tamaño texto Alineación texto Posición botón Tamaño botón
Color fondo
fondo
Fotografía Estilo borde Dimensión horizontal Dimensión vertical Posición fotografía
113
IT. CD. VALLES
ANEXO 16. DISEÑO DE LA BASE DE DATOS VERSION 1

ALUMNO PK matricula apellidopat apellidomat nombre nivel clavecarrera clavemateria
PK CARRERA clavecarrera nombrecarrera plan clavemateria
FK1
FK1 FK3
ASESORES PK claveasesor apellidopatase apellidomatase nombreasesor clavemateria

clavecarrera
MATERIAS PK clavemateria nombremateria clavecarrera creditos clavecarrera matricula

FK1
FK1 FK2
CALIFICACIONES
FK1
FK2
matricula calificacion observacion periodo tipo clavemateria
114
IT. CD. VALLES
ANEXO 17. DISEÑO DE INTERFAZ DEL PORTAL DE LA UPN VERSIÓN 1
LOGOTIPO DE LA UPN
UNIVERSIDAD PEDAGÓGICA NACIONAL UNIDAD 242
LOGOTIPO DE LA SEGEST
¿QUE ES LA UPN? CARRERAS ADMISION SERVICIOS AREAS ACADÉMICAS PUBLICACIONES NOTICIAS

UPN
GRÁFICO
MAPA DEL SITIO
GRÁFICO
BIBLIOTECA
GRAFICO
CORREOS ELECTRONICOS
GÁFICO
TEXTO DE LA PAGINA INICIAL

PAGINAS UPN
BUZON DE QUEJAS Y SUGERENCIAS
TEST DE MEJORA DEL PORTAL
115
IT. CD. VALLES
ANEXO 18. MÉTRICA ORIENTADA A LA FUNCIÓN VERSIÓN 1

Parámetros de medición
Números de entradas de usuario Números de salidas de usuario Número de peticiones
de usuario Número de archivos Número de interfaces externas
Factor de Ponderación Cuenta 7 $

X
Simple
3
Medio 4
Complejo
6 =
28
25
29
116
3 32
10 7
15
=
30 224
10
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
IT. CD. VALLES
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
IT. CD. VALLES
Prueba del index.php en Mozilla Firefox con un Sistema Operativo en Windows XP

Profesional Versión 2002:
118
IT. CD. VALLES
ANEXO 1. DISEÑO DE COMPONENTES VERSION 2
UPN 242
Bienvenida Directorio Nombre Puesto que funge Correo electrónico Teléfono Dirección
Mostrar () Cerrar () Regresar () Unidades UPN Convenios Documentos Oficiales
Carreras
Licenciaturas Maestria
Admisión
Licenciaturas
Servicios
Cafetería Sala de Cómputo Servicio social Servicios culturales Servicios escolares
Publicaciones
Libros Nombre Autor Año Edición Mostrar () Cerrar () Regresar () Revistas Nombre
Año Mostrar () Cerrar () Regresar () Convocatorias Nombre Publicador A quien
dirigido Fecha Mostrar () Cerrar () Regresar ()
119
IT. CD. VALLES
Noticias UPN
Locales Tipo Publicador Fecha Mostrar () Cerrar () Regresar () Escolales Tipo
Publicador Fecha Mostrar () Cerrar () Regresar () Culturales Tipo Publicador Fecha
Mostrar () Cerrar () Regresar () Varios Tipo Fecha Mostrar () Cerrar () Regresar ()
Biblioteca
Catálogo bibliográfico Nombre Autor Año Edición Mostrar () Cerrar () Regresar ()
Correos electrónicos
Correo Maestros Nombre Correo electrónico Mostrar () Cerrar () Regresar () Correo
UPN’s Unidad Dirección Correo electrónico Mostrar () Cerrar () Regresar ()
Buzón de Quejas y Sugerencias

Quejas y Sugerencias Nombre Fecha h Comentario Depto. dirigido Mostrar () Cerrar ()
Regresar ()
Mapa de sitio
Ubicación
120
IT. CD. VALLES
Consulta y Registro de Calificaciones

Interfaz del Administrador Interfaz del Alumno Boleta de Calificaciones
Cubo de Fotos
Cubo fotográfico
121
IT. CD. VALLES
ANEXO 2. DISEÑO ARQUITECTÓNICO VERSION 2

INICIO Mapa del sitio Biblioteca Correos electrónicos Páginas UPN Buzón de quejas y
sugerencias Consulta y registro de calificaciones UPN 242 Bienvenida Directorio
Unidades UPN Convenios Documentos oficiales CARRERAS Licenciaturas Maestrías
BIBLIOTECA Catálogo bibliográfico
ADMISIÓN Licenciaturas
SERVICIOS Servicios escolares Servicio social Servicios culturales Sala de cómputo

cafetería
NOTICIAS Locales Escolares Culturales Varios
CORREOS ELECTRÓNICOS Correos-Docentes Direcciones UPN’s
BUZON DE QUEJAS Y SUGERENCIAS Quejas y sugerencias
CONSULTA Y REGISTRO DE CALIFICACIONES Interfaz de acceso del alumno y

administrador. Boleta de calificaciones. Interfaz de ingreso de calificaciones.
GALERÍA FOTOGRÁFICA Cubo fotográfico
122
IT. CD. VALLES
ANEXO 3. DISEÑO DE NAVEGACIÓN VERSION2
INICIO
Galería fotográfica
Cubo fotográfico
Consulta y registro de calificacion

Boleta de calificacion es
UPN 242
Mapa de sitio
Carreras
Admisión
Noticias UPN Biblioteca Publicaciones Correos electrónicos
Buzón de quejas y sugerencias
Ingreso de calificacion es
Bienvenida
Unidades UPN
Documentos oficiales
Licenciaturas Noticias escolares
Interfaz de acceso alumnadministrad or Noticias culturales
Servicios
Directorio Convenios Licenciaturas Maestrías
Correos maestros
Direcciones UPN
Noticias varios
Catálogo bibliográfico
Quejas y sugerencias
Cafetería
Servicios culturales
Servicios escolares
Libros
Revistas
Noticias locales
Servicio social
Sala de cómputo
Convocatorias
123
IT. CD. VALLES
ANEXO 4. DISEÑO DE CONTENIDO VERSION 2

Bienvenida
Descripción de componente
Descripcióndetexto Color texto Estilo fuente Tamaño texto Espaciadoenlíneas Color

fondo
Fotografíabienvenida Estiloborde Dimensión horizontal Dimensión vertical
Testdemejora Color texto Estilo fuente Tamaño texto Alineación texto Color fondo
Logotipo Posición logotipo tamaño logotipo
124
IT. CD. VALLES
Directorio
fondo
UnidadesUPN
fondo
125
IT. CD. VALLES
Licenciaturas
fondo
Maestrías
fondo
126
IT. CD. VALLES
Cafetería
fondo

fotografía
AdmisiónLicenciaturas
fondo
127
IT. CD. VALLES
Saladecómputo
fondo

fotografía
Serviciosculturales
fondo

fotografía
128
IT. CD. VALLES
Galería fotográfica
Fotos diversos Estilo borde Dimensión horizontal Dimensión vertical Posición

fotografía
Interfaz de acceso alumnoadministrador
Ingresar () Cerrar () Regresar ()
botonesacceso Color texto Estilo fuente Tamaño texto Alineación texto Posición
botón Tamaño botón Color fondo
129
IT. CD. VALLES
Boleta de calificaciones
Consultar () Cerrar () Regresar ()
Botonconsulta Color texto Estilo fuente Tamaño texto Alineación texto Posición
botón Tamaño botón Color fondo
Interfaz de ingreso de calificaciones
Insertar () Guardar () Cerrar ()
Botonguardar Color texto Estilo fuente Tamaño texto Alineación texto Posición botón
130
IT. CD. VALLES
ANEXO 5. DISEÑO DE LA BASE DE DATOS VERSION 2

ALUMNO PK matricula PK apellidopat apellidomat nombre nivel clavecarrera
clavemateria CARRERA clavecarrera nombrecarrera clavemateria
FK1
FK1 FK3
MATERIAS PK clavemateria nombremateria clavecarrera creditos PK
ASESORES clavemateria apellidopatase apellidomatase nombreasesor
CALIFICACIONES
FK1
FK2
matricula calificacion observacion periodo tipo clavemateria promedio
131
IT. CD. VALLES
ANEXO 6. PRUEBA DE CONFIGURACIÓN VERSION 2

Prueba del index.php en Internet Explorer con un Sistema Operativo en Windows Vista
Home:
132
IT. CD. VALLES
Prueba del index.php en Mozilla Firefox con un Sistema Operativo en Windows XP

Profesional Versión 2002:
133
IT. CD. VALLES
ANEXO 7. METRICA ORIENTADA A LA FUNCIÓN VERSION 2
Parámetros De medición
Números de entradas de usuario Números de salidas de usuario Número de peticiones
de usuario Número de archivos Número de interfaces externas
Factor de Ponderación Cuenta 10 $

X
Simple
3
Medio 4
Complejo
6 =
40
35
31
124
7 36
10 7
15
70 252
10
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
IT. CD. VALLES
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
IT. CD. VALLES
14 INDICE ANALÍTICO
A
Análisis, iv, v, 30, 32, 33, 35, 36, 48, 56, 57, 58, 59, 60, 81, 91 Apache, 73
ingeniería, ii, 24, 25, 27, 28, 29, 30, 31, 32, 37, 43, 46, 48, 49, 61, 79
Internet, 1, 5, 6, 12, 13, 14, 15, 22, 23, 35, 51, 59, 64, 65, 66, 68, 70
L
Linux, 54, 73, 84, 88, 102
B
BODY, 17, 18, 82 medición, 30, 126, 145
C
Componente, 65, 66 Configuración, v, vi, 58, 73, 92
Métrica, 72 Modelo, 21, 33, 34, 147 MySQL, ii, 22, 23, 54, 75, 81, 89, 147
N D
Datos, 75 desarrollo, 1, 3, 4, 25, 26, 28, 29, 31, 37, 56, 57, 61, 72, 79, 82, 87,
88, 90, 93, 95, 96, 101 Diseño, iii, v, 37, 40, 43, 44, 45, 61, 62, 63, 87, 91, 92
Open Source, 22 Navegación, v, 58, 68, 69
F
funcional, 34, 40, 59
P
Portal, i, ii, 3, 4, 5, 6, 13, 14, 15, 18, 21, 50, 51, 52, 53, 54, 55, 56, 58, 59,
60, 61, 62, 63, 64, 65, 66, 68, 69, 71,
H
HEAD, 17, 18, 83 HTML, ii, 12, 14, 16, 17, 18, 19, 20, 21, 26, 28, 37, 81, 82, 83,
88
72, 78, 79, 80, 87, 89, 90, 92, 93, 94, 95, 101, 102, 105, 106, 107, 108
Postgresql, 73, 75, 84 Proceso, 3, 25 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
IT. CD. VALLES
S
Servidor, 92 Sistema, 35, 54, 73 Sitio, ii, 12, 13, 16 Software, 19, 54, 73, 78
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, 111, 112, 115, 117, 118, 125, 147 URL, ii, 15,
16, 24, 84
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

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de Un Portal Con IWeb

Cargado por

Copyright:

Formatos disponibles

DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA INSTITUTO TECNOLÓGICO DE CD.

DESARROLLO DE UN PORTAL PARA LOS PROCESOS ACADÉMICOADMINISTRATIVOS DE LA

GONZÁLEZ MEDINA KARINA GUADALUPE RONQUILLO FLORES NETTIE

ASESOR INTERNO: ING. ROSA IMELDA GARCIA CHI

ASESOR EXTERNO: C.PRIV. IRMA NORIEGA

CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ ....................... 4 3.1 3.2 3.3

4.9.1 Como conseguir un

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

4.11.1 Definición del marco de

4.12.1 Formulación de sistemas en

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

4.14.1 Principios y directrices del diseño de

7.1.1 Entrevista con el

7.2.1 Entrevista con el

7.3.1 Análisis de recursos y

7.4.1 Análisis Relación-

7.7.1 Validación del

7.8.1 Configuración del

2.2 Objetivos específicos

3 CARACTERIZACIÓN DEL ÁREA DONDE SE PARTICIPÓ

uniformemente además instalaron Internet inalámbrico Prodigy Infinitum con 4MB de

3.2 Descripción del área de trabajo

3.3 Antecedentes de la empresa

La construcción del edificio se inicio el 26 de febrero de 1982, siendo Gobernador

inscripción registrada por la apertura de la Licenciatura en Educación Preescolar y

SUBDIRECCIÒN ACADÈMICA MTRO. JUAN JOSE AMARO VARGAS

JEFATURA ADMINISTRATIVA IRMA NORIEGA

COMISIÒN DE TITULACIÒN MTRO. BLAS LARA BARRON

DEPENDENCIAS DE EDUCACIÒN SUPERIOR

PERSONAL ADMINISTRATIVO Y DE APOYO

SERVICIOS ESCOLARES MA. GRISELDA BARRA

SUBSEDE TAMAZUNCHALE, S.L.P PROFRA. ANGELINA HERNÀNDEZ MENDEZ COORDINADORA

SEDE CD. VALLES MTRO. BLAS LARA BARRÒN COORDINADOR

SUBSEDE RIOVERDE, S.L.P. PROFR. FELIPE MARTINEZ RIVERA COORDINADOR

FUENTE: DIRECCIÓN ADMINISTRATIVA DE LA UPN. Ilustración 1. Organigrama de la UPN

4.2 La World Wide Web

4.3 Qué es un Portal

4.4 Funciones y objetivos de un Portal

Un Portal de Internet puede ser un Centro de contenido intermediario entre

4.5 Bloque de construcción HTML

4.5.1 Los URL

4.5.2 Como Diseñar Su Sitio

3. Cree el contenido HTML. 4. Asegúrese de guardar su archivo. (CASTRO, 2001)

Para crear la sección HEAD: 1. Directamente después de la etiqueta HTML escriba

4.5.3 Hojas de estilo

4.5.4 Herramientas HTML

300$. Macromedia. Probablemente el más popular editor entre los profesionales de la

http://www.macromedia.com/ Software/Dreamweaver; demo disponible.

Adobe GoLive (M, W)

http://www.adobe.com/prodindex /GoLive/main.html; demo disponible.

NetObjects Fusion (M, W)

300$. Net Objects editor http://www.netobjects.com/products WYSIWYG para

Ilustración 3. Modelo PHP.

Al ser PHP un lenguaje que se ejecuta en el servidor no es necesario que su

 Es una base de datos muy rápida, segura y fácil de usar. Gracias a la

4.9 Como publicar la página en la Web

visitado su sitio? (CASTRO, 2001)

4.9.1 Como conseguir un dominio

4.10 Ingeniería web 4.10.1 Estratos de la ingeniería web de WebApp

Métodos. El panorama de los métodos de IWeb abarca un conjunto de labores técnicas

 Métodos de análisis de Requisitos: Proporcionan una base para comprender el

contenido y el modelo de diseño como de una amplia variedad de técnicas de prueba

4.11 El proceso de la ingeniería Web