Technieken:

Op zich biedt White Bream geen webdevelopment aan voor klanten. Maar we kunnen er wel een beetje mee overweg. Deze website, en de varianten www.whitebream.com en www.carpc.nl zijn in de loop van de jaren volledig in-house uit de grond getrokken met een mix van Perl, HTML, CSS en Javascript. Waar van toepassing wordt er natuurlijk wel de nodige webdevelopment uitgevoerd in het kader van een groter geheel. Verder op deze pagina staat enkele referenties naar zulke activiteiten.


Perl based CMS:

Deze drie websites bevatten momenteel (mei 2013) tezamen 186 pagina's HTML en elk nog pakweg 10 Perl-rendered pagina's (die op zichzelf al de noodzaak voor pakweg 100 HTML pagina's wegnemen). Zonder een content management systeem is het onmogelijk om al die pagina's dezelfde look en feel te geven en de onderlinge relaties enigszins overzichtelijk te houden. Daarom is er al in het prille begin van deze sites een opzet gemaakt om met behulp van SSI een overlappende header en menusysteem te genereren.

Het CMS wordt de afzonderlijke pagina's 'ingetrokken' middels server side includes (SSI). Een pagina als template.shtml ziet er zonder SSI zo uit, of in een text editor:

Aan de hand van de huidige pagina bepaald de Perl code hoe de bijbehorende menu's eruit moeten zien. Ook draagt het zorg voor de integratie van de PayPal MiniCart, Google Search, social media links, opschalen van de content naar de volledige browser window en details zoals het weergeven van allerhande icoontjes in het menu.

HTML & CSS:

Tot 2013 werd de opmaak van de website uitsluitend met behulp van <table>'s gerealiseerd. Dit bracht een grote overhead aan opmaak-HTML met zich mee. Bovendien maakte dat het bijwerken of toevoegen van content ietwat hoogdrempelig. Medio 2013 zijn er veel aanpassingen gedaan, waaronder een groot gedeelte van de opmaak in CSS ondergebracht.

JavaScript:

De animaties op de homepages en de dynamische elementen zoals de scolling menu en 100% window hoogtes zijn met Javascript geprogrammeerd. Implementatie van de verschillende link pictogrammen zoals White Bream site 3-th party site is ook met JavaScript gemaakt, evenals de integratie van bv AdSense op de oudere pagina's, zodat die niet aangepast hoefden te worden.


3TH-Party toepassingen:

Paypal MiniCart:

De PayPal minicart is een fraaie uitbreiding van de standaard PayPal shopping cart. Hiermee worden de artikelen lokaal op de site bewaard, en pas bij "Checkout" naar de PayPal site verzonden.

Make payments with PayPal - it's fast, free and secure!

Middels een portie custom CSS voorzien van de nodige !important 's is de MiniCart weergave aangepast voor een groter formaat en een checkout button met dezelfde look als de andere Paypal buttons op de website. Verder is het geïntegreerd met de store_checkout pagina, waarmee een T&C bevestiging afgedwongen wordt, en waar voor de duidelijkheid ook de checkout button gedupliceerd is.

Een neveneffect van de MiniCart is dat andere handlers nogal eens geblokkeerd worden bij het laden. Dit is opgelost door een vertraagde render te gebruiken. Zo worden de site animaties en de AddThis buttons geladen voordat het MiniCart script de code gaat crawlen, en mogelijk moet wachten op een timeout van de www.minicartjs.com server (die nogal eens down kan zijn). Dit laatste is overigens al ondervangen door de minicart_sprite.png lokaal op te slaan en te laden middels de CSS overrides.

AddThis:

De social media sharing buttons van AddThis.com zijn bijzonder eenvoudig toe te voegen. Er is slechts een marginaal beetje CSS nodig om de positie en marges goed te zetten. Idealiter zou er nog een tag moeten zijn om afbeeldingen uit te sluiten van hun scraper, op deze site bijvoorbeeld de logo-afbeelding en de grotere taal-vlaggen.

Google Custom Search:

Een website die wat uitgebreider is kan maar beter een zoekfunctie hebben. Voorheen gebruikte ik daarvoor een ingekocht script van Fluid Dynamics. Dat script was echter nogal moeizaam te integreren in het CMS. Bovendien moest dat handmatig getriggerd worden om de site te scrapen. En dat was iets dat nogal eens vergeten werd...

De Google custom search is eenvoudig te implementeren. Via de configuratie op die Google site is het script te krijgen voor het search invoervak, en de code die in de uitvoer pagina moet komen. Momenteel worden die zoekresultaten nog vervuild door AdSense advertenties, maar dat is eventueel nog af te kopen. Ook hier zijn nog de nodige aanpassingen gedaan met CSS om de look en feel iets aan te passen.


Webdesign in projecten:

DokuWiki kwaliteitssysteem:

Op het intranet van White Bream is een kwaliteitssysteem gehost dat is gebaseerd op het wiki systeem Dokuwiki. Behalve de rechttoe-rechtaan kwaliteitsmanual staan hier ook alle werkinstructies en formulieren op. Die formulieren zijn uitgevoerd als templates waardoor met een paar klikken een nieuwe record gemaakt kan worden, bv voor een reparatie.

Middels een aantal tussenstappen worden testresultaten van de productie van de UNIGO car computer rechtstreeks in de wiki weggeschreven. Al die records zijn voorzien van automatische searches zodat alle referenties van een bepaald serienummer direct zichtbaar zijn.

De testserver voor de systemen is een Ansi-C programma dat draait op een netwerk-PC. Dit programma prepareert de content de nieuwe productietest record, waarna die met behulp van een AutoIt script wordt geïnjecteerd in de XmlRpc API van DokuWiki.

Digitap remote access demo:

Bij het DigiTap project is er onder andere een remote access demo gemaakt met behulp van een Raspberry Pi. Die Pi heeft hotspot functionaliteit en een Apache webserver. Deze webserver host een configuratie- en statuspagina. De status van de device wordt via AJAX geupdate op de tablet of smartphone. Aan de 'achterkant' communiceert die webpagina via een aantal Python scripts met de fysieke seriële poort.

Spybox upload server concept:

Spybox is een beveiligingscamera, welke middels een GPRS-verbinding foto's kan verzenden. Bij de ontwikkeling van de elektronica en de firmware van dit apparaat is er een provisorisch Perl script geschreven dat als server functioneert. Via een zelf ontwikkeld protocol wordt de data en de foto naar de server verzonden, waarna de ruwe JPG's in een directory beschikbaar kwamen.

PayPal

AddThis

Dokuwiki

AutoIt

And now for something completely different