Ens complau presentar i rellançar de nou la web de Jazz Terrassa. Fa 10 anys communia ja es va ocupar de crear la web de https://jazzterrassa.org i passat aquest temps calia fer una actualització al nivell de l'activitat de l'entitat.
Expliquem a continuació com hem cuinat la web.
Introducció
Projecte web desenvolupat sobre l'arquitectura del CMS Drupal, en la seva última versió amb un tema personalitzat basat en Radix. Un tema de Drupal amb una arquitectura MVC basada en components de Symfony. Un desenvolupament complex que incorpora diverses funcionalitats, a destacar, un sistema de comerç i tiqueting per la venda d'entrades, sistema de butlletins i un arxiu documental amb més de seixanta anys d'antiguitat.
Pensar una web com la de jazzterrassa.org sense la potència del programari lliure seria com pensar el jazz sense la potència dels estandards. Aquella terra comú que permet crear originalitat, adaptació i nous escenaris i llenguatges.
Per nosaltres Drupal és la base sobre la qual, a espatlles de gegants, hem pogut oferir una web de primer nivell a l'entitat Jazz Terrassa. Drupal és el nostre estàndard de jazz. I com a reconeixement d'aquells que han fet créixer aquest comunal de codi, en retornarem de nou creat perquè algú altre com nosaltres pugui fer-lo servir. Potser un altre petit club de jazz a Melbourne, a Tokyo o Johannesburg.
A Communia creiem que el coneixement ha de ser lliure, obert, horitzontal i accessible a totes les persones... solucions que facilitin les activitats en xarxa de les diferents comunitats d’investigació i recerca en les pràctiques P2P, amb tecnologies lliures que vinculen les eines amb la construcció de processos de cooperació social.
D'acord amb això treballem en plataformes de software lliure basades en estàndards, els projectes que implementem ofereixen una gran capacitat escalar: Com en una construcció de LEGO, pots afegir funcionalitats i aplicacions en forma de mòduls i connectors, sense perjudici de la feina feta fins al moment.
Per dur a terme les diverses fases del projecte, hem hagut de crear diversos mòduls propis per desenvolupar les funcionalitats requerides per la web. Que anirem alliberant a mesura que tinguin suficient qualitat per ser usada de manera genèrica.
Context del Projecte
Antecedents i objectius del projecte
A finals de l'any 2013 s'encarrega a Communia realitzar la migració de l'antiga web de Jazz Terrassa a un sistema Drupal 7. A la primera versió de la nova web bàsicament hi ha tot l'arxiu històric i un nou aspecte adaptatiu entre moltes altres qüestions més menors. Més endavant, s'implementen noves funcionalitats importants com la venda d'entrades amb un sistema propi i el sistema de gestió de butlletins, entre altres millores menors. A causa del pròxim tancament del cicle de vida de Drupal 7, es va plantejar una actualització del projecte web mantenint tot el contingut històric afegit.
Després de deu anys s'ha fet una migració general del projecte mantenint tot el contingut de la web actual. El procés es va plantejar en diverses migracions incrementals de contingut i algunes configuracions actuals (nodes, usuaris, taxonomies… i algunes configuracions) a una nova web en Drupal 9, que posteriorment va passar a Drupal 10, amb un tema gràfic reescrit de nou.
Enumeració dels objectius tècnics del projecte:
- Disseny Responsiu: Assegurar que el lloc web sigui accessible i funcioni de manera òptima en una varietat de dispositius i mides de pantalla.
- Optimització del Rendiment: Aconseguir temps de càrrega ràpids i un rendiment eficient del lloc web per millorar l'experiència de l'usuari.
- Seguretat del Lloc: Implementar mesures de seguretat robustes per protegir-se contra possibles amenaces i vulnerabilitats.
- Compatibilitat amb Navegadors: Assegurar que el lloc funcioni correctament en diferents navegadors web, com Chrome, Firefox, Safari i Edge.
- Gestió de Continguts Eficient: Desenvolupar un sistema de gestió de continguts (CMS) efectiu per facilitar l'actualització i administració del contingut del lloc.
- Integració de Funcionalitats Específiques: Implementar característiques específiques segons els requisits del client, com formularis interactius, funcionalitats de comerç electrònic, etc.
- Optimització SEO: Incorporar bones pràctiques de SEO per millorar la visibilitat del lloc web als motors de cerca.
- Compliment d'Estandards Web: Assegurar que el lloc web compleix amb els estàndards i directrius web actuals per a l'accessibilitat i la usabilitat.
- Escalabilitat: Dissenyar l'arquitectura del sistema de manera que pugui créixer i adaptar-se fàcilment a mesura que s'afegeixen més usuaris o funcionalitats.
- Documentació del Codi: Crear documentació tècnica exhaustiva per facilitar la comprensió i el manteniment del codi font.
- Proves Rigoroses: Realitzar proves exhaustives per garantir l'estabilitat i el correcte funcionament del lloc web en diverses situacions.
Importància programari lliure
Drupal té llicències GPL, pel qual podem utilitzar, estudiar, compartir i modificar el codi segons ens convingui, el fa ideal per poder-lo adaptar a les necessitats de l'entitat. Com hem dit abans no volem sols extreure el codi, intentem en la mesura que el codi tingui qualitat donar un retorn a drupal.org i oferir-ne millores i solucions d'incidències que ens anem trobant.
Fases del projecte
Per dur a terme les diverses fases del projecte, hem hagut de crear diversos mòduls propis per desenvolupar les funcionalitats requerides per la web. Aquí un llistat dels mòduls desenvolupats per Communia i les seves contribucions cap a la comunitat de Drupal.
- Aplicació de control d'entrades (Barcode checkr)
- Disseny de les entrades (commerce_ticketing)
- Restricció d'entrades per soci (commerce_role_product_variation)
- Subpàgines que mostren un contingut concret / vistes amb llistats de continguts (validate_tabs)
- Migració field collections
- Comptador Arxiu Històric
Desplegament i construcció del site
Desplegament i construcció del site totalment optimitzat per un entorn de Drupal, que ens assegura una optimització de rendiment i seguretat en el nostre lloc web.
Migració de continguts
Migració de continguts, usuaris, fitxers, categories... Funcionalitat flexible i sistematitzada per tal que el salt d'un sistema a un altre sigui viable i no perdre continguts existents.
Fase de desenvolupament
Disseny i implementació del nou tema basat en Drupal radix, incorporant un disseny responsiu i que respecti els estàndards web.
Fase de proves i desplegament
Fase de proves per assegurar-nos del correcte funcionament i detectar possibles errors abans del seu desplegament. Aquesta fase inclou proves de funcionalitat, rendiment, seguretat i usabilitat. El funcionament es basa a executar escenaris de proves realistes per identificar i corregir possibles errors, d'aquesta manera garantim un producte final fiable i de qualitat. Una vegada conclou aquesta fase amb resultats positius, es desplega la web en els servidors interns de communia.
Fase de manteniment
Finalment, quan el projecte ha sigut desplegat correctament i es troba online passa a una fase interna de motorització i manteniment de web, on el nostre equip gestiona l'status report del site i s'encarrega de mantenir-lo actualitzat a la última versió funcional.
Visió General del Sistema
Arquitectura General
La arquitectura general d'un projecte Drupal es basa en un enfocament modular i escalable. Es composa d'un nucli, uns mòduls, i uns temes que conformen l'aparença.
Aquesta arquitectura modular i flexible fa que Drupal sigui adequat per a una àmplia varietat de projectes, des de llocs web senzills fins a aplicacions web complexes i personalitzades.
Tecnologies Utilitzades
Les tecnologies utilitzades en un projecte web Drupal abasten tant les relacionades amb el nucli del CMS com aquelles que s'empleen per personalitzar i estendre les seves funcionalitats. A continuació, es descriuen les tecnologies clau:
- PHP (Hypertext Preprocessor):
- Drupal està construït principalment en PHP, un llenguatge de programació del costat del servidor.
- PHP s'utilitza per processar el codi al servidor i generar l'HTML que s'envia al navegador de l'usuari.
- MySQL o PostgreSQL (Sistemes de Gestió de Bases de Dades):
- Drupal emmagatzema el seu contingut i configuració en una base de dades. Pot ser compatible tant amb MySQL com amb PostgreSQL, permetent la flexibilitat en la elecció del sistema de gestió de bases de dades.
- Symfony (Framework PHP):
- Symfony és un framework PHP que proporciona components reutilitzables per al desenvolupament web.
- Drupal 8 i versions posteriors incorporen components de Symfony per millorar l'estructura del codi i la modularitat.
- Twig (Motor de Plantilles):
- Twig és el motor de plantilles utilitzat per Drupal per definir l'estructura de l'HTML en els temes.
- Proporciona una sintaxi clara i llegible per facilitar la creació de plantilles.
- JavaScript (per a la Interactivitat del Client):
- Drupal utilitza JavaScript per millorar la interactivitat del costat del client a les interfícies d'usuari.
- Es poden utilitzar biblioteques i frameworks com jQuery per simplificar el desenvolupament.
- CSS (Fulls d'Estil en Cascada):
- S'utilitzen fulls d'estil CSS per definir el disseny i la presentació visual de les pàgines web.
- Drupal permet la integració de sistemes de disseny responsiu utilitzant tècniques CSS.
- HTML5 (Llenguatge de Marcatge):
- Drupal genera HTML5, l'última versió del llenguatge de marcatge, per garantir la compatibilitat amb els estàndards web moderns.
- Composer (Gestor de Dependències de PHP):
- Composer s'emplea per gestionar les dependències i llibreries de tercers utilitzades en un projecte Drupal.
- Facilita la instal·lació i actualització de paquets i llibreries.
- Git (Control de Versions):
- Git s'utilitza per al control de versions del codi font de Drupal i les seves personalitzacions.
- Permet el seguiment de canvis, la col·laboració entre desenvolupadors i la gestió de branques.
- Drush (Interfície de Línia de Comandes):
- Drush és una interfície de línia de comandes que simplifica tasques administratives i de desenvolupament a Drupal.
- Facilita l'execució de comandes per a la gestió de mòduls, temes, actualitzacions, entre altres.
- Servidors Web (Apache, Nginx):
- Drupal pot ser desplegat en servidors web com Apache o Nginx per gestionar les sol·licituds HTTP.
- Sistema de Gestió de Configuració:
- Drupal 8 i versions posteriors inclouen un sistema de gestió de configuració que permet exportar i importar configuracions del lloc, facilitant el seu desplegament i manteniment.
Aquestes tecnologies treballen conjuntament per oferir un entorn de desenvolupament robust i flexible en projectes basats en Drupal.
Aqui un exemple de funcionalitats creades amb aquestes eines:
Subtema creat a partir de Radix
Un tema dissenyat amb fortes conviccions estilístiques i tècniques. El seu enfocament distintiu s'enfoca a proporcionar una estructura sòlida i modular, posant èmfasi en la simplicitat i el rendiment. Basat en l'experiència acumulada al llarg dels anys, Radix serveix com a punt de partida sòlid per al desenvolupament de temes personalitzats a Drupal. La seva arquitectura ben organitzada i la seva flexibilitat han portat a la creació de nombrosos temes i projectes derivats al llarg del temps. En adoptar Radix com a base del projecte personalitzat, es busca aprofitar aquests avantatges, incorporant les millors pràctiques establertes en el desenvolupament de temes dins de l'ecosistema de Drupal.
Com altres tecnologies a destacar en la creació del tema són: HTML, CSS, SASS i JS.
Disseny de les entrades
Les entrades es realitzen amb el mòdul https://www.drupal.org/project/commerce_ticketing , el qual fa servir https://www.drupal.org/project/entity_print per fer els pdfs.
Aplicació de control d'entrades
Barcode checkr: https://gitlab.com/communia/barcode-checkr , una aplicació html en vue feta per communia.org, serà la que podrà controlar si una entrada és vàlida o no.
El funcionament està explicat a https://gitlab.com/communia/barcode-checkr .
Plan ref: https://gitlab.com/communia/barcode-checkr/-/releases
Restricció d'entrades per soci
Amb el mòdul commerce_role_product_variation Es restringeix la disponibilitat de productes a determinats usuaris.
Subpàgines que mostren un contingut concret:
Mitjançant mòduls propis podem fer "subsites" com les de cada festival de jazz.
Funcionalitats i caracteristiques implementades
Migració de continguts D7 -> D10
Importació de continguts, usuaris, fitxers, categories... amb els seus camps i rutes, així com les relacions entre ells, a entitats de Drupal segons s'hagi acordat en un estudi previ. Sobre els continguts cal tenir en compte la relació entre instrument, artista, banda, concert i esdeveniment, així com la relació d’aquests continguts amb tota la resta de continguts i altres entitats relacionades (àmbits, espais, multimèdia, taxonomies, entrades...).
És un dels processos més entretingut i laboriós on s’han de definir els mapejos, escollir que s'importa, especificar els camins per dur-ho a terme i definir estratègies per les importacions incrementals. Es realitzarà una primera gran migració i posteriorment algunes migracions incrementals, fins a l'última migració incremental abans de realitzar el canvi.
Drupal tema
Estendre la imatge corporativa a tot el lloc web. Disseny responsiu i que respecti els estàndards web. El nou tema es farà a partir del desplegament d’un subtema basat en Drupal Radix (que utilitza Bootstrap 5), el qual està orientat a components de plantilles + scss + js.
El tema s’ha de re-escriure de nou, per tant, si no s’incorpora una nova proposta de disseny gràfic, es desplegarà el disseny actual, tenint en compte que algunes qüestions es poden resoldre de forma similar, però amb marge de millora i/o modificació.
Sistema de traduccions
Instal·lació i configuració del motor de traduccions. Implementació d’un sistema de traduccions que permeti gestionar i traduir els continguts del web així com definir la navegació de les usuàries per aquests.
Drupal Commerce
Disseny i implementació de les funcionalitats bàsiques d'una tenda online amb Drupal Commerce. Inclou passarel·la de pagament amb stripe, control de stock, gestor de productes i variacions de productes, categories de productes, cistell de compra, sistema d'usuaris simplificat amb perfils de localització (dades de facturació i enviament, gestió de comandes, gestió de taxes... funcionalitats bàsiques d'una tenda.
Inclou el sistema d’entrades per diferents tipologies de socis/es, tiquets en pdf i integració amb el sistema de control d’entrades a la taquilla física. També permetrà la venta de merchandising.
Sistema de Newsletters
Sistema de subscripció, enviament i plantilles per butlletins, integrat amb el contingut de Drupal.
Aquest sistema serà plantejat una mica diferent al actual. Es maquetaran els butlletins amb Drupal Layout Builder i s'emmagatzemarà de forma estàtica per tenir major control sobre el contingut auto-construït i enviat. El sistema seguirà basat en Drupal SimpleNews.
Cerca avançada
Sistema de cerca mitjançant facets i productes relacionats. Fa referència a la gestió del arxiu històric.
Notícies i blog
Un espai d’actualitat on mostrar continguts de tipus notícies amb suport audiovisual (fotos, vídeos, finestres externes...) classificat per seccions. Disponibilitat d’eines per destacar o modificar l’ordre, així com l’aspecte en resums i targetes en portades de seccions. Tot això sobre una interfície d’administració per poder gestionar continguts publicats, amb la capacitat d’afegir, editar o eliminar continguts. També poder establir fluxos de treball adaptats per realitzar tasques de redacció, moderació i publicació.
Layout Builder
Mitjançant sistemes de Drupal paragraph i/o Drupal Layout Builder, o Drupal Panells, habilitar usuàries avançades personalitzar composicions d'alguns apartats del web.
Layout Builder serà implementat per els sistema de butlletins i s’utilitzarà també per maquetar portada, pàgines bàsiques i àmbits.
Proporcionarà major llibertat de maquetació als usuaris amb rols de permisos del tipus «content managers» i possibilitat de fer pagines intermedies més treballades de forma autònoma.
Arxiu Documental
Gestió de col·leccions amable, actualitzable, i extremadament potent. Opcions flexibles ja sigui per vídeos, àudios, documents, esdeveniments, fotografies…
Pack de SEO
SEO i web semàntica, web crawler, API's tercers. Assegurar que el contingut de la web compartit a les xarxes socials que més s'utilitzen, agregadors de contingut i indexadors de contingut més populars accedeixin i ofereixen de la millor manera possible el contingut o el resum que en mostren implementant les recomanacions i directius d'algunes API's d'aquests llocs.
Bàsicament assegurarem un bona implementació d’OpenGraph, Schema.org, Twitter Cards, així com bones pràctiques en quan a coherència en l’arbre DOM, urls netes i canonicals, semàntica en les urls, sitemaps...
Gestió multimèdia
Un gestor dedicat per l’organització, la cerca i per poder compartir fitxers multimèdia utilitzant com a font diferents proveïdors.
Sistema de formularis
Sistema de formularis de contacte, subscripció i creació dels continguts a través de formularis editables per l’administrador.
Integració de Xarxes socials
Integració xarxes socials.
Atribució i llicència
Sistema d'autoria / llicencies pels continguts de tipus media. Permet implementar autoria/llicencies en els mitjans multimèdia.
Desenvolupament i Codificació
Metodologia de Desenvolupament
La nostra metodologia de desenvolupaments emprada durant els desenvolupaments és un mix entre les dues de les més conegudes com a SCRUM i Kanban encara que no sigui estrictament una metodologia àgil, ens serveix per donar un enfocament visual per gestionar les fases i tasques del projecte.
La combinació de les dues metodologies ens permet desenvolupar projectes de diferents escales de manera efectiva, segmentant les fases del projecte per tenir una combinació equilibrada entre estructura i flexibilitat en el desenvolupament. La nostra tècnica fusiona els elements clau de les dues metodologies incorporant un enfocament àgil, estructurant les fases del projecte amb iteracions fixes de SCRUM, amb la flexibilitat visual i continua del metode Kanban. Fent servir rols i esdeveniments de SCRUM, però amb una duració dels sprints més flexible amb la possibilitat de treballar de manera contínua.
Codi Font
Drupal utilitza una estructura de carpetes específica per organitzar els arxius i recursos del projecte.
El tema empleat és Radix, basat en plantilles de Twig per definir l'estructura de l'HTML del tema. La personalització dels elements webs està definit de manera que cada element és un component associat a la seva plantilla, on tots aquests components van acompanyats dels seus fitxers CSS i JS per funcionalitats addicionals.
Treballar amb un sistema estructurat de carpetes, plantilles i components de Twig a Drupal ofereix organització, separació de responsabilitats i facilitat de manteniment. Permet la reutilització eficient de codi, facilita la personalització del tema i fomenta la col·laboració entre desenvolupadors i dissenyadors. La sintaxi clara de Twig i l'organització modular contribueixen al compliment d'estàndards i bones pràctiques en el desenvolupament web.
Control de Versions
El codi del projecte està gestionat amb l'eina de control Gitlab, un sistema essencial pel control de versions, proporcionant un historial detallat de canvis i facilitant la col·laboració. Permet la ramificació i fusió eficient, etiquetar versions, treballar en paral·lel i gestionar conflictes. Amb repositoris remots, facilita la col·laboració a equips distribuïts. És personalitzable i compatible amb la integració contínua. La flexibilitat de Git permet un control precís del codi, gestió de canvis experimentals i revertir ajustos, contribuint a un desenvolupament de programari eficient i eficaç.