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.