Nombre del alumno:

Roberto Barranco Mendoza

Licenciatura:

ING. EN DESARROLLO DE SOFTWARE

Asignatura:

Programación Web I

Unidad 2 Actividad 2

Mapa de Navegación

Docente: Mtro. Josafat Poctzin Dircio

08/Oct/2019
INSTRUCCIONES
1. Retomando la problemática elegida en la actividad 1, elabora un mapa de navegación del sitio
web que construirás. En el mapa debes contemplar la página principal del sitio y por lo menos
3 subpáginas.
2. Describe el contenido que colocarás en la página principal y de 3 subpáginas del sitio web.
3. Especifica cómo serán utilizados los diferentes recursos en tu sitio (Texto, imágenes, tablas,
videos, documentos, etc.).
4. Genera un calendario de diseño y construcción del sitio (Cronograma), especificando fecha de
inicio y término del proyecto.
5. Diseña un prototipo de lo que será la página principal de tu sitio (Imagen de lo que verá el
usuario final en tu sitio, aunque aún no cuente con funcionalidad).
6. Realiza un diagrama que muestre cómo quedarán organizadas las carpetas de tu sitio, dentro
del servidor web.

DESARROLLO DE LA ACTIVIDAD

CONTENIDO DEL SITIO WEB

En la página principal de registro colocaré el logo de la empresa en la parte central superior, una
imagen de una barra horizontal para dividir la sección de cabecera, colocaré un tabla para los
elementos HTML, con en otro renglón el texto “Registrar estudiantes:”, en el siguiente renglón el
texto “Por favor selecciona tu grado”, en el siguiente renglón el texto “Grado” como título de una
lista de selección, en el siguiente renglón colocaré una lista de selección con los siguientes
elementos:

 Primaria 1°, Primaria 2°, Primaria 3°, Primaria 4°, Primaria 5°, Primaria 6°, Secundaria 1°,
Secundaria 2°, Secundaria 3°, Preparatoria 1°, Preparatoria 2°, Preparatoria 3° y Adultos.

En el siguiente renglón, agregaré una imagen de una barra horizontal que incluye el texto
“Edusystem.com.mx” para dividir e indicar la sección final.
Utilizaré JavaScript para controlar la interacción con el usuario, Maquetación de CSS para los tipos
y colores en las letras.

En la página alta de usuarios colocaré el logo de la empresa en la parte central superior, colocaré
un tabla para los elementos HTML, en la siguiente parte colocaré el texto “Registrar estudiantes:”,
en el siguiente renglón colocaré el texto “llena todos los datos”, en el siguiente renglón colocaré
las siguientes dos etiquetas “Nombre completo” y “Usuario”, en el siguiente renglón colocaré dos
elementos input de HTML, en el siguiente renglón colocaré las siguientes dos etiquetas “Correo
electrónico” y “Contraseña”, en el siguiente renglón colocaré otros dos elementos input de HTML,
en el siguiente renglón colocaré las siguientes dos etiquetas “Nivel” y “Escuela”, en el siguiente
renglón colocaré otro elemento input de HTML y una lista de selección, en el siguiente renglón
colocaré las siguientes dos etiquetas “Grado” y “Grupo”, en el siguiente renglón colocaré otro
elemento input de HTML y otra lista de selección, en el siguiente renglón colocaré el texto
“Director”, en el siguiente renglón colocaré otro elemento input de HTML, en el siguiente renglón
colocaré un botón con la palabra Agregar, en el siguiente renglón, agregaré una imagen de una
barra horizontal que incluye el texto “Edusystem.com.mx” para dividir e indicar la sección final.

Utilizaré JavaScript para controlar la interacción con el usuario, Maquetación de CSS para los tipos
y colores en las letras, así como del botón.

En la página baja de usuarios, colocaré el logo de la empresa en la parte central superior, colocaré
un tabla para los elementos HTML, en la siguiente parte colocaré el texto “Eliminar estudiantes:”,
en la siguiente parte colocaré el texto “Estudiantes existentes”, en el siguiente renglón colocaré
una rejilla o cuadrícula donde se mostrarán los principales datos de los usuarios existentes para
seleccionar el que se desea eliminar, en el siguiente renglón colocaré un botón con la palabra
Eliminar, en el siguiente renglón, agregaré una imagen de una barra horizontal que incluye el texto
“Edusystem.com.mx” para dividir e indicar la sección final.

Utilizaré JavaScript para controlar la interacción con el usuario, Maquetación de CSS para los tipos
y colores en las letras, así como del botón.

En la página modificar usuarios, colocaré el logo de la empresa en la parte central superior,

colocaré un tabla para los elementos HTML, en la siguiente parte colocaré el texto “Modificar
estudiantes:”, en el siguiente renglón colocaré una rejilla o cuadrícula donde se mostrarán los
principales datos de los usuarios existentes para seleccionar el que se desea modificar, en el
siguiente renglón colocaré el texto “llena todos los datos”, en el siguiente renglón colocaré las
siguientes dos etiquetas “Nombre completo” y “Usuario”, en el siguiente renglón colocaré dos
elementos input de HTML, en el siguiente renglón colocaré las siguientes dos etiquetas “Correo
electrónico” y “Contraseña”, en el siguiente renglón colocaré otros dos elementos input de HTML,
en el siguiente renglón colocaré las siguientes dos etiquetas “Nivel” y “Escuela”, en el siguiente
renglón colocaré otro elemento input de HTML y una lista de selección, en el siguiente renglón
colocaré las siguientes dos etiquetas “Grado” y “Grupo”, en el siguiente renglón colocaré otro
elemento input de HTML y otra lista de selección, en el siguiente renglón colocaré el texto
“Director”, en el siguiente renglón colocaré otro elemento input de HTML, en el siguiente renglón
colocaré un botón con la palabra Modificar, en el siguiente renglón, agregaré una imagen de una
barra horizontal que incluye el texto “Edusystem.com.mx” para dividir e indicar la sección final.

Utilizaré JavaScript para controlar la interacción con el usuario, Maquetación de CSS para los tipos
y colores en las letras, así como del botón.

CRONOGRAMA

PROTOTIPOS
ESTRUCTURA DE LA ORGANIZACIÓN DEL SITIO