FACULTAD DEINGENIERÍA

ESCUELA DE INGENIERÍA DE SISTEMAS

Alumno

ANTHONY ERNESTO PALOMINO COTIPA

Docente

MGTR. Víctor HugoTapia Jacinto

Curso

TECNOLOGÍAS DE PROGRAMACIÓN

CAÑETE– Perú

2018
 Actividad N° 02: Actividad Colaborativa de
Investigación Formativa / Ingreso a la Biblioteca
Virtual ULADECH

Diseñando una página web con HTML, CSS y Javascript

Mi proyecto es la elaboración de una página web con la ejecución de javascript,

Teniendo en cuenta los siguiente ítems.
Actividad de Investigación Formativa
 Indican dos referencias bibliográficas acerca de la aplicación de tecnologías de
desarrollo WEB del lado del cliente, muestran atraves de capturas o imagenes los
ejemplos de las referencias aplicados a su proyecto de grupo, según las normas
Vancouver.
 Nota: Para esta actividad los alumnos se reunen y forman grupos de trabajo para
socializar el contenido de las referencias citadas y realizan su resumen (para los
alumnos integrados formar grupos de trabajo no mayor a 5 personas ni menor a 3
personas)
Actividad de Ingreso a la Biblioteca Virtual
 De manera individual los estudiantes aplican los casos propuestos por el docente,
iniciando el debate con la participación de toda el aula. Revisa la siguiente
referencia bibliográfica Manual de Programación WEB en entorno cliente.

Pantallas capturadas de mi proyecto codgo fuente, cuerpo.

1.
2. siguiendo con el avanze.

Agregando cabeceras principales

Agragando estilos

Código fuente stilos.

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
*{
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', sans-serif;
 letter-spacing: 1.5px;
}
.section__titulo {
text-align: center;
font-size: 40px;
color: #FBA919;
}
.contenedor {
margin: auto;
width: 99%;
}
/*-------------------Estilos del header-------------------*/
.header {
height: 60px;
}
.header .contenedor {
display: flex;
justify-content: space-between;
}
.logo, .icon-menu {
margin: 5px;
color: #fff;
}
.icon-menu {
display: block;
width: 40px;
height: 40px;
font-size: 30px;
background: #FBA919;
text-align: center;
line-height: 45px;
border-radius: 5px;
margin-left: auto;
cursor: pointer;
}
/*------------------Estilos del menu------------------*/
.nav {
position: absolute;
top: 60px;
left: -100%;
width: 100%;
transition: all 0.4s;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu__link {
display: block;
 padding: 15px;
background: #FBA919;
text-decoration: none;
color: #fff;
}
.menu__link:hover, .select {
background: white;
color: #FBA919;
}
.mostrar {
left: 0;
}

/*--------------Estilos de banner--------------*/

.banner {
margin-top: -60px;
position: relative;
z-index: -1000;
margin-bottom: 20px;
}

.banner .contenedor {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
color: #fff;
text-align: center;
}

.banner__txt {
display: none;
}

/*-----------------Estilos de info-----------------*/
.info__columna {
background: #FBA919;
color: #fff;
padding: 15px;
margin-bottom: 30px;
}

/*-----------------Estilos de cursos-----------------*/
.cursos__columna {
position: relative;
margin-bottom: 30px;
}
.cursos__descripcion {
 position: absolute;
top: 0;
left: 0;
color: #fff;
background: rgba(0,0,0,0.5);
width: 60%;
height: 100%;
padding: 5px;
}
.cursos__titulo {
font-size: 25px;
margin: 5px 0;
}
.cursos__img {
width: 100%;
}
/*-----------------Estilos de footer-----------------*/

.footer {
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}

.footer .social [class^="icon-"] {

display: inline-block;
color: #333;
text-decoration: none;
font-size: 30px;
padding: 10px;
background: white;
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 40px;
}

/*------------------Estilos responsive------------------*/

@media(min-width:480px) {
.logo {
font-size: 40px;
}
.banner__titulo {
font-size: 30px;
margin: 5px 0;
}
.banner__txt {
display: block;
 font-size: 18px;
margin: 7px 0;
}
.info, .cursos {
display: flex;
justify-content: space-between;
margin-top: -90px;
}
.info__columna {
width: 32%;
}
.info__titulo {
font-size: 30px;
margin: 5px 0;
}
.section__titulo {
width: 100%;
}
.cursos {
flex-wrap: wrap;
margin-top: 0;
}
.cursos__columna {
width: 49%;
}
.footer .social [class^="icon-"] {
margin: 0 10px;
}
}
@media(min-width:768px) {
.banner__titulo {
font-size: 50px;
}
.cursos__titulo {
font-size: 40px;
}
@media(min-width:1024px) {
.contenedor {
width: 1000px;
}
.section__titulo {
font-size: 50px;
margin: 30px 0;
}
.nav {
position: static;
width: auto;
}
.menu {
display: flex;
 .icon-menu {
display: none;
}
.menu__link {
background: none;
font-size: 20px;
}
.select {
color: #fff;
background: #FBA919;
}
.banner__titulo {
font-size: 60px;
}
.banner__txt {
font-size: 25px;
}
.info {
margin-top: -120px;
}
.info__columna {
padding: 30px;
}
.info__titulo {
font-size: 40px;
text-align: center;
}
.cursos__descripcion {
padding: 20px;
}
.cursos__titulo {
font-size: 50px;
}
.cursos__txt {
font-size: 20px;

@media(min-width:1280px) {
.contenedor {
width: 1200px;
}
.logo {
font-size: 60px;
}
.banner .contenedor {
top: 40%;
}
.info {
margin-top: -220px;
}
Código fuente de cuerpo (body)
<link href="https://file.myfontastic.com/t5tNwfwUapz4yDzK3B6sfe/icons.css"
rel="stylesheet">
<header class="header">
<div class="contenedor">
<h1 class="logo">I.E. Nobel</h1>
<span class="icon-menu" id="btn-menu"></span>
<nav class="nav" id="nav">
<ul class="menu">
<li class="menu__item"><a href="/" class="menu__link
select">Inicio</a></li>
<li class="menu__item"><a href="cursos.html"
class="menu__link">Cursos</a></li>
<li class="menu__item"><a href="docentes.html"
class="menu__link">Docentes</a></li>
<li class="menu__item"><a href="contacto.html"
class="menu__link">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<div class="banner">
<img src="https://s31.postimg.org/79uy90j0r/banner.jpg" alt="">
<div class="contenedor">
<h2 class="banner__titulo">La mejor educación a tu alcance</h2>
<p class="banner__txt">Estudia con nosotros y alcanza tus sueños</p>
</div>
</div>
<main class="main">
<div class="contenedor">
<section class="info">
<article class="info__columna">
<img src="https://s31.postimg.org/9sgn9p4qz/img1.jpg" alt=""
class="info__img">
<h2 class="info__titulo">Título 1</h2>
<p class="info__txt">Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Illum aut, incidunt aperiam dicta totam cumque.</p>
</article>
<article class="info__columna">
<img src="https://s31.postimg.org/9sgn9p4qz/img1.jpg" alt=""
class="info__img">
<h2 class="info__titulo">Título 2</h2>
<p class="info__txt">Expedita totam, minima praesentium suscipit
excepturi ducimus repellat harum ab, inventore neque cum! Nostrum, dicta!</p>
</article>
<article class="info__columna">
<img src="https://s31.postimg.org/9sgn9p4qz/img1.jpg" alt=""
class="info__img">
 <h2 class="info__titulo">Título 3</h2>
<p class="info__txt">Molestiae odit quas officia, dicta, nobis dolorem,
quaerat eveniet accusantium excepturi est quidem, ducimus doloremque?</p>
</article>
</section>
<section class="cursos">
<h2 class="section__titulo">Nuestros cursos</h2>
<div class="cursos__columna">
<img src="https://s32.postimg.org/3ygwxrcud/img2.jpg" alt=""
class="cursos__img">
<div class="cursos__descripcion">
<h2 class="cursos__titulo">Programación</h2>
<div class="cursos__txt">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ipsa, dignissimos.</div>
</div>
</div>
<div class="cursos__columna">
<img src="https://s32.postimg.org/3ygwxrcud/img2.jpg" alt=""
class="cursos__img">
<div class="cursos__descripcion">
<h2 class="cursos__titulo">Diseño Web</h2>
<div class="cursos__txt">Accusantium rem quia doloribus soluta ullam
pariatur alias, quas dolorum.</div>
</div>
</div>
<div class="cursos__columna">
<img src="https://s32.postimg.org/3ygwxrcud/img2.jpg" alt=""
class="cursos__img">
<div class="cursos__descripcion">
<h2 class="cursos__titulo">Diseño Gráfico</h2>
<div class="cursos__txt">Voluptates aspernatur magnam possimus natus,
et nemo maxime sed vitae!</div>
</div>
</div>
<div class="cursos__columna">
<img src="https://s32.postimg.org/3ygwxrcud/img2.jpg" alt=""
class="cursos__img">
<div class="cursos__descripcion">
<h2 class="cursos__titulo">Rhinoceros</h2>
<div class="cursos__txt">Nulla, cumque sunt laudantium blanditiis
deserunt, error dolores vero iure.</div>
</div>
</div>
</section>

</div>
</main>
<footer class="footer">
<div class="contenedor">
<div class="social">
 <a href="#" class="icon-facebook"></a>
<a href="#" class="icon-twitter"></a>
<a href="#" class="icon-gplus"></a>
<a href="#" class="icon-vine"></a>
</div>
<p class="copy">&copy; I.E. Nobel Todos los derechos </p>
</div>
</footer>
<script src="js/menu.js"></script>
</body>
</html>
Código fuente js.
var btnMenu = document.getElementById('btn-menu');
var nav = document.getElementById('nav');
btnMenu.addEventListener('click', function(){
nav.classList.toggle('mostrar');
});

Resultado final.