Carpetas y archivos
Carpeta book ¡No tocar!... Danger
Carpeta extra ¡No tocar… por ahora!
En estas carpetas se encuentra el núcleo del libro
(book.js), los archivos de estilos (style.css), los archivos
de imágenes que configuran la presentación base del
libro (en especial los botones), las librerías de
matemáticas (KaTeX) y química y las fuentes (Lato, por
defecto)
Archivo index.html ¡Tocar… bastante!
SESIÓN 1
825 px
640 px
50
px
50
px
50 px
540 px
Un píxel, o pixel, es la menor unidad
homogénea en color que forma parte de una
imagen digital. Se compone de tres subpíxeles,
uno rojo, uno verde y uno azul, que se
combinan para crear el color final.
El tamaño de una letra se puede especificar en
píxeles, puntos o ems. Los píxeles son la unidad
de medida más precisa, pero los puntos y los
ems son unidades de medida más utilizadas en
el diseño web
Notepad++ https://notepad-plus-plus.org/ (Windows)
Sublime Text (Windows, Linux y MAC) https://www.sublimetext.com/
Google web designer https://webdesigner.withgoogle.com/intl/es_es
Visual Studio https://code.visualstudio.com/#meet-intellisense
Preferiblemente Notepad
Herramientas iniciales
Editor HTML
IAs de texto
Bard de Google (https://bard.google.com/chat)
Bing de Microsoft (https://www.bing.com/)
ChatGPT 3.5 o 4 en Bing
Perplexety (https://www.perplexity.ai/)
IAs de imagen
DALL-E 3 (https://www.bing.com/images/create/)
Léxica (https://lexica.art/apertura)
Herramientas iniciales
Inteligencias artificiales
Primera tarea
Eliminar una etiqueta sobrante
Modificar el título: largo o corto
Usar la etiqueta “salto de línea” <br>
Usar los primeros estilos para intervenir el título
Primeras intervenciones al index
Es importante tener en cuenta que la etiqueta <br> no debe utilizarse para incrementar el espacio entre líneas
de texto, para ello se debe utilizar la propiedad margin de CSS o el elemento <p>
El libro se diseña con etiquetas HTML5
Las etiquetas HTML son elementos que se utilizan para definir la estructura y el
contenido de cada página de nuestro libro. Estas etiquetas se utilizan para
marcar el inicio y el final de un elemento, como un encabezado, un párrafo, una
imagen, etc. Las etiquetas HTML se escriben entre corchetes angulares < y >.

Sesión 1. Diseño libros interactivos (V Edición)

  • 1.
    Carpetas y archivos Carpetabook ¡No tocar!... Danger Carpeta extra ¡No tocar… por ahora! En estas carpetas se encuentra el núcleo del libro (book.js), los archivos de estilos (style.css), los archivos de imágenes que configuran la presentación base del libro (en especial los botones), las librerías de matemáticas (KaTeX) y química y las fuentes (Lato, por defecto) Archivo index.html ¡Tocar… bastante! SESIÓN 1
  • 2.
    825 px 640 px 50 px 50 px 50px 540 px Un píxel, o pixel, es la menor unidad homogénea en color que forma parte de una imagen digital. Se compone de tres subpíxeles, uno rojo, uno verde y uno azul, que se combinan para crear el color final. El tamaño de una letra se puede especificar en píxeles, puntos o ems. Los píxeles son la unidad de medida más precisa, pero los puntos y los ems son unidades de medida más utilizadas en el diseño web
  • 3.
    Notepad++ https://notepad-plus-plus.org/ (Windows) SublimeText (Windows, Linux y MAC) https://www.sublimetext.com/ Google web designer https://webdesigner.withgoogle.com/intl/es_es Visual Studio https://code.visualstudio.com/#meet-intellisense Preferiblemente Notepad Herramientas iniciales Editor HTML
  • 4.
    IAs de texto Bardde Google (https://bard.google.com/chat) Bing de Microsoft (https://www.bing.com/) ChatGPT 3.5 o 4 en Bing Perplexety (https://www.perplexity.ai/) IAs de imagen DALL-E 3 (https://www.bing.com/images/create/) Léxica (https://lexica.art/apertura) Herramientas iniciales Inteligencias artificiales
  • 5.
    Primera tarea Eliminar unaetiqueta sobrante Modificar el título: largo o corto Usar la etiqueta “salto de línea” <br> Usar los primeros estilos para intervenir el título Primeras intervenciones al index Es importante tener en cuenta que la etiqueta <br> no debe utilizarse para incrementar el espacio entre líneas de texto, para ello se debe utilizar la propiedad margin de CSS o el elemento <p> El libro se diseña con etiquetas HTML5 Las etiquetas HTML son elementos que se utilizan para definir la estructura y el contenido de cada página de nuestro libro. Estas etiquetas se utilizan para marcar el inicio y el final de un elemento, como un encabezado, un párrafo, una imagen, etc. Las etiquetas HTML se escriben entre corchetes angulares < y >.