Libro sobre la historia de la cultura libre

He traducido al español el libro sobre cultura libre escrito en portugués A Cultura é Livre: Uma história da resistência antipropriedade (La cultura es libre: una historia de la resistencia antipropiedad). Pongo a vuestra disposición el libro traducido: podéis descargarlo o consultarlo en varios formatos.

Me gustaría que la traducción española también estuviera disponible como libro impreso, pero antes tengo que mejorar el formato del PDF. Genero el libro a partir de archivos Markdown con pandoc, podéis ver exactamente cómo en el código fuente del proyecto.

Escribir números grandes con espacios en la misma línea

Esto es un solo número y no debería cortarse para continuar en otra línea: 2 000 000 000 000 000. En muchos sitios estoy viendo los efectos de la recomendación de la RAE que hace que los números grandes se dividan en dos líneas distintas...

RAE, vuestra página no da buen ejemplo.

Se debe introducir un espacio duro para evitar problemas de formato como el anterior. Con una combinación de teclas podemos escribir ese carácter. Yo, en GNU/Linux, pulso la tecla Componer y luego dos veces espacio. El código de Unicode del espacio duro es 0xA0. En HTML también se puede introducir este carácter escribiendo   (de non-breaking space).

Que tú veas un número bien en tu ordenador al escribir un texto no quiere decir que alguien con una resolución menor vaya a ver lo mismo. Tenlo en cuenta.

Validar HTML de forma efectiva

El lenguaje HTML se adhiere al estándar WHATWG. Como es un lenguaje de marcado, un error en HTML no hace que la página web deje de funcionar, sino que el navegador la muestra lo mejor que puede.

Tener errores en HTML es problemático, ya que puede producir fallos inesperados y difíciles de reproducir, sobre todo cuando solo ocurren en un navegador. Así pues, es vital escribir un HTML válido.

Sin embargo, es muy fácil cometer errores y pasarlos por alto. Por eso es recomendable validar el código HTML; es decir, encontrar los fallos y corregirlos. Para eso existen los validadores, que, por lo general, simplemente muestran los errores. El más actualizado y recomendable es The Nu Html Checker. La W3C mantiene una instancia de ese validador que nos permite validar documentos HTML desde el navegador, ya sea introduciendo una URL, subiendo un archivo o introduciendo el código HTML en un formulario. Como este validador es libre, puedes instalarlo en tu ordenador fácilmente.

Validación en línea de la página web de GNU https://gnu.org/.

El validador en línea funciona bien si solo tienes que validar unas pocas páginas web de vez en cuando, pero no sirve para validar un sitio web entero. Para ello recomiendo usar la versión de The Nu Html Checker que se ejecuta en terminal. Esta se encuentra en el archivo vnu.jar (hace falta tener Java instalado).

En mi caso, yo utilizo el paquete html5validator, ya que trabajo principalmente con Python y no supone una dependencia adicional. Para instalar este paquete en una distribución de GNU/Linux basada en Debian solo hay que ejecutar...

sudo apt install default-jre
sudo pip3 install html5validator

Al terminar la instalación tenemos un programa llamado html5validator que podemos ejecutar desde la terminal:

html5validator index.html

Un argumento súper útil es --root, que permite validar todos los archivos de un directorio, y del directorio dentro del directorio..., así hasta que haya validado todo. Yo lo uso especificando el directorio raíz de mi sitio web, validando así el sitio web completo en unos segundos.

html5validator --root sitio-web/

Lo ideal es usar algún tipo de integración continua para no tener que ejecutar manualmente la anterior instrucción cada vez que cambias algo en la página web. Para ello yo uso GitLab CI. De este modo, mantengo este sitio web y muchos otros sin errores de HTML, y cuando rompo algo, me entero pronto.

Esta prueba de GitLab CI muestra que el sitio web se ha generado con éxito y sin errores de HTML.

Barra de navegación de Bootstrap sin JavaScript

Bootstrap se distribuye con un archivo JavaScript llamado bootstrap.js que requiere jQuery. Este archivo permite, entre otras cosas, hacer funcionar la barra de navegación cuando hay menús desplegables, y desplegar y ocultar los enlaces de navegación, que se encuentran ocultos en pantallas con baja resolución.

El problema es que Bootstrap no ofrece la misma funcionalidad básica sin JavaScript. Es decir, si no tienes JavaScript activado, no puedes acceder a los menús desplegables ni ocultar y mostrar el menú de navegación en dispositivos móviles o con baja resolución. Sin embargo, es posible ofrecer esta funcionalidad sin JavaScript. En este artículo os muestro cómo hacerlo.

Continúa leyendo Barra de navegación de Bootstrap sin JavaScript

Estructura de árbol con CSS y HTML

A veces viene bien poder representar datos en una estructura de árbol como la que produce el programa tree. El programa tree produce una salida de un árbol de directorios como esta:


✔ /var/www/html/Repos/Freak-Spot/freak-theme [master|✔] $ tree
.
├── static
│   ├── css
│   │   └── style.css
│   ├── genericons
│   │   ├── COPYING.txt
│   │   ├── genericons.css
│   │   ├── Genericons.eot
│   │   ├── Genericons.svg
│   │   ├── Genericons.ttf
│   │   ├── Genericons.woff
│   │   ├── LICENSE.txt
│   │   └── README.md
│   ├── images
│   │   ├── creativecommons_public-domain_80x15.png
│   │   ├── gnu-head-mini.png
│   │   └── questioncopyright-favicon.png
│   └── js
│       ├── functions.js
│       └── jquery-3.1.1.js
└── templates
    ├── archives.html
    ├── article.html
    ├── article_info.html
    ├── author.html
    ├── authors.html
    ├── base.html
    ├── category.html
    ├── index.html
    ├── page.html
    ├── pagination.html
    ├── period_archives.html
    ├── tag.html
    ├── taglist.html
    └── tags.html

6 directories, 28 files

Para representar la instrucción tal como aparece en una terminal he utilizado las etiquetas HTML <samp> y <pre> (<pre><samp>salida de tree</samp></pre>). ¿Pero que pasa si quiero incluir un enlace o utilizar otros elementos de HTML, o CSS? Entonces tendremos que usar CSS para mostrar la apariencia de ramas.

Continúa leyendo Estructura de árbol con CSS y HTML