Anàlisi de la web referendum.cat
Els temps moguts que vivim a Catalunya mereixen part de la nostra atenció i l’ús de les capacitats de cadascú. En aquest cas aprofitarem el meu petit background en desenvolupament web per fer un anàlisi de la web referendum.cat.
Comencem.
Aquí la web:
És una web que segueix una línia de disseny clara i fina, que està en consonància amb la tendència general de reduir soroll i donar tota la importància al contingut. Per saber-ne més us recomano llegir 10 great uses of whitespace in web design.
Em sorprèn una mica que la gent que organitza el referèndum no hagi especificat un títol més explícit a la web. En ple 2017 tothom sap que no s’ha d’escriure EN MAJÚSCULES PERQUÈ SEMBLA QUE CRIDIS.
I a nivell de rendiment? Som desenvolupadors web, ens fixem en aquestes coses. I el post era tècnic, què us penseu?:
Agraeixo des d’aquí a la Generalitat i a Carles Puigdemont especialment que hagin apostat per optimitzar els recursos que utilitza la web del referèndum. Sabent que és una web que es consultarà des de mòbil, han aconseguit reduir el seu pes a 2.7KB, una bona xifra, i un temps de càrrega de 24ms, més ràpid que una patrulla de guàrdia civil perseguint una senyora gran amb paperetes. Realment s’agraeix l’esforç per estalviar-nos MB del nostre mòbil.
Recomano als programadors eliminar el favicon per estalviar 1.3KB més (el 50%!) i total, tampoc es veu...
Un bon desenvolupador web sempre inspecciona el codi font d’una web que li ha captat l’atenció, i jo sóc un bon desenvolupador web. I aquesta web m’ha captat l’atenció. Amb l’objectiu d’aprendre alguns detalls que pugui incorporar en futurs projectes, vegem, doncs, el codi font:
El codi font segueix la mateixa línia: ordenat, clar, concís. Pel meu gust hi ha poc jQuery, però ningú és perfecte.
Observem que la web conté un títol (PHISHING_TSOL_MENSAJE_1), que han escrit en anglès i castellà en un intent de internacionalitzar El Procés™.
En el cos de la web veiem un tag <CENTER> escrit en majúscules, cridant una altra vegada. Tot seguit un element <h1> buit amb un parell d’atributs. No patiu perquè ara està buit però ja veureu que aquesta gent de la Generalitat ho tenen tot pensat i el faran servir més endavant.
Aleshores comença el mambo (heh): un codi Javascript complex. Entenc que calgui tenir un nivell alt de Javascript per entendre què està fent aquí Carles Puigdemont, sobretot perquè… bueno, perquè el codi peta perquè s’han deixat el switch(name) { i per tant se’n va tot a la merda. Però igualment és un codi complex que requereix cert anàlisi.
Obviant aquest detall veiem que Carles Puigdemont ha configurat diversos casos que faran dues coses: escriure un text (línia 37) al tag <h1> que hem descobert abans (veieu com ho tenen tot pensat?) i redirigir-nos a una pàgina o una altra en funció de en quin cas ens trobem (podem estar fent servir una web de joc online il·legal, podem estar fent algo Judicial_Guardia_Civil, etcètera).
No m’acaba de quedar clar per què escrivim el text en el tag <h1> si després redirigim la pàgina. És pel jQuery?
Quan estava escrivint aquest post he tancat sense voler la finestra del referendum.cat. Al tornar obrir m’he trobat amb això:
Pam! Integració contínua, entrega contínua, lean, kanban, pam! Cada vegada que entres a la web del referendum surt una cosa diferent. La Generalitat no para.
Ara que la web té una imatge ja no carregarà tan ràpid, imagino. Mirem-ho:
SUUUUUU! Ara Carles Puigdemont ja ha carregat jQuery a la web :) A més ha aprofitat per fer servir bons frameworks web que trobem actualment, com per exemple Bootstrap o Fontawesome.
Fontawesome ens va molt bé per pintar la imatge del logo de la guardia civil.
Potser una mica exagerat 250kb per centrar una imatge que en pesa 80, però és que sóc una mica primmirat amb aquestes coses. Si Carles Puigdemont diu que cal Bootrstap i Fontawesome i pageload-spinner.gif i jQuery i touchSwipe per centrar una fotografia a una web, és perquè calen.
Analitzem ara el codi font:
Veiem un bon ús de Bootstrap. A més, s’intueix l’ús d’un “carousel”, o sigui d’un slider, que hauria utilitzat Carles Puigdemont per pintar la imatge de la guardia civil. Presumptament.
A veure si funciona?
Genial!! M’encanta la previsió que té Carles Puigdemont (amb el suport de Venezuela, Cuba del Nord i Ada Colau) per afegir funcionalitats noves a la web del referèndum. La veritat és que els està quedant xul·la.
Fins aquí l’anàlisi tècnic de la web del referendum.cat. Esperem que aguanti sense que la guardiasivil la intervingui.
