UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN

Transcripción

1 CICLO: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN GUIA DE LABORATORIO N 8 Nombre de la práctica: Uso de imágenes en una página web Lugar de ejecución: Laboratorio de Informática. Tiempo Estimado: 3 horas. Materia: Introducción a Internet (IAI441) I. Objetivos. Que el estudiante sea capaz de: 1. Identificar cuáles son los elementos necesarios para agregar imágenes a una página Web. 2. Crear páginas Web implementando Mapa de imágenes. 3. Aplicar estilo CSS a una imagen dentro de una página Web. II. Introducción Teórica. El elemento IMG y sus atributos Se pueden incluir imágenes dentro de una página web utilizando el elemento IMG y el atributo src. Este atributo debe contener la URL, relativa o absoluta en la que se encuentra la imagen. La utilización del elemento IMG dentro de un documento web hace que se incluya la imagen especificada en por el atributo src en la posición de definición de dicho elemento. El archivo de imagen especificado en el atributo src debe ser de uno de los tres tipos antes mencionado, de lo contrario la imagen no será mostrada por el navegador. A continuación se muestran dos ejemplos de inclusión de imágenes en un documento web utilizando en uno de ellos una URL relativa y, en el otro, una URL absoluta. <IMG src="img/imagen.jpg"> <IMG src=" alt="una foto de mi familia en el lago."> Además del atributo src, se pueden incluir algunos atributos adicionales como los que se enumeran y explican a continuación: alt: permite realizar una descripción corta (pocas palabras) de la imagen, llamada a veces texto alternativo. Los navegadores deberían presentar el texto alternativo, cuando por alguna razón no puedan mostrar la imagen. longdesc: se utiliza para realizar una descripción detallada de la imagen. Esta descripción debería de ser complementaria a la descripción corta del atributo alt. name: puede utilizar este atributo para poder identificar a la imagen con un nombre. Esto le será útil cuando realice scripts en lenguaje JavaScript, para realizar páginas web dinámicas principalmente. id: asigna un identificador único a la imagen con el propósito que se pueda hacer referencia a ella desde una hoja de estilo o desde scripts. 1

2 ismap / usemap: Indica que la imagen es un mapa. Si utiliza ismap estará indicando que se trata de un mapa de imagen en el servidor y si utiliza usemap se definirá como un mapa de imagen en el cliente. Mapa de Imágenes. Un mapa interactivo es una imagen que tiene la propiedad de estar dividida en diferentes partes o sectores, de forma que cada una de ellas puede funcionar como un enlace estándar HTML. Los mapas de imágenes pueden ser mapas del lado cliente, en los que el código necesario para la definición de las diferentes partes de la imagen se encuentra en la propia página que contiene el mapa, y que por lo tanto se ejecuta en el navegador del cliente, y mapas del lado servidor, en los que éste código se encuentra en un script o programa almacenado en el servidor Web. Un mapa de imagen en el lado del cliente precisa para su implementación en una página Web de dos partes. Por un lado, necesitamos definir el mapa en sí, para lo cual se usan los elementos MAP y AREA, junto con algunos atributos, siguiendo una estructura como la que se muestra a continuación: <MAP NAME="nombre_mapa"> <AREA shape="rect circle poly default" coords="x1,y1,x2,y2,..." href ="enlace1.html">... <AREA shape ="rect circle poly default" coords="x1,y1,x2,y2,..." href ="enlacen.html"> </MAP> En donde: 1. name es el nombre con el que se identificará al mapa de imagen 2. nombre_mapa es un nombre identificador único que damos a cada mapa. 3. shape establece la forma que va a tener cada área de enlace (rectangular, circular, poligonal o por defecto). 4. coords define las coordenadas de los sucesivos puntos que forman el área establecida en shape. Así, si elegimos una forma rectangular deberemos dar las coordenadas de los vértices superior izquierdo e inferior derecho del rectángulo; si es una forma circular daremos las coordenadas del centro del círculo y la longitud del radio; y si es una forma poligonal deberemos especificar las coordenadas de los sucesivos puntos que forman el polígono. 2

3 5. href asigna el enlace al que lleva cada una de las áreas definidas en el mapa. Tipos de áreas: Shape distintas Existen tres tipos de áreas distintas, suficientes para hacer casi cualquier tipo de figura. En el dibujo que acompaña estas líneas se puede ver una representación de las áreas, que detallamos a continuación. shape="rect" Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como están nombradas dichas coordenadas en nuestro dibujo, el área tendría la siguiente etiqueta: <area shape="rect" coords="x1,y1,x2,y2" href="#"> shape="circle" Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma: <area shape="circle" coords="x1,y1,r" href="#"> shape="poly" Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. A la vista del dibujo y los nombres que hemos dado a los puntos del polígono, la etiqueta <area> quedaría de esta forma. <area shape="poly" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#"> NOTA IMPORTANTE: Debes de observar el símbolo numeral (#) delante del nombre del mapa en el atributo usemap. Si se omite, el mapa no funciona. Las transiciones. Las transiciones no son otra cosa que el efecto de un cambio en el estado de un elemento de forma gradual en un intervalo de tiempo. Cuando hablamos de cambio de estado nos referimos a cambios en los valores de sus propiedades. Por ejemplo, supongamos que tenemos un párrafo (elemento <p> de un documento HTML) cuyo color de fuente es rojo. El color de la fuente sería una propiedad del elemento párrafo (propiedad "color"). Imaginemos que queremos que el color de la fuente en un momento determinado cambie a azul. Con Javascript fácilmente podríamos cambiar la propiedad 'color' del elemento párrafo a azul y el usuario inmediatamente vería que el color del texto del párrafo ya no es rojo sino azul. Sin embargo, eso NO es una transición. La transición se basa en que el elemento tiene que cambiar el valor de la propiedad de forma gradual durante un intervalo de tiempo. Es decir, si decidimos que el intervalo de tiempo sea de 2 segundos, la transición 3

4 sería el efecto que se produce al ver cómo, en esos 2 segundos, el color de la letra va cambiando progresivamente de rojo a azul. Este tipo de efectos producen en una página la sensación de que está "viva" :). A fecha de hoy (ver fecha de publicación del tutorial), las transiciones únicamente son soportadas por los navegadores: Firefox, Chrome, Safari y Opera. Internet Explorer (al menos hasta su versión 9) no las soporta. Propiedades de las transiciones. Para poder aplicar transiciones sobre un determinado elemento contamos con las siguientes propiedades: transition-property: indica sobre qué propiedad del elemento se aplicará la transición. Pueden especificarse varias propiedades separándolas por comas. El valor por defecto es 'all' que indica que la transición se aplicará sobre todas las propiedades del elemento. Un valor válido para esta propiedad sería, por ejemplo, 'width'. transition-duration: indica el tiempo que tardará la transición en completarse. El valor por defecto es 0. Ejemplos de valores válidos para esta propiedad pueden ser: 2s (2 segundos), 300ms (300 milisegundos), etc... transition-timing-function: indica cómo será la progresión de la transición. El valor por defecto es 'ease'. Los valores que acepta esta propiedad son los siguientes: o linear: la transición se produce en forma de progresión lineal. Tarda lo mismo desde que empieza hasta que acaba. o ease: la transición se produce de forma lenta al principio, luego más rápido, y termina otra vez lenta (valor por defecto). o ease-in: la transición comienza lenta y luego va más rápido. o ease-out: la transición comienza rápida y termina lenta. o ease-in-out: la transición comienza y acaba lenta. Igual que 'ease' pero de forma más notable. o cubic-bezier(n,n,n,n): permite definir nuestro propio intervalo de progresión. n: valor entre 0 y 1. transition-delay: es el tiempo que tardará la transición en comenzar. Por defecto es 0. transition: permite unificar todas las propiedades anteriores en una sola. Un ejemplo sería transition: width 3s ease-in 200ms Importante: por el momento los navegadores que proveen estas propiedades requieren que se especifiquen anteponiendo el prefijo de cada navegador a la propiedad. Esto es, para Firefox hay que anteponer el prefijo -moz- a la propiedad (ej: -moz-transition-duration:3s), para Chrome o Safari sería -webkit- y para Opera -o-. Que por qué sucede esto? Pues porque estas propiedades todavía no están estandarizadas, por lo que los proveedores (navegadores) las consideran experimentales. Pero tranquilos que es cuestión de tiempo que se estandarice... :) Las animaciones. Las animaciones son bastante parecidas a las transiciones. Ambas tienen en común que actuan sobre los valores de las propiedades de un elemento transformándolos gradualmente en otros valores. Sin embargo, las animaciones ofrecen bastante más control que las transiciones en el proceso de transformación del elemento. 4

5 Las transiciones se ejecutan cuando se produce un cambio en las propiedades de un elemento. Ya lo vimos en el punto anterior, cuando el usuario pasa el ratón por encima de un elemento y la css indica que el valor de determinadas propiedades cambia (:hover), entonces se lanza la transición. Las animaciones son algo distintas ya que se lanzan explícitamente. No se espera a que suceda un cambio en el estado del elemento como pasaba con las transiciones. Es por ello que para usar animaciones necesitamos "keyframes". Estos "keyframes" describirán el comportamiento que tendrá la animación durante su periodo de ejecución. A diferencia de las transiciones, las animaciones (de momento) no son soportadas por el navegador Opera. Keyframes. Como hemos dicho, los keyframes indicarán el comportamiento que tendrá un elemento durante el tiempo que dure la animación. Para definir el comportamiento de una animación mediante un keyframe lo hacemos de la siguiente nombre-animacion { 0% { left: 10px; 25% { left: 150px; 50% { left: 160px; 75% { left: 300px; 100% { left: 310px; Como vemos, nombre-animacion será el nombre que le demos a nuestra animación y que será referenciada por el elemento que vayamos a animar (lo veremos más adelante). Los porcentajes que hay dentro de la regla indicarán el estado de la propiedad (o propiedades del elemento) en ese % de duración de la animación. Si por ejemplo, nuestra animación durase 10 segundos, nuestro elemento comenzaría con una distancia a la izquierda del elemento que lo contiene (propiedad left) igual a 10px. Transcurrido el 25% del tiempo (2.5 segundos) su posición sería de 150px, transcurrido el 50% del tiempo (5 segundos) su posición sería de 160px, y así sucesivamente... Por supuesto, podemos añadir tantos porcentajes como queramos. Notese que el 0% se puede sustituir por "from" y el 100% por "to". 5

6 Animaciones de imágenes con css usando keyframes 1. Animation-name. Establece el nombre de la animación. 2. Animation-timing-function. Establece que la animación será lineal, es decir, que su velocidad será constante durante todo el tiempo que dure. 3. Animation-iteration-count. Establece la cantidad de veces que se verá la animación, en este caso infinitas. 4. Animation-duration. Establece el tiempo que durara la animación, en este caso una vuelta completa de la imagen en 6 segundos. 5. transition-duration. Especificamos el tiempo que durara la animación Propiedades de Keyframes 6

7 III. Requerimientos N Cantidad Descripción 1 1 PC con Windows XP con uno de los siguientes editores de páginas Web: PHP Designer Personal, Notepad ++, BlueFish o HTML Kit y cualquiera de los navegadores siguientes: Internet Explorer 9, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible), Netscape ( ) 2 1 Guía de Laboratorio #8 de Introducción a Internet 3 1 Memoria USB IV. Procedimiento Digite los siguientes ejercicios y guarde todas las páginas web en archivos separados con extensión.html. Indicaciones Generales. 1. Crear una carpeta en mis documentos y colocar en el nombre N Carnet_Guia6, Nota: Cambiar N Carnet por su número de carnet brindado por la Universidad. 2. Crear una nueva carpeta dentro de la anterior y colocarle en el nombre css. 7

8 Ejercicio 1. Mapeo CSS y HTML. 1. Cree un archivo HTML llamado Ejemplo1.html. 2. Guardar el archivo en la carpeta creada con su carnet. 3. Digite la siguiente estructura html ETIQUETA title img <map name="figurasimg"> <ul class="figuras"> VALORES Mapeo de imagenes CSS y HTML DENTRO DE SECCIÓN Ubicación de archivo: img/fig_geo.png Texto alternativo de imagen: figuras geométricas Especificar imagen como mapa de cliente con nombre: figurasimg Forma de área Poly Coordenadas: 109,274,190,134,273,274 Texto alternativo: triangulo Enlace: # Forma de área Circle Coordenadas: 644,402,59 Texto alternativo: circulo Enlace: Forma de área rect Coordenadas: 555,177,727,275 Texto alternativo: rectangulo Enlace: # <li id="fig1"><p>cuadrado con mapeo CSS</p></li> 4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre estilo1.css 5. Aplicar las siguientes reglas de estilo: Regla Propiedades body Margen izquierdo: 250px; Color de fondo: #0096ff; clase mapadeimagenes Posición : relativa Todos los elementos li que se Estilo de lista: ninguno encuentren dentro de ul.figuras Vista: ninguna Posición: absoluta Borde: medium solid white Al pasar ratón sobre un li dentro de ul.figuras pertenecientes a clase mapadeimagenes : section.mapadeimagenes:hover ul.figuras li P dentro de li pertenecientes a clase ul.figuras. ul.figuras li p Vista: bloque Margen: 10px Área de relleno:.3em 8

9 P dentro de li:(al pasar ratón) dentro de clase ul.figuras ul.figuras li:hover p id fig1 dentro de clase ul.figuras ul.figuras li#fig1 Vista: ninguna Fondo: #FFF Posición: absoluta Top:100%; Vista: Bloque Ancho: 122px Alto: 123px Top:145px Left: 345px; 6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos 7. Visualizar la página web en el navegador. Al pasar el clic sobre el cuadrado podremos ver el efecto de mapeo css y el mapeo html5 en las figuras triangulo, rectángulo, circulo. Ejercicio 2. Mapeo CSS y HTML. 1. Cree un archivo HTML llamado Transformaciones.html. 2. Guardar el archivo en la carpeta creada con su carnet. 3. Digite la siguiente estructura html ETIQUETA VALORES 9

10 title H1 H2 P img img img Efectos de Transformación DENTRO DE ENCABEZADO ALBUM EL SALVADOR Imagenes con efectos de transformacion En este ejemplo aplicamos tranformaciones de: escala, rotacion y elemento activo.<br> Al dar click en la imagen se desvanece. DENTRO DE SECCIÓN Id: ES1 Ubicación de archivo: img/es1.jpg Texto alternativo de imagen: El Salvador 1 Id: ES2 Ubicación de archivo: img/es2.jpg Texto alternativo de imagen: El Salvador 2 Id: ES3 Ubicación de archivo: img/es3.jpg Texto alternativo de imagen: El Salvador 3 4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre estilo2.css 5. Aplicar las siguientes reglas de estilo: Regla body header H1 H2 Id sección contenedor Img:(cuando se da clic) dentro de id contenedor #contenedor img:active Id ES1, id ES2, id ES3 Id ES1 Propiedades Tipo de letra. Aharoni Alineación de texto: centrado Fondo con imagen: img/wall.jpg Area de relleno: 3px Fondo de imagen: img/placa.jpg Repetición de fondo: no-repeat Margen izquierdo:26% Ancho: 626px Color de letra: #fff Sombra de letra: 7px 8px 8px #000 Tamaño de letra: 30px Color de letra: #f3501c; Margen superior:10px Fondo de imagen: img/pizarra.jpg Margen izquierdo: 25% Alto: 320px; Ancho: 650px; Sombreado de caja: 7px 8px 8px #444 Estilo de borde: solid Opacidad: 0 Margen superior: 125px Izquierda: 38% Posicion: absolute Ancho: 320px Alto: 200px Sombreado de caja: 7px 8px 8px #444 Orden de apilamiento de un elemento z-index:1 10

11 Id ES2 Transformación de imagen Transform: Scale(1.5) traslatey(-40px) Scale: transforma tamaño de imagen TraslateY: desplaza imagen en el eje Y Orden de apilamiento:2 Transform: rotate(15deg) traslatex(-150px) Rotate: Gira imagen en los grados especificados. TraslateY: desplaza imagen en el eje X Id ES3 Orden de apilamiento: 3 Transformación de rotación imagen -25deg y desplazamiento en eje X de 150px 6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos 7. Visualizar la página web en el navegador. Al hacer clic sobre las imágenes se dará efecto de opacidad. Ejercicio 3.Slider CSS 1. Cree un archivo HTML llamado Slider.html. 2. Guardar el archivo en la carpeta creada con su carnet. 3. Digite la siguiente estructura html 11

12 4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre estilo3.css 5. Aplicar las siguientes reglas de estilo: Regla body H1 Clase Slider Clase boton Hijo 1 de la clase botón.boton:nth-child(1) Hijo 2 de la clase boton Hijo 3 de la clase boton Propiedades Fondo: #0094ff; Color de letra: #ffd800 Tamaño de letra: 35px Tipo de letra: Arial Unicode MS Alineación de texto: center Vista: Block Posición: relative Margen: auto Ancho: 100% Ancho máximo: 960px Alto macimo: 440px Corte de bordes si se desborda Overflow: hidden Posicion: absolute Vista: block Inferior: 30px Margen: 0 Area de relleno:0 Orden de apilamiento: 999 Opacidad:0 Especifica tipo de cursor Curso:pointer izquierda:30px Izquierda: 60px izquierda:90px 12

13 Hijo 4 de la clase botón Label dentro de la clase slider.slider label Hijo 2 de label dentro de clase slider.slider label:nth-child(2) Hijo 4 de label dentro de clase slider Hijo 6 de label dentro de clase slider Hijo 8 de label dentro de clase slider Label más próximo a checked dentro de la clase botón.boton:checked+label img dentro de clase contendor-img.contenedor-img img Izquierda:120px Posición: absolute Inferior: 30px Ancho: 12px Alto: 12px Fondo: White; Bordes redondeados: 7px Orden de apilamiento: 100 Borde: 1px solid #777; Izquierda:30px Izquierda:60px Izquierda:90px Izquierda:120px Fondo : yellow Color de borde: eee Vista: block Float: left Clase cuatro-imagenes Ancho:400% Img dentro de Clase cuatro-imágenes Ancho: 25% Clase contenedor-img Posición: relative Izquierda:0 Creación de transición transition: left.3s ease-in; Seleccionar todos los elementos que contengan el nombre de la clase contenedor-img dentro del hijo 1 de la clase boton..boton:nth-child(1):checked ~.contenedor-img Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 3 de la clase botón Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 5 de la clase botón Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 7 de la clase botón -webkit-transition: left.3s ease-in; Izquierda: 0 Izquierda:-100% Izquierda:-200% Izquierda:-300% 6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos 7. Visualizar la página web en el navegador. Al hacer clic sobre los círculos cambiara de imagen. 13

14 Ejercicio 4.Animaciones y transiciones 1. Cree un archivo HTML llamado animaciones.html. 2. Guardar el archivo en la carpeta creada con su carnet. 3. Digite la siguiente estructura HTML 4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre estilo4.css 5. Aplicar las siguientes reglas de estilo: Regla Propiedades body Fondo de imagen: img/parque.jpg Id pelota Posición: absoluta Superior: 70% Izquierda: 75% img Ancho: 100px Alto: 150px Id sol Margen izquierdo: 55% Margen superior: -35px H1 Tipo de letra: Aharoni Tamaño de letra: 34px Color:f00 Color de fondo: #fff Ancho 450px Alineación : center Nombre de animación webkit 14

15 Id nina Id bird #id pelota:(pase el raton) Id sol: (al pasar mouse) -webkit-animation-name: girar; Tiempo de animacion webkit -webkit-animation-duration: 10s; Numero de iteracion de animacion webkit -webkit-animation-iteration-count: infinite; Function en tiempo de animacion -webkit-animation-timing-function: ease-in-out; Posición : absolute Izquierda: 60% Transform-origin:50% 100% Nombre de animación webkit:saltar Tiempo de animación webkit: 1s Numero de iteración de animación webkit: infinite Funcione en tiempo de animación: linear Posición : absolute Izquierda: 20% Transform-origin:50% 100% Nombre de animación webkit:volar Tiempo de animación webkit: 4s Numero de iteración de animación webkit: infinite Funcione en tiempo de animación: linear Tiempo de ejecución de animación. -webkit-animation-delay: 2s; Posición: absolute Superior: 20% Ancho:100px Transformación de tamaño de imagen (0.5) Transition: all 1s ease-in-out Realizar prefijos para Chrome de esta transición. Transition: all 2s ease-in-out transform: rotate(720deg) scale(2,2); Realizar prefijos para Chrome de esta transición y transformación Procederemos a crear animaciones siempre en el documento volar { 0% { left: 0px; 100% { left: saltar { 0% { top: 500px; 100% { top: 350px; 15

16 @-webkit-keyframes girar { from { -webkit-transform: rotatey(0deg); to { -webkit-transform: rotatey(-360deg); 6. Visualizar la página web en el navegador. Al hacer clic sobre el sol y la pelota veremos las trasformaciones de imagen. VI. Ejercicios complementarios 1. Al ejercicio 1 de la guía, agregar mapeo css a la figura pentágona y agregar mapeo html a la figura hexágono con direccionamiento a fanpage de la FET. 2. Al ejercicio 4 de animaciones hacer compatible con el navegador mozilla. VII. Análisis de Resultados. 1. Cree una página web de su tema favorito, que incluya imágenes con estilos css y keyframes cuyas animaciones deben ser compatibles con Chrome y mozilla. 2. Crear Slider con transición o animación diferente al realizado en la guía. VIII. Fuentes de consulta 1. HTML 5 para desarrolladores Editorial Anaya Multimedia 1ra. Edición, Madrid, España. Autor: Joseph W. Lowery y Mark Fletcher Biblioteca UDB Clasificación: Libro L913 ISBN: HTML 5. Editorial Anaya Multimedia.1ra. Edición. Madrid, España. Autor: Alonso Álvarez García Biblioteca UDB Clasificación: Libro A473 - ISBN: