Achtergrond bij “Aardbevingen Groningen” animatie – versie 2

Een vervolg op dit artikel. Eindelijk na bijna drie jaar ben ik mijn Groningen Gaswinning Aardbevingen Animatie aan het bijwerken naar “versie 2”.

Ik ben bezig met grootscheepse werkzaamheden onder en boven de scheepsmotorkap.

Dit is niet overbodig omdat de verwachtingen zijn dat de gasbevingen over enkele jaren zullen toenemen. Die moeten dus gevisualiseerd blijven worden, dat snapt u wel.

Nog steeds kan ik dit doen omdat Wim Blanken via het Gasbevingenportaal een realtime datafeed beschikbaar stelt, die de informatie van het KNMI haalt en “sanitized”, waarna ik het inlees in de animatie.

Ik heb onder andere schaamteloos gebruik gemaakt van de tips die in deze recensies staan, maar (nog) niet alles verwerkt. Sommige dingen zijn ook onmogelijk.

Een overzichtje van de werkzaamheden:

Code & Design

• Toegankelijkheid iets verbeteren door “outline” weer aan te zetten (destijds uitgezet, niet handig) via CSS, en door volgorde van de buttons/links te veranderen √
• Date.JS library uitschakelen en overgaan op moment.JS √
• verder met jQuery uitfaseren √
• accounting.js toevoegen (klein JavaScript library om getallen te formateren m.b.t. geldbedragen
• -prefix-free JavaScript library toevoegen √
• FastClick JavaScript polyfill updaten √
• createJS library nieuwste versie gebruiken en de wijzingingen in de API verwerken aangaande geluid √
• het laadproces rustiger aan de ogen maken, minder kleurverspringen bijvoorbeeld √
• de layer met de contouren van het Groninger gasveld weggelaten, onrustig aan de ogen en we zien toch wel waar de fakkeltorens staan √
• Traag afspelen in Firefox verhelpen, dit komt niet door het JavaScript canvas gedeelte maar door de time-line onderin, niet in elke loop updaten maar eens in de 10 keer (o.a.) √
• Twee JavaScript canvassen i.p.v. één √
• Aan het eind een nieuwe modal bouwen die beter in het design past en enige realtime info geeft √
• zorgen dat versie 1 in de lucht blijft en via een URL bereikbaar is maar niet geindexeerd wordt door zoekmachines √
• de google maps kaart kleurstelling aanpassen √
• kleur van de cirkel die verschijnt bij een grotere beving aangepast van blauw naar geel √
• nieuwe kleuren gebruiken uit een flat-design palet √
• design van de time line aanpassen √
• drie soorten timelineberichten i.p.v. twee. Nu: nieuwsbericht (grijs), alert (geel), en info (blauw) √
• datum-aanduidingen in de time line zodat er meer tijdsbesef aan vast hangt √
• sommige buttons kleiner en minder aandacht geven √
• buttons vierkanter maken met minimale ronde hoekjes √
• aanklikbare audio-fragmenten in de timeline maken √
• uitdooftijd van de bevingscirkels groter maken √
• herstart proces werkend maken √
• laatste 3 bevingen op het openingsscherm tonen √
• schalen van de kaart goed laten functioneren
• map sleepbaar / verplaatsbaar maken
• geluiden opnieuw genereren in Audacity zodat de lage geluidjes deze keer ook echt zachter klinken. (Is dit mogelijk of trekt de browser de audio-volumes min of meer gelijk?)
• google maps inruilen voor openstreetmap.org als dat mogelijk is (ivm omrekenen lat/lon naar pixel-lokatie op scherm, heeft Openstreetmap zoiets?
• het begin menu laten bewegen middels CSS transition ipv via de zwaar verouderde jQuery-manier

Inhoudelijk

• Nederlandse en Engelse versies gelijktrekken √
• minder tekst √
• timelineteksten aanpassen, een paar toevoegen, de tijd staat niet stil √
• de eerste bevingen weg laten, zodat de animatie sneller op gang komt, ja nee, ik weet het nog niet