Diseño de libros interactivos

Sesión 6
24 de septiembre 2021

Sesión 6

¡Nos vamos acercando al final!
Un final no apocalíptico, pues es el nacimiento de una nueva era de creadores cartesianos.

Tabla de contenido

¿Qué veremos en la sesión seis?

Continuamos con imágenes, pues nos siguen faltando algo más sobre imágenes de fondo, fondos en gradiente lineal y, finalmente, imágenes de fondo sobre otro fondo como el de la portada de esta sesión.

Terminamos esta sesión, confío en ello, con el elemento audio y el diseño de tablas.

Diseños especiales, que incluyen funciones JavaScript, no los abordaremos en las reuniones del curso; sin embargo, puedes explorar el código o ver los vídeos relacionados; por ejemplo, para el anterior fondo animado observa el siguiente video en su parte inicial:

Parte I

Imágenes de fondo

Imágenes de fondo en dos páginas

Observa el siguiente video:

Imágenes de fondo en párrafos

Imagen de fondo en un párrafo, con las mismas dimensiones de la página.

Imagen de fondo en un párrafo, con ancho 540px.

Imagen de fondo en un párrafo, con ancho del 60% (324px) y altura 300px.

Fondos degradados

Degradado modelo 1

Los degradados CSS permiten mostrar transiciones suaves entre dos o más colores especificados. Existen dos tipos de degradados: lineales y radiales. En este apartado nos ocuparemos de los degradados lineales.

Para un fondo de página con un degradado lineal, observa el siguiente video:

El video, también, explica cómo diseñar las imágenes de fondo en párrafos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Degradado modelo 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum.

Degradado lineal de rojo a verde, en un párrafo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Degradado modelo 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Degradado modelo 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Degradado modelo 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Degradado modelo 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Imagen de fondo sobre imagen de fondo

Para el diseño de páginas con imágenes de fondo sobre imágenes de fondo, consulta el siguiente video:

Fondo desplazado a la derecha

En este caso usamos background-position xpos ypos, donde xpos es la posición horizontal y ypos la vertical; por ejemplo background-position 0px 0px para la primera pagína muestra los primer 640 pixeles horizontales, lo que obliga a la segunda página a tener background-position -640px 0px, pues así se corre la imagen 640px a la izquierda, permitiendo mostrar los último 640px.

Puedes observar cómo se diseñan páginas con imágenes desplazadas en el siguiente video:

La imagen la hemos desplazado 400 pixeles a la derecha, por lo que habría que sumar esa cantidad a xpos en cada páginas; es decir, background-position 400px 0px para la primera pagína y background-position -240px 0px para la segunda.

Fondo desplazado a la izquierda y hacia arriba

En esta caso hemos subido la imagen 300px y desplazado a la izquierda 500px; es decir, para la primera página originalment en 0px 0px, quedaría en -500px -300px. Para la segunda página, originalmente en -640px 0px, quedaría en -1140px -300px."

Es importante, para las páginas con imagen cortada horizontal o verticalmente, incluir background-repeat: no-repeat;

En la imagen de la derecha, hemos incluido una opacidad del 50%, que se logra con el estilo: Opacity: 0.5;

Imagen compartida al interior de las páginas

Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro. Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur.

En esta caso hemos bajado la imagen 180px y desplazado a la derecha 200px; es decir, para la primera página originalmente en 0px 0px, quedaría en 200px 180px. Para la segunda página, originalmente en -640px 0px, quedaría en -440px 180px."

Es importante, para las páginas con imagen cortada horizontal o verticalmente, incluir background-repeat: no-repeat;

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro. Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.

Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro. Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro,$$

Fondos para portada

Título de la obra

Autor 1
Autor 2
Autor 3

Título de la obra

Autor 1
Autor 2
Autor 3

Título de la obra

Autor 1
Autor 2
Autor 3

Título de la obra

Autor 1
Autor 2
Autor 3

Título de la obra

Autor 1
Autor 2
Autor 3

Parte II

Otros elementos multimedia

Audio

Puedes observar cómo se diseñan páginas con audios en el siguiente video:

Fondos animados

En este fondo, puedes cambiar la altura de la caja en unidades vh, su ancho y la imagen.

Fondo animado

Un fondo con un video

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.

Un párrafo con imagen de fondo y texto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus.

Aliquam dolor arcu, efficitur sed malesuada eget, ultricies eu odio. Integer pharetra, purus a venenatis vehicula, ex leo vehicula tellus, mattis interdum ante risus auctor nibh. Quisque in vestibulum purus. Sed sed imperdiet sem, vitae hendrerit sapien.

Cras ullamcorper nulla neque, eu fringilla enim consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus neque nulla, finibus a felis eu, condimentum tincidunt ante. Quisque sed purus id ipsum tristique aliquet. Quisque at commodo turpis, a euismod ipsum. Donec bibendum mauris odio, vel egestas lorem sodales eget.

Tablas

Mamíferos	Aves	Peces	Reptiles
Gato	Gallo	Salmón	Caimán
León	Palomao	Truchan	Salamandra
Ballena	Colibrí	Tiburón	Boa
Canguro	Loro	Delfín	Camaleón

Mamíferos	Aves	Peces	Reptiles
Gato	Gallo	Salmón	Caimán
León	Palomao	Truchan	Salamandra
Ballena	Colibrí	Tiburón	Boa
Canguro	Loro	Delfín	Camaleón

Diseños especiales

Fondos en etiquetas "div"

Reflexión

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Fondo en la página

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.

Un título especial

Texto rotado, especial para algunas portadas

El sistema diédrico es un método de representación geométrica de los elementos del espacio tridimensional sobre un plano, es decir, la reducción de las tres dimensiones del espacio a las dos dimensiones del plano, utilizando una proyección ortogonal sobre dos planos que se cortan perpendicularmente.

El sistema formado por los dos planos se denomina diedro. Para generar las vistas diédricas, uno de los planos se abate sobre el segundo, permitiendo la representación de las proyecciones de los elementos en un plano.

Tal como se observa, se trata de un polígono en coordenadas $(x_1, y_1), (x_2, y_2), \cdots, (x_n, y_n)$, situación que vuelve complejo el diseño de las caras (vistas) de una pieza en un sistema diédrico. Accidentalmente, hemos descubierto que el editor acepta, también, polígonos en coordenadas $(x_1, y_1, z_1), (x_2, y_2, z_2), \cdots, (x_n, y_n, z_n)$ (veáse la documentación actualizada en "Documentación de Descartes JS"). Gracias a este descubrimiento, es posible diseñar la siguiente pieza con sólo nueve polígonos:

El sistema diédrico es un método de representación geométrica de los elementos del espacio tridimensional sobre un plano, es decir, la reducción de las tres dimensiones del espacio a las dos dimensiones del plano, utilizando una proyección ortogonal sobre dos planos que se cortan perpendicularmente.

El sistema formado por los dos planos se denomina diedro. Para generar las vistas diédricas, uno de los planos se abate sobre el segundo, permitiendo la representación de las proyecciones de los elementos en un plano.

Tal como se observa, se trata de un polígono en coordenadas $(x_1, y_1), (x_2, y_2), \cdots, (x_n, y_n)$, situación que vuelve complejo el diseño de las caras (vistas) de una pieza en un sistema diédrico. Accidentalmente, hemos descubierto que el editor acepta, también, polígonos en coordenadas $(x_1, y_1, z_1), (x_2, y_2, z_2), \cdots, (x_n, y_n, z_n)$ (veáse la documentación actualizada en "Documentación de Descartes JS"). Gracias a este descubrimiento, es posible diseñar la siguiente pieza con sólo nueve polígonos:

El sistema diédrico es un método de representación geométrica de los elementos del espacio tridimensional sobre un plano, es decir, la reducción de las tres dimensiones del espacio a las dos dimensiones del plano, utilizando una proyección ortogonal sobre dos planos que se cortan perpendicularmente.

El sistema formado por los dos planos se denomina diedro. Para generar las vistas diédricas, uno de los planos se abate sobre el segundo, permitiendo la representación de las proyecciones de los elementos en un plano.

Tal como se observa, se trata de un polígono en coordenadas $(x_1, y_1), (x_2, y_2), \cdots, (x_n, y_n)$, situación que vuelve complejo el diseño de las caras (vistas) de una pieza en un sistema diédrico. Accidentalmente, hemos descubierto que el editor acepta, también, polígonos en coordenadas $(x_1, y_1, z_1), (x_2, y_2, z_2), \cdots, (x_n, y_n, z_n)$ (veáse la documentación actualizada en "Documentación de Descartes JS"). Gracias a este descubrimiento, es posible diseñar la siguiente pieza con sólo nueve polígonos:

Este diseño pretende incorporar columnas en los extremos, para incluir información complementaria. Es una práctica común en algunas revistas, como sustituto de las notas al pie de página, útil por la posibilidad de incluir imágenes; por ejemplo, en una reseña bibliográfica.

El sistema diédrico es un método de representación geométrica de los elementos del espacio tridimensional sobre un plano, es decir, la reducción de las tres dimensiones del espacio a las dos dimensiones del plano, utilizando una proyección ortogonal sobre dos planos que se cortan perpendicularmente.

El sistema formado por los dos planos se denomina diedro. Para generar las vistas diédricas, uno de los planos se abate sobre el segundo, permitiendo la representación de las proyecciones de los elementos en un plano.

Tal como se observa, se trata de un polígono en coordenadas $(x_1, y_1), (x_2, y_2), \cdots, (x_n, y_n)$, situación que vuelve complejo el diseño de las caras (vistas) de una pieza en un sistema diédrico. Accidentalmente, hemos descubierto que el editor acepta, también, polígonos en coordenadas $(x_1, y_1, z_1), (x_2, y_2, z_2), \cdots, (x_n, y_n, z_n)$ (veáse la documentación actualizada en "Documentación de Descartes JS"). Gracias a este descubrimiento, es posible diseñar la siguiente pieza con sólo nueve polígonos:

Sumario

8 CSS
Imágenes de fondo en dos páginas

10 CSS
Imágenes de fondo en párrafos

12 Fondos
Fondos degradados

23 Fondos
Fondo sobre fondo

24 Diseño
Fondo desplazado a la derecha

26 Diseño
Fondo desplazado a la izquierda

28 Imágenes
Imagen compartida

30 Imágenes
Portadas

38 Multimedia
Audios

39 Multimedia
Fondos animados

41 Diseño
Párrafo en caja

42 HTML
Diseño de tablas

45 HTML
Diseños especiales

52 Diseño
Fondo en forma de cuaderno

57 Transform
Títulos especiales

58 Diseño
Columnas en los extremos

Consejo Editorial

Presidente
Ángel Cabezudo Bueno Coordinación editorial
Juan Guillermo Rivera Berrío Editores
Mª José García Cebrian
Yecid E. Gaviria Restrepo
José Román Galo Sánchez
José Antonio Salgueiro
Administración web
Francisco Rodríguez Villanego y Josep Mª Navarro Canut
Código JavaScript
Joel Espinosa Longi Colaboradores
Elena Álvarez Saiz
Carlos A. Rojas Hincapie
Edison Arbey Escobar
Ramiro A. Lopera Sánchez

Diseño de portada
Julieth A. Gómez Hernández
Viñetas: klipartz.com/
Recursos interactivos:
DescartesJS
Fuentes: Lato y UbuntuMono

ISSN: 2792-4483

Sumario

08
CSS
Conoce cómo incrustar una imagen de fondo sobre dos páginas.
10
CSS
Párrafos con imágenes de fondo.

23
CSS
Como poner una imagen de fondo sobre otra imagen de fondo.
24
Diseño
Una imagen de fondo desplazada a la derecha

28
Imágenes
Imagen compartida en dos páginas y con desplzamientos
30
Portadas
Ejemplos de algunas portadas para libros interactivos

38
Multimedia
Inserta audios en tu libro interactivo
41
Diseño
Diseña atractivos párrafos con imágenes de fondo

42
HTML
Inserta Diseña elegantes tablas
57
Diseño
Presenta títulos especiales, incluyendo rotación

Consejo Editorial

Presidente
Ángel Cabezudo Bueno Coordinación editorial
Juan Guillermo Rivera Berrío Editores
Mª José García Cebrian
Yecid E. Gaviria Restrepo
José Román Galo Sánchez
José Antonio Salgueiro
Administración web
Francisco Rodríguez Villanego y Josep Mª Navarro Canut
Código JavaScript
Joel Espinosa Longi Colaboradores
Elena Álvarez Saiz
Carlos A. Rojas Hincapie
Edison Arbey Escobar
Ramiro A. Lopera Sánchez

Diseño de portada
Julieth A. Gómez Hernández
Viñetas: klipartz.com/
Recursos interactivos:
DescartesJS
Fuentes: Lato y UbuntuMono

ISSN: 2792-4483

SUMARIO

10
CSS
Párrafos con imágenes de fondo.
23
Diseño
Como poner una imagen de fondo sobre otra imagen de fondo

39
CSS
Fondos animados
42
Diseño
Inserta Diseña elegantes tablas

42
CSS
Diseño de tablas
45
Diseño
Diseños especiales, te sorprenderán

30

52
CSS
Fondo en forma de cuaderno
57
Diseño
Títulos especiales

58
CSS
Columnas en los extremos
62
Diseño
Ejemplos de sumarios para el libro interactivo

08

41

38

Consejo Editorial

Presidente
Ángel Cabezudo Bueno Coordinación editorial
Juan Guillermo Rivera Berrío Editores
Mª José García Cebrian
Yecid E. Gaviria Restrepo
José Román Galo Sánchez
José Antonio Salgueiro
Administración web
Francisco Rodríguez Villanego y Josep Mª Navarro Canut
Código JavaScript
Joel Espinosa Longi Colaboradores
Elena Álvarez Saiz
Carlos A. Rojas Hincapie
Edison Arbey Escobar
Ramiro A. Lopera Sánchez

Diseño de portada
Julieth A. Gómez Hernández
Viñetas: klipartz.com/
Recursos interactivos:
DescartesJS
Fuentes: Lato y UbuntuMono

ISSN: 2792-4483

SUMA

Consejo Editorial

Presidente
Ángel Cabezudo Bueno Coordinación editorial
Juan Guillermo Rivera Berrío Editores
Mª José García Cebrian
Yecid E. Gaviria Restrepo
José Román Galo Sánchez
José Antonio Salgueiro
Administración web
Francisco Rodríguez Villanego y Josep Mª Navarro Canut
Código JavaScript
Joel Espinosa Longi Colaboradores
Elena Álvarez Saiz
Carlos A. Rojas Hincapie
Edison Arbey Escobar
Ramiro A. Lopera Sánchez

Diseño de portada
Julieth A. Gómez Hernández
Viñetas: klipartz.com/
Recursos interactivos:
DescartesJS
Fuentes: Lato y UbuntuMono

ISSN: 2792-4483

39
CSS
Fondos animados
42
Diseño
Inserta Diseña elegantes tablas
45
Diseño
Diseños especiales, te sorprenderán

52
CSS
Fondo en forma de cuaderno
57
Diseño
Títulos especiales
62
Diseño
Ejemplos de sumarios para el libro interactivo

30

ARIO

52
CSS
Fondo en forma de cuaderno
57
Diseño
Títulos especiales
58
CSS
Columnas en los extremos

08

41

38

EDITORIAL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet orci lorem, vitae dictum est maximus quis. Morbi bibendum ante at dolor luctus, nec pellentesque dolor condimentum. Nulla ac magna in erat ullamcorper tempor. Cras vel purus viverra augue semper tristique non id lacus. Aliquam vel ex mattis, efficitur turpis in, ultricies magna. Sed tincidunt consequat tellus eu aliquam. Cras at turpis sed nisi auctor maximus. Quisque non nunc ac neque imperdiet euismod ut sit amet orci. Proin porttitor eget felis nec facilisis. Sed eget ipsum blandit, ultricies dui eu, vulputate ipsum.