Grabación de la quinta sesión celebrada el 20 de mayo de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos (página 54 a 80)" y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

Nota: Consultad previamente el material incluido al final de este artículo.

Línea temporal

0 m 00 s: Introducción. Elementos a analizar: audio y video y fondos.

1 m 30 s: Audio, recomendable formato mp3

2 m 44 s: Cómo incorporar un audio, etiqueta <audio controls> </audio>. "controls" para que se activen los controles.

4 m 28 s: El control de audio que aparece por defecto es estándar, no se puede cambiar su formato.

4 m 48 s: Uso de la etiqueta imagen <img> usando openInteractive para abrir el audio.

5 m 42 s: Ejemplos de vídeos. Si son vídeos en local, estos estarán en una carpeta local dentro de la carpeta de contenidos del libro. Es aconsejable tener siempre una imagen que represente a cada vídeo o interactivo en general (veremos que es útil cuando generemos un pdf de nuestro libro).

7 m 50 s: Código de inserción: <video> </video>. Se especifica el ancho (width), controles (controls="") y tiene un parámetro poster que enlaza con la imagen que hemos citado antes como conveniente. Fuente del vídeo, source.

9 m 21 s: Formato mp4, ogg, web m son compatibles HTML5. El formato compatible con todos los navegadores: mp4.

11 m 10 s: Contenedor para vídeos con enlace externo. "Gran contenedor": <div class="interactive">

13 m 24 s: Vídeo en youtube. Como generar el póster con la herramienta recortes de windows. Descripción del código.

18 m 39 s: Políticas restrictivas de youtube.

20 m 30 s: Parámetros en los vídeos de youtube. (consultad el libro guía).

21 m 18 s: Vídeos en Vimeo.

23 m 42 s: Vídeos de Daylimotion.

24 m 32 s: Vídeos y presentaciones en Internet Archive.

27 m 00 s: Juegos desde Internet Archive.

28 m 05 s: Audios desde Internet Archive.

28 m 26 s: Vídeos de TED.

28 m 49 s: Vídeos de Tik Tok. Posibilidad de descarga en local.

30 m 11 s: Uso del código del "gran contenedor" para interactivos de Descartes, de Phet, etc.

33 m 19 s: Etiqueta <figcaption> (texto descriptivo de la figura) y prefijo identificador del mismo (figura, vídeo, escena, etc.)

36 m 00 s: Se dejan los fondos para la próxima sesión. 

 38 m 30 s: Archivo comprimido con interactivos de DescartesJS para usar con audio y vídeo y que se genere adecuadamente el pdf.

39 m 55: Como usar los interactivos anteriores y por qué.

41 m 52 s: Preguntas.

•  42 m 09 s: Problema con reproducción embebida de un vídeo de youtube.Vídeo con reclamación.
• 46 m 05 s: Canal Odysee tiene menos restricciones que youtube.
• 50 m 28 s: Necesidad de ir preparando los libros personales para poder certificar el curso.
• 52 m 07 s: No se recomienda usar Drive para subir los vvídeos por estar ligado a una cuenta personal.

55 m 25 s: Despedida. 

Grabación de la cuarta sesión celebrada el 6 de mayo de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

Nota: Consultad previamente el material incluido al final de este artículo.

0 m 00 s: Introducción. Se trabajarán dos elementos multimedia: Texto (cita, hiperenlaces, notas al pie de página, indentación, referencias bibliográficas y títulos especiales) e imagen (formato html, con estilo especial css, image expand...

2 m 40 s a 8m 40 s: Ocurre una incidencia técnica. 

8 m 40 s: Continuamos... imágenes con cursor y con enlace a otros elementos multimedia.

10 m 11s: Cita textual. Por defecto incluye una línea lateral. Clase "note".

12 m 14 s: Para quitar esa línea lateral modificar en mis_estilos en .note, border-left y basta poner 0px. En norma APA se incluye un margen mayor en las citas textuales: margin-left: 40 px;. Tambiñen se puede incluir sangrías derechas con margin-right.

15 m 25 s: Hiperenlaces. Etiqueta <a>, href y target.

18 m 22s: Notas al pie de página: <span class="footnote">Texto xxxxxx</span>.

20 m 22 s: Párrafos en libros de obras de teatro, identación. En mis  estilos: text-indent.

22 m 18 s: Incluir bibliografía. <bibitem> con un id.

25m 25 s: Hacer referencia a un ítem bibliográfico: <bibref ref_id="xxxx"></bibref>.

26 m 55 s: Títulos especiales. Clase "num_block" con un prefijo: prefix.. De igual manera se puede modificar en mis estilos el estilo de num_block.

29 m 56 s: Uso de imágenes. Etiqueta <img> (no es requerido su cierre, pero puede usarse </image> o </>.

33 m 00 s: Diferentes formatos de imágenes. Imagen vectorial svg.

35 m 42 s: Centrado de imágenes. Diseño especial para nuestras imágenes en "mis estilos".

37 m 19 s: El libro trae por defecto la clase "image_expand" que pone un sombreado y el cursor de selección (la mano por defecto) que requiere indicar qué ha de realizarse al pulsar: onclick.

40 m 15 s: Apertura con onclick y openInteractive.

42 m 35 s: Apertura de un vídeo con openInteractive.

44 m 40 s: Preguntas: 

• Proxima sesión se trabajará con audio y vídeo.
• Opinión sobre aplicación al modelo de cartillas que se quiere diseñar en Perú. 
• Necesidad de práctica y prueba-error para el aprendizaje

49 m 05 s: Recordatorio de la publicación que hemos relaizado en PubHTML5 en formato pdf interactivo en formato filpbook. Diferentes posibilidades de presentación del libro interactivo.

 51 m 42 s: Más preguntas...

• Experiencia adquirida en la elaboración del primer libro interactivo. Organización previa de los contenidos antes de su traslación al libro. 
• Ánimo a la hora de iniciar el diseño de un nuevo libro. Son pocas las etiquetas que hay que recordar y basta copiar y pegar, puesl los objetos que se usan son repetitivos.
• Fundamental tener el prediseño y contenidos del libro antes de comenzar a hacerlo. Hay que sistematizar el procedimiento.
• Materiales para matemáticas en Bogotá. Inconvenientes de usar Moodle, u otras análogas, al ser plataformas cerradas (al menos a nivel de estudiantes de Primaria y Secundaria).

Despedida. 

Grabación de la tercera sesión celebrada el 22 de abril de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

Nota: Consultad previamente el material incluido al final de este artículo.

0 m 00 s: Cómo diseñar algunos estilos desde un diseño externo.

2 m 10 s: Crear un archivo de estilos mis_estilos.css (archivo con extensión css)

3 m 33 s: referenciar en el index del libro interactivo este nuevo archivo de estilos.

4 m 32 s: intervenir el body {   }

4 m 48 s: cambio del tamaño de la fuente font-size. Unidad de medida el pixel: px (hay otras unidades pero en el libro se usa ésta en su diseño). Es una medida absoluta

8 m 00 s: Una página del libro tiene un ancho y alto de 640 px 825 px, con margen izquierdo y derecho de 50 px, arriba 30 px y abajo 20 px. Así el ancho de la página que se interviene es de 540 px.

8 m 45 s: em medida relativa 1.25 em (aumenta un 25%), por ejemplo font-size: 1.25 em incrementa un 25% el tamaño establecido de la fuente. No se recomienda su uso, al menos en este momento.

9 m 40 s: Corregir el final de una página para separarla algo del número de la página incluyendo un estilo en la etiqueta div reduciendo a un 98% el tamaño de la fuente (es un "truco" ). 

12 m 20 s: Cambio de tipo de fuente font-family. Por defecto Lato.

15 m 16 s: Intervenir los párrafos  p {  }. Alinear los textos a la izquierda: text-align: left.

16 m 39 s: cambio del color de la fuente: color.

18 m 04 s: Introducir cajas (contenedor). Las clases de etiquetas nuevas van precedidas por un punto. Por ejemplo .caja1 {   }

19 m 15 s: Invocar una clase de etiqueta desde el texto del libro: class="xxxxx"

19 m 48 s: Inlcuir un borde: border

20 m 50 s: Poner un margen usando un ancho para la caja, por ejemplo width:  80%;  (simepre terminando en ;)

21 m 52 s: Centrar la caja usando un margen izquierdo margin-left y porcentaje, o mejor usando con margen izquierdo y derecho automático.

23 m 08 s: Margen del texto incluido en una caja respecto al borde de esta padding.

23 m 40 s: Redondear los bordes de las esquinas border-radius.

23 m 58 s: Incluir una sombra box-shadow.

25 m 45 s: Poner un fondo background.

26 m 28 s: Incluir un título a la caja.

34 m 10 s: Verificar los estilos con el modo oscuro del libro. Modificar el fondo en modo oscuro body.dark

35 m 38 s: Guardar el libro en pdf.

37 m 18 s: Publicación en otras plataformas por ejemplo al publicar en ISSUU todo funciona adecuadamente y se recupera el formato flipbook.

39 m 10 s: Fase de coloquio y preguntas.

• Poner sombra a una caja dentro de otra caja. Se puede poner sobra al texto text-shadow. También se puede poner la sombra a la izquierda poniendo -4px (negativo).
• Conveniencia de la hoja de estilo externa frente al uso particular en algunas etiquetas.
• Uso de textos preelaborados para integrar en un futuro libro, ¿preparar la hoja de estilos con antelación? Conveniencia de planificar el diseño, aunque en la producción el autor suele ir cambiando.
• W3Schools web de referencia para aprendizaje de html.
• Publicación de los libros interactivos y reconocimiento de los mismos mediante ISBN y certificado de la Editorial. RED Descartes los aporta para que puedan integrarlos en su currículum y méritos. 

Grabación de la segunda sesión celebrada el 8 de abril de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

0 m 00 s: Recordatorio de la sesión anterior.

1 m 52 s: Diseño de hojas de estilo. p. 21 del libro guía de formación. Trabajamos sobre la plantilla base "Mi libro" (descarga).

2 m 45 s: Editamos nuestro primer párrafo sobre "Mi libro". Uso de <h1>, <h2> y <p>

4 m 50 s: Nuestro primer estilo: style=" ". Alineación de textos: text-align: left; o right; o center; o justify;

6 m 34 s: Color al texto: color: bien denominándolo con su nombre en inglés o bien mediante códigos rgb.

8 m 03 s: Cambio de tamaño de la fuente: font-size: mediante píxeles px o porcentaje %.

11 m 45 s: Salto de línea <br>.

14 m 09 s: Estilos para párrafos. Inclusión de cajas con sombras: box-shadow.

16 m 00 s: Ancho de la caja: width.

16 m 50 s: Márgenes: margin-left, margin-right.

19 m 00 s: padding márgenes dentro de la propia caja.

20 m 00 s: color para la caja: backgrouund-color.

21 m 05 s: Necesidad de agrupar estilos en lugar de usar estilos en cada etiqueta: Hojas de estilo o CSS.

22 m 20 s: Uso de estilos predifinidos en <div>. Encapsular estilos en <div>. p. 24 del libro de formación. 

28 m 00 s: Estilos en <head>. Etiqueta  <style type="text/css">

33 m 00 s: Familias de fuentes de los textos.

37 m  26 s: diferencia entre fuentes serif y sans-serif

39 m 30 s: Heramienta para practicar con estilos disponible en la p. 28 del libro de formación.

40 m 45 s: Etiqueta neutra: <span>. Negrilla: <b>. Itálica: <i>

42 m 27 s: En la próxima sesión se abordan las hojas de estilo en un archivo externo.

 42 m 30 s: Preguntas:

• 42 m 40 s: Distinguir varios <div>. Inicialmente mediante comentarios, pero se verá cómo distinguirlos en la próxima clase.
• 43 m 20 s: Diferencia <div> y <body>.
• 44 m 14 s: Cómo organizar el trabajo de practicar con "Mi libro", qué hacer o a qué esperar.
• 52 m 00 s: Uso de id para la tabla de contenido.

1 h 00 m 00 s: Despedida. 

Grabación de la primera sesión celebrada el 25 de marzo de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

 0 m 00 s: Presentacion del director del curso y de los docentes del mismo.

2 m 50 s: Inicio del curso. Presentación del mismo.

3 m 17 s: Libro guía del curso. Para la edición de nuestro libro interactivo personal será necesario tener descargado el modelo o plantilla básica del libro (ver vídeo de introdución del curso y el apartado 1B de este artículo). Se describen los elementos básicos: sumarios o tabla de contenidos, modo de visualización y herramientas auxiliares incluidas.

6 m 15 s: Objetivo del curso y del proyecto "iCartesiLibri".

7 m 25 s: Nuestros primeros libros interactivos tipo flipbook y otras posibilidades como issu (pero no interactivos). Nuestra versión actual es adaptable a cualquier tipo de dispositivo.

10 m 45 s: Herramientas de edición. Editor html (ver sección 1B de este artículo).

13 m 28 s: La plantilla inicial básica de nuestro libro interactivo (Mi_libro)

14 m 20 s: Imágenes a usar en los libros (verificar licencia de uso). Fuentes donde conseguir imágenes reutilizables y reconocimiento de créditos.

17 m 13 s: Formatos de las imágenes.

18 m 14 s: Etiquetas HTML. <html> </html>, <head> </head>, <body> </body>.

21 m 19 s: <title> Título del libro </title> (título en la pestaña del navegador).

23 m 15 s: En la barra de herramientas del libro hay un editor html para poder practicar. Forma de usarlo.

24 m 46 s: Etiquetas informativas al navegador: <!DOCTYPE html> información al navegador del tipo de archivo: HTML5. Y <meta character="UTF-8"> información de la codificación usada en los caracteres.

28 m 05: Color de fondo "background-color". Estilos <style>.

30 m 27 s: Párrafos <p></p>.

31 m 55 s: Títulos o encabezados de secciones en un texto. <h1, <h5></h5> y <h6></h6>.

34 m 16 s: Listas o viñetas <ul> </ul>, <li> </li>.

36 m 07 s: Un ejemplo con "Mi_libro" (enlace de descarga en sección 1B de este artículo). Carpetas book, extra e images. El archivo html del libro: index.html.

37 m 29 s: Editar el arcjivo index.html.

38 m 11s: Posicionarse en la primera página del libro (línea 181 del index de  Mi_libro). 

39 m 02 s: Intervenir la primera página (conviene tener abierto el fuchero en el editor para realizar las modificaciones y en el navegaodor para observar lo cambiado --guardar el archivo en el editor y actualizar la pestaña del navegador--.

40 m 48 s: Escritura de un párrafo en Mi_libro.

42 m 09 s: La paginación del libro no es automática, es el autor quien ha de detectar cuando cambiar de página. <div class="page"> </div>.

43 m 00s: Cómo identificar las páginas: Línea de comentario <!-- comentario -->, <div class="page"> </div>. 

44 m 51 s: Invitación a editar algunas páginas del primer libro de cada uno de los asistentes. Y a ver el vídeo de herramientas de edición incluido en la sección 1B de este atículo.

45 m 40 s: Preguntas e inquietudes.

• 46 m 30 s: Paso entre páginas ¿cómo se gestiona? y número de líneas en cada página.
• 47 m 14 s: Duda sobre imágenes. Pantallazos.
• 48 m 52 s: Sobre la gestión simultánea del editor y de la pestaña delnavegador.
• 53 m 43 s: Consulta sobre derechos de autor. Sobre la editorial RED Descartes y licencia con la que publicamos los libros en nuestra editorial.
• 59 m 46 s: ¿La plantilla está actualizada con la última versión?
• 1 h 01 m 14 s: Sobre la paginación automática ¿es posible? No, ha de hacerse manualmente, bien creando una nueva página o cambiando el tamaño de la fuente.
• 1h 12 m 47 s: ¿El diseño se ha de indicar en cada página? No, se usan estilos globales, hojas de estilo. Sólo para páginas específicas en las que se quiera cambiar el diseño para destacar algo en particular se inclurá el estilo en dicha página. 

Uso de las herramientas de edición para elaborar un libro interactivo. Se parte de una plantilla básica (Mi_libro) que hay que descargar previamente.

Se muestra la edición de Mi_libro con tres editores (Notepad ++, Sublime y Visual Estudio).

Aprendizaje de las primeras etiquetas:

• Párrafo.
• División con clase página.
• Comentario.
• Sección.

10s: La plantilla inicial: Mi_libro.

35s: Descarga del editor html.

1m 30s: Edición de la plantilla del libro interactivo.

4m 0s: Editar la primera página con algunos editores (usted seleccionará el que desee). Uso de la etiqeta párrafo: <p></p>

8m 45s: Incluir más páginas. <div class="page"> </div>. Etiqueta comentario <!-- Comentario -->.

9m 40s: Cambiar el título de una sección del libro (encabezado a segundo nivel) , etiqueta <h2> </h2>

Grabación de la octava sesión celebrada el 4 de febrero de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Documento de referencia: Guión y contenidos de la octava sesión (descarga).

Línea temporal del vídeo:

00 m 00 s: Inicio. 

00sm 38 s: Variables en DescartesJS

01 m 40 s: ancho y alto de un espacio mediante la variable: espacio._w y espacio._h 

03 m 10 s: Centrar un contolr usando las variables ancho y alto de un espacio.

04 m 08 s: Variable escala de un espacio: espacio.escala. Variables para traslación de los ejes, ver página 7 del guión de la sesión.

05 m 58 s: Otras variables par espacios tridimensionales: espacio.rot.y, espacio.rot.z. Ver páginas 8 y 9 del guión.

07 m 00s: Variables del ratón (páginas 10 a 12 del guión). Posición: espacio.mouse_x, espacio.mouse_y. Parámetro "sensible al movimiento del ratón" en un espacio.

10 m 15 s: Más variables de ratón: mouse_clicked y mouse_pressed.

12 m 00 s: Variable rnd, valor aleatorio en el intervalo [0, 1).

13 m 40 s Funciones de Descartes: Funciones comunes (p.p.17 a 20 del guión).

16 m 30 s: Funciones definidas por el usuario.

19 m 25 s: Autoevaluación. Uso de una plantilla para elaborar esa autievaluación.

25 m 50 s: Macros (macroinstrucciones).

27 m 00 s: Un ejemplo de macro: la barra Jinich (pp. 39 a 42 del guión).

34 m 00 s: Modificación del color con variables en el intervalo [0, 1] o con funciones que toman valores en dicho intervalo.

36 m 53 s: Utilización de una macro. Cambio de los valores incluidos en esa macro.

42 m 00 s: Otro ejemplo: La macro random.txt. Permutación de n números naturales.

45 m 38 s: Finalizando el curso.

45 m 45 s: Intervalo para la preguntas:

• Agradecimiento por el curso recibido. Sugerencia de que el curso, en próximas ocasiones, en lugar de ocho semanas se ptograme al menos para diez.
• Cómo trabajar con las definiciones y los algoritmos incluidos en el selector PROGRAMA. Profundizar en ello.
• ¿Curso adicional? Para profundizar sobre la programación.
• Certificados del curso.
• Agradecimientos adicionales y admiración. Algunas sugerencias adicionales, más sobre la duración y la parte de programación.
• El curso se plantea como "clase invertida" y no se ha llevado a cabo totalmente esa metodología que presupone una dedicación previa de los discentes.
• Despedida y motivación. ¡Ánimo! 

Grabación de la séptima sesión celebrada el 28 de enero de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Documento de referencia: Guión y contenidos de la séptima sesión (descarga). Y "más sobre fuentes".

Sobre 

Línea temporal del vídeo:

00 m 00 s: Inicio. 

00 m 18 s: Introducción: Se abordará el aprendizaje del control gráfico, el diseño de secuencias temporales, lógicas o de ordenación. Finalmente cómo cambiar fuentes de caracteres diferentes a los que tiene por defecto DescartesJS.

2 m 10 s: Uso de los controles gráficos. Se puede inncluir una imagen en la propia definición del control o usar las coordenadas de este para posicionar una imagen definida en gráficos. Diferencia entre ambas situaciones.

4 m 59 s: Como indicar las coordenadas de un control gráfico a una imagen.

6 m 12 s: ¿Por qué optar por usar la imagen controlada por un control, en lugar de el control con su imagen?: para poder cambiar la imagen.

7 m 05s: Detalle sobre las cinco definiciones incluidas en la escena ejemplo de secuencia temporal:

7m 10 s: Vector para indicar posición relativa de las imágenes a usar. Explicación de dirección relativa de un archivo.

9 m 25 s: Sitios para descargar imágenes de secuencias temporales (ver p. 5 y 6 del guión).

10 m 33 s: uso de tres funciones. ¿Qué es una función?

10 m 45 s: Descripción de la función denominada rota().

12 m 15 s: Cómo rotar (girar) una imagen.

13 m 13 s: Escalar una imagen (aumentar o disminuir). 

14 m 30 s: Al inicio de la carga de la escena (algoritmo INICIOo que se ejecuta sólo una vez) se invoca la función rota() para conseguir rotar de manera aleatoria las imágenes. Uso de rnd que genera número aleatorio en el intervalo [0, 1). Como obtener un número aleatorio en un intervalo por ejemplo [0, 45) o en [-45, 45).

16 m 48 s: Dos funciones que se invocan permanentemente en el algoritmo CALCULOS que se ejecuta siempre.

16 m 50 s: Una es controla() que controla posición del control gráfico y cómo limitar los valores que toma éste.

19 m 20 s: Cómo controlar el cambiar del tamaño de la imagen. 

21 m 30 s: Forzar que la imagen coincida con los cajones de la secuencia temporal

22 m 54 s: Función evalua() para evaluar la respuesta del usuario si se corresponde con la posición adecuada.

24 m 10 s: Se incluye una animación inicial como reclamo o adorno.

25 m 20 s: Dibujo de un polígono para representar los cajones que acogen la secuencia temporal. 

28 m 10 s: Uso de familias, aquí se define una familia de tres polígonos. Consultar p. 10 del guión de esta sesión.

31 m 50 s: Dibujo del los rectangulos rojos cuando la posiciónen la secuencia es errónea.

33 m 20 s: Cambio de la fuente de los textos.

33 m 35 s: Carpeta fonts con dieciséis fuentes.

34 m 46 s: La fuente no se puede cambiar en DescartesJS, se realiza de manera externa a la escena, en el código html de la página que contiene la escena: <link rel...>

36 m 10 s: Más sobre fuentes (consultar documento: "más sobre fuentes").

38 m 40 s: Incluir una fuente seleccionada de la colección antes mostrada.

40 m 54 s: Cómo conseguir una fuente (p. 33 y siguientes del guión de esta sesión).

43 m 30 s: Conclusión, propuestas de tareas.

44 m 05 s: Preguntas:

• Sobre selección de un tipo de fuente para unos textos y otra para otros. Uso de más de un <link font...>.
• Sobre la sesión octava y última. 
• Cómo aleatorizar la posición de las preguntas en un test.

 53 m 24 s: Despedida.

 Para la séptima sesión:

• Guión y contenidos de la octava sesión (descarga).

Grabación de la sexta sesión celebrada el 21 de enero de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Pascual Bravo de Medellín (Colombia) y presidente de RED Descartes Colombia.

Documento de referencia: Guión y contenidos de la sexta sesión (descarga).

Línea temporal del vídeo:

00 m 00 s: Inicio. Esta sesión de amplios y extensos contenidos.

00 m 45 s: Esquema de la sesión: Introducción, vídeo motivador.

01 m 40 s: Recomendación de uso mp3 en los controles tipo audio. Escena ejemplo.

03 m 00 s: uso de variables "mudas" par invocar funciones.

03 m 22 s: Formatos de vídeo. Usaremos y recomendación de uso mp4 que admiten todos los navegadores.

05 m 10 s: ¿Dónde conseguir vídeos?: Vídeo propio o búsqueda en la web (Pixabay, por ejemplo).

07 m 41 s: Ejemplo de qué ha de ser un vídeo interactivo. Inclusión de actividades evaluativas o formativas usando espacios padre, hijo y nieto.

10 m 24 s: Escena de prueba como muestra para aprender a incluir un vídeo.

13 m 15 s: Conversión del vídeo en interactivo. Inclusión de una actividad interactiva en la escena anterior.

14 m 45 s: Controles de vídeos. Inclusión de un vídeo usando el control de Descartes tipo "vídeo" y gestión del mismo con las funciones play(), pause() y currentTime() y la variable currentTime. 

23 m 10 s: Parada del vídeo para poder realizar la actividad interactiva.

25 m 00 s: Comunicación entre escena padre/hijo. parent.set('xxxx', yyyy)  y parent.update(). Escena ejemplo.

28 m 00 s: Ocultar el vídeo mientra se realiza la actividad interactiva.

30 m 20 s: Uso de plantillas y envío de la nota con parent.set y parent.update.

32 m 18 s: Más sobre comunicación de escenas de DescartesJS (p. 14 del guión de esta sesión).

32 m 45 s: Detalle de elaboración del vídeo interactivo (páginas 19 a 28).

35 m 30 s: Necesidades a cubrir dentro de los controles de vídeo de DescartesJS. Alternativa uso de un plug-in para incrementar funciones adicionales de gestión del vídeo.

39 m 52 s: Un segundo ejemplo (páginas 28 a 32 del guión).

42  m 16 s: Un tercer ejemplo (páginas 33 y 34).

44 m 36 s: Un  ejemplo adicional (pp. 35 a 41). Inclusión de líneas de tiempo y elementos auxilares adicionales.

48 m 50 s: Uso de vídeos de YouTube.

49 m 10 s: Preguntas.

• Zhema aporta su visión sobre el potencial y sobre la dificultad, salvable con dedicación.
• Ramiro invita al uso de las plantillas para conseguir una alta productividad a un bajo coste. La planificación de la actividad interactiva es la que necesita mayor dedicación que el montaje con la plantilla.
• Zhema coincide con Ramiro.
• Juan Guillermo incide en que la necesidad es la que conduce a la profundización y estudio. Invita a Héctor a hablar sobre ello.
• Héctor incide en que el aprendizaje requiere un esfuerzo importante, pero que con las plantillas se  consiguen resultados buenos sin necesidad de adentrarse en la programación.
• Juan Guillermo transmite la facilidad del uso de las plantillas. Pero también la motiviación propia de iniciar un proyecto personal ya supone haber realizado la mitad del proyecto a realizar.
• Juan Guillermo invita a Rosa a hacer interactivos los vídeos de su libro interactivo de Historia.
• Héctor pregunta. Ubicación de los archivos de GeoGebra para comunicar con escenas de Descartes. Juan Gmo. ejemplifica la situación.
• La siguiente sesión, la séptima, también requiere tiempo de preparación, de planificación. Y en la octava usaremos macros.
• Zhema valora positivamente el uso de secuencias lógicas que se aprenderán en la siguiente sesión.

 1 h 04 m 54 s: Despedida.

 Para la séptima sesión:

• Guión y contenidos de la séptima sesión (descarga).