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. 

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.