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

Recarga las páginas web automáticamente cuando las modificas

A la hora de desarrollar páginas web, muchas veces necesitamos probar los cambios que hemos realizado. Para ello tenemos que abrir la página web con el navegador y recargarla si ya estaba abierta. Pero esto es algo molesto si lo tenemos que hacer muchas veces.

Continúa leyendo Recarga las páginas web automáticamente cuando las modificas

Divide la pantalla del navegador con Tile Tabs

Cuando necesitamos comparar dos páginas web o tenerlas a simple vista, resulta incómodo cambiar de pestaña en el navegador. En este video os presento Tile Tabs, un complemento para Firefox y navegadores derivados de Firefox que nos permite ver varias páginas web al mismo tiempo.

Esta extensión solo es compatible con versiones de Firefox (y derivados de Firefox) inferiores a la 57. Para versiones posteriores existe una extensión realizada por la misma desarrolladora que no funciona igual, ya que la API de WebExtensions tiene más limitaciones.

Continúa leyendo Divide la pantalla del navegador con Tile Tabs

¿Por qué algunas URLs acaban con una barra?

Probablemente, te habrás cruzado con URLs que acaben en una barra (como https://freakspot.net/ o /, directorio raíz del servidor) y con otras que no (como esta: https://www.gnu.org/gnu/gnu.html). ¿Cuál es la diferencia? ¿Es importante?

Una URL es básicamente una dirección a un recurso. Las URLs no hacen referencia únicamente a páginas web, sino también a otros tipos de recursos. Algunos ejemplos de esquemas URL son http, https, ftp, telnet, data y mailto. En este artículo me estoy refiriendo a páginas web que usan el esquema http o el https.

Las direcciones URL que acaban en una barra se refieren a un directorio; las que no, hacen referencia a un archivo. Cuando clicas el enlace https://freakspot.net, el servidor se da cuenta de que la dirección requerida no es un archivo y se dirige a https://freakspot.net/. Allí encuentra un archivo principal llamado index.html o index con otra extensión y muestra su contenido.

Consecuentemente, la carga de una página es más rápida cuando utilizamos enlaces a páginas principales acabados en barras (por ejemplo, /) o cuando enlazamos al nombre del archivo (por ejemplo, http://www.ejemplo.com/index.html).