Scribd
Cargar
46 vistas13 páginas

Práctica Dir 7 HTML

El documento describe los pasos para crear una galería de imágenes animada e interactiva utilizando la aplicación fancybox. Se explica cómo agregar el código HTML, CSS y JavaScript necesario para mostrar miniaturas de imágenes que al hacer clic despliegan la imagen completa con efectos de transición.

Cargado por

LIZET OMAYRA GARCIA PONCEANO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
46 vistas13 páginas

Práctica Dir 7 HTML

El documento describe los pasos para crear una galería de imágenes animada e interactiva utilizando la aplicación fancybox. Se explica cómo agregar el código HTML, CSS y JavaScript necesario para mostrar miniaturas de imágenes que al hacer clic despliegan la imagen completa con efectos de transición.

Cargado por

LIZET OMAYRA GARCIA PONCEANO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

PRÁCTICA DIRIGIDA 7

HTML, CSS Y JAVA SCRIPT


Competencia: Crea una galería de imágenes animada e interactiva utilizando las herramientas de
la aplicación fancybox.
Temas: Aplicación fancybox para crear galerías de imágenes con animaciones e interactividad
dentro de una página web de tipo portafolio.

Muestra Final:

“Antes de comenzar, compruebe la siguiente información”


* Archivos descargados de la aplicación fancybox, y que se hallan en su sitio web:
a) carpeta css: fancybox.css
b) carpeta img/trabajos/... 10 imágenes (tamaño normal) y 10 imágenes en miniatura.
c) carpeta js: 5 archivos java script sobre fancybox (adicionales a los 2 del flexslider)

* En la carpeta img/trabajos e img/trabajos-e se han agregado imágenes para ser usadas


en este material académico.
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 2

CÓDIGO HTML
1. Primero copiamos el archivo servicios.html y luego lo pegamos en el mismo lugar. Ahora le
cambiamos el nombre por trabajos.html

2. Abra este último archivo trabajos.html en su editor de código y modifique el código que aparece
de color azul:
<!DOCTYPE html>
<html lang=”es” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Trabajos</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<meta name=”description” content=”Muestras de trabajos CPC”/>
<meta name=”viewport” content=”width=device-width,initial-scale=1”/> <!--diseño sensible
al tamaño del dispositivo-->
<link rel=”shortcut icon” type=”image/x-icon” href=”img/cpc_imagen2.ico”/>
<meta name=”author” content=”Nombre y Apellido”> <!--Indica el autor de la página, como
una herramienta para los buscadores -->
<link rel=”author” type=”text/plain” href=”img/humans.txt”/>
<link rel=”stylesheet” href=”css/estilos.css”/>

<link rel=”stylesheet” href=”css/fancybox.css”>


<link rel=”sitemap” type=”application/xml” title=”Sitemap” href=”sitemap.xml”/> <!--crea un
mapa del sitio web en el archivo sitemap.xml esta etiqueta deberá estar también en el código del
index.html-->
<script type=”text/javascript” src=”js/jquery-1.4.3.min.js”> </script>
<script type=”text/javascript” src=”js/jquery.mousewheel-3.0.4.pack.js”>
</script>
<!--invocamos a los dos archivos jquery del plugin, el archivo easing se
invocará con estos dos -->
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 3

<script type=”text/javascript” src=”js/jquery.fancybox-1.3.4.pack.js”>


</script>
<!--para desencadenar el plugin (el programa adicional para nuestra página)
escribiremos lo siguiente-->
<script>
$(document).ready( function() {
$(“a[rel=trabajos]”).fancybox ({
‘transitionIn’ :’fade’,
‘transitionOut’ :’elastic’,
‘titlePosition’ :’over’,
‘titleFormat’ : function(title, currentArray,
currentIndex, currentOpts)
{
return ‘<span id=”fancybox-title-over”> Imagen ‘ +
(currentIndex + 1) + ‘ de ‘ + currentArray.length + (title.length ? ‘:&nbsp; ‘ +
title: ‘ ‘) + ‘</span>’;
}
});
});
</script>
</head>

3. Ahora, mas abajo, borre el contenido del body, entre </header> y <footer>
<li><a href=”trabajos.html”>Trabajos</a> </li>
<li><a href=”contacto.html”>Contacto</a> </li>
</ul>
</nav> <!--el nav estará dentro del header -->
</header>

borrar todo aquí


<footer>
CPC Construcción y Planos
</footer>
</body>
</html>
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 4

4. Debajo del cierre de la etiqueta </header> escriba el siguiente código que se muestra aquí de
color azul:
</header>
<section id=”contenido”>
<section id=”trabajos”>
<h2> Galería de Trabajos </h2>

<div class=”portafolio”> <!-- primera fila -->


<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo1.jpg”
title=”trabajo 1”> <img class=”redonda” src=”img/trabajos/trabajo1-mini.jpg”>
</a> <!--rel “trabajos” es por que hace referencia al plugin que vamos a
invocar-->
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo2.jpg”
title=”trabajo 2”> <img class=”redonda” src=”img/trabajos/trabajo2-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo3.jpg”
title=”trabajo 3”> <img class=”redonda” src=”img/trabajos/trabajo3-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo4.jpg”
title=”trabajo 4”> <img class=”redonda” src=”img/trabajos/trabajo4-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo5.jpg”
title=”trabajo 5”>
<img class=”redonda” src=” img/trabajos/trabajo5-mini.jpg”>
</a>
</article>
</div> <!-- cierre de la primera fila -->
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 5

<div class=”portafolio”> <!-- segunda fila -->


<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo6.jpg”
title=”trabajo 6”> <img class=”redonda” src=”img/trabajos/trabajo6-mini.jpg”>
</a> <!--rel “trabajos” es por que hace referencia al plugin que vamos a
invocar-->
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo7.jpg”
title=”trabajo 7”> <img class=”redonda” src=”img/trabajos/trabajo7-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo8.jpg”
title=”trabajo 8”> <img class=”redonda” src=”img/trabajos/trabajo8-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo9.jpg”
title=”trabajo 9”> <img class=”redonda” src=”img/trabajos/trabajo9-mini.jpg”>
</a>
</article>
<article>
<a rel=”trabajos” class=”fade” href=”img/trabajos/trabajo10.jpg”
title=”trabajo 10”> <img class=”redonda” src=”img/trabajos/trabajo10-mini.
jpg”>
</a>
</article>
</div> <!-- cierre de la segunda fila -->
</section>
</section>
<footer>
CPC Construcción y Planos
</footer>
</body>
</html>
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 6

Muestra Preliminar:
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 7

5. Abrimos el archivo estilos.css y agregamos solo los códigos que se muestran aquí de color
azul:

article#servicio1, article#servicio2, article#servicio3 {


background:#5b0ba8;
display:inline-block;
width:31%; /*total 93%, menos de 95%*/
vertical-align:top;
}
article#servicio1 div, article#servicio2 {
text-align: center; /* el contenido inferior de servicio1 y todo de servicio2
irá centrado */
}

section#trabajos {
background:#5b0ba8;
border-radius: .5em;
margin: 0 auto;
max-width: 80%; /*sobra 10% a cada lado de la página */
padding: .5em;
text-align: center;
}

div.portafolio {
margin: 2em auto; /*una separación entre cada div portafolio */
}

div.portafolio article {
display: inline;
padding: 1em; /*margen interno entre cada imagen*/
}

footer {
color: #000;
font-size:0.85em;
padding:0.75em 0;
}
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 8

6. Mas abajo, después del estilo .fade:hover añada el siguiente código que aparece de color azul:

.fade:hover {
opacity:0.7;
transition: all 0.5s ease-out;
}

.redonda {
border-radius: 3.125em ; /*1 em equivale a 16px que son medidas
absolutas en este caso queremos redondear en 50px, entonces en medidas
em sería 3.125 em, es decir 50 entre 16* por que 50px es mas o menos la
mitad del tamaño de las miniaturas*/
box-shadow: 3px 3px 7px rgba(255,255,255,.3); /*sombra blanca con 30%
de opacidad*/
}
/* Ahora vienen los media queries: permitirán condicionar el diseño de la página para su adapta-
ción a diversos tamaños de pantalla o dispositivos*/

Muestra Preliminar (pulse los botones de las miniaturas para comprobar las animaciones e
interactividad):
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 9

7. En la parte inferior del mismo archivo modifique algunos “media queries”. Solo lo que aparece
de color azul:

@media screen and (max-width:1080px) {


nav a {
font-size:1em; /*cambio de tamaño del nav cuando sea de 1080px o menor */
}
article#galeria1 {
width:97%;
}
aside {
width:20%;
}
article#description-nosotros, article#multimedia-nosotros,
#img-servicios, article#nuestros-servicios{
width: 45%;
/* ambas partes se van a ver como iguales en ancho, considerando
que el ancho disponible será de 90% */
}
article#servicio1, article#servicio2, article#servicio3 {
width:30%;
}
section#trabajos {
max-width: 90%;
}
div.portafolio article{
padding: 1em;
}
}

@media screen and (max-width: 800px) {


nav li {
font-size:0.95em;
}
article#galeria1 {
width:95%;
}
#img-servicios, article#nuestros-servicios, article#servicio1 {
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 10

display: block;
margin:0 0 .25em 0;
width: 95%;
}
#img-servicios{
width:98%;
}
article#servicio2, article#servicio3 {
width: 45%;
}
section#trabajos {
max-width: 95%; /*el fondo azul, al reducirse la pantalla a menos de
800px tendrá un espacio de 2.5% a cada lado */
}
div.portafolio article {
padding: 1em; /*distancia entre cada imagen al reducir el tamaño de la
pantalla*/
}
}

@media screen and (max-width: 600px){ /* cuando el ancho máximo sea de 600px o menor*/
nav li {
display:inline-block; /*cada elemento li se comporta en bloque pero en conjunto
los enlaces se comportarán en línea; es decir el conjunto de enlaces ocupará el 98% del ancho
de la pantalla según el width de abajo */
margin:0px;
width:98%;
}
article#galeria1 {
width:98%;
margin-left:3px;
}
section#principal article#description-nosotros, article#servicio2{
margin-bottom:0.2em;
/* solo la sección principal tendrá el margen inferior
de 0.2em cuando la pantalla sea de 600px o menor */
/* Debajo de la sección description-nosotros habrá un espacio de 0.2 em
cuando el ancho sea menor a 600%*/
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 11

}
section#principal, aside, article#description-nosotros, article#multimedia-nosotros,
article#servicio2, article#servicio3 {
display: block;
/* principal y aside se verán en bloque cada uno por separado y ya no compartirán
el mismo ancho*/
width:95%;
}
#img-servicios {
display:none;
}
div.portafolio article {
display: block;
margin: .5em auto;
/*margen de arriba y abajo de .5em y a ambos lados (izquierdo y
derecho) automáticos “auto” o iguales para que se centren */
padding: 0;
}
}
Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 12

Muestra Final (a 800 y 600 píxeles respectivamente):


Práctica dirigida de HTML, CSS y JS Docente: Enrique Polo 13

EJERCICIOS DE EVALUACIÓN
1. Dentro del archivo estilos.css reduzca la redondez de las imágenes en miniatura de manera
similar a la muestra inferior (ir al estilo .redonda)
2. En trabajos.html cambie las imágenes anteriores por las imágenes que se encuentran en
la subcarpeta img/trabajos-evaluación (en total serían 12 miniaturas y 12 de tamaño
estándar).

3. Cambie el diseño de la galería para que aparezca en 3 filas (4 imágenes por fila) tal como la
siguiente muestra. Deberá agregar una tercera fila, luego del cierra de la segunda fila...
<div class=”portafolio”> <!-- tercera fila -->
.
.
.

MUESTRA FINAL

También podría gustarte