2Vi Weblog

Nog steeds actief

Het laatste artikel op dit weblog is al weer van 2006. Niet zoals een weblog hoort te zijn. Ik ben zelf echter nog steeds actief en sinds september 2007 afgestudeerd aan de TU Delft voor de Master Media & Knowledge Engineering. Dit weblog zal ook in de toekomst waarschijnlijk niet geupdate worden omdat het een en ander verplaatst is naar de volgende twee weblogs: Mijn Persoonlijke Weblog MovingLabs Weblog Alleen zaken die direct betrekking hebben op 2Vi zullen nog op deze site verschijnen, maar dan waarschijnlijk in de Nieuws/Spotlight sectie.

WYSIWYG Formulieren editor

Het afgelopen jaar heeft 2Vi samengewerkt met Componence aan een webapplicatie voor het maken en beheren van online formulieren. Hierbij was 2Vi verantwoordelijk voor de WYSIWYG editing omgeving. Hierbij is onderandere gebruik gemaakt van het Consyn Framework. De beta versie is nu beschikbaar. Kijk voor meer informatie en een demo op: www.eformcreator.com.

Effectieve webapplicaties

2Vi werkt samen met E-lab aan effectieve webapplicaties. Om deze activiteiten een duidelijke gezamelijke identiteit mee te geven is het Moving Labs initiatief gestart. Voorbeelden van projecten zijn yourdraft.com en forlater.net. De projecten zijn er in de eerste plaats op gericht om applicaties die wij kleine ondernemers zelf nodig hebben, ook beschikbaar te stellen aan anderen. Daarnaast geven de projecten de mogelijkheid om onze producten uitgebreid in de praktijk te testen.

Overzichtelijke CSS Stylesheets

Bij 2Vi proberen we altijd semantisch correcte XHTML in combinatie met CSS stylesheets te schrijven voor al onze projecten. Wij houden zaken graag overzichtelijk en kiezen, waar mogelijk, altijd voor een minimalistische aanpak. De XHTML heeft meestal een duidelijke hierarchische structuur met meerdere niveau's. Onze eisen aan de stijl hebben meestal een redelijk gelijkende structuur. CSS stylesheets hebben echter een platte structuur, die al snel kan leiden tot onoverzichtelijke situaties.

My site

Nieuws bericht

content...

Normaal zou de volgende CSS hier bij kunnen horen:.container {border: 1px solid black;} .container h1{ color: red; } .news {border-top: 1px solid black;} .news h2{color: blue} .news p{ font-weight: bold;}Het is duidelijk dat er een relatie is tussen XHTML en CSS structuur, maar deze is moeilijk af te leiden uit alleen de CSS. Dit maakt bij grotere files, het zoeken naar de juiste regels moeilijker. Daarom is het binnen 2Vi de conventie om CSS stylesheets als volgt op te maken:.container{ border: 1px solid black; } .container h1{ color: red; } .news { border-top: 1px solid black; } .news h2{ color: blue } .news p{ font-weight: bold; }Hoewel de witruimte geen directe betekenis heeft, wordt de file overzichtelijker en beter leesbaar. Ook is het sneller te zien of bepaalde properties wel echt nodig zijn, het is immers direct duidelijk welke andere stijlen al hoger in de structuur zijn toegepast.Behalve deze structuur ben ik voorstander van het groeperen van gelijksoortige properties op één regel, zoals in het volgende voorbeeld:.container{ position: absolute; left: 0px; top: 0px; margin: 5px; padding: 10px; font-size: 15px; font-weight: bold; } Gerelateerde properties staan nu altijd dicht bij elkaar, er is overzicht, en definities nemen niet een onnodig groot aantal regels in beslag. Een uitgespreide definitie betekent immers ook dat er minder van de totale filestructuur zichtbaar is op het scherm.De toepassing van deze conventies heeft bij 2Vi geleid tot kortere, overzichtelijkere en stukken onderhoudbaardere stylesheets.

Javascript files verder verkleinen

Ruim twee maanden geleden schreef ik hier over onze Javascript Obfuscator tool. Inmiddels is de tool verder uitgebreid. Er was namelijk een belangrijke extra compressiemogelijkheid die nog niet werd benut.De vorige versie zou de volgende code:function _private(myVar1, myVar2){ return myVar1 * myVar2; }herschrijven naar: function _a(myVar1,myVar2){return myVar1*myVar2;} Dit is natuurlijk een stuk korter, maar het valt ook op dat de namen myVar1 en myVar2 helemaal niet belangrijk zijn voor de functionaliteit van het script.De nieuwe versie van ObfuscateJS houdt hier rekening mee en zal dit soort lokale variabelen hernoemen naar een korte versie:function _a(c,d){return c*d;} Dit is een duidelijke vooruitgang wat betreft de filesize. Ook voor het andere doel van obfuscation: de leesbaarheid verminderen is er duidelijke winst.De nieuwe versie van ObfuscateJS is te downloaden op: tools.2vi.nl.

AJAX en usability

Een vaak gehoord argument tegen het gebruik van AJAX technologie in webpagina's is dat het de usability kan schaden door belangrijke functionaliteiten die door de browser worden geboden onmogelijk te maken. In de meeste gevallen is dit echter meer te wijten aan een gebrek aan kennis en creativiteit dan aan de beperkingen van de technologie.Een voorbeeld van zo'n beperking is dat een pagina vaak moeilijk te bookmarken is. Immers wordt alleen de URL opgeslagen en als je daar naartoe gaat brengt je dat weer in de initiele staat van de pagina. Dit probleem kan echter simpel worden opgelost door de staat van de pagina op te slaan in de URL. In HTML wordt altijd al gebruik gemaakt van anchors om de staat van een pagina te veranderen zonder te herladen. Dit principe kan ook gebruikt worden om interesantere toestandsinformatie te plaatsen in de URL. Door bijvoorbeeld een linkje te maken naar '#pane1:iets' kun je perfect de toestand in de URL weergeven. Nu hoeft deze toestand alleen nog maar bij het laden van de pagina te worden uitgelezen om de pagina ook daadwerkelijk in de goede staat weer te geven. Nu de toestand besloten ligt in de URL kunnen we ook een ander probleem oplossen. Vaak worden links gebruikt om de toestand van de pagina te veranderen. Als we echter 'open in nieuw venster' functionaliteit daar op willen aanroepen zal dit mis gaan omdat de link geen echte betekenis heeft. Vaak wordt er verwezen naar '#' en zal de pagina dus in de begintoestand worden weergegeven. We hebben echter al een manier om de gewenste toestand uit te drukken in een URL. Met een linkje zoals: change Zal normaalgesproken gewoon de changeState methode worden aangeroepen om de toestand te veranderen. Gebruiken we echter bijvoorbeeld 'Open in new Tab', dan zal het zelfde mechanisme wat voor de bookmarks wordt gebruikt, ook nu de pagina in exact de gewenste toestand weergeven.Deze benadering wordt toegepast in het Consyn Framework omdat wij van mening zijn dat AJAX technologie enkel voordelen behoort te hebben. Onze aandacht is er dan ook op gericht om dit soort essentiele functionaliteit niet verloren te laten gaan.

Javascript files verkleinen

Voor client-side scripting zoals de Consyn library zijn kleine files belangrijk. Minder downloaden betekend immers een snellere site. Overbodig commentaar en witruimte moet vermeden worden, maar is essenteel tijdens de ontwikkeling. Om dit probleem te ondervangen heb ik een kleine obfuscator tool geschreven voor javascript. Deze kan op de volgende manier worden gebruikt: java -jar consyntools.jar Obfuscator {src} {dest} {prefix} Waarbij {src} de naam is van de file met de originele source en {dest} de filenaam waar het resultaat naar toe wordt geschreven. Optioneel is het derde argument {prefix}, de namen van variabelen met deze prefix worden herschreven naar een korter alternatief. Als we '_' als prefix kiezen kan function _debug(){...} ... _debug(); kan hiermee worden herschreven naar: function _a(){...} ... _a();In de toekomst kan deze obfuscator nog worden uitgebreid om automatisch variabelen met een lokale scope te herschrijven naar een kortere variant. Interesse? Neem dan contact op.

Welkom op de weblog van 2Vi ja ja

Dit is mijn eerste post op dit nu nog verse weblog. Ik ben Michiel van Vlaardingen en 2Vi is mijn bedrijf. Ik heb het opgericht in 2000 toen ik nog op de middelbare school zat. Inmiddels studeer ik de Master Media and Knowledge Engineering aan de TU Delft.Mijn posts hier zullen gerelateerd zijn aan de producten van 2Vi of aan de technieken die gebruikt worden bij de ontwikkeling en implementatie. Momenteel ontwikkel ik het Consyn framework voor eenvoudig crossbrowser implementeren van zeer dynamische en interactieve userinterfaces voor websites en webapplicaties. Client-side scripting zal daarom één van de belangrijkste onderwerpen zijn van de posts die je hier zult vinden.