1
00:00:00,000 --> 00:00:10,240
Hola, este tutorial es para explicar el proceso para poner sonido a las imágenes de mi S-Learning.

2
00:00:10,759 --> 00:00:18,399
Es decir, yo tengo imágenes en mi S-Learning y lo que quiero es que al hacer clic en la imagen

3
00:00:18,399 --> 00:00:22,320
se reproduzca un sonido que yo he grabado con la grabadora de S-Learning.

4
00:00:23,019 --> 00:00:27,719
Bien, pues vamos a ver el ejemplo.

5
00:00:27,719 --> 00:00:36,320
Por ejemplo, aquí tenemos la imagen de un bicho bola y cuando yo pulso se va a escuchar la voz, mi voz grabada.

6
00:00:37,659 --> 00:00:44,719
Esta es la imagen de un bicho bola que está comiendo bacterias y todo tipo de suciedad en el suelo.

7
00:00:45,320 --> 00:00:49,939
Bien, pues este es el producto final. Vamos a ver cómo lo hemos hecho.

8
00:00:50,060 --> 00:00:55,799
Vamos a ir al paso 1 y en el paso 1 lo primero que tenemos que hacer es grabar.

9
00:00:55,799 --> 00:01:02,079
Abrimos un iDevice de texto y grabamos la voz que queramos.

10
00:01:02,600 --> 00:01:10,959
Este proceso es para conseguir el nombre del archivo porque luego lo vamos a utilizar en los siguientes pasos.

11
00:01:11,180 --> 00:01:12,200
Entonces tenemos que hacer esto.

12
00:01:14,780 --> 00:01:18,359
Elegimos la grabadora, lo grabamos.

13
00:01:20,180 --> 00:01:23,079
Este es un bicho bola y aparece de esta forma.

14
00:01:23,079 --> 00:01:33,140
Entonces abrimos el HTML, en el editor aparece aquí, y vemos, localizamos donde el nombre de ese archivo.

15
00:01:33,560 --> 00:01:43,620
Es fácil localizarlo porque en audio, buscamos audio, y en los controles vemos que el lugar donde se almacena

16
00:01:43,620 --> 00:01:51,439
es una carpeta que se llama resource, y el nombre es todo esto, y está con la extensión web,

17
00:01:51,439 --> 00:02:00,120
que puede ser también mp3 pues esto lo copiamos es importante porque lo vamos a utilizar después

18
00:02:01,400 --> 00:02:11,740
después pasamos al segundo paso en el que vamos a abrir el html del device donde está la imagen

19
00:02:11,740 --> 00:02:19,199
en nuestro ejemplo al abrir nos encontramos con este código con la imagen que está esto

20
00:02:19,199 --> 00:02:25,599
src que significa que es el lugar donde se almacena el texto alternativo que no

21
00:02:25,599 --> 00:02:35,520
hay nada y las dimensiones vale pues ahora lo importante es ponerle una

22
00:02:35,520 --> 00:02:40,819
identificación a esta imagen para ello vamos a poner este valor id igual a

23
00:02:40,819 --> 00:02:45,639
bicho yo le he llamado bicho pero si lo ponemos aquí a continuación de

24
00:02:45,639 --> 00:02:54,680
Esto es importante porque luego el código va a buscar esta identificación de la imagen que le hemos puesto.

25
00:02:55,659 --> 00:02:58,400
Para ello ya estamos preparados para pasar al paso 3.

26
00:02:59,840 --> 00:03:07,979
Bien, pues ahora vamos a abrir el código HTML donde está la imagen y hemos visto que está así, tal cual.

27
00:03:07,979 --> 00:03:21,759
Nosotros si tenemos más código porque está con más texto, pues lo que vamos a hacer es identificar la imagen con el bicho.

28
00:03:21,759 --> 00:03:29,819
y vamos a pegar este código que lo hemos generado, que lo hemos creado a través de inteligencia artificial

29
00:03:29,819 --> 00:03:38,099
y pegamos esto a continuación del código que teníamos anteriormente.

30
00:03:38,639 --> 00:03:47,080
Teniendo la consideración siguiente, donde pone nombre de archivo, es el nombre que hemos sacado de esa manera en el paso 1,

31
00:03:47,080 --> 00:03:51,539
lo ponemos aquí, en este caso, este ejemplo es este.

32
00:03:51,759 --> 00:03:54,199
Lo pegamos en todo esto.

33
00:03:56,340 --> 00:03:58,580
Y luego el nombre de la imagen.

34
00:03:58,659 --> 00:04:01,680
El nombre de la imagen que le hemos puesto es bicho.

35
00:04:02,020 --> 00:04:02,780
Se lo ponemos aquí.

36
00:04:03,379 --> 00:04:08,280
Ahora lo que tenemos que hacer es pegar todo el código que hemos creado

37
00:04:08,280 --> 00:04:14,240
y lo vamos a pegar en un device de texto.

38
00:04:14,240 --> 00:04:20,139
Por ejemplo, título, prueba.

39
00:04:21,839 --> 00:04:22,779
Abrimos el HTML.

40
00:04:24,100 --> 00:04:38,089
y actualizamos y al guardar vemos que el producto final es este. Cuando hacemos clic sobre la imagen

41
00:04:38,089 --> 00:04:48,370
este es un bicho bola que come suciedad del suelo. Bueno, pues este es el videotutorial para poner

42
00:04:48,370 --> 00:04:53,470
imágenes. Seguro que se puede hacer de una forma más sencilla, pero bueno, esta es la que he encontrado

43
00:04:53,470 --> 00:04:56,490
en el día de hoy. Muchas gracias.