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.


Websites:

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.

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.


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.

Content editor voor 'TweakLite':

De TweakLite is een licht therapie apparaat dat sequences van kleuren kan afspelen. Deze sequences worden aangemaakt met behulp van een webbased editor. De encryptie van die sequences wordt verzorgd via een server-side PHP module.

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.

Webserver in het OGS systeem:

De master controller van het Offgrid systeem heeft onder andere een webserver aan boord. Behalve bestanden van de SD kaart bevat deze webserver ook diverse hard-coded webpagina's, en een dynamische JSON response. Voor deze webserver is diverse voorbeeld content gemaakt met AJAX updates, en on-the-fly herconfiguratie naar gelang de diverse modules die op de OGS-bus aangesloten zijn/worden.

HTML parser in OGS display:

Voor het Offgrid systeem hebben we een display module ontwikkeld. Dit display bevat een minimalistische HTML parser en kan daardoor geprogrammeerd/geconfigureerd worden met een gewone HTML file. Met behulp van de nodige Javascript en CSS kunnen deze configuratie bestanden ook in een gewone browser 'geemuleerd' worden.

PayPal

AddThis

Dokuwiki

AutoIt

And now for something completely different