Components d'un lloc web. De WordPress a Jekyll 2

En el article anterior vaig començar a explicar les diferències entre tres tipus d'eines per a la creació d'un bloc i per què aquestes diferències em van fer decidir abandonar l'opció que utilitzava; WordPress, en favor d'un creador de llocs estàtics com Jekyll.

Perquè s'entenguin millor els avantatges i desavantatges de cada un necessitem definir alguns termes i il·lustrar-ho amb un exemple, un hipotètic bloc sobre jardineria.

Components d'un lloc web

Els tres ingredients fonamentals d'un lloc web són:

• HTML: Proporciona l'estructura bàsica de el lloc
• CSS: Maneja la representació de l'contingut.
• Javascript: Gestiona la interactivitat de diferents parts de el lloc.

HTML

HTML són les sigles de HyperText Markup Language: L'hi diu «Llenguatge de marcat» perquè utilitza etiquetes per identificar els diferents tipus de contingut i els propòsits que cada un d'ells té per a la web. Ja pots passar per expert mirant amb menyspreu als que diguin que és un llenguatge de programació.

Per exemple, l'actual especificació, HTML5 utilitza les següents etiquetes

• head per indicar que en aquest espai va informació tècnica sobre el document.
• body per emmarcar el contingut que es va a mostar de la pàgina.
• article per al contingut principal
• aside per contingut secundari
• footer per al contingut inferior de la pàgina.

En el nostre presumpte bloc de jardineria tindríem alguna cosa així.

Ho poso com a imatge perquè les polítiques de seguretat de Linux Adictos no deixen incloure codi HTML.

Si còpies aquest text en l'editor de textos i el guardes com index.html, debò el text Aquest és el meu blog de jardineria.

La primera línia de el codi li indica a el navegador que el que segueix s'ha d'interpretar com HTML, la segona línia indica que aquí comencen les etiquetes, i que l'idioma de el lloc és l'espanyol d'Argentina. Dins head s'indica el joc de caràcters i el títol de l'bloc.

A la secció body veiem que la frase està tancada en una altra etiqueta,

Això li indica a el navegador que ha de tractar-lo com un paràgraf.

A més de la codificació de caràcters, el paràmetre meta permet incorporar un altre tipus d'informació que, tot i que no es vegi al navegador, és útil per als cercadors.

Per exemple, el paràmetre meta name Autor content identifica l'autor d'una pàgina, mentre el paràmetre meta name description content resumeix el contingut de la pàgina per als cercadors.

Hi ha dos elements més que van dins de head, que són els enllaços als fulls d'estil i codi Javascript

CSS

Si recordes la nostra pàgina web d'exemple, només es mostrava la frase "Aquest és el meu blog de jardineria". Per descomptat que un lloc web ha de ser més atractiu per al que es necessita un full d'estil.

Els fulls d'estil són les que estableixen com es mostraran els diferents elements de la pàgina.

Per exemple, si volem que el nostre text es mostri amb fons negre i lletres grogues, vam crear un arxiu anomenat mi-estil-css.ss i escrivim aquestes línies

P {
color de fons: negre;
color: yellow;
}

Canviem el codi de la pàgina d'exemple a:

Recorda que perquè funcioni, tots dos arxius han d'estar en la mateixa carpeta.

Javascript

Encara que avui per avui, HTML5 i CSS poden donar-li força animació a un lloc. En cas de necessitar interactivitat més complexa hem de recórrer a Javascript.

Javascript és un llenguatge de programació que permet modificar el contingut d'un lloc web d'acord a el comportament de l'usuari.

En un lloc web que romandrà estàtic, pot ser que l'esforç de crear les pàgines des de zero es vegi compensant per l'escàs consum de recursos i la possibilitat de personalització. No obstant això, un bloc és un tipus especial de lloc web que requereix atenció constant. I la clau és la quantitat i varietat de l'contingut. Per aquest motiu tot el que pugui automatitzar ha automatitzar-se. És cert que la informació comuna a totes les pàgines pot copiar i enganxar. Però, creguin-me, es cometen errors i són difícils de trobar.

Fixeu-vos la quantitat de codi necessària per mostrar una sola línia i canviar-la de color. Un article mitjana d'un bloc té 300 paraules, un parell de subtítols i imatges. I cal intentar que tot això es vegi bé en diferents formats de pantalla.

En els propers articles veurem com gestionar aquesta complexitat amb WordPress, Jekyll i el framework Bootstrap