guia6 - Uso de imagenes en una pagina web.
UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLÓGICOS
ESCUELA DE COMPUTACIÓN
CICLO: 01-2015
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="http://www.algunsitio.com/Gente/Juan/vacaciones/familia.png" 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
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
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
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
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 manera:
@keyframes 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
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
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 (9.0.0.6)
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
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:http://www.estudiantes.info/matematicas/1eso/images/circulodesarrollo.htm
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 Vista: bloque
pertenecientes a clase mapadeimagenes :
section.mapadeimagenes:hover
ul.figuras li
P dentro de li pertenecientes a clase ul.figuras.
ul.figuras li p
Margen: 10px 0 0 0
Área de relleno: .3em
8
Vista: ninguna
Fondo: #FFF
Posición: absoluta
Top:100%;
P dentro de li:(al pasar ratón) dentro de clase Vista: Bloque
ul.figuras
ul.figuras li:hover p
id fig1 dentro de clase ul.figuras
ul.figuras li#fig1
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
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
Propiedades
Tipo de letra. Aharoni
Alineación de texto: centrado
Fondo con imagen: img/Wall.jpg
header
Area de relleno: 3px
Fondo de imagen: img/placa.jpg
Repetición de fondo: no-repeat
Margen izquierdo:26%
Ancho: 626px
H1
Color de letra: #fff
Sombra de letra: 7px 8px 8px #000
Tamaño de letra: 30px
H2
Color de letra: #f3501c;
Id sección contenedor
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
Img:(cuando se da clic) dentro de id Opacidad: 0
contenedor
#contenedor img:active
Id ES1, id ES2, id ES3
Id ES1
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
Transformación de imagen
Transform: Scale(1.5) traslateY(-40px)
Scale: transforma tamaño de imagen
TraslateY: desplaza imagen en el eje Y
Id ES2
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
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
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
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
Label más próximo a checked dentro de Fondo : yellow
la clase botón
Color de borde: eee
.boton:checked+label
img dentro de clase contendor-img
Vista: block
.contenedor-img img
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;
-webkit-transition: left .3s ease-in;
Seleccionar todos los elementos que contengan el Izquierda: 0
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
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
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
body
Id pelota
img
Id sol
H1
Propiedades
Fondo de imagen: img/parque.jpg
Posición: absoluta
Superior: 70%
Izquierda: 75%
Ancho: 100px
Alto: 150px
Margen izquierdo: 55%
Margen superior: -35px
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
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 css
@-webkit-keyframes volar {
0% {
left: 0px;
}
100% {
left: 1265px;
}
}
@-webkit-keyframes saltar {
0% {
top: 500px;
}
100% {
top: 350px;
}
}
15
@-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 004.67 L913 – ISBN: 978-84-415-3108-6
2. HTML 5.
Editorial Anaya Multimedia.1ra. Edición. Madrid, España.
Autor: Alonso Álvarez García
Biblioteca UDB – Clasificación: Libro 004.67 A473 - ISBN:978-84-415-2746-1
16
© Copyright 2024