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.