Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Creación de una galería de imágenes

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 9 de mayo de 2015 por Jose Tomas A.

136 visualizaciones

Tutorial para aprender a crear galerías de imágenes desde el Frontend de la Web

Más información Transcripción

Descargar la transcripción

Bien, estamos viendo ahora la sección de galería de la web. Vamos a aprender cómo crear una galería de imágenes de una forma bastante sencilla. 00:00:00
Siempre se tiene que hacer desde el backend de la página, entonces lo primero que tenemos que hacer es identificarnos en la parte trasera. 00:00:21
Aquí ya estamos identificados y vamos a acudir a utilizar el componente Event Gallery. 00:00:28
Entonces esto desplegamos en el menú de componentes y buscamos Event Gallery. 00:00:35
Hacemos clic y este es el panel de control del componente Event Gallery. 00:00:40
Bueno, vamos a suponer que queremos crear una categoría para ir añadiendo nuestras galerías de imágenes. 00:00:46
Ahora mismo solo hay cuatro categorías, actos académicos, excursiones, viajes de estudio y fiestas del centro. 00:00:52
Por ejemplo, vamos a suponer que queremos crear una categoría de viajes de estudio y dentro podemos poner cuarto de la ESO o primero de la ESO, por ejemplo. 00:00:59
Lo primero que tenemos que hacer sería crear una nueva categoría. 00:01:12
Ahora, escribimos el título de la categoría, viajes de cuarto de ESO, y en la descripción un texto muy breve. 00:01:16
Dejamos la categoría publicada y aquí es muy importante saber si esta categoría va a estar en la raíz o va a ser dependiente de otra categoría. 00:01:37
Pues de las cuatro que tenemos, lo más adecuado es que dentro de viajes de estudio se encuentre viajes de cuarto de la ESO. 00:01:47
Pues la categoría padre va a ser viajes de estudio. 00:01:54
Guardamos y cerramos. 00:01:58
Bien, aquí podemos observar las categorías existentes y hemos creado una subcategoría dentro de viajes de estudio llamada viajes de cuarto de ESO. 00:02:02
Bueno, pues ahora vamos a empezar a crear nuestra galería. 00:02:12
El término galería, aquí al estar en inglés, lo vamos a asociar siempre con eventos. 00:02:15
Gestionamos eventos, ahora mismo hay tres galerías y lo que tenemos que hacer es crear una nueva galería. 00:02:21
Vamos a crear una carpetita donde se van a almacenar nuestras imágenes y el nombre del archivo de la carpeta no tiene que contener espacios y es mejor evitarlo. 00:02:30
Entonces podemos poner una cosa sencilla, por ejemplo, y aquí tenemos que poner el título de la galería. 00:02:42
Podemos ponerlo en español y en inglés. 00:02:55
La fecha, no hace falta tampoco especificar, pone por defecto la que tenemos ahora mismo. 00:03:02
Y tan solo tenemos que seleccionar en qué categoría se va a crear nuestra galería de imágenes. 00:03:08
Vamos a poner viajes de cuarto de la ESO, vamos a marcar que ya aparezca como publicada, entonces marcamos en sí, y lo de cartable vamos a dejarlo que como este componente está pensado para vender imágenes, dejamos eso en no, para que no aparezcan todas las opciones de compra de imágenes, etc. 00:03:13
Podemos poner una descripción más amplia en este apartado 00:03:33
En inglés y en español 00:03:41
Bueno, en principio lo voy a dejar vacío porque no es necesario 00:03:43
Ya tenemos todos los campos, guardamos y cerramos 00:03:47
Efectivamente, aquí tenemos la última categoría que hemos creado 00:03:51
Viaje 2015 00:03:58
Carpeta, el título de la galería de imágenes y en qué categoría está almacenada 00:03:59
No tiene comentarios y ahora mismo tampoco tiene imágenes 00:04:07
Si observamos otras, esta tiene 3 imágenes, esta tiene 8 imágenes y esta 5 00:04:11
Bueno, pues ahora llega el momento de gestionar cómo subir las imágenes 00:04:18
Aquí tenemos este icono que nos va a servir para añadir imágenes a la galería. 00:04:24
Tan solo tenemos que examinar y decir en nuestro ordenador donde se encuentran las imágenes. 00:04:31
Bien, por ejemplo aquí tenemos estas imágenes. 00:04:39
El problema que podemos encontrarnos si queremos subir unas imágenes directamente hechas con nuestra cámara fotográfica 00:04:41
es que sean muy pesadas, ocupen mucho tamaño. 00:04:47
Entonces, antes de subir estas imágenes, que son de gran tamaño, por ejemplo aquí, este ocupa 5,80 megas y tiene unas dimensiones de 4300 x 2800 píxeles. 00:04:50
Esto hay que reducirlo antes de subirlo al componente. 00:05:05
Vamos a explicar brevemente cómo podemos reducir el tamaño de las imágenes y que se vean adecuadas en la web. 00:05:08
Aquí tenemos la galería de imágenes, podemos observar 2,95 megas, son muy pesadas. 00:05:14
Lo que tenemos, pues hay una aplicación gratuita, yo selecciono todas las imágenes que quiero reducir 00:05:22
y con botón derecho tengo una aplicación ya instalada en mi equipo y es muy sencilla de utilizar. 00:05:27
Tenemos seleccionadas las 5 imágenes, podemos elegir qué perfil para definir sus dimensiones. 00:05:37
Entonces para nuestra web yo creo que se va a ver y van a ocupar poco con unas dimensiones de 1024 píxeles por 768. 00:05:45
Lo dejamos marcado esas dimensiones, va a mantener la relación de aspecto para no deformar las imágenes. 00:05:55
Y tenemos la opción de sobre escribir las antiguas o crear copias. 00:06:01
Bueno pues entonces yo como no quiero estas imágenes después para nada voy a redimensionar el original. 00:06:05
Hacemos clic aquí y ya se han procesado 00:06:12
Cerramos y ahora por ejemplo vemos que esta imagen ya ocupa 1024x700 00:06:20
Pesa 268K 00:06:27
Entonces ahora estas imágenes sí que las vamos a utilizar en la galería 00:06:29
Bueno, pues entonces examinamos 00:06:34
Vamos a la carpeta 00:06:38
Y subimos todas las imágenes 00:06:41
Ya están subidas, cerramos y ya están guardadas. 00:06:46
Si hacemos clic aquí en la carpeta de este iconito, nos va a mostrar todas las imágenes que tiene nuestra galería recién creada. 00:07:01
Podemos definir que una de ellas sea la imagen de muestra, la de la cabecera de la galería. 00:07:11
Y ya no tenemos que hacer nada más. 00:07:18
Vamos a ver cómo ha quedado. 00:07:21
Actualizamos esto y aquí tenemos la nueva galería creada. 00:07:22
Esta sería la imagen que hemos elegido para la portada de la galería. 00:07:33
Si hacemos clic en ella, se accede a la galería completa. 00:07:37
Y para verlas de una en una, pues hacemos clic en una imagen, se carga y tenemos la posibilidad de desplazarnos a derecha y a izquierda 00:07:43
o de cerrar y volver a la pantalla anterior. 00:07:52
En la parte de arriba nos marcan las galerías, categorías y subcategorías en las que nos estamos moviendo 00:07:59
Y eso es todo 00:08:06
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
José Tomás Alonso García
Subido por:
Jose Tomas A.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
136
Fecha:
9 de mayo de 2015 - 15:39
Visibilidad:
Público
Centro:
IES PEDRO DUQUE
Descripción ampliada:

Tutorial para aprender a crear galerías de imágenes desde el Backend en Joomla 3.3. IES Rafael Frühbeck de Burgos

Duración:
08′ 14″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
27.37 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid