Els llocs web estàtics* han tornat!

* El terme ‘estàtic’ confon a molta gent, ja que a primera vista és igual de dinàmic que qualsevol web actual, en el sentit que pot incloure botons animats, imatges amb rollover, sliders amb imatges que passen automàticament, widgets de xarxes socials, etc. Vegeu alguns exemples que citem al requadre taronja.

(Adaptació de la «Guia per al desenvolupament i manteniment web ètic» d’Edri)

Sabeu que un lloc web estàtic no té per què ser estàtic en un sentit estricte? Se li diu ‘dinàmic’ a un web que fa consultes a una base de dades, i se li diu ‘estàtic’ a un web que no les fa i que no obliga el servidor a carregar-lo de nou cada cop que algú el visita... Però ambdues es veuen igual. Si no necessiteu una base de dades (p.ex., si no teniu tenda online que hagueu de coordinar amb el vostre inventari), és probable que els estàndards web actuals, com ara HTML5, us permetin crear un lloc web d’última generació mitjançant recursos estàtics (HTML, CSS i potser JavaScript i fitxers de tipus de lletra). 

A Pangea.org hem fet un petit exercici de com passar un web "dinàmic" (o sigui que té derrere el PHP i una base de dades) a ser estàtic (fitxers html, css i js). Després de provar algunes eines, la que primer millor vàrem valorar va ser executar una ordre que realitza una còpia estàtica d'un lloc inicialment generat com dinàmic:

wget --recursive --page-requisites --adjust-extension --convert-links --domains pangea.org https://pangea.org

Si visiteu https://estatic.pangea.org/ veureu que gairebé no es nota la diferència amb el web original (al menys el dia que s'ha fet la còpia). Hi ha certes coses, com per exemple els formularis, que deixen de funcionar, però existeixen alternatives, com crear un formulari amb PHP o implementar algun basat en programari ja existent (per exemple Limesurvey -consulteu-nos si sou socis de Pangea.org-). 

Aquest és un recurs útil en el cas de que ja tingueu un web dinàmic fet però només en cas que no hi pugeu sovint nous continguts; també en cas de que vulgueu oblidar-vos del manteniment Wordpress; o en cas que us preocupi la seguretat i volgueu tenir el vostre web protegit. 

Ara bé, per poder tenir un web estàtic facil d’actualitzar cal començar de zero fent servir un programari especial. 

Programari d’edició de webs estàtiques 

Hi ha programari modern de creació de llocs web estàtics, CMS (Content Management System) com ara Jekyll (popularitzat per GitHub Pages), Hugo, Pelican, Sutty, Sketch o Publii (desenvolupat per la Free Software Foundation), que us permeten crear els vostres llocs web amb Markdown, blocs, WYSIWYG (What You See Is What You Get) o HTML bàsic i convertir-los en HTML complet i enllaçat. Si utilitzeu GitLab Pages, la conversió i implementació es poden automatitzar fàcilment. 

De les opcions que vam mirar, el generador de webs estàtiques que ens sembla d'ús més senzill és Publii. Us recomanem fer una ullada als temes que té disponibles: https://marketplace.getpublii.com/ 

De fet, hem vist que BarcelonaActiva va oferir un curs de com fer-lo servir: https://cibernarium.barcelonactiva.cat/ficha-actividad?activityId=1031636 

Sense entrar en el detall de com donar forma al web, el procediment per crear el vostre web amb Publii seria:

  1. instal·lar el programari en un ordinador des del que es desenvoluparà el web,
  2. instal·lar el tema que més ens agradi (igual que com ho fariem amb wordpress),
  3. dissenyar-lo: generar l’estructura, definir els elements gràfics, crear les plantilles...
  4. omplir-lo de continguts,
  5. un cop fetes les edicions, hem de generar la web estàtica (en el cas de Publii se li diu "sincronitzar el lloc web"),
  6. un cop generada, pugem els fitxers generats al servidor web, per exemple per FTP. I ja està!

D'aquesta manera la versió "editable" es queda en el nostre ordinador. Quan volem modificar els continguts, ho fem des d'allí, tornem a generar els fitxers i els pugem de nou al servidor.

Així ens estalviem que aquests fitxers es generin (invisiblement pels visitants) a cada visita al web, que és la manera com funcionen els webs dinàmics i per la que sovint causen un excés d’activitat a la xarxa. 

Els llocs web estàtics asseguren temps d’activitat inigualables perquè no necessiten connectar-se a una base de dades. Tot el que necessiten és un servidor web senzill per carregar els fitxers estàtics. En conseqüència, són menys afectats per errades de seguretat i són molt més ràpids. 

Si, malgrat tot, decidiu desenvolupar un web dinàmic, apliqueu la resta de consells que inclou aquesta guia en quant a plugins, php, bases de dades, etc.

EXEMPLES
- Webs estàtics que a més són generadors de webs estàtics:
https://sutty.nl/
https://www.sketch.com/
https://jekyllrb.com/showcase/
- Exemples de temes Publii:
https://demo.getpublii.com/themes/massively/
https://demo.getpublii.com/themes/artgallery/brown/
https://demo.getpublii.com/themes/cortado/