1
00:00:00,820 --> 00:00:09,580
Utilizaremos un ejemplo de galería de w3schools.com para incluir en nuestro proyecto.

2
00:00:09,580 --> 00:00:14,279
Podríamos hacerlo de cualquier otra forma, simplemente colocando diferentes imágenes.

3
00:00:15,580 --> 00:00:19,100
Para ello nos proporciona el código.

4
00:00:19,960 --> 00:00:22,359
Podemos ver cómo funciona.

5
00:00:22,519 --> 00:00:28,500
Básicamente es una serie de estilos para unas etiquetas de clase galería que hemos creado,

6
00:00:28,719 --> 00:00:36,659
en las cuales vamos a meter las imágenes y además un enlace a la imagen en grande

7
00:00:36,659 --> 00:00:38,960
y una descripción de cada una de ellas.

8
00:00:39,579 --> 00:01:11,840
Bien, vamos a copiar los estilos y una de nuestras páginas, que es la de galería, ya la he dejado preparada para trabajar sobre ella.

9
00:01:11,840 --> 00:01:34,379
Bien, pues dentro de... Bueno, primero hemos copiado los estilos, vamos a llevarlos al documento CSS y los vamos a pegar. Luego veremos cómo los modificamos. De momento no afectan porque no hemos incluido todavía las etiquetas con la clase de galería.

10
00:01:34,379 --> 00:01:58,379
La otra parte del código que queremos utilizar es el código HTML, que como veis, para cada imagen, esta sería para cada imagen, incluye un contenedor de clase galería, un enlace a la imagen, la propia imagen y un contenedor para la descripción.

11
00:01:58,379 --> 00:02:02,379
voy a copiarlo, tal cual, voy a llevarlo

12
00:02:02,379 --> 00:02:05,739
a mi documento, nosotros lo vamos a incluir

13
00:02:05,739 --> 00:02:10,599
dentro del contenido central que estaba, recordad, en la etiqueta

14
00:02:10,599 --> 00:02:14,479
article y vamos a añadirlo, ahí vemos

15
00:02:14,479 --> 00:02:18,520
como aparecería nuestra imagen

16
00:02:18,520 --> 00:02:21,280
esta imagen no la tenemos, por ello no aparece

17
00:02:21,280 --> 00:02:25,039
pero así es como

18
00:02:25,039 --> 00:02:27,860
como lo veríamos

19
00:02:27,860 --> 00:02:33,560
vale, vamos ahora a añadir la imagen que realmente queremos utilizar

20
00:02:33,560 --> 00:02:37,120
vamos a ir a nuestras imágenes, hemos creado

21
00:02:37,120 --> 00:02:41,479
dentro de la carpeta imágenes he creado una carpeta galería

22
00:02:41,479 --> 00:02:45,699
con las imágenes que quiero utilizar, en este caso no es

23
00:02:45,699 --> 00:02:49,780
foret, voy a dejar blanco, importante que la url sea relativa

24
00:02:49,780 --> 00:02:52,000
y vamos a darle a aceptar

25
00:02:52,000 --> 00:03:00,009
Y ahí veríamos cómo queda una de las imágenes.

26
00:03:00,610 --> 00:03:10,969
Bueno, simplemente vamos a copiar este bloque de etiquetas y lo vamos a pegar tantas veces como imágenes tengamos.

27
00:03:14,919 --> 00:03:17,740
Yo voy a poner seis imágenes, lo pego seis veces.

28
00:03:17,740 --> 00:03:20,620
ahí está, al principio

29
00:03:20,620 --> 00:03:23,120
pego 6 veces y como he copiado

30
00:03:23,120 --> 00:03:25,060
del código anterior

31
00:03:25,060 --> 00:03:26,740
no me pega la misma imagen, simplemente

32
00:03:26,740 --> 00:03:28,759
desde la opción de diseño de

33
00:03:28,759 --> 00:03:30,800
BlueGryphon tendría que ir

34
00:03:30,800 --> 00:03:32,139
seleccionando las imágenes

35
00:03:32,139 --> 00:03:34,960
que quiero utilizar

36
00:03:34,960 --> 00:03:36,520
bueno

37
00:03:36,520 --> 00:03:38,879
lo ideal sería colocar un título y un

38
00:03:38,879 --> 00:03:40,719
texto alternativo, yo por ahorrar tiempo

39
00:03:40,719 --> 00:03:42,639
voy a permitir ponerlo en blanco

40
00:03:42,639 --> 00:03:44,120
así voy a ir cambiando

41
00:03:44,120 --> 00:03:46,800
las diferentes imágenes

42
00:03:46,800 --> 00:03:49,900
ahí lo veis por orden

43
00:03:49,900 --> 00:04:40,350
ahora deberíamos cambiar

44
00:04:40,350 --> 00:04:42,970
la descripción para cada una de ellas

45
00:04:42,970 --> 00:04:45,970
esto lo podríamos hacer directamente desde la opción de diseño

46
00:04:45,970 --> 00:05:00,579
por ejemplo, si guardamos

47
00:05:00,579 --> 00:05:02,639
y vemos el aspecto en el navegador

48
00:05:02,639 --> 00:05:08,410
pues comprobaríamos que se nos crea

49
00:05:08,410 --> 00:05:12,290
una galería de imagen totalmente

50
00:05:12,290 --> 00:05:15,410
adaptable al tamaño de pantalla

51
00:05:15,410 --> 00:05:36,220
Bien, si queremos modificar alguna de las características, podríamos hacerlo perfectamente desde el documento CSS que hemos utilizado teniendo en cuenta que es cada uno de los lectores que hemos ido colocando.

52
00:05:36,220 --> 00:05:57,220
Por ejemplo, hemos utilizado un contenedor para cada una de las imágenes de un tamaño de 180 píxeles. Esto lo podríamos modificar y ponerlo a nuestro antojo. Por ejemplo, si quisiéramos solo tener tres imágenes, podríamos poner en porcentaje el tamaño de las imágenes de la galería, por ejemplo, al 25%.

53
00:05:57,220 --> 00:06:14,459
Bien, podemos comprobar el efecto que produciría sobre el documento, y bueno, podríamos también aumentar la separación que hay entre imágenes,

54
00:06:14,459 --> 00:06:22,939
recordad que eso sería dentro de ese pequeño contenedor

55
00:06:22,939 --> 00:06:25,899
pues tiene un margen de 5 píxeles

56
00:06:25,899 --> 00:06:29,339
podríamos ponerle un margen de 15 píxeles

57
00:06:29,339 --> 00:06:32,379
y se apreciaría un mayor espacio

58
00:06:32,379 --> 00:06:37,540
entre las imágenes que compone la galería

59
00:06:37,540 --> 00:06:47,339
bueno, pues esta podría ser una opción

60
00:06:47,339 --> 00:06:55,779
Aquí os dejo el código que vais a necesitar, os lo dejaría en la actividad para que podáis descargarlo.