DESARROLLO DE PÁGINA WEB POLI-ZONE

1.1.1 Metodología de desarrollo

La metodología más adecuada para la realización de la página web es a través 7

etapas que menciona lo que se deberá realizar durante su ciclo de vida, de tal forma
que el inicio de cada etapa debe esperar a la finalización de la etapa anterior. Al
final de cada etapa, el modelo está diseñado para llevar a cabo una revisión final,
que se encarga de determinar si el proyecto está listo para avanzar a la siguiente
fase.

1.1.2 Justificación de la metodología empleada

De esta forma, cualquier error de diseño detectado en la etapa de prueba conduce

necesariamente al rediseño y nueva programación del código afectado,
aumentando los costos del desarrollo.

Planificar

Conceptualizar

Arquitectura de
la información

Navegación

Diseño visual

Codificación y
pruebas

1. Planificación

La aplicación desarrollada pretende dar información general sobre la oferta

educativa ofrecida en los planteles de Educación Superior del Instituto Politécnico
Nacional, así como información más específica para cada plan de estudios que esté
vigente. Se podrá acceder a la aplicación desde cualquier sistema operativo que
tenga conexión a Internet utilizando un navegador web.

Será necesario contar con la información actualizada hasta el ciclo 2018-A para
brindar una información adecuada; sin embargo, dicha información irá
modificándose si ocurre una actualización, la creación de un nuevo plan de estudios
o que se deje de ofertar algún otro.

La idea principal de este sitio web es ofrecer a los aspirantes una visión más clara
de la oferta educativa ofrecida por el IPN y a través de este sitio web podrán aclarar
sus dudas y concretar su decisión sin necesidad de acudir a exposiciones
profesiográficas o acudir directamente al plantel.

La carga de trabajo estimada para las fases de diseño, desarrollo e implantación del
proyecto es de horas a realizar por una persona. Se muestra a continuación el
desglose del número de horas por tareas:

Diagrama de Gantt de las actividades de desarrollo

DIAGRAMA DE ACTIVIDADES
Desarrollo de Sitio Web KidZone Días Julio Agosto Septiembre
Planificación 4
Conceptualización 4
Implantación entorno de desarrollo 2
Documentación 5
Arquitectura de la información 10
Gestor de Contenidos del Sitio Web 2
Navegación 5
Diseño visual 5
Aceptación del diseño web 1
Codificación y pruebas 10
Modulo de oferta educativa por área de conocimiento 5
Modulo de oferta educativa por plan de estudio 5
Aceptación del sistema 1
Total: 39

2. Conceptualización

La información contenida en la página web estará basada en la información

publicada en las páginas institucionales del Instituto Politécnico Nacional, misma
que será corroborada a través de medios oficiales.

Este sitio deberá contar con una buena usabilidad que permita a los usuarios una
interacción sencilla, intuitiva, agradable y segura y de esta manera cumplir con el
objetivo de su creación.

Para lograr una buena usabilidad en PoliZone es necesario combinar con habilidad
una serie de factores de diversos tipos: tecnológicos, de diseño, de contenidos, etc.

Dentro de los cuales se deberá estructurar muy bien los contenidos y organizarlos
de acuerdo con una jerarquía perfectamente definida.
Ceder el control al usuario. Para que su experiencia sea positiva, el usuario no debe
sentirse perdido en ningún momento. Siempre debe saber dónde se encuentra y
cómo acceder a otro enlace. Para ello, el menú debe ser muy accesible y visible, y
los títulos de los contenidos de cada apartado deben ser muy claros y estar
estratégicamente colocados.

Además, se tendrá que adaptar PoliZone a todo tipo de dispositivos porque, cada
vez, son más los usuarios que utilizan estos dispositivos para navegar por la red.

3. Arquitectura de la información

El objetivo es obtener los modelos y especificaciones que definen el sistema a partir

del análisis realizado en fases anteriores. La definición de la arquitectura de
PoliZone es el primer paso para la identificación de los componentes que intervienen
en el mismo.

El diseño debe ser limpio, con una utilización de los textos, tipografía, imágenes y
recursos gráficos que faciliten la labor del usuario a la hora de encontrar lo que
busca, procurando que los distintos contenidos se muestren separados y con una
clasificación lógica.

Se muestra a continuación el mapa de navegación de PoliZone:

 4. Navegación

Con base en el mapa de navegación presentado en el punto anterior, el objetivo del

mismo será facilitar la interactuación. Simplificar y sintetizar. Toda información
innecesaria debe eliminarse o reducirse al máximo.

Las relaciones de las páginas entre sí configuran la estructura del sitio.

A partir de la página principal se vinculará mediante enlaces al resto del contenido,

siempre teniendo como cabecera de PoliZone el menú principal para que el usuario
pueda navegar libremente sin necesidad de regresar a la página principal para
comenzar una nueva búsqueda.

5. Diseño visual

Se implementa el estilo y la estructura que ya se han determinado en las etapas

anteriores y de acuerdo a esto se realiza la diagramación gráfica, se organiza la
información que debe estar en cada módulo y se seleccionan las imágenes, figuras
y demás elementos que deben incluirse en cada uno de ellos.

Es importante que el diseño de la página sea legible, único, y preciso, además los
colores deben ser adecuados para el grupo objetivo, mirar la forma en que este
organizada la página también debe ser coherente y fácil de navegar.

En cuanto a las imágenes de la página web, es importante tener en cuenta que para
los aspirantes resulta más divertido y sencillo realizar una búsqueda objetiva, ya
que a esas alturas ya tiene una idea de lo que quiere estudiar y cuando se encuentra
relacionada con una hará clic a está enfocando al máximo su atención.

Los sonidos, animaciones y de video son de gran agrado y les llaman mucho la
atención, es por esto que deberá de ser seleccionado cuidadosamente para también
capturar la atención del visitante.

En cuanto a la visualización de la página, ésta tiene dos características, una de ellas

es que puede que se vea toda la página en la pantalla completa, y otra opción es
utilizar barras de desplazamiento llamadas scrollbars, los cuales se utilizan para ver
todo el contenido de la página.

Finalmente se organizan, se unifican y se complementan todos los anteriores

elementos para originar la página web.

Se realizó el diseño en bocetos de la página web, especificando los módulos,

botones y posibles colores que conformaran PoliZone.

A continuación, se muestran los bocetos realizados:

De igual manera, se realizó el diseño del logotipo del sitio web, haciendo alusión a
su nombre y a la casa de estudios en la que fue enfocada.

6. Codificación y pruebas

Actualmente existen diversas plataformas que manejan este tipo de servicios, por ejemplo,
la plataforma elegircarrera.net especializada en la realización de test de orientación
vocacional, que se limitan a brindar el perfil que tiene el alumno con respecto a las carreras
profesionales según los resultados de una pequeña encuesta, pero no proporcionan la
información necesaria y detallada de lo que trata cada una de estas carreras y en donde se
localizan.

Es por esto, que se propone este servicio web, que además de brindar toda la información
de cada una de las carreras profesionales ofertadas en esta casa de estudios, dependiendo
de la carrera elegida por los alumnos, podrán interactuar con diversos módulos, que
incluyen desde experiencias de alumnos que actualmente cursan la carrera hasta material
didáctico especializado para que el alumno tenga una experiencia virtual, sobre lo que
enfrentará en el ámbito profesional si es que elige dicha carrera.

Dicho sitio web será creado mediante el uso de las siguientes tecnologías:

Dreamweaver:

Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su

propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web.
Inicialmente fue creado por Macromedia, pero actualmente es desarrollado por Adobe
Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el
diseño y la programación web, esto gracias a las funciones que posee, su fácil integración
a otros programas como Adobe Flash y recientemente por su soporte para estándares del
World Wide Web Consortium.

La ventaja principal que posee este software frente a otros de su clase es su gran poder de
ampliación y personalización, por ejemplo, sus rutinas como insertar un hipervínculo, una
imagen o añadir determinado comportamiento están hechas en Javascript-C, esto permite
una gran flexibilidad.

Dreamweaver permite trabajar con extensiones. Esos pequeños programas que cualquier
desarrollador web puede escribir (normalmente en Javascript y HTML) y que cualquiera
puede descargar e instalar ofreciendo funcionalidades adicionales.

HTML:

Es la última versión de HTML el cual tiene las siguientes características:

 Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las
aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y
amigos, a menudo reducido a HTML5.
 Semántica: Permite describir con mayor precisión cuál es su contenido.
 Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
 Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente
en el lado del cliente y operar sin conexión de manera más eficiente.
 Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo
son audio y video nativamente.
 Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que
se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
 Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un
mejor uso del hardware.
 Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de
entrada y salida de nuestro dispositivo.

CSS:

Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los

documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar
los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.

JAVASCRIPT:
Es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que
luego son insertados en una página web y en programas más grandes, orientados a objetos
mucho más complejos.

Este lenguaje posee varias características, entre ellas se puede mencionar que es un
lenguaje basado en acciones que posee menos restricciones. Además, es un lenguaje que
utiliza Windows y sistemas X-Windows, gran parte de la programación en este lenguaje
está centrada en describir objetos, escribir funciones que respondan a movimientos del
mouse, aperturas, utilización de teclas, cargas de páginas entre otros.

Es necesario resaltar que hay dos tipos de JavaScript: por un lado, está el que se ejecuta
en el cliente, este es el JavaScript propiamente dicho, aunque técnicamente se denomina
Navigator JavaScript. Pero también existe un JavaScript que se ejecuta en el servidor, es
más reciente y se denomina LiveWire Javascript.

JQUERY:

Es una biblioteca gratuita de Javascript, cuyo objetivo principal es simplificar las tareas de
creación de páginas web responsivas, acordes a lo estipulado en la Web 2.0, la cual
funciona en todos los navegadores modernos. Por otro lado, se dice que jQuery ayuda a
que nos concentrarse de gran manera en el diseño del sitio, al abstraer por completo todas
las características específicas de cada uno de los navegadores. Otra de las grandes
ventajas de jQuery es que se enfoca en simplificar los scripts y en acceder/modificar el
contenido de una página web. Finalmente, jQuery agrega una cantidad impresionante de
efectos nuevos a Javascript, los cuales podrán ser utilizados en tus sitios Web.

Servidor PHP

PHP es un lenguaje de script del lado del servidor que está incrustado en HTML. Se utiliza
para gestionar el contenido dinámico, bases de datos, seguimiento de la sesión, incluso
sitios enteros de comercio electrónico.

Se integra con una serie de bases de datos populares, como MySQL, PostgreSQL, Oracle,
Sybase, Informix y Microsoft SQL Server.

Es agradablemente enérgico en su ejecución, especialmente cuando se compila como un

módulo de Apache en el lado Unix. El servidor MySQL, una vez iniciado, se ejecuta incluso
consultas muy complejas con grandes conjuntos de resultados en tiempo récord.

Este servidor soporta un gran número de los principales protocolos como POP3, IMAP y
LDAP, además es indulgente ya que trata de ser tan indulgente como sea posible debido a
que realiza las funciones del sistema, es decir, a partir de archivos en un sistema que puede
crear, abrir, leer, escribir, y cerca de ellos. También puede manejar formas, es decir, reunir
datos de archivos, guardar los datos en un archivo, a través de correo electrónico puede
enviar datos, los datos de regreso al usuario, agregar, borrar, modificar los elementos
dentro de su base de datos a través de PHP.
6.1 Especificación del plan de pruebas

Pruebas de integración

Se realizarán pruebas de cada uno de los módulos definidos en la página web para
verificar que cumple con los requisitos establecido.

• Gestor de contenidos. En este primer test será necesario disponer del gestor de
contenidos instalado en el entorno de desarrollo, la base de datos del sistema
creada y la estructura de contenidos de la web definida.
Se comprobará la actualización de contenidos del sitio web, accediendo al gestor
y podrá crear, modificar y eliminar información de la misma.

• Se deberá comprobar la actualización del y severificarán el correcto

funcionamiento del sitio web. Como productos de la prueba se obtendrán nuevas
solicitudes con los datos introducidos a través del sistema.

La prueba se dará por válida al constatar que la información mostrada en el sitio

web coincide con la introducida a través del mapa de navegación. Asimismo, se
confirmará el correcto funcionamiento de las opciones de búsqueda, filtrado y
paginación de la información mostrada.

• Espacio compartido con las entidades colaboradoras. Los usuarios de Proyectos

comprobarán la actualización del contenido relativo este espacio restringido,
accediendo al gestor de contenidos con un usuario y contraseña válidos. Y se
probará la aportación de documentación nueva al proyecto por parte de las
entidades.

Pruebas de implantación y aceptación

Se llevarán a cabo en la fase de implantación del sitio cuando el sistema esté

completamente desarrollado e implantado en los servidores de producción.

Se repetirán las pruebas de integración para verificar el correcto funcionamiento de los

subsistemas en este entorno, y se comprobará el cumplimiento de los siguientes
requisitos:

• El sitio web es compatible con las versiones más recientes de los principales
navegadores de Internet (Mozilla Firefox, Internet Explorer, Opera, Safari, Google
Chrome).
• Solo las personas autorizadas pueden acceder a la aplicación mediante un
usuario y contraseña válidos, y las funciones que pueden llevar a cabo son
únicamente las definidas para su perfil de usuario.
• El portal web cumple las condiciones de accesibilidad descritas por la WAI (Web
Accesibility Initiative) de nivel A.
• El buscador web funciona correctamente.
• La actualización de las estadísticas de acceso es correcta y pueden ser
consultadas por personal
Pruebas unitarias
El objetivo es verificar el correcto funcionamiento, por separado, de cada uno de los
componentes que forman la página web.

• Componente base de datos. Se verificará que la base de datos de contenidos está

correctamente creada.
• Componente aplicación gestor de contenidos. Se verificará la correcta instalación
y configuración de la aplicación. El sitio web mostrará los contenidos de acuerdo
con el diseño establecido. Se verificará el acceso al gestor de contenidos mediante
un usuario y contraseña válidos.
• Componente fichero registro de acceso, deberá recoger de forma adecuada la
información de cada acceso al sitio web.
• Componente aplicación estadísticas. Se probará su correcta configuración y se
verificará que la actualización de las estadísticas de acceso es correcta y pueden
ser consultadas a través de la web mediante un usuario y contraseñas válidos.
• Componente aplicación gestión de proyectos. Se comprobará que obtiene
correctamente la información proporcionada a través del fichero XML.

El conjunto de estas pruebas tendrá como objetivo la aceptación definitiva del sistema por
parte de los usuarios.

Pruebas de implantación

Estas se llevarán a cabo en la fase de implantación del proyecto cuando el sistema esté
completamente desarrollado e implantado en los servidores de producción.

• Se repetirán las pruebas de integración para verificar el correcto funcionamiento

de los subsistemas en este entorno.
• Se validará que se han cumplido los requisitos establecidos en el proyecto.
• Se comprobará que se realiza correctamente la copia de seguridad y
restauración de la base de datos.
• Se verificarán las medidas de seguridad del sistema.
• Se comprobará el acceso al sitio web y al gestor de contenidos con múltiples
usuarios y se comprobará que los tiempos de respuesta son adecuados.

Pruebas de aceptación

Estas se llevarán a cabo en la fase de implantación del proyecto cuando el sistema esté
completamente desarrollado e implantado en los servidores de producción, se hayan
superado de forma satisfactoria las pruebas de implantación del sistema, y una vez
impartidas las jornadas de formación prevista para los usuarios.

• El objetivo de estas pruebas es la aceptación definitiva del sistema por parte de

los usuarios.
• Estos validarán que se han cumplido los requisitos establecidos.
 • Se verificará el correcto funcionamiento de todos los subsistemas, a través de
todos los perfiles de usuarios definidos.

7. Validación

Se llevarán a cabo las pruebas de integración e implantación para verificar el correcto

funcionamiento de los módulos de PoliZone. Se realiza el paso a producción del sistema
desarrollado, se llevan a cabo las pruebas de integración e implantación para verificar el
correcto funcionamiento de los módulos y se cargan los datos iniciales.

Una vez implantado el sistema se presenta a y se hace entrega de la documentación del

proyecto, para su aprobación.

Y se realizarán las pruebas de aceptación por parte del usuario con el objetivo de obtener
la aprobación definitiva del sistema por estos.