buscar Buscar en RED Descartes    

Mostrando artículos por etiqueta: herramientas

 

La cuarta edición del curso "Edición de libros interactivos" de la RED Descartes (octubre de 2022 a febrero de 2023) se está desarrollando según la siguiente planificación:

calendario contenidos curso joomla
 
A continuación se enlazan diferentes artículos que incluyen diversos vídeos grabados en las sesiones en línea y que le pueden servir como orientación y guía auxiliar en su autoformación:










 Página inicial del curso "Edición de libros interactivos" IV edición


 

Publicado en RedDescartes
 
Para la formación en la "Edición de libros interactivos" de la RED Descartes, acción que se enmarca en nuestro programa de Educación Abierta, el recurso básico con el que contamos es, como no podía ser otro, el siguiente libro interactivo:

Diseno Libros Interactivos

 Diseño de libros interactivos
   Autor: Juan Guillermo Rivera Berrío y Joel Espinosa Longi.
   ISBN 978-84-18834-27-1

Este curso tiene como objetivo abordar la conceptualización y el diseño, desarrollo y experimentación de nuevos libros, basados en la interactividad, que permitan poner de manifiesto que es posible dar una respuesta positiva y asequible a los retos educativos intrínsecos al paradigma educativo emergente (Proyecto iCartesiLibri). 

 
¿Qué necesita para editar su libro interactivo?
 
Lo fundamental es la necesidad de comunicar un contenido y lo colateral conocer el soporte o continente en el que va a volcar ese contenido. Aquí nos centramos en enseñarle el continente y usted, conociendo qué se puede hacer, es quien lo hará. 
Los libros interactivos de RED Descartes se construyen sobre una plantilla que interpretada por una librería javascript y combinada con unas hojas de estilo muestra adecuada, útil y vistosamente lo que se le ha indicado. Esa plantilla está elaborada en HTML y css, pero no necesita ser un experto en estos códigos, basta ser un mero aprendiz o principiante lector de esos lenguajes para conseguir su objetivo. Gran parte de su trabajo se reducirá a escribir en los huecos predefinidos en la plantilla o a copiar y pegar determinadas etiquetas. Así pues, que la técnica no le asuste, ¡será capaz de construir su libro! sin más que poner un poquito de atención y algo de esfuerzo y dedicación. A medida que se adentre verá que lo que le decimos es cierto y a medida que profundice logrará mejorar la vistosidad de su libro.  
 
Prepare las herramientas (puede ver este vídeo)
 
  1. La plantilla o plantillas del libro interactivo. Acceda, mire, observe y descargue la plantilla que vaya a usar.
    En el curso se comienza con una plantilla básica (libro_interactivo_plantilla) que puede ver aquí y también descargarla desde acá.
  2. Necesita un editor de texto plano para poder editar ficheros en código html, puede ser el bloc de notas de Windows o TextEdit de iOS, pero le recomendamos Notepad++ o Sublime text porque estos colorean las etiquetas y faclitan la edición. Por favor, descargue el que vaya a usar.

 Comience su auto-formación

Lea e interactúe con el libro "Curso de libros interactivos", antes enlazado. También puede descargarlo.

¿Alguna ayuda adicional?

  1. Puede escribirnos a Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..
  2. Puede inscribirse a los cursos de formación en línea cuando se convoquen (ver convocatoria de la cuarta edición).
  3. Puede consultar los vídeos grabados en las sesiones de la tercera edición del curso en línea que ha sido promovido por la Institución Universitaria Pascual Bravo de Medellín (Colombia), por RED Descartes de Colombia y RED Descartes España y que está dirigido e impartido por el Dr. Rivera, vicerrector de dicha institución y presidente de la RED Descartes de Colombia.

 

Vídeos de la cuarta edición en línea del curso "Edición de libros interactivos"

(se irán publicando a medida que se desarrollen las sesiones)

videoscurso




 La editorial "Red Educativa Digital Descartes"
 
La Red Educativa Digital Descartes también desarrolla su labor como editorial de libros interactivos. Nos ofrecemos a los autores de libros de este tipo para publicar su trabajo bajo nuestro sello editorial. Si ése es su deseo, puede contactar con nosotros en la dirección de correo:
Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

 
Publicado en RedDescartes

Octava  sesión (1 de julio de 2022)

 

1A. youtube Desarrollo de la octava sesión. Octava sesión en línea.

Descripción   Contenidos temporalizados

Grabación de la octava sesión celebrada el 1 de julio 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 81 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 el material incluido al final de este artículo.

Línea temporal 

0 m 00 s: Planteamiento de la sesión. Breve en contenidos y amplia en los avances personales.

1 m 10 s: Planteamiento relativo a talleres específicos en la reuniones de los lunes.

1 m 55 s: Nos queda trabajar "Las tablas" y algunos otros detalles complementarios. En la página 81 y siguientes del libro de referencia se detallan estas tablas.

3 m 24 s: Hay unas funcionalidades adicionales (pp. 150 y siguientes) que se iran incrementando poco a poco en nuevas versiones del libro. Podemos encontrar "Bibliografía y referncias bibliográficas".

4 m 10 s: A continuación abordaremos los elementos incluidos en el libro guía de la sesión 8.

4 m 35 s: Observacioness finales de diseño: inicio de la numeración del libro: init-page-num="true".

6 m 52 s: Numeración arábiga: num-type-arabic="true". Por defecto numerará en números romanos.

8 m 55s: Cambio de posición de los números de página. Por defecto centrados en la parte inferior. Mirad en la parte final del archivo mis_estilos.css.

13 m 39 s: Sobre el cambio de color del texto. Es necesario verificarlo en fondo claro y fondo oscuro.

16 m 00 s: Textos a doble columna (y triple). Consultad mis_estilos.css

19 m 55 s: Sobre textos justificados a doble columna.

21 m 03 s: Diseño a triple columna.

23 m 05 s: Las tablas. En mis_estilos.css hay diferentes diseños. Comenzamos con el estilo por defecto.

26 m 11 s: Otros modelos de tablas.

38 m 43 s: Diseño tabla "cebra 3". Combinar columnas y celdas., y filas y celdas.

40 m 19 s: Alternativa al diseño de tablas con css es hacerlo en otra herramienta y usarlo como una imagen. Pero recomendable tener instalada la fuente Lato para homogeneizar los textos.

41 m 56 s: Alternativa para diseño a dos y tres columnas para textos, si quisieramos incluir imágenes ya no sería sencillo.

44 m 00 s: Evidencias para la certificación y aportaciones de los discentes.

  • Catalina: Libro de apoyo a la unidad digital sobre herramientas de uso institucional.
  • Edith: No ha concretado aún su libro.
  • Gabriela: En trabajo con libros de Primaria a nivel nacional en Perú. Está avanzando en el prototipo virtual del libro de 3º y en la inclusión de interactivos.
  • Jaime Humberto: Virtualizar libros que tienen en versión impresa incorporando interactivos de Scratch, GeoGebra y Descartes.
  • Jhon Jairo: Avanzando en un nuevo libro sobre diseño de objetos de aprendizaje (ya tiene otros publicados).
  • José Antonio: Trabajando libro sobre teatro (ya tiene publicados otros libros anteriormente).
  • Marco Tulio: Libro sobre Geometría.
  • Mayra Lorena: Libro sobre métodos numéricos para EDO usando Maxima.
  •  Meiyelis: Libro de Didáctica de las Matemáticas.
  • Ortencia: Libro del Principito para adultos.
  • Stephan: Nuevo libro.

La nueva sesión será para compartir los resultados logrados.

 

Material previo a esta sesión:

  1. En el libro guía págs. 81 y siguientes del libro guía.
  2. Guión de esta sesión 8. Descarga
  3. Vídeo sobre diseño de tablas.
  4. Existe la posibilidad de diseñar la portada externamente y luego pegarla en el libro: ver este vídeo. Instalación de la fuente Lato en Office.

 

Publicado en RedDescartes

Séptima sesión (17 de junio de 2022)

 

1A. youtube Desarrollo de la séptima sesión. Séptima sesión en línea.

Descripción   Contenidos temporalizados

Grabación de la séptima sesión celebrada el 17 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 105 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 el material incluido al final de este artículo.

Línea temporal 

0 m 00 s: Elementos interactivos en el libro. Diversas herramientas y proyectos que generan interactividad. Incluyendo vídeos interactivos.

5 m 30 s: código para embeber un objeto interactivo.  class= "interactive".

7 m 00 s: Objetos tipo GeoGebra externo. Clase interactive, tamaño y enlace del recurso.

11 m 57 s: Ante el riesgo de rotura de enlaces una alternativ es la descarga de recurso de GeoGebra y enlace en local.

13 m 56 s: En el subproyecto iCartesiLibri de la RED Descartes en la sección de formación está el libro "Comunicacion DescartesJS-Geogebra".

14 m 23 s: Uso de simulaciones Phet en línea y en local.

16 m 57 s: Embeber recursos interactivos de Descartes en línea.

18 m 18 s: Embeber recursos interactivos de Descartes en local.

19 m 50 s: Inclusión de windows-size="true" para apertura al tamaño de la ventana.

23 m 52 s: Recomendación de uso de recursos en local. Recursos en la RED de Descartes descargables.

26 m 11 s: Uso de plantillas de Descartes para diseñar recursos interactivos sin necesidad de conocer la herramienta Descartes. El libro "Plantillas DescartesJS".

 28 m 00 s: Cómo editar o intervenir una plantilla.

37 m 50 s: Posibilidad de incorporar cual quier otro tipo de objeto interactivos.

39 m 00 s: Observaciones, inquietudes...

  • 39 m 20 s: Sobre uso de plantillas con retroalimentación.
  • 41 m 55s: Sobre uso de las plantillas para que el alumando sea generador de recursos interactivos y licencias de uso.
  • 43 m 50 s: Recursos de la RED Descartes. ¿Dónde lo busco?
  • 44 m 58 s: Subproyectos de la RED Descartes.
  • 50 m 20 s: Intervenir las plantillas para generar nuevas plantillas.
  • 52 m 10 s: En el apartaado de formación del subproyecto iCartesiLibri se tienen dos libros de formación en la herramienta de edición DescartesJS.
  • 53 m 20 s: Labor altruista de la RED Descartes. Importancia de las TIC en este entorno educativo. 
  • 57 m 00 s: Sobre la Asamblea de la RED Decartes en Zaragoza (España).
  • 59 m 00s: Despedida.

 

 

Material previo a esta sesión: se ven los siguientes elementos (págs. 105 y siguientes del libro guía).

1. Actualización del libro Plantillas DescartesJS. También en formato PDF.

2. Para insertar objetos interactivos en nuestro libro, puede consultarse este video.

3. Algo opcional, es el uso del editor DescartesJS para adaptar objetos interactivos diseñados en otras herramientas de autor: Lim, Ardora

Se comparte el libro utilizado en la clase con los elementos explicados en esta sesión. Puede descargarlo desde este enlace.

 

Publicado en RedDescartes

Sexta sesión (3 de junio de 2022)

 

1A. youtube Desarrollo de la sexta sesión. Sextaa sesión en línea.

Descripción   Contenidos temporalizados

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.

 

Material previo a esta sesión: se ven los siguientes elementos (págs. 91 y siguientes del libro guía).

1. Expresiones matemáticas con KaTeX: https://www.youtube.com/watch?v=mLTJrE_fsL0


2. Imágenes de fondo en dos páginas: https://www.youtube.com/watch?v=hZMV2X9DAmU


3. Imágenes de fondo en contenedores y párrafos: https://www.youtube.com/watch?v=3Zazhu0hqBk


4. Una imagen en dos páginas, de tal forma que sólo cubra una porción de una o de las dos páginas. https://www.youtube.com/watch?v=lURg8MBbn10

 

Material para explorar después de esta sesión: Se comparte un libro con los elementos explicados en esta sesión. Puede descargarlo desde este enlace.

Publicado en RedDescartes

Quinta sesión (20 de mayo de 2022)

 

1A. youtube Desarrollo de la quinta sesión. Quinta sesión en línea.

Descripción   Contenidos temporalizados

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. 

 

Material previo a esta sesión: se ven dos elementos multimedia: vídeo y audio (págs. 54 a 80 del libro guía).

1. Elemento audio
https://www.youtube.com/watch?v=MAskBB0Nli0 (herramientas de producción de audios)
https://www.youtube.com/watch?v=963Fe5UIsOc

2. Elemento video
https://www.youtube.com/watch?v=vnU0EC9NxPw (herramientas de producción de videos)
https://www.youtube.com/watch?v=mu25pXoYkos

3. Archivo comprimido con interactivos de DescartesJS para usar con audio y vídeo y que se genere adecuadamente el pdf. 

Publicado en RedDescartes

Cuarta sesión (6 de mayo de 2022)

 

1A. youtube Desarrollo de la cuarta sesión. Cuarta sesión en línea.

Descripción   Contenidos temporalizados

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. 

 

Material previo a esta sesión: se ven dos elementos multimedia: texto (págs. 44 a 53 del libro guía) e imagen (págs. 64 a 76).

1. https://www.youtube.com/watch?v=5PZW-McNys0
En este video se describe cómo configurar estilos para el elemento multimedia Texto, incluyendo:

  • Citas textuales
  • Notas al pie de página
  • Hiperenlaces
  • Referencias bibliográficas
  • Títulos especiales

2. https://www.youtube.com/watch?v=cy1yt1xic7U
Descripción de cómo se inserta una imagen en el libro interactivo. Incluye:

  • Imágenes en formato HTML
  • Imágenes con estilos CSS
  • Imágenes con la clase image_expand
  • Imágenes con estilo cursor: pointer
  • Imágenes con enlace a otros elementos multimedia

 

Publicado en RedDescartes

Tercera sesión (22 de abril de 2022)

 

1A. youtube Desarrollo de la tercera sesión. Tercera sesión en línea.

Descripción   Contenidos temporalizados

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. 

 

Material previo a esta sesión: hoja de estilos (CSS) diseñados en un archivo externo (páginas 30 a 44 del libro guía).

Repartidos en tres videos se explican 12 estilos, con un objetivo principal que es el diseño de contenedores o cajas (box).
Los tres videos y los estilos usados son:

Parte 1: https://www.youtube.com/watch?v=YUSi0rtup-0

font-size
font-family
text-align
color

Parte 2: https://www.youtube.com/watch?v=mY17B6kO_AQ

border
border-radius
width
margin
padding
background-color
box-shadow

Parte 3: https://www.youtube.com/watch?v=B6fx-Lid1mY
Clases
text-shadow

Para incluir imágenes en las viñetas, puede observarse el procedimiento en https://www.youtube.com/watch?v=yZ1bRu7wMF0

Publicado en RedDescartes

Segunda sesión (8 de abril de 2022)

 

1A. youtube Desarrollo de la segunda sesión. Segunda sesión en línea.

Descripción   Contenidos temporalizados

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. 

 

Publicado en RedDescartes

Primera sesión (25 de marzo de 2022)

 

1A. youtube Desarrollo de la primera sesión. Primera sesión en línea.

Descripción   Contenidos temporalizados

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. 

 

1B. youtube Herramientas de edición. Vídeo auxiliar de repaso de los editores de texto plano y primeras etiquetas html.

Descripción   Contenidos temporalizados

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>

Publicado en RedDescartes
Página 3 de 20

Utilizamos cookies para mejorar nuestro sitio web y su experiencia al usarlo. Las cookies utilizadas para el funcionamiento esencial de este sitio ya se han establecido. Para saber más sobre las cookies que utilizamos y cómo eliminarlas , consulte nuestra Política de Privacidad.

  Acepto las Cookies de este sitio.
EU Cookie Directive Module Information