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

Lektor: el gestor de páginas estáticas

Los generadores de páginas estáticas permiten crear sitios web sencillos sin depender de bases de datos y de un software complejo. Las ventajas de los generadores de páginas estáticas son abrumadoras en cuanto a sitios web sin mucho contenido interactivo, como blogs. Pero la mayoría les resultan difíciles de usar o administrar a personas que no tienen muchos conocimientos de informática.

Lektor pretende hacer más sencillo de usar un generador de páginas estáticas. Realmente Lektor no es un generador de páginas estáticas al uso, sino más bien un gestor de páginas estáticas. Permite administrar los sitios web de forma muy sencilla mediante una interfaz gráfica que recuerda a la de algunos sistemas de gestión de contenidos.

Continúa leyendo Lektor: el gestor de páginas estáticas

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