COPSOQ

Copsoq bibliotek

Postad den av jonk

Uppdraget var att bygga ett sök- och filtreringsbart bibliotek över vetenskapliga artiklar i vilka COPSOQ ingår. Lösningen blev en json-lösning där alla artiklar inte laddas med en gång eftersom det skulle bli väldigt tungt eftersom det handlar om en bra bit över 200 artiklar. Artiklarna laddas när besökaren scrollar sig ned för listan av artiklar och när nya sökkriterier eller filter matas in.

Alla artiklar läggs in i WordPress som vanligt så det är inget som blir krånglig för redaktören, och hur många artiklar som helst kan läggas till utan att hastigheten påverkas. Alla artiklar taggas upp med de filter de ska kunna ordnas efter (Typ av studie, År, Land och Yrke) när artikeln läggs upp av redaktören och här är det såklart också fritt fram att skapa hur många som helst.

Kolla in biblioteket här.

Interaktiv guide till COPSOQ

Postad den av jonk

copsoq

COPSOQ jobbar med en enkät som mäter den psykosociala arbetsmiljön och önskade sig en interaktiv sida för att presentera enkäten. Från kundens håll önskades något som liknade flash, inga nya sidor skulle laddas utan allt material skulle presenteras på samma sida genom att animeras in och ut. Det skulle såklart också vara responsivt.

JensenDesign gjorde designen och sedan blev det upp till Follow me Darling att förverkliga designen med animeringar, responsiv design och koppling till WordPress.

Eftersom det inte är så smart att ladda in alla 27 sidorna samtidigt eftersom det skulle bli tungt för både för servern och för besökarna så laddas sidornas innehåll in först när besökaren klickar på en länk i någon av menyerna. Efter att det begärda innehållet laddats (det tar bara några millisekunder) så animeras det gamla innehållet ut och det nya animeras in.

Alla (just nu) 27 sidorna ligger i WordPress och COPSOQ kan själva lägga till, dra ifrån och uppdatera allt innehåll själva.

När man laddar data såhär utan att lämna sidan så så får ju inte varje sida en egen adress och man vill ju kunna länka till en speciell sida i guiden genom att kopiera adressen från adressfältet. Detta löstes genom pushState() som förändrar adressen i adressfältet utan att ladda om sidan. Så varje gång en besökare klickar i menyerna så uppdateras adressen och resultatet blir en direktlänk till just den del av guiden man är på för tillfället. Jag kan alltså t ex länka direkt till Socialt stöd från kollegor tack vare detta.

Eftersom menyerna pekar till på de ”riktiga” sidorna skapade i WordPress så kan sökmotorer fortfarande indexera varje sida i guiden och besökare som kommer till dessa blir vidareskickade till rätt sida i guiden. T ex http://copsoq.se/enkat/samarbete-och-ledning/socialt-stod-fran-kollegor/ kommer automatiskt att skickas vidare till http://copsoq.se/enkatens-uppbyggnad/#samarbete-och-ledning/socialt-stod-fran-kollegor/.