El "making of" del nou web de Softcatalà (part 1), per Xavi Ivars
## Un web nou, per què?

![Web responsiu](https://www.softcatala.org/uploads/2017/01/web-responsiu-300x204.png)Després de set anys i mig amb l'anterior web, el passat mes d'abril Softcatalà vam presentar el web nou. Repensar completament el web no era la primera idea que ens va vindre al cap: en un principi, necessitàvem actualitzar les versions dels gestors de continguts (Drupal i Mediawiki) i, ja de passada, volíem fer-li una llavada de cara a la imatge. Però ben prompte vam veure que no anava a ser tan fàcil. L'any 2008, [l'última vegada que havíem renovat el nostre lloc](https://www.softcatala.org/noticies/softcatala-presenta-nou-lloc-web/), sembla el segle passat a escala tecnològica. Aleshores, pràcticament no existien els telèfons intel·ligents (el primer telèfon amb Android no tenia ni un mes de vida!!!). Twitter només feia dos anys que existia. De tauletes ni parlar-ne. I dissenys responsius... què era això? D'altra banda, coses com les botigues d'aplicacions encara ni existien. De fet, ningú no parlava d'aplicacions: encara els anomenàvem programes. La gent acudia als cercadors en primer lloc, i després a llocs com el nostre [Rebost](https://www.softcatala.org/programes/), o webs com Softonic o Download.com, per a trobar els programes que necessitaven. La gent es connectava a internet a la feina o a casa, des d'un ordinador d'escriptori, i el programari lliure, des de sistemes operatius basats en Linux o navegadors com el Firefox, eren el futur. Si la primera versió del Google Chrome és també de setembre d'aquell mateix 2008! Tots els membres de Softcatalà vam veure evident que ens calia repensar el web des de zero: aprofitar tot allò bo que havíem fet durant els anys (que era molt!), però donar-li un enfocament adaptat als temps en què estem. 

## Pluja d'idees i definició d'objectius

Per tot això, un dissabte de novembre del 2014 ens vam reunir a Barcelona per parlar del web nou. Des de les 10 del matí fins a les 6 de la vesprada, el Pau Iranzo, el Toni Hermoso, l'Anna Barberà, el Jordi Mas, el Vicent Cubells i jo mateix vam estar discutint al voltant de com imaginàvem el web nou. Per començar, vam constatar que molta gent no sabia què era Softcatalà: molta gent pensa que es tracta d'una empresa o institució pública, o fortament subvencionada, amb molts treballadors al darrere. I és tot el contrari! Som un (petit) grup de voluntaris que dediquem el nostre temps lliure a millorar la presència del català a les noves tecnologies. I ens calen mans! Però si la gent no sabia què som i que ens cal ajuda, probablement també era per culpa nostra: mai no ho havíem explicat bé. I per això, a més de deixar ben clar què és Softcatalà, volíem que posar èmfasi a aconseguir participació de la gent: atreure col·laboradors és necessari per a assegurar la viabilitat de qualsevol associació. I també havia de quedar clar que no cal ser informàtic ni filòleg per a col·laborar amb Softcatalà. Qualsevol persona amb ganes de fer feina és benvinguda: hi ha infinitat de tasques per a fer, per a tots els gustos. Finalment, també teníem clar que no podíem deixar de fer el que havíem fet fins ara: posar recursos a l'abast dels usuaris que visiten el web. Eines lingüístiques, com el traductor, el corrector o el diccionari de sinònims, eren les pàgines més visitades. També oferim un seguit de recursos per a traductors al català, com glossaris, guia d'estil o memòries de traducció. I finalment, diferents recursos per a ajudar a tothom a viure en català als seus ordinadors i mòbils: des d'un directori de programes en català, fins a tutorials o el Catalanitzador. I totes eixes coses havien de quedar clares a primera vista per a qualsevol que entrés al web. Sembla fàcil, no? 

## Primers passos i disseny

![Prototip de la portada](https://www.softcatala.org/uploads/2017/01/wireframe-home-207x300.png)Una vegada teníem clar què volíem, tocava estructurar-ho. L'[Anna Barberà](http://www.annabarbera.cat/ca/) va ser l'encarregada de definir l'arbre de continguts (estructura de les pàgines), el pla de continguts (què conté cadascuna de les pàgines), el disseny de la navegació, el prototip de les plantilles i finalment el disseny gràfic. L'Anna ens va presentar una primera versió de l'arbre de continguts durant [la trobada anual del 2014](https://www.softcatala.org/wiki/Trobades_de_pencaires/Trobada_anual_2014). Una vegada validat, tant l'Anna com el [Toni](https://www.cau.cat) i jo mateix vam començar a treballar sobre el pla de continguts: calia definir què contindria cada pàgina del web nou: quina informació, en quin format, etc. Es tractava d'una feina pesada, però això ens ajudaria molt a tindre clar en les següents etapes què calia implementar per a cada cas. El següent pas, una vegada havíem definit la navegació, va arribar amb el prototip de les plantilles. Per primera vegada, després de mesos de treball, començàvem a "veure" el web. I el dia que l'Anna va enviar a la llista de correu interna la proposta de disseny de la nova portada, tots ens vam enamorar de la nova imatge. Uns pocs retocs, i ja teníem el disseny gràfic de la que seria la nova pàgina d'inici! 

## Maquetació en HTML

![HTML5 - JS5 - CSS3 - LESS](https://www.softcatala.org/uploads/2017/01/css-logo.png)Teníem clar que volíem un web responsiu, que s'adaptara a distints dispositius (mòbils, tauletes, ...) de manera fluida. I així ho havia plantejat l'Anna en el disseny. Però ara ens calia convertir totes les plantilles a HTML5. Teníem certs requisits tècnics, com per exemple que utilitzara [Bootstrap](http://getbootstrap.com/) i [LESS](http://lesscss.org/) com a base del disseny, però no disposàvem de temps ni d'experiència suficient per a fer tota la plantilla des de zero. Després d'una primera reunió amb el Lluís, vam tindre clar que necessitàvem als amics d'[Ideamàtic](http://www.ideamatic.net/ca/) perquè ens ajudaren amb el desenvolupament d'aquesta part. L'Eduard Giménez i l'Elena Munté van implementar tot l'HTML que donaria vida al nou lloc web. En aquesta fase, tant l'Anna com el Pau Iranzo, i jo mateix, vam estar provant coses com que les plantilles s'ajustaren al disseny de l'Anna o que les diferents pàgines s'adaptaren bé per a dispositius mòbils. Entre l'agost i el setembre de 2015, vam anar rebent i revisant totes les plantilles, i per això començava a arribar l'hora de continuar el desenvolupament!
