Componentes de un sitio web. De WordPress a Jekyll 2

En el artículo anterior comencé a explicar las diferencias entre tres tipos de herramientas para la creación de un blog y por qué esas diferencias me hicieron decidir abandonar la opción que utilizaba; WordPress, en favor de un creador de sitios estáticos como Jekyll.

Para que se entiendan mejor las ventajas y desventajas de cada uno necesitamos definir algunos términos e ilustrarlos con un ejemplo, un hipotético blog sobre jardinería.

Componentes de un sitio web

Los tres ingredientes fundamentales de un sitio web son:

• HTML: Proporciona la estructura básica del sitio
• CSS: Maneja la representación del contenido.
• Javascript: Gestiona la interactividad de diferentes partes del sitio.

HTML

HTML son las siglas de HyperText Markup Language: Se lo llama «Lenguaje de marcado» porque utiliza etiquetas para identificar los diferentes tipos de contenido y los propósitos que cada uno de ellos tiene para la web. Ya puedes pasar por experto mirando con desprecio a los que digan que es un lenguaje de programación.

Por ejemplo, la actual especificación, HTML5 utiliza las siguientes etiquetas

• head para indicar que en ese espacio va información técnica sobre el documento.
• body para enmarcar el contenido que se va a mostar de la página.
• article para el contenido principal
• aside para contenido secundario
• footer para el contenido inferior de la página.

En nuestro presunto blog de jardinería tendríamos algo así.

Lo pongo como imagen porque las políticas de seguridad de Linux Adictos no dejan incluir código HTML.

Si copias este texto en el editor de textos y lo guardas como index.html, veras el texto Este es mi blog de jardinería.

La primera línea del código le indica al navegador que lo que sigue lo tiene que interpretar como HTML, la segunda línea indica que aquí comienzan las etiquetas, y que el idioma del sitio es el español de Argentina. Dentro de head se indica el juego de caracteres y el título del blog.

En la sección body vemos que la frase está encerrada en otra etiqueta,

Esto le indica al navegador que tiene que tratarlo como un párrafo.

Además de la codificación de caracteres, el parámetro meta permite incorporar otro tipo de información que, aunque no se vea en el navegador, es útil para los buscadores.

Por ejemplo, el parámetro meta name author content identifica al autor de una página, mientras el parámetro meta name description content resume el contenido de la página para los buscadores.

Hay dos elementos más que van dentro de head, que son los enlaces a las hojas de estilo y código Javascript

CSS

Si recuerdas nuestra página web de ejemplo, solo se mostraba la frase “Este es mi blog de jardinería”. Por supuesto que un sitio web tiene que ser más atractivo para lo que se necesita una hoja de estilo.

Las hojas de estilo son las que establecen como se mostraran los distintos elementos de la página.

Por ejemplo, si queremos que nuestro texto se muestre con fondo negro y letras amarillas, creamos un archivo llamado mi-estilo-css.ss y escribimos estas líneas

p {
background-color: black;
color: yellow;
}

Cambiamos el código de la página de ejemplo a:

Recuerda que para que funcione, ambos archivos deben estar en la misma carpeta.

Javascript

Aunque hoy por hoy, HTML5 y CSS pueden darle bastante animación a un sitio. En caso de necesitar interactividad más compleja debemos recurrir a Javascript.

Javascript es un lenguaje de programación que permite modificar el contenido de un sitio web de acuerdo al comportamiento del usuario.

En un sitio web que permanecerá estático, puede que el esfuerzo de crear las páginas desde cero se vea compensando por el escaso consumo de recursos y la posibilidad de personalización. Sin embargo, un blog es un tipo especial de sitio web que requiere atención constante. Y la clave es la cantidad y variedad del contenido. De ahí que todo lo que pueda automatizarse debe automatizarse. Es cierto que la información común a todas las páginas puede copiarse y pegarse. Pero, créanme,  se cometen errores y son difíciles de encontrar.

Fíjense la cantidad de código necesaria para mostrar una sola línea y cambiarla de color. Un artículo promedio de un blog tiene 300 palabras, un par de subtítulos e imágenes. Y hay que tratar de que todo eso se vea bien en distintos formatos de pantalla.

En los próximos artículos veremos como manejar esa complejidad con WordPress, Jekyll y el framework Bootstrap