Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

07augustus

Website kassenaar.com vernieuwd

kassenaar.com.logo-114-precomposed Een nieuw seizoen, een nieuwe look.

In 2008 heb ik mijn website voor het laatst een grote make-over gegeven. Het betrof toen de overgang van een ‘gewone’ site naar een blog, waarover je in de eerste blogpost kunt lezen.

Nu, ruim vijf jaar en een kleine 200 blogartikelen later, is het tijd voor een volgende stap. Ik had het gevoel dat het blog – hoewel dynamisch en regelmatig bijgewerkt – de speerpunten en werkzaamheden van mijn bedrijf niet goed genoeg representeerde.

Website anno 2013

Daarom heb ik de afgelopen zomermaanden gebruikt om een nieuwe website te ontwerpen rondom de drie thema’s die mijn bedrijf covert:

  • Trainingen – ik blijf trainingen geven (voor partners en in eigen beheer) op het gebied van webdevelopment. De focus ligt op front-end technieken: HTML, CSS, JavaScript, jQuery en app-trainingen als PhoneGap. Binnenkort worden (als eerste in Nederland!) high-end technische trainingen aan het portfolio toegevoegd, waaronder trainingen in Twitter Bootstrap, Node.js en Angular.js. Volg mij op Twitter om op de hoogte te blijven van de ontwikkelingen
  • Schrijven – Dit jaar heb ik titels geschreven als Handboek Word 2013, Handboek Outlook 2013 en het binnenkort te verschijnen Handboek JavaScript en jQuery. Ook in de toekomst blijf ik schrijven voor uitgevers, websites en magazines.
  • Development – als programmeur ben ik verbonden aan projecten als Yindo en Boekenwolk. Ook ontwikkel ik gedurende projecten diverse besloten apps en websites als prototype of proof-of-concept. Als je hier een vraag over hebt, of een consultancy-afspraak wilt maken, kun je uiteraard contact opnemen.

Finetuning

De nieuwe website is voor een groot deel gereed, maar er zijn nog enkele aandachtspunten die finetuning behoeven. Hier wilde ik met de lancering echter niet op wachten. Dit is analoog aan het developmentprincipe release early, release often.

In de komende weken zullen de laatste plooien worden gladgestreken met betrekking tot:

  • Facebook Like-buttons toevoegen voor pagina’s (de Facebook API blijkt er niet van te houden als je deze dynamisch genereert/aanpast).
  • Weergave op tablets: op de meeste tablets (iPad, Android, Windows RT) is de weergave in orde, maar op tablets met een afwijkende resolutie (bijvoorbeeld 1024x600) is het responsive design nog niet helemaal correct. Het menu en sommige andere tekst kan wegvallen. Wordt aan gewerkt.
  • Typefoutjes en andere kleinigheden. Als je iets tegenkomt wat volgens jou niet klopt, of je vindt het onlogisch: laat het weten!

Die goede oude tijd…

Tot slot, in de categorie ‘opa vertelt’: het huidige ontwerp is de vierde generatie website op kassenaar.com. De eerste versie stamt uit 1997, hiervan is helaas geen screenshot bewaard gebleven. Deze tel ik daarom niet mee. Maar al vrij snel (na een paar maanden) was dit het ontwerp dat van 1998-2001 dienst heeft gedaan:

1998-2001

Een standaard website, opgemaakt met tabellen en afbeeldingen. Alles handgecodeerd in (jawel!) Frontpage 98 en Kladblok.

kassenaar.com-1999

2002 – 2008

Het kenmerk van deze site waren de tabbladstructuur (groot gemaakt door amazon.com en bol.com) en veel, heel veel tabellen en Dreamweaver MM_SwapImage()-scripts. Maar ook custom scripts om de stylesheets te wisselen tussen grote- en kleine letters en voor het eerst een ingevoegde Google-zoekdienst.

kassenaar.com-2003

2008 – 2013

Overgang naar een blogstructuur, waardoor de site regelmatiger bijgewerkt kon worden en er minder tijd aan onderhoud besteed hoefde te worden. Dit blog blijft gehandhaafd, maar ik keer toch ook een beetje terug naar de ‘oude’ opzet, waarin op eenvoudige wijze de pijlers van het bedrijf worden benoemd.

image

2013 – …

Een nieuwe site, een nieuw logo. Geheel volgens de mode van deze tijd, met één grote centrale visual en korte kernbegrippen. Een lichtere opmaak, verbeterde CSS en HTML5-elementen en meer witruimte moeten de inhoud beter leesbaar maken. De site is voor een groot deel gebaseerd op Twitter Bootstrap in combinatie met jQuery, maar maakt op de achtergrond gebruik van een SQL Server-database en het .NET-framework.

kassenaar.com-2013

Nogmaals, het is werk in uitvoering. Als je opmerkingen hebt, of punten ter verbetering dan hoor ik het graag!

Peter Kassenaar
-- 6 augustus 2013

31januari

Tool voor .NET-developers: CSS Agent

css_agentEen goede webdesigner zorgt uiteraard voor een correcte scheiding van structuur (HTML), opmaak (CSS) en gedrag (JavaScript). Het opstellen en onderhouden van stylesheets is er in de loop der jaren echter niet eenvoudiger op geworden. Niet alleen is het aantal mogelijke CSS-eigenschappen met de aanstaande komst van CSS3 flink uitgebreid, alle browsers ondersteunen deze eigenschappen ook nog eens met een iets andere notatie. Browsers gebruiken hiervoor specifieke voorvoegsels als –moz-, –webkit- en –o-, voor respectievelijk Mozilla Firefox, Chrome en Opera. De standaardnotaties zoals door W3C zijn voorgesteld, worden door geen enkele browser ondersteund (op een enkele uitzondering na in de betaversie van IE9).

Problemen

Deze wildgroei aan CSS-eigenschappen zorgt voor een aantal problemen:

  • CSS-bestanden worden groot.
  • CSS-bestanden worden onoverzichtelijk en daardoor moeilijker – en dus duurder – om te onderhouden.

Vooral bij mobiele apparaten, die bijna per definitie met een beperkte bandbreedte te maken hebben, is dit van belang. Het scheelt het nogal of je een stylesheet van 120KB of van 40KB moet downloaden over een 3G-verbinding.

Oplossing

Vandaag bespreken we een tool die een oplossing kan bieden voor deze problemen: CSS Agent. CSS Agent is een ASP.NET Handler die stylesheets automatisch bewerkt voordat ze naar de browser worden verzonden. Simpel gezegd doet CSS Agent twee dingen:

  • CSS Agent zorgt voor automatische browserspecfieke voorvoegsels.
  • CSS Agent zorgt voor automatische minification (compressie) van CSS-bestanden.

Als extraatje introduceert CSS Agent bovendien de mogelijkheid CSS constanten te gebruiken. Je definieert dan bijvoorbeeld bovenin je bestand eenmalig een kleur in een $variable en verderop in je stylesheet gebruik je de variabelenaam in plaats van de letterlijke kleurwaarde. Dit kan niet alleen voor kleuren, maar ook voor achtergrondafbeeldingen, margin, padding en veelgebruikte andere CSS-eigenschappen. Jazeker, ook met CSS Agent moet je nog steeds zelf de basiscode schrijven, maar de rest wordt een stuk makkelijker gemaakt.

Je hoeft bijvoorbeeld niet meer precies te weten wat de Firefox-notatie voor afgeronde hoeken is, of welke verschillende notatiewijzen voor linear-gradient gebruikt worden voor Opera, Chrome en IE. CSS Agent ondersteunt 25 CSS3-eigenschappen, variërend van background-size tot transition-timing-function. Je vind ze allemaal op de site van maker Keith Clark.

Stappenplan

Het uitgangspunt is een ASP.NET-website die draait op Internet Information Server 7 of IIS Express. Eerdere versies van IIS of de Web Development Server van Visual Studio (Cassini) worden ook ondersteund, maar blijven in dit artikel buiten beschouwing. Zie eventueel de website van de maker voor meer informatie. Ik ga er van uit dat je de site maakt en onderhoud in Visual Studio 2010 of Visual Studio Express (gratis).

  • Download het zip-bestand vanaf http://www.keithclark.co.uk/labs/cssagent/. Op het moment van schrijven van dit artikel was v1.0.0 (alpha) de meest recente versie.
  • Het zip-bestand bevat twee bestanden: CSSAgent.dll (12 kb) en een changelog.txt-bestand.
  • Kopieer de DLL rechtstreeks naar de /bin-directory van je website. Een andere manier is hem in een map op je vaste schijf te plaatsen en daarna via Add Reference een verwijzing naar de DLL op te nemen. Het voordeel hiervan is dat je in de toekomst maar op één plek de DLL hoeft te kopiëren als er een nieuwe versie verschijnt. Projecten met een referentie worden dan automatisch bijgewerkt (auto-refresh).

css_agent_BinFolder

  • Schrijf een handler in web.config. Deze sluist de .css-bestanden door naar CSS Agent om te bewerken. De handler komt in de sectie <system.webServer> van web.config.

De code voor de handler ziet er als volgt uit:

<system.webServer>
<
validation validateIntegratedModeConfiguration="false"
/>
<handlers>
<add name="CSS Agent" path="*.css" verb="GET" type="KeithClark.Web.CSSAgent" />
</
handlers
>
</
system.webServer
>

Voorbeeld

Deze twee stappen (DLL kopieren en handler toevoegen aan web.config) zijn alles wat je hoeft te doen. Schrijf nu in je CSS-bestand de code die je graag zou willen gebruiken. Stel bijvoorbeeld dat je een koptekst met afgeronde hoeken en een verlooptint als achtergrond wilt gebruiken:

h1 {
   
color: #FFFFFF
;
   
border-radius: 10px
;
   
border: 1px solid #333
;
   
background: linear-gradient(top, black, grey)
;
   
height:40px
;
   
text-align:center
;
   
padding:10px;
}

En de HTML is als volgt:

<h1>Koptekst met CSS3-eigenschappen</h1>

Je ziet dat alleen de standaard W3C-notaties voor border-radius en background worden gebruikt, zonder verdere toevoegingen. Toch ziet het voorbeeld er in Firefox uit zoals verwacht:

cssAgent_heading

Analyse in Firebug laat zien dat de browserspecifieke eigenschappen zijn toegevoegd door CSS Agent:

cssAgent_heading2

Het zal duidelijk zijn dat dit je enorm veel typewerk zal schelen. Je hoeft nu alleen nog maar de ‘echte’ W3C-schrijfwijze te onthouden, en CSS Agent zorgt voor optimalisatie van deze, en nog 23 andere eigenschappen voor de verschillende browsers.

CSS minification

Door aan de verwijzing naar je .css-bestand de optie –min toe te voegen, zorgt CSS Agent voor automatische compressie (minification) van je stylesheet. De spectaculaire ruimtewinst die dit met zich meebrengt laat zich het best illustreren door een stylesheet uit een live site (in mijn voorbeeld: www.yindo.nl) te gebruiken:

In de pagina (of Master Page van de site) staat bijvoorbeeld de volgende code:

<link href="css/yindo.css" type="text/css" rel="stylesheet" />

Maak hiervan

<link href="css/yindo-min.css" type="text/css" rel="stylesheet" />

Analyse

Als je de pagina laadt, zul je geen verschil merken in vormgeving. Maar als je de resultaten op de achtergrond analyseert, zie je dat er veel veranderd is. Met de HTTP Debugging tool Fiddler is dit goed te zien.

cssAgent_fiddler1

Als de ‘gewone’ stylesheet wordt geladen, is de omvang ruim 15,3 KB (zie voorgaande afbeelding, klik eventueel voor een vergroting). De inhoud van de stylesheet is plain text en ziet er op deze manier uit:

cssAgent_fiddler2

Als in de Master Page de verwijzing wordt aangepast in yindo-min.css, wordt het beeld heel anders:

cssAgent_fiddler3

Het stijlenbestand is nu nog maar 2,9 KB in omvang. Een besparing van meer dan 75%! De code is sterk gecomprimeerd, zoals de tekstweergave laat zien.

cssAgent_fiddler4

Voor het menselijk oog is dit niet meer leesbaar, maar computers weten hier prima raad mee. Het bestand  yindo-min.css wordt door CSS Agent gecached op de server en alleen opnieuw gegenereerd als het originele .css bronbestand wordt gewijzigd. Je hoeft er dus niet bang voor te zijn dat de stylesheet elke keer wordt gecomprimeerd en zo voor extra belasting op de server zorgt. De foutmelding die Visual Studio toont (‘kan yindo-min.css niet vinden’), mag je rustig negeren.

Wat mij betreft is de keuze snel gemaakt. Vanaf dit moment gebruik ik CSS Agent voor elk nieuw project!

Aandachtspunten

Er zijn enkele aandachtspunten bij het gebruik van CSS Agent

  • CSS Agent werkt niet met inline CSS. Een <style>…</style> blok in een pagina wordt dus niet geparsed. Je zult moeten werken met gekoppelde CSS-bestanden, via <link href=”…” />. Alleen dan wordt het stylesheet door de handler goed opgepikt.
  • Het is een typische .NET-tool en bedoeld voor ASP.NET/IIS-websites. CSS Agent is daarmee niet geschikt voor PHP/MySQL/Apache-websites.
  • Het werken met Cassini (de ingebouwde Development Web Server van Visual Studio) kan problemen geven. Ik – en enkele andere developers - kregen hem in elk geval niet aan de praat, ondanks aanwijzingen van Keith Clark (zelf had hij er geen problemen mee, en kon de bug niet reproduceren). Maar het is sowieso ondertussen een goed idee om over te stappen op het nieuwere IIS Express.
  • CSS Agent is (nog?) niet beschikbaar via de NuGet Gallery. Je zult dus zelf het bestand moeten downloaden en installeren/referencen. Clark gaf aan dat hij de mogelijkheden hiervoor in de toekomst zou bestuderen, maar dat het voorlopig geen hoge prioriteit had.

Conclusie

CSS Agent is absoluut een tool die de moeite waard is. Het maakt je leven als developer een stuk eenvoudiger, in elk geval totdat de browsers overeenstemming hebben bereikt over de voorvoegsels. Daarna blijft CSS Agent nog nuttig om stylesheets automatisch te comprimeren en het werken met CSS contstants mogelijk te maken (niet besproken in dit artikel).

Tip: als je deze tool ook gaat gebruiken, overweeg dan een donatie aan de maker: Keith Clark vraagt een bescheiden bijdrage van GBP 5,- om de verdere ontwikkeling van deze tool mogelijk te maken.

Peter Kassenaar
-- 31 januari 2011

29juni

Handboek (X)HTML, CSS en JavaScript

Vandaag is het Handboek (X)HTML, CSS en JavaScript verschenen. In dit handboek leert u vanaf het nulpunt hoe een website wordt opgezet en welke technieken daarbij worden gebruikt. U leert hierbij zelf de codes schrijven voor webpagina. Het boek gaat hierbij niet uit van een visuele editor, zoals Adobe Dreamweaver of Microsoft Visual Studio. In plaats daarvan gaat u zelf met de code aan de slag, zodat u maximale grip hebt op het eindresultaat. U weet na afloop van dit boek precies wat nodig is om een moderne website te ontwerpen en kunt websites van anderen doorzien.

In de inleidende hoofdstukken worden de drie technieken kort voorgesteld. In de overige hoofdstukken worden de technieken altijd geïntegreerd toegepast. Het boek werkt hierbij case/oplossingsgericht. In het hoofdstuk over formulieren wordt bijvoorbeeld de HTML-code besproken om het formulier in te stellen, maar direct ook de CSS-code om het formulier op te maken en JavaScript-code om formuliervelden te valideren.

Specificaties

  • Boek, paperback, 480 pagina's.
  • Geschikt voor Windows en Macintosh
  • Geschikt voor opleidingen en zelfstudie.
  • ISBN-13: 978-90-5940-414-4 (9789059404144)
  • Prijs: EUR 29,90
  • Voorbeeldhoofdstuk beschikbaar op Yindo

Van de flapekst:

"(X)HTML, CSS en JavaScript vormen de drijvende kracht achter de hedendaagse website. Niet alleen kennis van deze onderdelen, maar ook van de onderlinge interactie is van cruciaal belang om een gelikte, gebruiksvriendelijke en moderne website te ontwikkelen. In het Handboek (X)HTML, CSS & JavaScript laat internetexpert Peter Kassenaar u zien hoe u gebruikmaakt van genoemde technieken, maar vooral ook hoe u ze optimaal laat samenwerken. Het resultaat is een website die zich aan de huidige webstandaarden conformeert en in alle gangbare browsers optimaal presteert."

Beknopte inhoudsopgave

Tot de behandelde onderwerpen behoren:

  • Beginnen met HTML
  • Kennismaken met CSS
  • JavaScript in een notendop
  • Koppelingen maken
  • Werken met HTML-lijsten
  • Verschillende mediatypen op de site gebruiken
  • Werken met HTML-tabellen
  • Pagina's opmaken met CSS-lagen
  • Werken met formulieren
  • Technieken met JavaScript
  • De site publiceren op het web

Oefenbestanden

In het boek staan tal van oefeningen om zelf met HTML, CSS en JavaScript aan de slag te gaan en direct uw eigen website op te zetten voor school, vereniging, onderneming of hobby. Het is typisch een boek om naast het toetsenbord te leggen en zelf mee oefenen.

HtmlCssJavaScriptOefenbestanden.zip (1,0 MB)

De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan de oefenbestanden gerangschikt in afzonderlijke zip-bestandjes per hoofdstuk.

Hebt u het boek gelezen en hebt u er opmerkingen over ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een bericht achter onder dit artikel.

Bestellen

Peter Kassenaar
-- 29 juni 2009

 

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

24juni

JavaScript wordt mooie zwaan - column

 

 

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. De eerste column (W3C, opchieten) lees je hier. Deze tekst is ook verschenen op de site van computerboek.nl.

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden.

"Lange tijd werd JavaScript beschouwd als het lelijke eendje in de webdesign-wereld. Goed, het was een programmeertaal, maar dan toch eerder speeltje binnen de browser dan een gereedschap voor serieuze toepassingen. Typische JavaScript-taken waren bijvoorbeeld het tonen van al dan niet overbodige waarschuwingsvenstertjes ('Welkom op mijn website, gast!'), het valideren van formulier-velden en het tonen van een scrollende boodschap of klokje in de statusbalk van de browser. Tot zover JavaScript.

Tenminste, tot voor kort.

JavaScript werd medio 1995 onder de naam Mocha en later LiveScript ontwikkeld door Brendan Eich, destijds een medewerker van browserfabrikant Netscape. In Netscape Navigator 2.0 werd de eerste versie van JavaScript aan de wereld getoond. De naam van de programmeertaal werd met het voorvoegsel 'Java' getooid omdat dit uit marketingoverwegingen beter aansloot bij het juist door Sun gelanceerde programmeerplatform Java. Hoewel JavaScript voor de hiervoor genoemde taken goed te gebruiken was, had de scripttaal onder programmeurs geen goede naam. Er werd gebruik gemaakt van een complex en inconsistent programmeermodel (het Document Object Model, DOM), dat van browser tot browser verschilde, er waren geen goede tools voor het opsporen van fouten (debugging) en de manier waarop met objecten en variabelen werd omgegaan was anders dan in andere programmeertalen. Goed, als het echt niet anders kon dan wilde de webontwikkelaar wel een paar regels JavaScript schrijven, maar als het even kan werd het gebruik ervan vermeden.

Totdat vier letters voor een omslag zorgden.

Deze vier letters zijn natuurlijk 'AJAX'. Dit staat voor Asynchroon JavaScript and XML. Opeens bleek een functie die al langere tijd binnen JavaScript bestond om asynchroon verzoeken te doen aan de webserver (voor de kenners: het object XMLHttpRequest) enorm handig om delen van een pagina opnieuw te laden. Hierbij is het niet meer nodig de hele pagina te verversen. Dit zorgt voor een veel betere gebruikerservaring bij de bezoeker - want die hoeft immers niet meer vooruit en achteruit te bladeren door een website. Ook bleken op deze manier in combinatie met het eerder verfoeide DOM interactief complete onderdelen aan een pagina te kunnen worden toegevoegd, te worden geanimeerd, of uit de pagina worden verwijderd.

Ineens bleek JavaScript in moderne webtoepassingen steeds belangrijker, om niet te zeggen onmisbaar. Op welke manier zouden anders websites als Gmail, Flickr, FaceBook, Google maps en talloze anderen goed moeten werken? Dat zou onmogelijk zijn. Bijkomend voordeel - en in grote mate bepalend voor het huidige succes - is dat JavaScript door alle moderne browsers op dezelfde wijze wordt verwerkt. Hierdoor was het voor grote bedrijven als Google en Yahoo mogelijk standaardbibliotheken met animaties, invulvensters, validaties en meer te ontwikkelen die in alle browsers gelijk functioneren. Webontwikkelaars omarmden deze en andere, door kleine partijen als jQuery en MooTools ontwikkelde bibliotheken met grote vreugde.

Het balletje was gaan rollen. Tegenwoordig kan elke webdesigner met een paar klikken een complete JavaScript-functiebibliotheek downloaden en met enkele regels code aan zijn pagina toevoegen en aanroepen. Dit verbetert de standaardisatie van de site en verminderd de afhankelijkheid van externe plug-ins als QuickTime, Flash of Silverlight.

Grappig hierbij om te zien is dat het - ondanks de naam Asynchroon JavaScript en XML - helemaal niet nodig is te werken met XML, dat een aanroep niet asynchroon hoeft te zijn, en dat het gebruik van JavaScript tegenwoordig bijna tot een minimum beperkt is.

Brendan Eich kan trots zijn. Ruim 15 jaar na de geboorte van JavaScript is het voormalige lelijke eendje uitgegroeid tot een sierlijke zwaan die onmisbaar is in modern webdesign."

Peter Kassenaar
-- 24 juni 2009

16juni

W3C, opschieten! - column

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. Ze zijn ook verschenen op de site van computerboek.nl

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden. Maar eerst even opwarmen met de columns…

 

"Wie al wat langer meeloopt in de webdesignwereld kan zich de eerste 'browser war' uit de jaren 1996-2000 nog wel herinneren. De browsers Netscape Navigator en Microsoft Internet Explorer vochten een bittere strijd uit om de gunst van de eindgebruiker. Ze deden dit onder meer door in elke nieuwe versie van hun browser nieuwe mogelijkheden en nieuwe HTML-tags te introduceren en te proberen deze tot standaard te verheffen. Kent iemand nog tags als <marquee>, <blink>, <layer>, <spacer> en <multicol>?. Hetzelfde gebeurde op het gebied van CSS-ondersteuning en JavaScript-versies. Tot op de dag van vandaag gebruikt Microsoft een (iets) andere manier van JavaScript-verwerking die ze hardnekkig JScript blijven noemen.

Omdat webdesigners deze tags en technieken naar eigen goeddunken gebruikten, leidde dit er toe dat er talloze sites waren die er goed uitzagen in Internet Explorer, maar in Netscape Navigator onleesbaar waren, of andersom. Iedereen kent nog wel knoppen en teksten als 'Deze site is geoptimaliseerd voor [vul een browsernaam in]'.

De aanwezigheid van zoveel 'standaarden' is voor iedereen vervelend. Voor thuisgebruikers, omdat de site die ze bezoeken mogelijk niet goed wordt weergeven in de browser die zij gebruiken. Maar ook voor ontwerpers, omdat zij bij het ontwerp van hun site rekening moeten houden met allerlei verschillende browserversies en zogenaamde standaarden.

Het World Wide Web Consortium (W3C), onder leiding van webuitvinder Tim Berners-Lee zag deze ontwikkelingen op het browserfront met lede ogen aan. W3C tracht de ontwikkelingen op webgebied in goede banen te leiden door richtlijnen en standaarden te publiceren waar - als het goed is - elke browserfabrikant zich aan houdt. Om de browser war in goede banen te leiden werden de standaarden HTML 3.2 en HTML 4.01 (1997-1999) en CSS level 1 en level 2 (1996-1998) opgesteld.

En toen gebeurde er een hele tijd niets.

De browser war werd overtuigend gewonnen door Internet Explorer. Niet in de laatste plaats omdat Microsoft het onmiskenbare voordeel had dat ze de browser met elke computer met Windows konden meeleveren maar ook omdat - eerlijk is eerlijk - technisch gezien Internet Explorer in die jaren een veel beter product was dan het topzware en onstabiele Netscape Navigator. Voor gebruikers en webdesigners is het leven nu een stuk aangenamer, omdat de standaarden bekend zijn en alle browsers zich hier binnen redelijke grenzen goed aan houden.

Maar het web veranderd voortdurend. De strijd tussen browsers is nieuw leven ingeblazen door de lancering van Mozilla Firefox. Deze browser knabbelt voortdurend procentjes af van het marktaandeel van Internet Explorer. Van een comfortabele 90% zakt het aandeel Microsoft-browsers nu naar waarden tussen de 60% en 70%. In het kielzog van Firefox zagen ook andere grote partijen weer brood in het lanceren van een eigen browser. Apple ontwikkelde Safari, Google kwam een half jaartje geleden met Google Chrome op de proppen.

En wat doet W3C? Het is al jaren angstig stil uit deze hoek. Jazeker, er zijn tal van aanbevelingsrapportages, werkgroepen en activiteitencommissies en die zich buigen over vraagstukken over hoe de nieuwe ontwikkelingen als AJAX, Flash, Silverlight en meer nu gestandaardiseerd kunnen worden. Al bijna tien jaar wordt gewerkt aan de opvolger van HTML 4.01. Toch wordt HTML 5 - volgens de meest gunstige schatting - pas in de jaren 2010-2012 verwacht, terwijl een uitloop naar 2015 of nog later niet ondenkbaar is.

Browserfabrikanten wachten hier natuurlijk niet op en proberen elkaar nu al telkens de loef af te steken met nog snellere scores op JavaScript-taken, betere ondersteuning van de ACID-compatibiliteitstest en het steeds sneller laden van pagina's. Het verst hierin gaat Apple, dat begin juni bij het uitbrengen van Safari 4 voor Windows en Macintosh op hun conferentie voor programmeurs in San Fransisco (WWDC) aankondigde dat Safari 'de beste ondersteuning biedt voor nieuwe elementen uit de HTML 5-standaard'. Een standaard die op zijn vroegst pas over een aantal jaar bekend wordt!

W3C zou er goed aan doen haast te maken met het standaardiseringproces en snel duidelijkheid te scheppen over de nieuwe elementen in HTML 5 en de wijze waarop deze door webdesigners en browserfabrikanten verwerkt moeten worden. Anders staan we aan de vooravond van een nieuwe golf websites die is 'geoptimaliseerd voor [vul browsernaam in]'. Hier is niemand mee gediend."

 

Peter Kassenaar
-- 16 juni 2009

30juli

Descendant selectors in CSS en Dreamweaver

Zodra –beginnende – webdesigners wat meer kaas hebben gegeten van het werken met lagen en CSS, wordt hun nieuwsgierigheid gewekt. Ook in mijn boeken over webdesign en Dreamweaver probeer ik de lezer te leren om de inhoud/structuur en opmaak van webpagina's zoveel mogelijk te scheiden.

In de trainingen die ik geef krijg ik dan ook regelmatig een vraag zoals ook Roel Bouwhuis (www.roelbouwhuis.nl) afgelopen week via e-mail stelde:

 

"Zoals u op mijn site kunt zien, maak ik gebruik van donkere en lichte vlakken (div's) waarbij het lettertype omgedraaid donker of licht is. Het probleem is dat de kleur van de hyperlink in beide vakken hetzelfde is (in mijn geval wit) waardoor de hyperlinks in het lichte vlak heel moeilijk te zien zijn. Mijn vraag is: hoe kan ik de opmaak van hyperlinks per division opmaken?"

Omdat dit een standaardtechniek is waarvan ik vind dat elke webdesigner deze zou moeten beheersen heb ik hier even een video over samengesteld (mentale notitie aan mezelf: neem deze techniek direct op in het boek over Dreamweaver CS4!). De video laat zien hoe u zonder wijzigingen in de HTML-code hyperlinks en andere elementen op de pagina een afzonderlijke opmaak kunt geven. Als hulpmiddel wordt Dreamweaver gebruikt, maar uiteraard is dit een algemeen geldige techniek (06:59 min.)

 

Video over het werken met descendant selectors in CSS en Dreamweaver

Vragen of opmerkingen? Laat het weten via een commentaar onder dit bericht. Een e-mail sturen mag natuurlijk ook, maar door uw reactie rechtstreeks onder dit bericht te plaatsen kunnen andere lezers er ook hun voordeel mee doen.

Bedankt voor het kijken/lezen,

Peter Kassenaar
-- 30 juli 2008.

20mei

CSS-docentendag Instruct geslaagd evenement

Vorige week woensdag was ik als spreker uitgenodigd op een docentendag voor gebruikers van de lesmethode Fundament Informatica van uitgeverij Instruct. Ik heb hierover al eerder geblogd, bijvoorbeeld hier en hier.

Wel internet, geen boeken

Het was een geslaagde middag en avond. De locatie (Wartburg college, Rotterdam) was als op miraculeuze wijze ontsnapt aan de grote KPN-storing van het internet-netwerk, waardoor er geen verbindingsproblemen waren. Ook konden 's avonds de praktijkcases zonder problemen uitgevoerd worden.

Helaas waren er wel vertragingen bij TNT (acties? internetstoring?), waardoor de boeken niet op tijd werden afgeleverd. Ongeveer een uur na aanvang van de presentatie belde de TNT-bezorger bij ons kantoor in Dieren aan...

In elk geval worden ze nagezonden, de aanwezigen kunnen hun exemplaar binnenkort in de bus verwachten.

Een kort verslag van de dag vind je bijvoorbeeld bij Informatica VO, websitebeheerder Frans Peters maakte ook onderstaande foto.

De presentatie, oefenbestanden en cases van de docentendag zijn allemaal nog online beschikbaar; in elk geval tot medio augustus 2008.

29april

Ongewenste automatische witruimtes voorkomen [video]

Soms is er zo'n samenloop van omstandigheden dat je denkt 'hier moet ik wat mee doen'. Zo ook weer afgelopen week. Ik zat de worstelen met een ongewilde witruimte bovenaan een pagina. In Internet Explorer was het probleem niet zichtbaar, maar in Firefox wel. En juist had ik dit knelpunt verholpen (met dank aan Gert Ribbink voor de initiële oplossing) toen een lezer mij mailde met vrijwel hetzelfde probleem. En dus bedacht ik me dat dit geen toeval kon zijn en er waarschijnlijk nog wel meer webontwerpers tegen hetzelfde probleem aanlopen

Het probleem

Er is ongewenste witruimte zichtbaar rondom elementen. Soms in Internet Explorer wel en in Firefox niet, soms andersom. De pagina-opmaak kan hierdoor in de war raken.


Figuur 1: Firefox geeft een ongewenste wituimte boven de pagina


Figuur 2: Internet Explorer plaatst de pagina precies tegen de bovenrand van het venster

De oorzaak

Het bleek dat de koptekst <h1> in dit geval voor het probleem zorgde. Deze krijgt in Firefox standaard een margin van ongeveer 20 pixels aan de bovenkant en onderkant, terwijl dat in Internet Explorer niet het geval is.

De meer conceptuele oorzaak is dat er tussen de fabrikanten onderling gewoon geen vaststaande afspraken zijn gemaakt voor margin en padding van elementen. Met andere woorden: de ene keer krijgt een element in Firefox wel padding en in Internet Explorer niet, soms krijgen elementen juist margin (en soms niet) en soms werken de browsers precies tegengesteld (en in Opera en Safari gaat het weer anders). Kortom, het is een ratjetoe. Vandaar ook alle tientallen CSS-hacks die je op internet kunt vinden

De oplossing

De korte oplossing is: maak een stylesheet-regel waarin expliciet de margin voor kopteksten op nul wordt gezet. In Internet Explorer was dat al zo, dus verandert er niets. Maar in Firefox ziet de pagina er dan ook goed uit.

h1{ 
   margin: 0;
}

De langere oplssing is: gebruik de analyse-tool Firebug voor Mozilla Firefox om de bron van het probleem te achterhalen en te verhelpen. In de video (08:41 min) laat ik hiervoor een mogelijke werkwijze zien.

Video over het voorkomen van ongewenste witruimtes rondom elementen

Uiteraard zijn er meer methoden om te analyseren wat de oorzaak van lay-outproblemen is, maar het werken met Firebug (ik ken dit pas een paar maanden, maar zou nu al niet meer zonder kunnen!) is wel een van de makkelijkste manieren denk ik.

In de komende maanden hoop ik een serie videodemo's te maken over het werken met Firebug en de uitgebreide mogelijkheden van deze Firefox-extension.

Peter Kassenaar
-- 29 april 2008