More from: html

Por qué deberías aprender HTML y CSS

Dos personajes hablando en HTML.

HTML o HyperText Markup Language es un lenguaje estándar de marcado (que no de programación) que se usa, entre otras cosas, para hacer páginas web. Por otra parte CSS (Cascading Style Sheets) es un lenguaje que se usa para crear hojas de estilo, que son las que hacen que las páginas web sean bonitas y usables.

Pero igual que otros idiomas como el inglés no lo usan solo los lingüistas o los escritores, ser capaz de entender y escribir HTML no es solo útil para los diseñadores, sino también para editores, publicistas, comunicadores, o en realidad, para cualquier persona que de un modo u otro use Internet.

Creo que es prudente afirmar que los lenguajes HTML y CSS han sido dos de las cosas más útiles que he aprendido en mi vida, y esto lo he ido comprobando tanto en situaciones específicas como en un sentido más general. En este post explicaré cómo tener un conocimiento a un nivel medio de estos lenguajes me ha ayudado personalmente, y daré algunas pistas que te serán útiles si tú también te quieres iniciar o si sientes curiosidad en el tema.

Un poco de background siempre ayuda

Mientras estudié en la universidad ni uno solo de mis profesores llegó a sugerirme ni una sola vez la importancia conocer estos lenguajes, eso a pesar de que cursé estudios de comunicación. La parte buena es que sí aprendí cosas relacionadas con otras disciplinas que a posteriori me harían entender los conceptos básicos del diseño web con facilidad. Algunas de estas cosas fueron:

maquetación de periódicos y revistas: cómo definir y aplicar estilos, y cómo jerarquizar los contenidos

imagen y percepción: cómo componer teniendo en cuenta el modo en que el receptor lee la información

diseño gráfico: uso de tipografías y colores, manipulación de formatos

comunicación audiovisual : secuencialidad y narrativa visual

Si tienes conocimientos en alguna de estas áreas, te será mucho más fácil iniciarte en el aprendizaje de los lenguajes de marcado. Si no, puedes aprender igualmente, siempre que dediques suficiente tiempo.

¿Para qué me sirvió aprender HTML y CSS?

Por supuesto, eres una persona ocupada, y a lo mejor estás preguntándote si te merecería la pena dedicar tu tiempo a algo como aprender HTML. Si me preguntas, yo creo que hoy en día todo el mundo debería saber al menos los principios básicos de estos lenguajes, más que nada porque todos somos usuarios de Internet. Que te dediques a ello con mayor o menor intensidad es algo que dependerá de aspectos como tu profesión o tus inquietudes creativas.

En cualquier caso, y si te sirve de algo, aquí te explico en qué sentido estos conocimientos me han resultado útiles a lo largo del tiempo:

Cosas grandesIlustración de una cosa grande.

-Básicamente, leer y escribir HTML y CSS, aunque sea a un nivel básico, te ayuda a saber CómoFunciona la Web, lo que a su vez te permitirá Resolver Problemas. Entiéndase mi uso del término «Web» y la aplicación de mayúsculas ahí donde no debería haberlas como una manera de enfatizar el alcance de la afirmación y la dificultad de describirla de manera exhaustiva.

Cosas medianas

Ilustración de una cosa mediana.

Otros propósitos no tan reveladores como el anterior pero sí más específicos en los que me han resultado útiles mis conocimientos en HTML y CSS y que también te pueden resultar útiles a ti, son:

Diseñar tus propias páginas web: experimentos, soportes para tu trabajo, páginas promocionales o lo que se te ocurra. Cuando diseñas una página web con HTML tienes un control total sobre su contenido y forma, puedes hacer modificaciones de manera rápida, y todo sin renunciar a integrar funcionalidades o aplicaciones externas que te interesen.

Modificar y gestionar páginas web o gestores de contenido externos, como temas de WordPress.

Entender el significado y funcionamiento del archiconocido Searh Engine Optimization, lo que en realidad no supone mucho más que observar cómo los buscadores indexan las páginas web y cuál es la mejor manera de presentarles la información.

Entender cómo funciona cualquier página. ¿Cómo puedo implementar en mi propia web diseños o funcionalidades que me han llamado la atención? ¿Por qué está «rota» esta página? ¿Por qué esta es tan rápida? Conocer el lenguaje en el que están escritas las páginas web te ayudará a entender el por qué de las cosas que hasta ahora dabas por sentado, aunque eso sí, para tener una visión completa ayuda que también sepas algo de Javascript y jQuery.

Formatear y editar prácticamente cualquier cosa que sea digital: ebooks, emails, aplicaciones… muchos soportes digitales están formateados con CSS. Por supuesto, pronto te sorprenderás a ti mismo editando mentalmente el interlineado de los anuncios de los periódicos.

Otras cosas

  • Entender cómo se organizan los archivos de una página web en un servidor.
  • Embeber contenidos de otras aplicaciones o webs en tu sitio o blog.
  • Usar de manera legítima esta camiseta.
  • etc.

Por dónde empezarIlustración de una caja en la que pone "HTML starter pack!! Contiene:", y al lado hay dibujado un monitor, un teclado y unas manos.

Como expliqué antes, todo dependerá de tu trasfondo, pero si manejas con más o menos agilidad Internet y Sus Cosas, aprender HTML a un nivel respetable no te requerirá mucho tiempo ni esfuerzo.

Además, los recursos que necesitas son irrisorios:

  • Un editor de texto, que por cierto ya tienes (el Bloc de notas, por ejemplo).
  • Un explorador, que también tienes.

Así es, para diseñar una página web con HTML no necesitas softwares complejos. De hecho, ni siquiera necesitas una conexión a Internet. Si alguien te intenta vender un pack de iniciación o algo parecido lleno de utilidades y programas, que sepas que no lo necesitas.

Más adelante, cuando alcances un nivel avanzando, empezarás a ponerte puntilloso, y querrás un editor de texto más avanzado como Sublime Text, pero incluso estos tienen versiones gratuitas. Cuando tus trabajos empiecen a tener buena pinta y quieras que los demás los vean, necesitarás comprar un dominio (aunque también aquí hay opciones gratuitas), conseguir un gestor FTP, y tener acceso a Internet.

Ten cuidado con…

Si estás decido por empezar a aprender o por afianzar tus conocimientos en HTML y en CSS, estos son los mejores consejos que puedo darte:

-No hagas mucho caso a los métodos que se anuncian bajo enunciados tipo «Aprende HTML en 30 días». Si vas a empezar a aprender algo, quieres hacerlo bien y dedicándole el tiempo necesario. Los mejores tutoriales y recursos que he usado nunca se me presentaron de ese modo.

-No porque aparezca el primero en Google o porque tenga más usuarios un curso o tutorial es mejor. Los especialistas en diseño HTML también suelen dominar SEO.

Ten cuidado con los ejemplos en los que te fijas. Para bien o para mal, en HTML siempre hay varias maneras de hacer una misma cosa. Hay gente que diseña páginas a nivel profesional (cobrando por ello), pero que no hacen las cosas de la mejor manera posible, sino según las malas prácticas.

Cuando estés aprendiendo algo nuevo o fijándote en cómo lo hace alguien, primero cuestiónatelo contrastando en varios sitios. Que la fuente sea una web popular no siempre significa que esté hecho de la mejor manera.

No pagues cursos online o presenciales de esos que cuestan cantidades astronómicas. Da igual la entidad que imparta el curso: todo lo que pueden enseñarte también lo puedes encontrar en Internet. Dudo incluso que el hecho de que haya un profesor pueda aportarte un valor único. Existen muchas comunidades y foros llenos de gente que está aprendiendo pero también de gente con conocimientos avanzados que dedican su tiempo a ayudar a los demás. Además, tus mismas dudas ya las ha tenido alguien antes, así que no te será difícil encontrar respuestas con Google.

Intenta contar con la ayuda de alguien que revise tu código de tanto en tanto. Este punto va encadenado con lo anterior, pero más que a dudas específicas, aquí me refiero a buscar la colaboración de alguien que te ayude a verificar que vas en el buen camino y que no has adoptado malas costumbres.

 Conclusión

Para aprender HTML no hay fórmulas milagrosas ni atajos. No aprenderás en una semana ni en un mes; solo mediante una dedicación sostenida en el tiempo. En mi caso, tardé al menos un año en llegar a diseñar desde cero sitios sencillos como este, este, o este.

Por último, no acabaré el post con un directorio infinito de páginas web, cursos y tutoriales, sino que te recomendaré un único sitio.


Cómo editar un ebook en html

Una manera de editar tus escritos antes de exportarlos a formato mobi o epub para la tienda Kindle (u otras tiendas digitales) es mediante código html, lo que facilita el total control sobre el formato y la personalización del documento.

Para editar un libro en html que luego se pueda visualizar en un ebook o tablet solo son necesarias unas nociones muy básicas de html, aunque si no conoces este lenguaje de marcado, puedes seguir esta guía para una maquetación simple de tu documento.

Kindle con html

¿Qué archivos necesitas para crear tu ebook mobi o epub?

En primer lugar, necesitas una portada. La portada puede ser de cualquier dimensión, y dependiendo del uso final de tu archivo, querrás darle unas dimensiones u otras, pero por poner un ejemplo, Kindle aconseja 1563×2500 px.

Por otra parte, necesitas una carpeta con las imágenes que contenga el libro (posibles ilustraciones, contraportadas, o lo que se te ocurra).

Por último, un archivo .html que incluirá en su interior las especificaciones de estilo (CSS).

¿Cómo puedes editar el documento html?

Para editar tu archivo solo necesitas un editor de html, que puede ser desde uno muy simple que quizás ya tienes en tu ordenador (el bloc de notas de Windows) hasta un programa más avanzado como Sublime Text (gratuito), que hace la experiencia de editar html más agradable y fácil.

¿Qué estructura debe tener el archivo?

Sin extenderme mucho, el html es el lenguaje en el que se basa la construcción de las páginas web (entre otras cosas), y constituye un lenguaje de marcado que va “marcando” o delimitando las partes de una web, o en este caso, de un ebook.

Para seguir las explicaciones puedes tener a mano el archivo con el código html de mi ebook Sangre Insoluble, que puedes descargar en formato .html aquí (19 kb).

Si quieres maquetar tu propio libro o historia siguiendo este modelo (es el que uso yo), solo tienes que copiar y pegar todo ese texto en tu notepad o editor de texto, y sustituir mis textos por los tuyos.

El head de tu ebook

El head incluye algunas especificaciones que afectan a todo el documento, pero que no se ven reflejadas en él a simple vista.

El contenido del head de mi ebook es:

Código incluido en el head

En primer lugar, en el tag ˂title˃ debes incluir el título de tu libro (simplemente sustituyendo el texto “Sangre Insoluble”).

En ˂style˃ van las especificaciones en CSS (que es otro lenguaje para dar estilo a los documentos). Aquí pondremos cómo queremos que sea el estilo visual de nuestro documento. CSS permite hacer casi cualquier cosa, pero cuando maqueto un ebook, prefiero ir a lo sencillo para evitar posibles incompatibilidades o comportamientos extraños en según qué dispositivos.

Por eso, los elementos visuales que yo modifico en mis libros suelen ser únicamente:

  • Subrayado del texto: para resaltar un enlace
  • Tamaño de la tipografía: para hacer más grande un enlace que quiero que el lector presione sin “salirse”
  • Cursivas: para destacar aclaraciones de la autora, por ejemplo en una historia interactiva
  • Centrado de texto: para los nombres de los capítulos o autora

Hay otros muchos elementos que puedes querer controlar con CSS en un ebook, como por ejemplo: tipografía, uso de negritas, márgenes…

No obstante, en cuanto a elementos como el margen, prefiero dejar a cada dispositivo que trabaje con el texto a su manera. Si configuras el margen o la tipografía sin probar bien en cada dispositivo, es posible que el texto se descuadre.

En el ejemplo que has descargado, habrás visto que la única especificación de estilo que he hecho en este caso ha sido para centrar el texto. Primero defino una clase con nombre descriptivo: .center, y luego configuro con CSS cómo será esa especificación (el texto centrado).

Así, siempre que queramos que un texto se centre, solo hay que asociar al tag correspondiente la especificación de estilo:

Ejemplo de dar estilo a un párrafo

En esta historia corta tan solo usé el estilo para centrar los párrafos, pero en otros libros he usado otras opciones. Por ejemplo:

  • .option {list-style: none; margin-bottom: 0.7em}
  • .italic {font-style: italic}
  • .uppercase {text-transform: uppercase}
  • .grande {font-size: 1.3em; font-style: italic}
  • .grande2 {font-size: 1.4em; font-style: italic}

El body de tu ebook

La estructura del cuerpo del documento, que es donde están marcadas las partes, es la siguiente:

Código incluido en el body

El h1 indica el nombre del documento, en este caso el título. En cuanto a la autoría, prefiero indicarla con un párrafo, justo debajo.

Código para salto de línea

es el tag que uso siempre que quiero un salto de página. Es decir, según el ejemplo, en mi ebook, después de leer el título y nombre de autora, el resto de la página queda en blanco hasta que avancemos a la página siguiente con nuestro dispositivo.

Todos los párrafos de texto tienen que ir marcados por el tag del párrafo (al inicio con ˂p˃ y al final con ˂p˃). He investigado sobre cómo añadir los tags en cada párrafo de manera automática (a mano puede ser un infierno si es un texto largo), y si tienes conocimientos de programación quizás encuentres una manera más asequible, pero yo uso este “truco” que es rápido y fácil:

  1. Primero abro en Libre Office Writer (el programa que uso para escribir) un documento con el texto de mi historia.
  2. Guardo una copia como DocBook (.xml).
  3. Abro el documento que acabo de guardar con mi editor de html (bloc de notas o Sublime) y copio el texto.
  4. Pego el texto en un documento nuevo de Office Writer, y ahora debería haber unos tags como estos: ˂para˃ y ˂/para˃ antes y después de cada párrafo, y ˂para/˃ separando los párrafos (si me dejé líneas en blanco).
  5. Ahora ya están los tags colocados en los párrafos, solo que no es el tag correcto, por lo que sustituyo con la opción “Buscar y sustituir” de Office: primero ˂para˃ por ˂p˃, luego ˂/para˃ por ˂/para˃, y finalmente, ˂para/˃ por “nada” (no pongas nada en la casilla de sustitución).
  6. No olvides borrar todo el código que te haya añadido el Office al exportar a .xml.

Este método puede parecer un poco rebuscado (y quizás lo sea), pero es el que he encontrado yo y funciona. Cuando lo hayas hecho una vez luego te saldrá mucho más rápido.

Y con esto ya estaría editado el ebook del ejemplo, aunque hay otras cosas que puedes tener en cuenta:

Capítulos e índice

En mi caso creo la tabla de contenidos al convertir el archivo a mobi o epub, en la fase final, así que en el htm no hago nada al respecto. Sin embargo, en algunos casos sí que he incluido un índice al inicio del libro, después del título, con enlaces a los capítulos. Este íncide queda así:

Código para el índice

♦ es tan solo este símbolo: ♦ Puedes incluir símbolos en tu archivo, que para eso has declarado en el head la compatibilidad con el sistema utf-8 (en el tag ). Por otra parte, los enlaces llevan a cada capítulo del libro.

La estructuración del documento en headings (h1, h2, h3…) la puedes hacer como quieras, pero yo suelo usar h1 para el título (se usa una sola vez en todo el documento) y h2 para los nombres de los capítulos.

Imágenes

En cuanto a las imágenes insertadas en los archivos, Amazon pide que sean en formato jpg, y que tengan un mínimo de 600×800 px.

Es posible que te preguntes qué pasa con las transparencias si no se pueden usar archivos .png. En las pruebas que he hecho, tanto Kindle como iPad (con su lector iBooks), los dispositivos integran el fondo blanco del jpg con la página, de manera que no da lugar a ningún efecto antiestético.

Tanto cuando diseñes tu portada como tus ilustraciones para el interior del libro, piensa que aunque en Kindle no se ven los colores, ocurre lo contrario en otros dispositivos como en las tablets. Por eso tienes que tener en cuenta cómo se verá la imagen tanto en color como en blanco y negro.

Por otra parte, el texto no rodea las imágenes, sino que la imagen ocupa un bloque en la página. Si te interesa, puedes alinearla en relación a los márgenes con las propiedades top o bottom.

Como las imágenes irán en una carpeta junto al documento html, la ruta será la siguiente:

Código para visualizar las imágenes

Visualizar tu edición

Para tener una idea de cómo va quedando tu edición, puedes visualizarlo en el navegador web de tu ordenador, simplemente arrastrando el archivo a una ventana abierta de Chrome, Mozilla, explorer, o lo que uses.

No es lo mismo visualizar la edición en tu PC que en un dispositivo de lectura, pero así puedes ir comprobando que todo va según lo esperado antes de probar más a fondo para pulir detalles.

Guardar los archivos

Y ahora que ya tienes tu ebook editado, solo tienes que guardar el documento con el nombre index.html en una misma carpeta junto a la carpeta de imágenes (llamada img) y la portada:

Archivos necesarios para crear la versión mobi

Después, ya puedes abrir Calibre, o el programa que uses para exportar a mobi y epub. (Si quieres hacerlo con Calibre, puedes seguir este tutorial.)

Recuerda que si incluyes especificaciones de estilo CSS en tu documento, debes testear siempre en todos los dispositivos que puedas. Si no puedes hacerlo físicamente, usa este programa de Amazon que permite visualizar el ebook en diferentes dispositivos.


Este es el método que uso yo para editar mis ebooks. Si usas otros métodos o tienes dudas, ¡deja un comentario!