?Cómo INSERTAR en Google Sites un efecto de IMÁGENES DESLIZANTE con HTML.

¡Hola! Bienvenidos al canal EdTrainer, donde hacemos fácil el uso de la tecnología aplicada al ámbito  de la Educación. En el vídeo anterior, en el que mostré cómo insertar el botón de compartir en Google Classroom dentro de un Sites mostré también el efecto de deslizamiento de imágenes. Y, algunos de vosotros, me habéis pedido que realice un vídeo mostrando cómo hacerlo. Por eso, en este vídeo te voy a mostrar cómo crear en Google Sites el efecto de desplazamiento de imágenes como éste. Has de saber que este efecto, por el momento, no está disponible de forma nativa en Google Sites. Por eso, usaremos un pequeño truco utilizando HTML y CSS. Lo primero que vas a necesitar son dos imágenes de las mismas dimensiones. Exactamente, de las mismas dimensiones. Pero que sólo se mostrarán cuando deslices el cursor sobre ellas. Una vez que he seleccionado las dos imágenes, me aseguro de que son exactamente del mismo tamaño. Las subo a mi Google Drive en formato jpg o png. Una vez allí nadie podrá verlas porque es privado, por lo que el siguiente paso será ponerlas en modo público. Las selecciono y cambio los permisos de privado a público. y listo, ya está. Pero aún, no se podrán ver porque todavía no son imágenes alojadas. Lo que significa que no podemos hacer referencia a ellas en el código. Para que podamos hacer esto tendremos que copiar ambas imágenes con su identificación de código. Podremos encontrar la identificación (ID) del archivo en su enlace de compartición. Vamos a hacerlo Abrimos Documentos y pegamos la URL del archivo de imagen. Luego, buscaremos la identificación del archivo. Aquí la tenemos, a partir de la letra "d". Lo resalto con otro color para que se vea claramente. Esta es la parte de la URL que nos interesa y vamos a mantener. El resto lo podemos eliminar. Ya tenemos la identificación de nuestro primer archivo de imagen. Volvemos a Google Drive. Copiamos el enlace público de la imagen Y, ahora, hacemos lo mismo para la segunda imagen. Tomaremos la URL pública del archivo Buscaremos la identificación (ID) de la imagen y la mantendremos eliminando el resto. Para que podamos convertirlas en desplazamiento de imágenes alojadas, en la descripción del vídeo te dejo un enlace al documento que vas a necesitar. Copia todo este código, a continuación, lo pegas y sustituyes la parte resaltada por el código de identificación de tus  imágenes. Tienes, ahora, dos enlaces que alojan la URL para referenciar en el código En el documento, tienes el código HTML que vamos a incluir en el Sites. en las etiquetas de estilo tendremos que definir la altura y ancho de la imagen primera y de la segunda imagen. que han ser, exactamente, igual para ambas imágenes. Añadimos en Background la URL de nuestra imagen primera. Copiamos y pegamos. Fíjate en que la "URl" quede dentro de las comillas. Hacemos lo mismo con la imagen segunda. Por último, copiamos el código HTML completo Y, ahora, vamos a nuestro Google Sites. Hacemos doble clic para que aparezca la rueda de opciones. Elegimos la opción de insertar. Seleccionamos "insertar código". Pegamos nuestro código HTML. Pulsamos en "siguiente". Ahora, se previsualiza lo que hemos insertado. Ajustamos el tamaño y la ubicación. Vamos a la opción de vista previa. Comprobamos que todo funcione. Aquí está. Se ven ambas imágenes al pasar el cursor sobre ellas. Por último, podemos cambiar el fondo. Ya lo tenemos. En la descripción del vídeo te dejo un enlace con el acceso al documento que contiene el código HTML. A partir de ahora, podrás mejorar la apariencia de tus creaciones en Sites y crear tarjetas de contenido deslizantes. Comparte en comentarios si este vídeo te ha sido de utilidad. Asegúrate de suscribirte al canal y de tener activada la campana para recibir todas las notificaciones de los nuevos vídeos. Gracias por tu tiempo y por tu atención. Hasta el próximo vídeo. Gracias