Un esfuerzo mayor, que se recompensa con el diseño de un buen libro digital interactivo.

Tabla de contenido

¿Qué veremos en la sesión cinco?

Continuamos con imágenes, pues nos faltaron las imágenes animadas, imágenes con enlaces a gifs animados, imágenes con enlaces a objetos interactivos y, finalmente, imágenes flotando en el texto de un párrafo.

Terminamos esta sesión, creo, con inserción de vídeos en nuestro libro, tanto en local como desde YouTube y Vimeo, además de audios y fondos especiales como el que estás viendo en este párrafo.

Elemento imágenes

Gifs animados

Imágenes con enlaces especiales

¡Haz clic sobre las imágenes!

Imagen con enlace a un gif animado

Imagen con enlace a un objeto interactivo

Imagen con enlace a una página web

Imagen con enlace a un vídeo

Imágenes flotantes

La propiedad float establece el esquema de posicionamiento flotante para un elemento. Cuando existe un elemento flotante, los elementos que se encuentran a continuación del elemento flotante fluyen a lo largo de él. Las imágenes son elementos en línea, es decir, que se insertan como si fueran caracteres, formando parte del párrafo o del elemento de bloque en el que se insertan. La altura de la línea en la que está insertado el elemento aumenta lo necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en el que la hoja de estilo no contiene ninguna propiedad relacionada con la imagen.

Al trabajar con audio y video en la web, a menudo necesitarás material de prueba en varios formatos y calidad. En la red puedes encontrar varios trabajos con licencia permisiva que puedes usar como prueba.
En este ejemplo, hemos puesto una imagen animada, flotando al lado derecho del texto. Se sugiere no justificar el texto, pues es más estética la presentación o, quizá, menos rígida.

Otros elementos multimedia

Elemento video

Vídeo en local

Vídeo YouTube

Audio

Pausa

Fondos

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

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

Más fondos

Imagen de fondo en una página

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.

Degradado modelo 1

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.

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.

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.

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.

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.

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.

Número de página en color blanco

Número de página en color turquesa

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.

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.

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 (véase página 10).

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,$$

Vídeos de apoyo

Insertando imágenes en el libro

Insertando audios en el libro

Insertando videos en el libro

Insertando imágenes de fondo - Parte 1

Insertando imágenes de fondo - Parte 2

Insertando imágenes de fondo - Parte 3

Diseños especiales

Fondos en etiquetas "div"

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.