VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2016/04/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

FORMATO DE GUÍA DE PRÁCTICA DE LABORATORIO / TALLERES /

CENTROS DE SIMULACIÓN – PARA DOCENTES

CARRERA: ASIGNATURA: Programación y Plataformas Web

NRO. PRÁCTICA: 1 TÍTULO PRÁCTICA: Taller 1.0 – HTML + CSS
OBJETIVO:
OBJETIVO GENERAL
• Implementar una página web estática.
OBJETIVOS ESPECÍFICOS:
• Implementar los estándares web recomendados por la W3C (well-formed).
• Utilizar los elementos de HTML5.
• Utilizar las características de CSS2 y CSS3 para aplicar estilos en la página.

INSTRUCCIONES (Detallar las 1. Ingresar al AVAC y leer los detalles de la práctica que se propone.
instrucciones que se dará al 2. Responder a la práctica a través del AVAC.
estudiante):
ACTIVIDADES POR DESARROLLAR
(Anotar las actividades que deberá seguir el estudiante para el cumplimiento de la práctica)
1. Crear una página en HTML que tenga la siguiente estructura (ver Figura 1).

Figura 1. Estructura de la página.

2. Implementar los respectivos estilos para que la página pueda tener un aspecto similar a la imagen anterior
(ver Figura 1).
3. Luego de crear la plantilla, en la sección de navegación se debe tener acceso a cuatro enlaces para cuatro
tipos de reportes gráficos.
Resolución CS N° 076-04-2016-04-20
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2016/04/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

4. Elaborar un mapa mediante capas (HTML y CSS), donde se pueda identificar el mapa de una urbanización
mediante rectángulos, donde se pueda visualizar las residencias de la urbanización.
5. Si se desea visualizar a todos los residentes, se debe mostrar como se ve en la Figura 2, los colores
tienen una representación: verde, si el residente no tiene deuda; amarillo, si el residente tiene una deuda
de hasta dos meses de retraso; rojo, si el residente tiene deudas de mas de tres meses; gris, si no vive
nadie en esa residencia.

Figura 2. Visualización de Residentes.

6. En la Figura 3, se puede visualizar las casas donde los residentes no tienen deudas con respecto a las
alícuotas que se debe pagar mensualmente a la administración de la urbanización, según reglamento de la
asociación de vecinos.
7. En la Figura 4, se puede visualizar las casas donde los residentes tienen deudas con la administración con
respecto al valor de la alícuota.
8. En la Figura 5, se puede visualizar las casas donde aún no tiene residente; dado que se encuentra en
venta.

Resolución CS N° 076-04-2016-04-20
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2016/04/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

Figura 3. Visualización de residentes sin deudas.

Figura 4. Visualización de residentes con deudas.

Resolución CS N° 076-04-2016-04-20
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2016/04/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

Figura 5. Visualización de residencias sin propietarios.

RESULTADO(S) OBTENIDO(S):
Archivos en HTML, CSS.
No utilizar ningún Framework especializado para esta práctica.

CONCLUSIONES:
Los estudiantes estarán en capacidad de crear páginas web.
RECOMENDACIONES:
Revisar los talleres visto en clases.

Docente: __MSc. Guillermo Pizarro____

Firma: _______________________________

Resolución CS N° 076-04-2016-04-20