Ao del Buen Servicio al ciudadano

INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO

BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

Sesin de Aprendizaje N 07
I. DATOS GENERALES:
rea / Especialidades/ Ciclo : Lenguaje de programacin III / Computacin VIII
Docente : Levi Ronald Castro Fernndez
Ttulo de la sesin : Navegacin del sitio web ASP: Estilo CSS, estructura del sitio web
Fecha / Duracin : 27-29 de setiembre de 2017 / 200 minutos.
Espacio de desarrollo de sesin. : Sala de cmputo.

II. VALORES, ACTITUDES Y COMPETENCIA TRANSVERSAL

Valores Actitudes
- Respeto : Comunica y permite la expresin libre de ideas, respetando la opinin divergente de sus compaeros
de manera tolerante y emptica durante el desarrollo de la clase.
- Responsabilidad : Participa de manera activa y crtica mostrando dominio e inters por la temtica abordada.
- Compromiso : Asume tareas y procesos de aprendizaje con empoderamiento y como parte de sus deberes.
Competencia transversal: Aplica rigor cientfico en el procesamiento de la informacin para elaborar productos acadmicos.

III. UNIDAD DE COMPETENCIA, CRITERIOS DE DESEMPEO, CONTENIDO E INDICADORES (MARCO ORGANIZATIVO)

Unidad de UC2. Domina informacin sobre mantenimiento de estado, controles de servidor, controles HTML, controles Web,
controles ligados a datos, para disear formularios web, demostrando responsabilidad en las tareas y actividades
competencia acadmicas, atendiendo as a las necesidades y demandas de su entorno.
Criterio de CD 2.2. Disea formularios Web, para elaborar entornos grficos de acceso a datos para pginas Web.

desempeo
Contenido Indicadores Instrumentos
Navegacin del sitio web ASP: 2.2.2 Plantea un panel de control para administrar el acceso a las diversas

Estilo CSS, Estructura del sitio pginas web que componen el sitio web, asumiendo con criterio tcnico el Escala
valorativa.
web. modelo.

IV. SECUENCIA METODOLGICA:

Momen Tcnicas/ Durac./
tos Acciones
estrategias min.
A travs del uso de diapositivas se presenta una plantilla de un sitio web y a partir de ello se
realiza las siguientes interrogantes: Presentacin de
Interrogantes: Que elementos identificas en el sitio web? Cul crees que es el modo de vdeo y lluvia de 5
Inicio

navegacin o interaccin del usuario con el sitio web, segn la plantilla? ideas.

Cmo iniciamos la maquetacin de nuestro sitio web para lograr esta plantilla?
El docente escribe el tema y el propsito en la pizarra: Disear un panel de control que Dilogo, escritura
5
permita la navegacin de las diversas pginas web que lo componen. en pizarra.

Se distribuye la informacin en versin digital cada uno debe leerlo y luego realizar las
Copias, lectura
preguntas que crea conveniente con respecto a los elementos HTML que se utilizarn para la 10
individual.
implementacin del panel de navegacin.
Los estudiantes activan sus equipos cargando el IDE de desarrollo WebMatrix, configurando
Desarrollo

el entorno de trabajo. 5
Prcticas
El docente gua el desarrollo de un ejemplo usando las etiquetas HTML y estilos CSS para dirigidas.
implementar la plantilla.
Los estudiantes complementan la propuesta aplicando los atributos necesarios para el Trabajo en
15
desarrollo e implementacin del sitio web. equipo.

El docente asesora a los estudiantes en el desarrollo de la actividad y registra el avance. 40

 Ao del Buen Servicio al ciudadano
INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO
BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

Momen Tcnicas/ Durac./

tos Acciones
estrategias min.
Los estudiantes comparten la propuesta implementada explicando a travs de una exposicin.
Exposicin. 10
El docente realiza preguntas que permitan fortalecer el aprendizaje del estudiante.
El docente evala el desempeo de los estudiantes en la socializacin de la informacin del Exposicin y
8
tema, teniendo en cuenta el propsito del tema. conversatorio.

El docente realiza la sistematizacin del tema tratado, explicando la importancia de los

elementos que conforman un sitio web y la facilidad de acceso cuando se crea un panel de
Cierre

navegacin. Lluvia de ideas 2

Se les asigna a los estudiantes una actividad de extensin que deben desarrollar en la
plataforma virtual de aprendizaje del IESPP Jos Santos Chocano.
Tiempo Total 100

V. RECURSOS: MEDIOS Y MATERIALES:

Pizarra, mota, plumones, laptop, proyector multimedia, cmara de celular, diapositivas.
VI. REFERENCIAS:
Artigas, A. (2015). Crear una barra de navegacin lateral con listas y CSS.
Garca, P. (2016). Enciclopedia de HTML y CSS. Lima.
Fras, L. (2012) Etiquetas HTML y ASP.
Vicente, J (2014). Video2brain ASP.Net

Bagua Grande, 28 de setiembre de 2017.

---------------------------------------------------------
Levi R. Castro Fernndez.
Formador:
 Ao del Buen Servicio al ciudadano
INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO
BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

Cdigo de la hoja de estilos.

body { #menuizq{
background: rgb(24, 154, 219); width: 25%;
font-family: 'Times New Roman' Arial height: 100%;
Verdana; background:#808080;
} float: left;
#caja{ margin:auto;
width: 80%; padding: 5px;
height: 100%; text-align: center;
background: white; box-shadow:0px 5px 15px rgba(0,1,1,1.5);
margin: auto; font-size: 1.5em;
padding: 30px; }
box-shadow: 0px 15px 25px #menusup{
rgba(0,0,0,0.9); width: 73.3%;
} height: 100%;
h1{ background:rgb(75, 7, 245);
color: #f00; float: right;
} margin:auto;
h2{ padding: 5px;
color: brown; text-align: center;
text-align: center; box-shadow:0px 5px 15px rgba(0,1,1,1.5);
} font-size: 1.5em;
p{ }
font-size: 12px; #destacado{
color: black; width: 73.3%;
text-align: right; height: 100%;
} background:rgb(93, 252, 29);
header{ float: left;
margin: auto; margin:auto;
padding: 3px; padding: 0px;
} text-align: center;
footer{ box-shadow:0px 5px 15px rgba(0,1,1,1.5);
float:left; font-size: 1.5em;
font-size: 80%; }
font-weight: bold; nav ul{
text-align: center; width: 100%;
color: white; list-style-type: none;
width: 100%; }
} nav ul li{
#pie{ padding: 5px;
float: left; float: left;
width: 100%; background: yellow;
background:brown; margin: 2px;
margin:auto; width: 100px;
padding: 5px; }
text-align: center; nav ul li a{
box-shadow:0px 15px 25px rgba(0,1,1,1.5); text-decoration: none;
font-size: 1.5em; }
} #menuizq ul{
#banner{ width: 100%;
width: 100%; list-style-type: none;
height: 250px; }
background:grey; #menuizq ul li{
margin:auto; padding: 15px;
padding: 5px; background: yellow;
text-align: center; margin: 2px;
box-shadow:0px 5px 15px rgba(0,1,1,1.5); width: 100px;
font-size: 1.5em; }
} #menuizq ul li a{
text-decoration: none;
}
 Ao del Buen Servicio al ciudadano
INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO
BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

Cdigo de la pgina ndex.

@{

<!DOCTYPE html>

<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>Mi Web</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
<div id="caja">
<header>
<h1>Divirtindose con juegos </h1>
</header>
<section>
<div id="banner">
<img src="../Images/banner.jpg" alt="Promocin" height="250px" width="100%"></a>
</div>
<div id="menuizq">
<ul>
<li><a href="" >Inicio</a></li>
<li><a href="" >Nosotros</a></li>
<li><a href="" >Visin</a></li>
</ul>
</div>
<div id="menusup">
<nav>
<ul>
<li><a href="" >Home</a></li>
<li><a href="" >Destacados</a></li>
<li><a href="" >Noticias</a></li>
</ul>
</nav>
</div>

<div id="destacado">
<h1>Aqu se agregarn las noticias destacadas</h1>
<h1>Aqu se agregarn las noticias destacadas</h1>
<h1>Aqu se agregarn las noticias destacadas</h1>

</div>
</section>

<footer>
<div id="pie">
CopyRight 2017 - Autor: Levi Castro Email: Levironald4@gmail.com
</div>
</footer>
</div>

</body>
</html>
 Ao del Buen Servicio al ciudadano
INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO
BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

ANEXO N 01
 Ao del Buen Servicio al ciudadano
INSTITUTO DE EDUCACIN SUPERIOR PEDAGGICO PBLICO JOS SANTOS CHOCANO
BAGUA GRANDE UTCUBAMBA - AMAZONAS PER

Escala de valoracin.
2.2.2 Plantea un panel de control para administrar el acceso a las diversas pginas web que componen el
INDICADORES sitio web, asumiendo con criterio tcnico el modelo.
Participa con Respeta las Demuestra Aplica diversos Demuestra Muestra inters
entusiasmo y ideas de sus criterio para la estilos con sus coherencia entre por el tema,
demuestra compaeros, elaboracin respectivas los elementos que formulando
proactividad demostrand del panel de propiedades para crea para luego
preguntas e
TOTAL
SUB INDICADORES en el o escucha navegacin de mejorar el aspecto
aplicarlo los
atributos de estilos involucrndose
desarrollo de activa. la pgina web. de las pginas CSS a los en las mismas.
la actividad web. elementos HTML.
asignada.

N APELLIDOS Y NOMBRES 0 1 2 0 1 2 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4
01 FLORES MORALES Ruth Anglica
02 HERRERA HUAMN Manuel Jess
03 JIMNEZ VICENTE Maycol Jhimy
04 SALAZAR PREZ Diana Isabel