Mi primer libro

José M. Fernández
Juan Guillermo Rivera Berrío

Fondo Editorial RED Descartes

Mi primer libro
Interactivo

Autores:
José M. Fernández
Juan Guillermo Rivera Berrío

Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS, Pollinations AI, Herramientas de IA, WebSim, Phet Colorado, GeoGebra, ...
Fuentes: Lato y UbuntuMono
Imagen de portada: ilustración generada por la herramienta Modelos de imagen de Pollinations

Red Educativa Digital Descartes
Córdoba (España)
descartes@proyectodescartes.org
https://proyectodescartes.org

Proyecto iCartesiLibri
https://proyectodescartes.org/iCartesiLibri/index.htm

ISBN:

Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.

Tabla de contenido

Prefacio

Introducción

Vamos a incursionar en este mundo de la creación de libros interactivos utilizando el modelo de "clase invertida":

La clase invertida (o flipped classroom) es un modelo de enseñanza en el que el aprendizaje de los contenidos básicos ocurre fuera del aula, generalmente a través de videos, lecturas o materiales digitales preparados por el docente. De esta forma, el tiempo en clase se dedica a actividades prácticas: resolver problemas, discutir en grupo, realizar proyectos o aplicar los conceptos en situaciones reales.

Este enfoque busca que el estudiante sea más autónomo, activo y responsable de su propio aprendizaje, mientras que el docente actúa como guía y facilitador, apoyando la comprensión profunda y el desarrollo de habilidades críticas.

En esta primera sesión abordaremos:

• Programación del curso
• Funcionamiento del modelo de libro
• Librerías requeridas por el libro
• Tipos de archivos que usa el libro
• Editores de texto plano
• Plantillas diseñadas con el editor DescartesJS
• Herramientas de IA.

🔍 "Nos preparamos para el encuentro sincrónico,
leyendo y estudiando el material compartido"

Programación del curso

El curso está diseñado para guiar paso a paso a los participantes en la creación de libros digitales enriquecidos con recursos interactivos, imágenes, audios, videos y objetos dinámicos. Se combina el uso de DescartesJS para elementos interactivos y de herramientas de IA (como Pollinations) para generación de recursos gráficos y textuales.

En la siguiente página, está el programa y la Estructura por sesiones en forma detallada.

🎯 Enfoque pedagógico

El curso sigue una metodología teórico-práctica, donde cada sesión introduce un bloque temático acompañado de ejemplos y actividades de aplicación.

DescartesJS se centra en la interactividad y la matemática visual. Pollinations y otras IA sirven como asistentes creativos para generar imágenes, textos y materiales complementarios.

👌 Resultados esperados

que cada participante construya un libro interactivo completo, con portada, capítulos, recursos multimedia y objetos dinámicos.

📌 Cuando en la parte superior derecha se ve el símbolo , significa que, haciendo clic en él, el objeto se muestra a pantalla completa. Compruébalo en la siguiente página.

Libro "Diseño de libros interactivos"

Este material de apoyo es un manual-guía exhaustivo para la creación de libros digitales interactivos dentro del proyecto iCartesiLibri de la Red Educativa Digital Descartes.

1️⃣ Puede aportar al curso

• En las primeras sesiones: apoya la comprensión de las librerías, plantillas y editores (17 octubre).
• En el diseño de portada y capítulos: ofrece ejemplos de CSS, HTML y estructura de páginas (31 octubre y 14 noviembre).
• En la unidad de textos: explica en detalle párrafos, hipervínculos, notas al pie y citas (28 noviembre).
• En imágenes, vídeos y audios: proporciona recomendaciones de formatos, derechos de autor, integración de multimedia y ejemplos de código (12 diciembre y 16 enero).
• En objetos interactivos: guía la integración de DescartesJS y otras plataformas (30 enero).
• Para el proyecto final: ofrece modelos listos y buenas prácticas para que cada participante logre un libro con calidad editorial (13 febrero).

2️⃣ Prepárate para la primera sesión leyendo

1. Lee la Introducción (pag. 3)
2. Analiza la diferencia entre Flipbooks e iCartesiLibri (pags. 4 a 7)
3. Estudia las herramientas de edición, el uso de editores de texto plano y la organización de archivos. (pags. 8 a 11)

Plantilla para el diseño del libro

📑 Descripción de la herramienta plantilla

La plantilla funciona como un esqueleto estructural sobre el cual el estudiante debe construir su propio libro.

1. Portada y preliminares.
   Incluye un espacio para título, subtítulo y autores (actualmente Juana de Arco y Napoleón Bonaparte). Se mencionan créditos técnicos y editoriales.
2. Tabla de contenido.
   Presenta un índice con capítulos y prefacio, lo cual sirve de guía para organizar el material.
3. Prefacio.
   Modelo de introducción, actualmente vacío, debes personalizarlo.
4. Capítulo de ejemplo.
   Incluye un título de capítulo, espacios para figuras con numeración automática y texto de muestra (Lorem Ipsum). Se insertan imágenes de ejemplo en la carpeta del proyecto (ejemplo: portada3.jpg, cap1.jpg).

⭐ Descarga el libro plantilla

🏗️ Trabajos en la primera sesión

En la página 8 te instamos a que leyeras el material, recuerda que estamos en el modelo de clase invertida. Las explicaciones llegan siempre antes de la clase para que puedas abordar las primeras tareas.

Este es el listado de las actividades que debes realizar en esta primera sesión

• Personalizar
• la imagen de la portada que harás con el interactivo de la página 15
• los títulos de la la portada [pag i]Las primeras páginas, antes del prefacio, se numeran con romanos en minúscula, a partir del prefacio con números indo-arábigos. Puedes modificarlo.
• los créditos [pag ii]
• Cambiar el título y el subtítulo por los del libro que estás creando [pag ii]
• Cambiar el nombre de los autores por los reales [pag ii]
• Editar los datos preliminares [pag ii]
• Redactar el prefacio del libro [pag 5]
• Diseñar los títulos de los capítulos que crearás con el interactivo de la página 15
• Aprender a incluir citas, referencias, notas al pie e hipervínculos.
• Actualizar las imágenes

Estructura del libro

Es posible que no tengas idea sobre qué tema vas a tratar en tu libro o, teniendo el tema, qué estructura de capítulos debes usar. Por ello, hemos diseñado una herramienta conversacional o ChatBot basado en inteligencia artificial, que te asistirá en la estructuración de tu libro. Lo encontrarás en la página siguiente.

Tema del libro

Supongamos que tu tema es sobre "Matemáticas discretas", pero no sabes qué título ponerle al libro. Escribe al ChatBot: "Dame cinco títulos posibles sobre Matemáticas Discretas" y obtendrás algunos temas a considerar para tu libro.

Capítulos del libro

Supongamos que elegiste como tema de tu libro "Algoritmos y Combinatoria en Matemáticas Discretas", basta con que se lo escribas al ChatBot y él te dará, al menos, 10 capítulos con sus descripciones; entre ellos:

1. Introducción a las Matemáticas Discretas. Una visión general del campo, su importancia y aplicaciones.
2. Fundamentos de Combinatoria. Contar, permutar y combinar: principios básicos y teóricos fundamentales.
3. Principios de Conteo y Técnicas de Recurrencia. Métodos para resolver problemas de conteo complejos y secuencias recurrentes.

🔍 En conclusión, para la próxima sesión tendrás estructurado tu libro y la plantilla con los cambios sugeridos, incluyendo imágenes... ¡Oh! Las imágenes...

Evaluación de la sesión

Desarrolla las siguientes actividades de evaluación formativa

Introducción

En esta segunda sesión abordaremos:

• Diseño de la portada del libro y de las carátulas del libro
• Páginas preliminares

Diseño de portada y carátulas de capítulo

Un buen diseño de portada es clave porque cumple varias funciones tanto en el ámbito estético como en el comunicativo:

1. Primera impresión y atracción visual: La portada es lo primero que un lector ve. Un diseño atractivo capta la atención en librerías físicas y digitales, destacando el libro entre muchos otros y generando curiosidad.
2. Comunicación del contenido: Una portada bien diseñada transmite de inmediato el género, el tono y el mensaje central del libro. Por ejemplo, no es lo mismo el diseño de una novela histórica que el de un libro de divulgación científica.
3. Valor simbólico y profesionalismo: Un diseño cuidadoso proyecta seriedad y profesionalismo, lo que aumenta la percepción de valor del libro. Una portada deficiente, en cambio, puede dar la impresión de un trabajo poco elaborado, incluso si el contenido es de gran calidad.

🔍 La portada no es solo un elemento decorativo, sino una herramienta estratégica de comunicación y marketing que influye directamente en la decisión de su lectura y en la experiencia del lector

Modelos de portada

Para cumplir con la tarea de la sesión 1, en tu libro "Plantilla", solo tuviste que:

• personalizar la imagen de la portada,
• cambiar el título y el subtítulo por los del libro que estás creando y
• cambiar el nombre de los autores por los reales.

En este apartado, te vamos a explicar los códigos que permiten el diseño de tu portada, de tal forma que los puedas intervenir, para obtener diferentes estilos de portada.

Estos códigos se conocen como estilos Un estilo es como el "cuaderno de instrucciones de diseño" que le dice al navegador cómo mostrar cada elemento de tu página. Se define con la etiqueta HTML que contiene código CSS para dar formato y diseño a una página web, ya sea de manera interna <style> o externa style.css con un enlace link , los cuales pueden estar codificados en un archivo llamado style.css o, en una etiqueta Las etiquetas son como "cajas" o "contenedores" que organizan y le dan significado al contenido, igual que las etiquetas en la vida real identifican qué hay dentro de algo. Es decir, son instrucciones que le dicen al navegador cómo estructurar y mostrar el contenido de una página web.
Se escriben entre corchetes angulares < >, generalmente tienen una apertura y cierre y el contenido está entre ellas.
<h1>Título</h1> = encabezado <p>Párrafo</p> = párrafo <img> = imagen (no tiene cierre) <a href="...">Enlace</a> = enlace <style> dentro del HTML

Por ejemplo, cuando interveniste la portada (línea 100 del archivo index.html), la primera etiqueta que viste fue una etiqueta <div>, la cual está acompañada del siguiente estilo:

 <div class="page invertcolor"
   style="margin:0;
   padding:0;
   background-size:contain;
   background-image:url(images/general/portada.svg);"
   >   
 </div>
  

2.2 Modelos de portada

Analiza el significado cada etiqueta del código anterior. Para ello pulsa sobre cada etiqueta para que te muestre la explicación

A practicar

Utilizando el objeto interactivo de la siguiente página. Cliquea sobre la imagen para que se active el interactivo.

¿Qué vas a hacer? En la instrucción
image:url(images/general/portada.svg);,
sustituye portada.svg por los nombres de las imágenes:
imagen1.jpg, imagen2.jpg, imagen3.webp o imagen4.png

📌 El nombre debe ser EXACTAMENTE igual

Aunque nosotros entendemos como iguales estas tres instrucciones, el intérprete del sistema no, para él todas son diferentes.

• image:url(images/general/portada.jpg);
• image:url(images/general/portada.JPG);
• image:url(images/general/Portada.JPG);
• image:url(images/General/portada.jpg);

Observaste la diferencia entre la imagen1.jpg y la imagen2.jpg? ¿Desearías que tu libro tenga una portada con imagen a página completa?

No te apures, pronto aprenderás a hacerlo. Dice el refrán: "Vísteme despacio, que voy de prisa"

Primer modelo de portada

La portada que diseñaste en la sesión 1, es nuestro primer modelo de portada, el cual incluye una imagen cuadrada cuyas dimesiones en píxeles Un píxel, abreviatura en ingles de picture element, es la unidad más pequeña de un componente digital, como una imagen o una pantalla. Cada píxel es un punto de color que, al combinarse con otros, forma la imagen completa en una pantalla. Cuantos más píxeles tenga una imagen, mayor será su resolución y más detalle podrá mostrar. Los píxeles (px) son una unidad de medida absoluta utilizada en CSS para establecer el tamaño de fuentes, elementos o imágenes. Cuando se establece un valor en píxeles, el tamaño del elemento será fijo, independientemente del tamaño de la pantalla.
Es importante usar unidades relativas como rem o em para el tamaño de la fuente, ya que permiten a los usuarios cambiar el tamaño del texto según sus preferencias, mejorando la accesibilidad. son de 582 px × 582 px, pero ¿de dónde sale ese tamaño?, veamos cómo están configuradas las páginas del libro, para que entiendas mejor estos números.

Tamaño real de la pagina:    640 px × 825 px

Área útil de la página    540 px × 755 px

En la figura 2.1, en la página siguiente, visualizamos el tamaño de las páginas de nuestro libro. Es muy importante que tengas en cuenta la diferencia entre el margen (margin) y el espaciado o separación interna (padding)

Imagen de la portada

Ahora, haz clic sobre la siguiente imagen. Observa que dentro del bloque <div> anterior se ha introducido un nuevo bloque <div> con nuevos estilos

Los parámetros introducidos son: width: 582px height: 582px left: 58px top: 0px y las dimensiones de la imagen 582 px × 582 px

Prueba, igual que en el ejercicio anterior, cambiando en background-image: url('images/general/imagen2.jpg'); la imagen2.jpg por imagen1.jpg, imagen3.webp o imagen4.png. Modifica la posición izquierda (left) y la superior (top), así como también la altura (height) para que comprendas cómo se ajusta la imagen a la página en la portada.

Una comprensión sencilla de estos estilos, es la siguiente:

Un contenedor (<div>) que pone una imagen (background-image: url('images/general/imagen2.jpg');) con una posición absoluta (position: absolute;) a 58 pixeles del borde izquierdo (left: 58xp;) y 0 pixeles del borde superior (top: 0;) con un tamaño de width: 582px; height: 582px;.

Si estás siguiendo, con mucha atención, el hilo de estas explicaciones, estoy seguro que ya habrás notado un estilo que no aparece en la portada del libro plantilla, se trata de background-size: 582px 582px;. Para que lo entiendas, abre el objeto interactivo anterior con la imagen imagen2.jpg y elimina el estilo background-size: 582px 582px;, ¿observaste? ¡La imagen quedó recortada! Eso ocurre porque la imagen tiene dimesiones superiores a 582 px × 582 px, lo que nos obligaría a reducir sus dimensiones; sin embargo, el estilo background-size: 582px 582px; se encarga de ajustar la imagen al tamaño del contenedor.

Títulos de la portada

En la tarea de la sesión 1, también cambiaste el título del libro, el cual se genera con un grupo de estilos creados en el archivo styles.css. llamados class que, para nuestra portada, se definió como cover_title, modificando la posición con margin-top y:

Los parámetros introducidos son: width: 582px height: 582px left: 58px top: 0px y las dimensiones de la imagen 582 px × 582 px

Abre el siguiente objeto interactivo y observa que hay dos nuevos bloques para el título y el subtítulo. Los parámetros de la clase cover_title pueden ser modificados, para ello incluimos dos estilos que modifican el tamaño de la letra y la posición Es importante tener en cuenta que la posición está referenciada al rectángulo que contiene los títulos. Prueba cambiando tamaño y posición. definida en esa clase.

Autor(es) del libro

Para incluir la autoría del libro, no hemos recurrido a clase alguna, preferimos usar todos los estilos en la etiqueta del contenedor, tal como se aprecia en el siguiente objeto interactivo. Observa y analizalos.

Amplia la imagen de la izquierda para que veas las posiciones bottom: 60px;. width:582px; y left:58px;.

En dicho espacio se centra el texto (text-align:center;) con una tamaño de letra de 26 pixeles (font-size:26px;), usando el mismo color del título del libro, color:#0089CD. Comprendido lo anterior, puedes ubicar tu nombre en el libro que estás diseñando que, estoy seguro, tendrás que cambiar su posición, para una mejor estética en el diseño de la portada. Lo mismo tendrás que hacer si el nombre del libro no incluye subtítulo, en cuyo caso debes eliminar el contenedor del subtítulo y modificar la posición del título.

Logo de la editorial o institución

Si tu libro lo vas a publicar en un portal institucional o en una editorial diferente al de la Red Educativa Digital Descartes, puedes cambiar el enlace e imagen en el último contenedor de la portada, que puedes observar en el siguiente objeto interactivo:

Si eres buen observador, habrás notado que en la portada del libro plantilla no usamos un contenedor <div> sino una etiqueta de párrafo El párrafo (<p>) se utiliza para definir bloques de texto, indicando al navegador que debe separarlos con márgenes. Solo puede contener elementos de "contenido de redacción" (phrasing content). La etiqueta <p> puede utilizar atributos globales como class, id o style para aplicar estilos o identificar elementos. Pude estar dentro de un <div>, pero unn <div> no puede estar dentro de un <p>. . El error se ha cometido adrede, para comprender que el uso del primero es más sencillo, pues en la etiqueta <p> van involucradas márgenes, que exigen mayor cuidado en la posición de los elementos en una página.

Por ahora, te sugerimos usar el logo con la editorial de la Red Educativa Digital Descartes, pues en próximas sesiones explicaremos las etiquetas de imagen y los hiperenlaces.

Segundo modelo de portada

Este segundo modelo responde la inquietud de, interactivo de la página 28 y consiste en ajustar una imagen a toda la página. Para ello, basta con cambiar las dimensiones de la imagen a las dimensiones la página: width: 640px; height: 825px, tal como puedes verificar en el siguiente objeto interactivo y... ¡listo!

Bueno, ni tan "listo", pues como puedes observar en el objeto interactivo anterior, la imagen se deformó, al ajustar una imagen cuadrada (1:1) a una vertical (9:16) y los textos del título y autores no se ven bien. Sugerimos, entonces, generar las imágenes con herramientas de IA como: Ideogram, ChatGPT, Seedream o editar imágenes con PowerPoint, teniendo en cuenta que su tamaño debe ser con una relación de aspecto acorde al contendor donde va a ser ubicada. En el caso de los textos, usar colores contrastantes con el fondo y diferentes tamaños y posición.

Observa, a continuación, cuatro ejemplos de portada con imagen en página completa. Analiza el color de los textos.

Carátulas de capítulo

El diseño de las carátulas se muy similar al de la portada. Observa el siguiente objeto interactivo:

Algunas diferencias con la portada:

• Imagen de fondo. Cambia la imagen de fondo por portada_capitulos.svg, en el que se elimina el recuadro del título.
• Título y subtítulo. Cambia la clase que define los estilos de los títulos del capítulo (chap_text y chap_name).

Igual que en la portada, eres libre de generar carátulas con imagen en página completa.

En la siguiente página, hemos puesto un buscador y generador de imágenes, que te puede servir para las imágene de los capítulos. Por ejemplo, escribe "Brujas rubias", selecciona cualquiera de las opciones y, finalmente, descarga la imagen de tu gusto.

Páginas preliminares

Las páginas preliminares de un libro tienen una función clave en la estructura de la obra, ya que ofrecen información práctica y contextual tanto para el lector como para los bibliotecarios, investigadores y otros especialistas.

Generalmente las forman la portadilla, la página de derechos, la dedicatoria, el epígrafe, el índice general, la lista de ilustraciones/tablas, el prólogo, el prefacio y la introducción

Estas páginas no son obligatorias de manera universal, pero su inclusión depende de varios factores como el tipo de libro, su propósito, y las normas editoriales.

En libros académicos, científicos o técnico son necesarias porque proporcionan contexto, referencias, y herramientas útiles para el lector

Las novelas, cuentos u obras literarias suelen ser más flexibles, incluyendo solo una página de derechos, una dedicatoria o un prólogo.

Hay elementos obligatorios como son página de derechos de autor (copyright), la portadilla y la página de título. Si el libro es extenso debe tener el índice genera

Números de Páginas

La numeración de las páginas en los libros tiene un propósito práctico y organizativo. Su principal función es permitir al lector ubicarse fácilmente dentro del libro. Gracias a los números de página, es posible referenciar secciones específicas del texto, lo que resulta útil para índices, notas al pie, citas y navegación general. Sin la numeración, encontrar un pasaje en particular sería mucho más complicado, especialmente en libros largos o académicos.

Las páginas preliminares (front matter), aunque secciones importantes, se consideran como un "apéndice anterior" al cuerpo principal del libro, y no parte del contenido principal.

Para marcar esta distinción, tradicionalmente se numeran con números romanosAl imprimirse los primeros libros (durante la invención de la imprenta en el siglo XV), las páginas preliminares se numeraban en números romanos porque este sistema seguía siendo familiar y respetado. Con el tiempo, los números indo-arábigos se adoptaron para la mayoría de los textos, ya que son más fáciles de leer y manejar, pero la tradición de usar números romanos en las preliminares perduró como un signo de elegancia y formalidad. (i, ii, iii, iv...), separándolas visual y conceptualmente de las páginas principales. Esto permite a los lectores identificar fácilmente dónde terminan las preliminares y dónde comienza el texto principal.

La numeración en "Mi primer libro interactivo" viene con un estilo de numeración

Para indicar que se inicia la numeración (en romano) se utiliza el parámetro init-page-num="true", para indicar que una página no haga visible el número se usa el parámetro num="" y para indicar el inicio de la numeración indo-arábiga se usa el paráemtro num-type-arabic="true"

Alrededor de la línea de código 201 de "Mi primer libro interactivo" puedes encontrar las siguientes instrucciones

   <div
    class="page"
    style="text-align: center; 
    font-size: 120%"
    init-page-num="true" 
    num=""> 
   </div>

La instrucción init-page-num="true" indica inicio de numeración y num="" que esa página no muestre el númeroTenga en cuenta que, aunque no muestre el número, para el libro esa es la página 1 (i romano)..

Al trabajar en un libro interactivo, puede ser complicado localizar páginas específicas cuando el proyecto crece y contiene muchas secciones. Una técnica útil para facilitar la búsqueda y organización es utilizando comentarios HTML, los cuales tienen la estructura: <!-- comentario -->

Los navegadores ignoran completamente el contenido de los comentarios, por lo que no afectan el diseño ni la funcionalidad de la página. Sin embargo, son visibles en el código fuente, lo que los convierte en una excelente herramienta para dejar notas, como números de página.

 <!--  pag 43-->
 </div class="page">
 <p>Contenido de la página</p>
 </div>

Tabla de Contenido

Una tabla de contenidos es una parte esencial de cualquier libro, ya sea físico, digital o interactivo. Su propósito es proporcionar una visión estructurada y rápida del contenido, permitiendo a los lectores navegar fácilmente entre las secciones y capítulos.

En un libro interactivo, donde los lectores pueden saltar entre secciones, una tabla de contenidos bien estructurada es fundamental para optimizar la experiencia del usuario. Permite que los lectores encuentren rápidamente el capítulo, sección o subsección que desean leer sin necesidad de desplazarse manualmente.

La tabla de contenido está compuesta por una serie de elementos div con la clase toc_link. Cada uno de estos elementos incluye un atributo href que apunta a un identificador único (id) en el cuerpo del contenido.

  <div class="toc_link" href="#capitulo_2"></div>

Este enlace apunta a una sección específica:

  <h1 id="capitulo_2">Portada y preliminares></h1>

Identificadores (id)

Cada capítulo, sección y subsección del contenido tiene un identificador único definido con el atributo id.
Esto asegura que:

• Cada href de la tabla de contenidos pueda enlazar correctamente con su sección correspondiente.

• Los identificadores sean descriptivos y reflejen la jerarquía del contenido.
  Por ejemplo:
  • Capítulos capitulo_1, capitulo_2.
  • Secciones cap1_sec1, cap2_sec2.
  • Subsecciones cap2_sec2_subsec1, cap2_sec2_subsec2.

Enlaces Jerárquicos
La tabla de contenidos sigue una jerarquía lógica de capítulos, secciones y subsecciones. Esto ayuda a los lectores a comprender la relación entre las diferentes partes del contenido. Por ejemplo:

<div class="toc_link" href="#capitulo_1"></div>
<div class="toc_link" href="#cap1_sec1"></div>
<div class="toc_link" href="#cap1_sec1_subsec1"></div>

Esto corresponde a una jerarquía como:

• Capítulo 2: Portada y preliminares.
• Sección 2: Modelos de portada.
• Sección 2: Subsección 1: Primer modelo de portada.

En el libro se verá de la siguiente manera:

Enlaces internos

El atributo href en cada enlace de la tabla de contenidos utiliza una referencia interna (#) que permite saltar directamente a las secciones dentro del mismo libro utilizando el elemento personalizado pageref (que funciona como una etiqueta), con el parámetro ref_id

Si se desea que el lector pueda ir a una página determinada que se describe en el texto, se puede utilizar el siguiente código

<pageref ref_id="cap2_sec2">página 26</pageref>

El valor del parámetro ref_id es el mismo valor del parámetro href del índice anteponiendo el caracter #

Es una buena práctica colocar las referencias internas a páginas al final del proceso de creación del libro, una vez que todo el contenido esté concluido y organizado. Esto ayuda a evitar errores como enlaces rotos, referencias incorrectas o cambios en la estructura del documento que puedan desincronizar los identificadores (id) y los enlaces (href). Al finalizar el contenido, ya se tiene una visión clara de la estructura definitiva del libro, lo que permite garantizar que todas las referencias sean precisas y funcionales, mejorando la navegación y la experiencia del lector.

Trabajos en la segunda sesión

Seguramente, estarás preocupado por tanta información en tan poco tiempo. ¡Cálmate!, que a lo largo de este curso, iremos trabajando con cada una de las etiquetas HTML y los estilos CSS; por ejemplo, el estilo padding es bastante útil en la sesión 3, es allí donde lo practicarás y comprenderás mejor.

Por ahora, cumple con la tarea de esta sesión, que explicamos en el siguiente video:

Haz clic en el botón zum, para verlo mejor.

Evaluación de la sesión

Desarrolla las siguientes actividades de evaluación formativa