Grabación de la sexta sesión celebrada el 3 de junio 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 91 y siguientes)" 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. Veremos como introducir expresiones matemáticas (ver vídeo auxiliar al final de esta página) e imágenes de fondo.

0 m 45 s: Intencionalidad de las imágenes que se usen en los libros interactivos. 

2 m 49 s: Veremos también fondos. Pero empezamos con las citadas expresiones matemáticas.

3 m 39 s: Librería KaTeX. Se utiliza como referencia de los contenidos de esta sesión este libro (puede descargarlo al final de esta página).

5 m 10 s: Cómo escribir una expresión matemática, se escriben entre $ y $. Los comandos en KaTeX van a continuacion de \.

6 m 52 s: Si se usan $$ y $$ se centran y se escriben en un tamaño mayor.

7 m 17s: Aplicación para verificar la escritura de las expresiones KaTeX.

9 m 34 s: En la dirección de KaTeX: https://katex.org/  se tiene la documentación.

11 m 0 s: Alinear expresiones.

13 m 30 s: Ejemplo del libro de Física donde se usa profusamente KaTeX.

15 m 42 s: Pasamos a los fondos. Se accede al libro de Compostaje y lombricultivo para mostrar diferentes ejemplos.

18 m 19 s: Incluir imágenes de fondo en una página mediante un style y uso de background-image, background-size y background-position.

20 m 30 s: Tamaño predefinido de las páginas: 640px de ancho y 825px de alto.

21 m 40 s: posición mediante coordenadas.

23 m 40 s: Imágenes con fondo oscuro. Se cambia el color a blanco: color:white. Color del título --h2--color: yellow.

26 m 15 s: Desplazamiento de la imagen. Como evitar la repetición: background-repeat: no-repeat

27 m 59 s: Imagen en dos páginas. La de la izquierda con tamaño 1280px 825px y posición 0px 0px. La de la derecha igual tamaño y posición -640px

30 m 30 s: aplicación para posicionar imágenes.

32 m 00 s: Cambio de tamaño de las imágenes y posicionamiento.

33 m 48 s: Párrafos y contenedores con imagen de fondo. Se incluye un style, igual que para la página, pero con elementos adicionales como margin-right, margin-left, padding, etc.

36 m 08 s: Usar estilos generales.

36 m 20 s: Usar el libro de esta sesión para practicar (ver final de la página).

36 m 40 s: Imagen animada compartida entre dos páginas.

40 m 40 s: Imágenes sobre imágenes de fondo. Uso de div con una clase.

42 m 39 s: Preguntas

• 45 m 00 s: Hacer copias de seguridad del index de nuestro libro por si hacemos algo mal y no nos funciona el libro a partir de un momento. Siempre podremos regresar a la última copia.
• 49 m 54 s: Diferentes formatos finales de los libros: en html y en pdf y en diferentes plataformas: proyectodescartes.org, flip-book en pubhtml5.com.

 59 m 34 s: Despedida.

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.