StreetLib: la mejor herramienta para crear un ebook

Por Natalia En Clave Productiva

El 26 marzo, 2018

cual-es-la-mejor-herramienta-para-crear-un-ebook

 

Hace poco más de un año escribí en el blog de Rubén Alonso el post «Como crear un e-book paso a paso«.  Para actualizar el artículo he hecho una nueva búsqueda con el propósito de encontrar la mejor herramienta para crear un ebook. He creado una infografía comparativa entre la herramienta ganadora del año pasado, Reedsy y dos nuevas que he encontrado, StreetLib y My EbokMaker.

¿Por qué me ha gustado tanto StreetLib?

  • Tengo predilección por las herramientas online y gratis 🙂
  • Es una herramienta muy práctica, muy completa y con una usabilidad fantástica.
  • Permite todo tipo de configuraciones, se hacen de forma muy sencilla e intuitiva, y el resultado final es muy bueno.
  • Lo más interesante es que puedes acceder al código, a la versión HTML del editor, igual que en WordPress. Esto te permitirá personalizar el código HTML de tu libro.
  • Además puedes personalizar el tema de tu ebook con CSS, y crear tus propios temas.
  • Y también te permite compartir el proyecto, por si necesitas añadir colaboradores.

Resultados de la comparativa de herramientas

El proceso me ha exigido hacer muchas pruebas. He acabado editando mi ebook con las tres herramientas. Y te presento aquí el resultado para que escojas por tí mismo:

 

 

¿Verdad que StreetLib es la que ofrece mejor apariencia? ¡Por eso ha ganado! 🙂 Para mí, es la mejor herramienta para crear un ebook de las que he podido encontrar.

StreetLib tiene una pega si no sabes nada de código: no puedes insertar subtítulos, no existe una opción en el editor para encabezados de diferentes tamaños. Hay que hacerlo con código.

Como añadir subtítulos en el editor de StreetLib

¿No sabes nada de nada de código? Yo tampoco soy una gran experta. ¡Pero sí que sé un poquito! En este tutorial te enseñaré a crear el código para insertar títulos y subtítulos, incluso párrafos de colores si quieres. ¡Es muy fácil! Y, como siempre, si tienes pegas siguiendo el tutorial, ya sabes que puedes escribirme. ¡Yo te ayudo!

 

Entra en el editor de StreetLib:

herramienta-para-crear-un-ebook-editor-texto

 

En este caso, yo quiero poner la primera frase («Qué es la presencia online») como título. Hago clic en «código» < > para ver el código de la página

mejor-herramienta-para-crear-un-ebook-html-personalizar

Y sustituyo la <p> de párrafo por <h4>. Recuerda que hay que cerrar la etiqueta:

IMAGEN herramienta-para-crear-un-ebook-codigo

<h4>¿Qué es la presencia online?</h4>

Clic en «Guardar» y listo.

mejor-herramienta-para-crear-un-ebook-h4

 

¡Así de fácil es! Puedes jugar con diferentes tamaños de encabezados: h3, h4, h5… No te recomiendo h1 ni h2, porque si no los subtítulos quedarán igual de grandes que el título del libro o del capítulo.

Pon colores a los títulos:

Como siempre digo, es importante conocer el código hexadecimal de tus colores corporativos, o del sitio al que se destina el contenido.

En este caso, yo estoy utilizando dos de los colores del tema de mi web. Para conocer los tuyos, o cualquier color de la pantalla, instala una extensión como «ColorPick Eyedropper» en tu navegador. (Otros que deberían darme comisión, jeje). Después solo tendrás que activarla haciendo clic sobre ella y sobre la parte de la pantalla cuyo color quieras conocer. Anota los códigos hexadecimales de los colores que quieras utilizar.

Para indicar el color en el código es así:

<h4 style=»color: #01bacb;»>¿Qué es la presencia online?</h4>

Solamente tienes que sustituir el código hexadecimal por el tuyo. Eso sí, presta mucha atención para no olvidar ningún signo de puntuación: si te olvidas de cerrar comillas o del punto y coma, ¡no se verá!

Mira el código para poner un título y un subtítulo de colores con código hexadecimal: ¡Utilízalo para crear los tuyos!

<h4 style=»color:#01bacb;»>Elementos de la presencia online:</h4>
<h5 style=»color:#f4931e;»>1.- Servicios de Google: Google My Business, Google Plus, Google Maps</h5>

Con lo que obtienes esto:

Elementos de la presencia online:

1.- Servicios de Google: Google My Business, Google Plus, Google Maps

Como destacar un párrafo con otro color o formato:

En este caso, vamos a encerrar el párrafo que queramos destacar entre las etiquetas de maquetación <div>… </div>

Esta etiqueta es un contenedor de otras etiquetas, y te permitirá aplicar estilo únicamente al texto que encierra.

Como la idea no es dar una clase magistral de código, voy a explicarte solamente los atributos más útiles para formatear el texto y como utilizarlos.

El fragmento de código empieza <div style=» y a partir de ahí todos los atributos han de ir separados por ; y un espacio. Al final hay que cerrar comillas y > Después escribe el texto a destacar, y por último cierra </div>

Es decir <div style=»atributo:valor; atributo:valor; atributo:valor;»>Texto a destacar</div>

Los atributos que te funcionarán en el editor de StreetLib son:

  • Alinear el texto: text-align: XXXXXX;

Valores posibles: text-align: center; text-align: left; text-align: right;

 

  • Indicar el tamaño de la letra: font-size: XXpx;

Sustituye las XX por el tamaño en píxeles deseado.

 

  • Enmarcar el texto con un cuadroborder: solid;

 

  • Marcar grosor del bordeborder-width: Xpx;

Sustituye la X por el valor en píxeles para definir el grosor del marco.

 

  • Color del borde: border-color: #XXXXXX;

Sustituye las XXXXXX por el código hexadecimal que quieras utilizar

 

  • Establecer margen entre el borde y el texto: padding: Xpx;

De nuevo sustituye la X por el valor en píxeles del margen que quieras establecer

 

  • Centrar el elemento: margin:0 auto;

 

  • Establecer anchura del elementowidth: XX%;

Indica la anchura deseada en porcentaje.

Por ejemplo, el código :

<div style=»text-align: center; margin:0 auto; font-size: 14px;  color: #01bacb;  border: solid; border-width: 2px; border-color: #019cba; width:70%;»>EnClaveProductiva</div>

Dará lugar a:

EnClaveProductiva

 

¡Haz pruebas, que no muerde! Pero repito: ten cuidado de no olvidar cerrar etiquetas o elementos. Revisa siempre el código con cuidado antes de pasar al modo visual.

herramienta para crear un ebook: contenidos

Crea tus propios temas:

Como decía al principio, StreetLib te permite crear tu propia plantilla editando el CSS de cualquier tema base disponible.

¿Quieres ver los temas disponibles? Haz clic arriba en «TEMA» (ves la opción cuando estás dentro del editor) y en la pestaña «TEMAS» verás todos los que hay disponibles.

 

mejor-herramienta-para-crear-un-ebook-codigo-tema

 

Para crear tu propio tema, elige uno como base y haz clic en «Create Tema«

Da nombre a tu nuevo tema y selecciona la plantilla base del selector que aparece debajo:

 

mejor-herramienta-para-crear-un-ebook-codigo-tema

 

Acto seguido accederás al editor CSS del tema. ¡Configurable al máximo! Incluso puedes crear CSS diferentes para el archivo en fomato .epub o PDF.

 

mejor-herramienta-para-crear-un-ebook-codigo-tema

 

Eso sí, el tutorial para crear el CSS del tema lo voy a dejar para otro día. ¡Ya llega de tutorial por hoy!

Si finalmente te decides a crear tu ebook con alguna de las tres herramientas, me encantaría que compartieses tu experiencia en los comentarios. ¡Mucha suerte con tu ebook!

 

Natalia En Clave Productiva
Natalia En Clave Productiva

Profesional del Marketing digital y marketing de contenidos en constante formación. Aquí comparto todo lo que voy aprendiendo o me parece interesante sobre Marketing Digital, Social Media y Mundo Online.

Quizá también te interese:

Tutorial Kahoot 2020: gamificación también a distancia

Tutorial Kahoot 2020: gamificación también a distancia

Kahoot, la herramienta de gamificación, puede ser de gran ayuda en estos días de confinamiento que nos ha tocado vivir. Permitirá mantener el contacto entre profesores y alumnos y potenciar el aprendizaje de una forma muy divertida...¿Qué es Kahoot? Es una herramienta...

WhatsApp Business web y móvil: ¡súper práctico!

WhatsApp Business web y móvil: ¡súper práctico!

¡Por fin he creado mi perfil de WhatsApp Business! No lo hice antes por falta de tiempo, pero mi último cliente quería crear uno, así que no me quedó más remedio que aprender para explicárselo. Aprovecho para contarte que a este cliente le estoy haciendo la web en...

SIM swapping: Cómo detectar y protegerte de este ciberataque

SIM swapping: Cómo detectar y protegerte de este ciberataque

Cada día salen en medios noticias sobre ciberataques. El que está últimamente "de moda", aunque no es nuevo, se conoce como "SIM swap" o "SIM swapping"  y es tremendamente inquietante porque el atacante puede vaciar tu cuenta del banco, ¡incluso pedir un crédito a tu...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Share This
Abrir chat
1
Hola :-) Estoy por aquí... ¿Quieres comentarme algo?
Powered by