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.
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:
🔍 "Nos preparamos para el encuentro sincrónico,
leyendo y estudiando el material compartido"
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.
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.
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.
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.
La plantilla funciona como un esqueleto estructural sobre el cual el estudiante debe construir su propio libro.
⭐ Descarga el libro plantilla
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
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.
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.
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:
🔍 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...
Usa el ChatBot
Escritor de libros,
para generar posibles títulos de libros.
Por ejemplo, le puedes decir:
Dame un listado de posibles títulos de libros sobre Física
O, si ya tienes el título, puedes indicarle:
Secretos del Universo Cuántico,
y el ChatBot te generará los capítulos de tu libro.
Imagen generada por Lexica
Utiliza la herramienta interactiva de la siguiente página para
generar la imagen de portada de tu libro. Deberás escribir un
prompt
Un prompt es un comando descriptivo. Por
ejemplo, si tu libro es sobre Genética, podría ser:
"Portada de libro científico sobre genética, mostrando una
doble hélice de ADN brillante en colores azul y verde, con
cromosomas estilizados en el fondo, elementos de laboratorio
como microscopios y pipetas, título elegante en tipografía
moderna, estilo científico profesional pero accesible, iluminación suave, alta calidad, 4K"
que capture la esencia y temática de tu obra.
Desarrolla las siguientes actividades de evaluación formativa
En esta segunda sesión abordaremos:
Un buen diseño de portada es clave porque cumple varias funciones tanto en el ámbito estético como en el comunicativo:
🔍 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
Para cumplir con la tarea de la sesión 1, en tu libro "Plantilla", solo tuviste que:
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>
Analiza el significado cada etiqueta del código anterior. Para ello pulsa sobre cada etiqueta para que te muestre la explicación
<div> ▸
class ▸
padding ▸
background-size ▸
background-image ▸
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ónimage: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);padding
El atributo padding se usa en CSS para definir el
espacio interno entre el contenido de un
elemento y su borde, creando un "amortiguador" visual que mejora
la legibilidad y el diseño. Padding añade distancia dentro del
propio elemento, afectando el tamaño del área que rodea al
contenido.
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"
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
Tamaño real de la pagina: 640 px × 825 px
Restando los márgenes
(margin)
Trabaja como el espacio en blanco fuera de un
elemento, definiendo la distancia entre ese elemento y los
elementos que lo rodean, o entre el elemento y el borde de la
página. Se utiliza para separar bloques de contenido, centrar
elementos horizontalmente y crear un espaciado uniforme o
específico en cada lado del elemento. A diferencia del
padding, que crea espacio dentro del elemento
(entre el contenido y el borde), el margin crea
espacio fuera del borde del elemento.
por defecto del libro:
Superior: 50px
Izquierda y derecha: 50px
Inferior: 20px
Á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
width/height ▸
position ▸
left/right/top/bottom ▸
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.
width / height
Son como las medidas de un marco de fotos:
width es el ancho y height es el
alto que tendrá tu elemento en la página. Pueden darse en
pixeles (px), porciento (%).
Se recomienda utilizar las medidas relativas (em, rem), que son como decir 'el doble de tamaño' en lugar de decir
'32px exactos', porque permiten que se adapten al contexto.
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
classcover_title,
modificando la posición con
margin-top
color / background-color ▸
font-size ▸
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.
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.
El diseño de las carátulas se muy similar al de la portada. Observa el siguiente objeto interactivo:
Algunas diferencias con la portada:
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.
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
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>
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:
href de la tabla de contenidos pueda enlazar
correctamente con su sección correspondiente.
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:
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
#
<pageref ref_id="cap2_sec2">página 26</pageref>
<div class="toc_link" href="#cap2_sec2"></div>
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.
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.
Desarrolla las siguientes actividades de evaluación formativa
En esta sesión vamos a redactar el primer capítulo del libro, el cual incluirá: encabezados, párrafos, citas textuales, hiperenlaces, notas al pie, saltos de línea y etiquetas genéricas. A medida que avances en tu proceso de aprendizaje, seguramente verás la necesidad de retornar a tu primer capítulo, para incorporar otros elementos, como imágenes, videos, tablas, objetos interactivos, estilos especiales, etc.
Una etiquetaLa mayoría de las etiquetas en HTML se presentan en pares, con
una etiqueta de apertura y una de cierre. Sin embargo, existen
etiquetas auto-cerradas, también conocidas como etiquetas vacías,
que no requieren una etiqueta de cierre.
es una parte fundamental del lenguaje que se utiliza para definir la
estructura y el contenido de una página web, la cual indica al
navegador cómo debe interpretar y mostrar un contenido específico.
Están delimitadas por los signos< y
>. Por ejemplo, para un párrafo se escribe
<p> o para un encabezado importante
<h1>.
/.
Las etiquetas <h1> a <h6> se
utilizan para definir los encabezados en HTML. Van desde
<h1> (más importante) hasta
<h6> (menos importante). Sin embargo, el
nomenclador numérico de nuestro libro solo llega hasta el nivel 4
(<h4>). Este apartado, por ejemplo, es del nivel
3 (<h3>), denominado como 3.1.1La numeración 3.1.1 es automática y está asociada a cada
encabezado. Para <h1> es el primer dígito, para
<h2> es el segundo dígito.
En el video de la sesión 2, redactamos el prefacio, usando la
etiqueta <p> para escribir párrafos.
📌 ¡Recuerda! Toda etiqueta de apertura,
debe tener una etiqueta de cierre.(Hay excepciones)
Haz clic en la siguiente imagen, para acceder a un editor en el que
podrás practicar con las etiquetas que iremos describiendoEn el botón de herramientas
puedes abrir este
editor, para practicar etiquetas y estilos que veremos en este
curso.. Inicia, por ejemplo, copiando e ingresando el siguiente código:
<h1>Este es un encabezado de nivel 1</h1> <h2>Este es un encabezado de nivel 2</h2> <p>Este es mi primer párrafo redactado para la primera página del primer capítulo de mi primer libro. Conclusión: soy un primerizo</p>
¿Qué ocurriría si olvidaras cerrar la etiqueta
<h2>?, ¡quítala en el editor, observa y concluye!
Tanto la etiqueta <strong> como la etiqueta
<b> muestran el texto en negrita, pero su
propósito semántico es diferente. <strong> indica
énfasis o importancia en el contenido. mientras que
<b> indica estilo visual (negrita), sin dar un
significado especial. Uso recomendado: cuando el texto tiene
relevancia en el mensaje (por ejemplo, advertencias, palabras clave,
conclusiones) usa <strong>, pero si solo quieres
resaltar visualmente un fragmento de texto sin cambiar su
importancia, usa <b>.
Como su nombre lo indica, la etiqueta <br>,
realiza un salto de línea.
Abre, en la caja de herramientas
, el editor. Copia e
incluye el siguiente código:
<h1>Uso de negrilla y salto de línea</h1> <p>Este es <b>mi primer párrafo</b> redactado para la primera página del primer capítulo de mi primer libro.<br> <strong>Conclusión:<strong> soy un primerizo</p>
Textos como "Conclusión", "Advertencia", "Fundamental" tienen significado semánticoEn HTML, un elemento semántico describe la función o el propósito del contenido que encierra. Por ejemplo, Importante, no solo dice que el texto debe verse en negrita, sino que ese texto tiene importancia dentro del mensaje. Los navegadores, motores de búsqueda y lectores de pantalla entienden que ese fragmento tiene peso o énfasis..
Una observación importante es que en la etiqueta párrafo
<p> anidamos las etiquetas
<strong> y <b>, algo que es
válido, por ser de menor jeraquía; sin embargo, etiquetas como
<div> (de mayor jerarquía), no se pueden anidar de una
etiqueta párrafo, como lo veremos más adelante.
Nuestro libro ha sido configurado para que una etiqueta párrafo
<p> o contenedor <div> generen
un estilo especial para citas textuales. Esto es posible si se
incluyen algunos estilos especiales, como indentado y reducción del
tamaño de letra, estos estilos están agrupados en una
clase (class en inglés) llamada "note". Así
la cosas, si queremos incluir una cita textual, lo haríamos así:
<p class="note">contenido de la cita </p>
La etiqueta <a> en HTML se usa para crear
hipervínculos, es decir, enlaces que permiten al usuario navegar a
otra página web, a una parte específica del mismo documento,
descargar un archivo o abrir un correo electrónico, entre otras
funciones. Su nombre viene de anchor (ancla), porque "ancla" un
destino dentro o fuera del documento. Para evitar que un enlace se
abra en la misma pestaña del libro, se debe acompañar la etiqueta
<a> de un "destino" en otra pestaña, así:
target="_blank".
📘 Sintaxis básica
<a href="https://www.ejemplo.com" target="_blank">
Visitar
sitio web</a>
href: Es el atributo más importante; indica la dirección (URL) a la que apunta el enlace. Si se omite seguirá pareciendo un enlace pero no llevará a ningún lugar cuando se haga clic.
Usa el editor de la caja de herramientas
, para generar esta
cita textual:
En las religiones universales, del tipo del cristianismo y del budismo, el pavor y la náusea preludian las escapadas de una vida ardiente espiritual. Ahora bien, esta vida espiritual, que se funda en el refuerzo de las prohibiciones primeras, tiene sin embargo el sentido de la fiesta (Bataille, en Enciclopedia de ejemplos).
La etiqueta <span> en HTML se usa cuando
necesitas un contenedor en línea(Inline), significa que no comienza en una nueva línea ni
interrumpe el flujo del texto.
para aplicar estilos o agregar interactividad. Puede usarse dentro
de otros elementos en línea como <a>, <strong>, <em>, o
incluso dentro de etiquetas de texto como <p> o <h1>
En nuestro libro, se suele usar para cambiar el estilo de un pequeño texto de un párrafo, como el cambio de color o para incluir una nota al pie de página, como veremos a continuación.
Similar a las citas textuales, el libro ha sido configurado para que
en una etiqueta <span>, podamos incluir una nota
al pie de página utilizando la clase "footnote".
<span class="footnote"></span>.
Usa el editor de la caja de herramientas
e incluye:
<h1>Novedades de IA</h1> <p class="note">En el vertiginoso mundo de la inteligencia artificial, un nombre singular ha capturado la atención global en los últimos meses de 2025: Nano Banana.<span class="footnote">Véase <a target="_blank" href="https://mispolinizaciones.blogspot.com/"> Pollinations AI</a>.</span>
Mueve el scroll vertical, para que observes la nota al pie de página.
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al
diseño de una página webEl término " cascada" significa que un estilo aplicado a un
elemento principal también se aplicará a todos los elementos
secundarios dentro del elemento principal. Por lo tanto, si
establece el color del cuerpo del texto en "azul", todos los
encabezados, párrafos y demás elementos de texto dentro del cuerpo
también tendrán el mismo color (a menos que especifique algo
diferente)..
¡Con CSS, puedes controlar el color, la fuente, el tamaño del texto,
el espaciado entre elementos, cómo se posicionan y disponen los
elementos, qué imágenes o colores de fondo se utilizarán, diferentes
pantallas para diferentes dispositivos y tamaños de pantalla, y
mucho más! (W3 Schools).
Hay tres formas de incluir estilos CSS en nuestro libro: dentro de
etiquetas HTML, al inicio del libro (en la cabecera
<head>) o a través de un archivo CSS externo.
En esta sesión usaremos la primera forma que, para iniciar, puedes
probar en el editor de la caja de herramientas
, con este ejemplo:
<h1 style="color:blue;">Un encabezado azul</h1> <p style="color:red;">Un párrafo rojo.</p>
Algunos de los estilos que usaremos son: cambio de color, márgenes internas y externas, alineación, tamaño de letra, color de fondo, posición y, como lo estarás notando en este párrafo: familia de letras, con la cual iniciaremos este apartado.
Las familias de fuentes compatibles con todos los navegadores (fuentes seguras para la web o web safe fonts) son aquellas que vienen preinstaladas en la mayoría de los sistemas operativos (Windows, macOS, Linux, Android, iOS). Estas fuentes garantizan que el texto se muestre correctamente sin necesidad de descargar fuentes externas (como de Google Fonts o Adobe Fonts)En el cuarto ejemplo, hemos usado una familia no genérica (fuente externa), que está incluida en nuestro libro, además ComicNeue, Lato, Montserrat y UbuntuMono..
Para cambiar la familia de la fuente se utiliza el estilo
style ="font-family: 'fuente 1',
fuente 2, ..."
Si la primera fuente no es compatible con el navegador, éste toma la segunda, y así sucesivamente.
Practica en el editor de la caja de herramientas
,con otras fuentes,
por ejemplo
<p style = "font-family:
Tahoma">Párrafo con fuente Tahoma</p>
El uso del estilo para cambiar la familia de fuentes, en algunos apartados del libro, es excepcional, quizá para destacar algunos textos; sin embargo, por uniformidad, se recomienda usar un solo tipo de fuente, la cual se define en una hoja de estilos externa, que describiremos en la próxima sesión; por ejemplo, libros como "Mi Pandemia" o "Números enteros - Suma y resta", fueron diseñados con la fuente Amaranth.
Los estilos de la tabla anterior son, quizá, los que más vamos a usar en este libro, por lo que te sugerimos practicarlos, inicialmente, con el editor HTML de la caja de herramientas.
Puedes incluir varios estilos en una etiqueta; por ejemplo:
<div style="background-color: lightblue; padding: 10px;">Espacio interno de 10 píxeles</div>
La siguiente imagen es el resultado de este código
<p style="color: blue; background-color: yellow; font-size: 24px; margin: 20px; <!-- separacion externa --> padding: 10px; <!-- separacion interna --> border: 3px solid black;"> Este es un texto en azul, con fondo amarillo, letra grande, margen de 20 píxeles, padding de 10 píxeles y borde. </p>
Este es un texto en azul, con fondo amarillo, letra grande, margen de 50 píxeles, padding de 10 píxeles, con borde.
Observa la diferencia en margin y padding con la siguiente imagen.
Este es un texto en blanco, con fondo azul, letra normal, margen de 10 píxeles, padding de 40 píxeles, sin borde.
Es importante advertir que algunos estilos pueden tener una configuración especial, de los cuales destacamos dos.
Estilos para imágenes
Usando el ejemplo de la tabla, para una imagen de la carpeta
images, con el mismo ancho y altura:
<img src= "images/img2.png" style = "width: 150px; height: 150px;">
obtenemos:
Sin embargo, nuestro libro ofrece una configuración para obtener la imagen, así:
Esta configuración la vamos a usar en la proxima sesión.
Uso de colores
Nuestro libro, desde la caja de herramientas, permite cambiar de modo claro a modo oscuro, por lo que el color que seleccionemos debe verse bien en ambos formatos; compruébalo seleccionando el modo oscuro, y observando cómo se ven los siguientes colores:
Color 1 Color 2 Color 3 Color 4 Color 5 Color 6
Se evidencia que colores oscuros se ven bien en modo claro pero no en modo oscuro, y colores claros se ven bien en modo oscuro pero no en modo claro. Por ahora, seleccionemos colores que se vean bien en ambos modos, en otra sesión explicaremos cómo solucionarlo con un archivo de estilos CSS externo.
Haz clic en la siguiente imagen, para seleccionar colores y practicar con ellos en ambos modos.
¡Felicidades! Has completado una de las sesiones más cruciales en tu viaje para crear libros interactivos. Si la Sesión 1 fue la planificación y la Sesión 2 fue la construcción del porche, esta Sesión 3 ha sido la colocación de los cimientos y el levantamiento de las primeras paredes de tu obra. Has dejado de ser un simple espectador para convertirte en el arquitecto y el diseñador de tus páginas.
Lo que has construido:
<h1>, <p> y los estilos
<strong> y <a> no son solo
para cambiar la apariencia, sino para darle un significado
semántico a tu contenido. Le has dicho al navegador: "Esto es un
título importante", "esto es un párrafo de texto", "esto es un
enlace vital". Has construido el esqueleto fuerte y lógico de tu
capítulo.
style,
has empezado a vestir ese esqueleto. Le has dado color, has
elegido la tipografía, has ajustado los espacios y has definido
los bordes. Has aprendido que margin es el espacio
personal del elemento, mientras que padding es su
espacio interior. En esencia, le has dado personalidad y estilo
visual a tu contenido.
Un vistazo al horizonte:
Has dado tus primeros pasos con los estilos "en línea", aplicándolos a cada elemento. Es una técnica potente para cambios rápidos y específicos. Pero, ¿qué pasaría si decides cambiar el color de todos los subtítulos de tu libro de azul a verde? Con el método actual, tendrías que ir uno por uno, una tarea tediosa y propensa a errores.
Aquí es donde nuestro viaje se vuelve aún más emocionante. En las próximas sesiones, elevaremos nuestro juego. Aprenderás a centralizar todos tus estilos en un único "centro de mando": una hoja de estilos CSS externa. Este será el lugar donde definirás una sola vez cómo se ven todos tus títulos, párrafos y citas, y cualquier cambio que hagas allí se reflejará mágicamente en todo tu libro. Además, nos sumergiremos en el mundo de las imágenes, los elementos multimedia y diseños de página más complejos.
Desarrolla las siguientes actividades de evaluación formativa
