Links van 26 mei 2011 tot 27 mei 2011

vrijdag 27 mei 2011 in Links. Permanente link | Eén reactie

Contenu de notre intervention sur Facebook « JournalisteWeb.be
Le Café Numérique avait invité Marina Aubert et deux Community Managers, Florence Manente et Marie Van Humbeeck, à intervenir ensemble sur le thème « Réussir sa page Facebook ». Voici une reprise détaillée de l’intervention.

xkcd wikipedia steps to philosophy
(Wikipedia trivia: if you take any article, click on the first link in the article text not in parentheses or italics, and then repeat, you will eventually end up at "Philosophy")

4.10.7.2 Common input element attributes — HTML Standard
The following extract shows how a messaging client's text entry could be arbitrarily restricted to a fixed number of characters, thus forcing any conversation through this medium to be terse and discouraging intelligent discourse.

Scripta manent

woensdag 17 maart 2010 in Sonstiges. Permanente link | 3 reacties

Zo grappig – de meeste websites die ik lang geleden maakte, zijn al lang in de nevelen der tijd verdwenen, maar deze is (praktisch 100%) ongewijzigd blijven staan:

ill_01

Een virtuele tentoonstelling, zowaar. Lang niet mijn eerste website, en lang niet mijn eerste hypertext-ding, maar toch: oud, naar internetnormen. Ik herinner me dat terwijl ik aan de site bezig was, Netscape plots besloot om <table> in te voeren. Leute! Plots was een pagina als deze mogelijk!

Het was in de tijd dat er uiteraard nog geen css was, dat er geen javascript was, het was zelfs een vol jaar voor het mogelijk was om met <font face="teenoftander"> van lettertype te veranderen.

…en het was ook nog in de tijd dat ik in de html zette wie en wat:

<HTML>
<HEAD>
<TITLE> Jean De Castro </title>
<!-- Copyright 1995 by IDeA
  -- HTML and Graphics by Michel Vuijlsteke for IDeA
  -- Created: 31/6/1995 12:20
  -- Last modified: 28/08/95 12:15:00 
-->
</head>

Achteraf is er nog een beetje aan veranderd, zie ik: links en rechts wat syntaxfouten die ik zeker niet zelf gemaak heb, of knoppen die grafisch gemaakt zijn maar niet anti-aliased, wat ik ook zeker niet zo zou gedaan hebben.

Maar ‘t is wel substantieel hetzelfde gebleven.

…en wat is uw oudste nog ongewijzigd overblijvende website op het internet? :)

Ideologisch dispuut

vrijdag 2 mei 2008 in Sonstiges. Permanente link | 7 reacties

Vraagt Koen, in verband met een discussie over <em> versus <i> en <strong> versus <b>:

Hoe komt het dat ik zowel met <em> als met <i> italiek kan maken. Uit wat jullie schrijven maak ik op dat daar een soort ideologisch dispuut achter schuilgaat?

Jawel, inderdaad. De twee hebben hun eigen plaats, en zijn eigenlijk niet hetzelfde, al doen ze in de praktijk wel meestal hetzelfde.

Als ik <i> gebruik, dan wil ik letterlijk zeggen: “zet dit in italiek”, ‘t is te zeggen schuingeschreven. Als ik <b> gebruik, dan wil ik ook zeggen “zet dit vet”, ‘t is te zeggen in een zwaarder lettertype dan de gewone tekst.

Dat zou in de volgende paragraaf dus op zijn plaats zijn:

Vermeld in uw bibliografie de geciteerde werken steeds op de volgende wijze:

Vuijlsteke, M., Knowledge creates fear of God. The Unauthorized Autohagiography of C.Q. Necrovore. Part III , with appendices and tables, AKZ Press, Gent, 1992, xlvii+1089 p.

Achternaam, inita(a)l(en), titel, uitgeverij, plaats, datum, aantal pagina’s. De naam van de auteur moet vet staan, en de titel van het werk schuingedrukt. Als uw typmachine geen italiek font heeft, mag u de titel onderlijnen.

Wat hierboven gebeurt, is dat er uitdrukkelijk gezegd wordt hoe iets er moet uitzien. Dat heeft niets met de inhoud te maken, het is een vorm van opmaak.

Als ik <em> of <strong> gebruik, dan wil dat zeggen: “ik wil hier de nadruk op leggen”. Allebei zijn nadruk, allebei zijn een instructie aan het programma dat de HTML opmaakt om weer te geven dat de auteur een nadruk wou leggen.

Dat zou in de volgende paragraaf bijvoorbeeld op zijn plaats zijn:

Godvermiljaardenondedju!” riep boer Adiel. Of wacht. Zei ik dat hij riep? Neen, roepen kon men zoiets niet meer noemen. Krijsen, eerder.

Meestal wordt  <em> als italiek en <strong> als vet weergegeven, dat zijn allebei manieren om een nadruk te leggen waar we al jaren mee omgaan, en we weten wanneer we het ene en wanneer we het andere gebruiken.

Maa in theorie zouden <em> of <strong> op een andere manier uitgesproken kunnen worden in een schermlezer voor blinden en slechtzienden, bijvoorbeeld.

Of zou je kunnen zeggen dat <strong> niet in het vet zou gezet worden, maar bijvoorbeeld een lichtgele achtergrond zou krijgen om aan te duiden dat het om belangrijke tekst gaat.

Het verschil tussen <em>/<i> en <strong>/<b> is in de praktijk niet echt van enorm belang, maar het is een uitloper van een ruimere discussie.

Die discussie gaat over hoeveel van de vorm er in de HTML-code moet gestoken worden. HTML, zeggen velen, is er enkel om de structuur aan te geven. De vorm, die zetten we erop via CSS—een style sheet.

Dus dat men niet meer dit doet:

<p><font face="Arial" color="red" size="4"><b>Opgelet! Dit is een gevaarlijke operatie!</b></font></p>

maar wel dit:

<p class="waarschuwing">Opgelet! Dit is een gevaarlijke operatie!</p>

en dan in een style sheet—één apart bestandje—zeggen dat alle paragrafen van de klasse “waarschuwing” in Arial moeten gezet worden, in het rood, en wat groter:

p.waarschuwing {
   font-family: Arial;
   color: red;
   font-size: 2.0em;
}

Het voordeel is duidelijk: als ik zou beslissen dat ik waarschuwingen toch liever zwart in het italiek op een oranje achtergrond zet, dan zou ik in het eerste voorbeeld overal die codes moeten veranderen. In het tweede geval moet ik alleen color: red vervangen door color: black; background-color: orange en font-style: italic toevoegen.

Het wordt er ook allemaal eenvoudiger op om te lezen en te onderhouden, en het is ook properder: in het bovenstaande geval kan nóg veel tekst rood en vet zijn, maar daarmee is het nog niet noodzakelijk een waarschuwing.

En ook filosofisch zit het snorder (meer snor?): HTML wordt gebruikt voor enkel de structuur, CSS wordt gebruikt voor de opmaak.

Iets over HTML

dinsdag 29 april 2008 in Sonstiges. Permanente link | 22 reacties

Een korte uitleg over HTML voor mensen met een weblog die geen HTML kennen, en het eigenlijk ook niet willen kennen, maar dan van tijd tot tijd eens iets raars tegenkomen op hun weblog, en die zich dan ten onrechte dom voelen, of in alle geval vaak helemaal hulpeloos.

Zet u even neer, het kan een tijdje duren. Normaal doe ik hier een halve dag over, met veel handengezwaai en geteken erbij, met veel oefeningen en veel herhaling. Maar goed.

HTML is de taal waarmee webpagina’s gemaakt worden. Die ML op het einde van de afkorting staan voor “Markup Language”: het is een serie van codes die toegevoegd worden aan tekst, en met die codes (men noemt ze “tags”) wordt gezegd hoe de layout van de pagina er moet uitzien.

Een voorbeeld. Klik hier om een html-file in een nieuwe pagina open te doen. In elke webbrowser is er wel een mogelijkheid om de broncode van de pagina te bekijken (in Firefox is dat View > Page Source, of ctrl-U). Als je dat doet met de pagina van de vorige link, dan krijg je dit te zien:

<html>
 <head>
  <title>Welgekomen</title>
 </head>
 <body>
  <h1>Zet u</h1>
  <p>Drinkt iets. Gemakkelijk gevonden?</p>
  <p>Dit is een webpagina, met een beetje tekst erop. Kijk: <strong>deze tekst staat in het vet!</strong> En wat nu? <em>Deze tekst staat in het italiek!</em></p>
 </body>
</html>

Op het eerste gezicht ziet dat er misschien Chinees uit, maar het is écht niet zo ingewikkeld:

  • alles wat tussen < en > staat is een HTML-instructie (een “tag”).
  • een tag bestaat verplicht uit twee delen: een open-tag, en een sluit-tag.
  • zo open je een tag: <naam_van_de_tag>, en zo sluit je een tag: </naam_van_de_tag>.
  • binnenin de tag, tussen open en sluit, staat de inhoud. Die inhoud kan tekst zijn, en die inhoud kan ook andere tags zijn.

…en dat is het, eigenlijk. Zo. HTML heeft geen geheimen meer voor u. Al wat er nu overblijft, is een paar namen van die tags van buiten leren, en weten wat ze doen.

*
*    *

Terzijde, omdat de meeste mensen met een weblog er niet meteen mee gaan geconfronteerd worden behalve als ze aan hun template gaan prutsen: een webpagina heeft altijd dezelfde basisstructuur: een html-tag, met daarbinnen een head en een body. In de body staat de eigenlijke inhoud van de pagina die de bezoeker zal zien. In de head staan vooral technische instructies aan de webbrowser, dingen die de gebruiker niet meteen ziet op de pagina (zoals bijvoorbeeld de titel die de browser moet krijgen).

Ik ga in het vervolg alleen kijken naar dingen die binnen body gebeuren.

Terzijde voor puristen en mensen die er al meer van afweten: ik wéét dat ik soms verkeerde dingen zeg. Eigenlijk is <html>…</html> een element, waarbij <html> en </html> de open en close tags zijn, bijvoorbeeld. Maar dat maakt niet echt veel uit.

Om te beginnen: bekijk nog eens het voorbeeld hierboven. Die HTML zit eigenlijk in elkaar als een hele reeks doosjes, of Russische poppetjes:

  • een “doos” <html> … </html>
  • binnen die html-doos staan er twee andere “dozen”:
    <head> … </head> en <body> … </body>
  • binnen de body-doos staat een <h1>-doos, en dan twee <p>-dozen.
  • in de <h1>-doos en de eerste <p>-doos staat enkel tekst, in de tweede <p> staat ook tekst, maar daar zit één stukje tekst in een <strong>-doos, en een ander in een <em>-doos.

Zo kun je je ook een HTML-pagina voorstellen, als een in elkaar genestelde reeks doosjes:

Htmldink1

De gebruikte tags in de body in het stukje hierboven:

  • h1: een hoofding
  • p: een paragraaf
  • strong: tekst in het vet
  • em: tekst italiek (em van emphasis)

In wat meer detail.

<h1>…</h1>

Een hoofding, en wel van niveau één. Er bestaat ook een h2, h3, h4, h5 en h6.

In de praktijk ga je die hoofding-tags niet echt gebruiken binnen een weblogpost, maar je gaat ze wel terugzien in de templates: zo is de titel van het weblog vaak een h1, is een ondertitel een h2, en zijn de titels van de blogposten h3’s.

<p>…</p>

Een paragraaf. Okay. Een eerste eigenaardigheid van HTML: HTML trekt zich niéts aan van we paragraafindeling in de broncode.

Als ik in plaats van wat hierboven staat dit had gezet, zou dat niets veranderd hebben aan het uitzicht:

<h1>Zet                               u</h1>
<p>Drinkt iets.
Gemakkelijk
                                            gevonden?</p>

Alles wat zonder tags staat, wordt gewoon na mekaar getoond op de pagina. Alles wat meer dan één spatie is tussen woorden (meer spaties, tabs, enters, returns of watdanook), wordt genegeerd.

Wil je tekst die in paragrafen onderverdeeld is, dan moet je die in html-paragrafen steken, ‘t te zeggen, de inhoud van elke paragraaf tussen <p> en </p> zetten.

Tussen haakjes voor de WordPress-gebruikers die nu in koor roepen “Jamaar Michel ik maak mijn teksten niet aan met de WYSIWYG-editor maar in code view, en ik gebruik daar helemaal geen <p>’s of zo!” — ja, inderdaad. Dat is omdat WordPress “lijn1 [enter] [enter] lijn2” achter de schermen vertaalt naar <p>lijn1</p><p>lijn2</p>. Dankuwel WordPress! (En meteen weten diezelfde gebruikers waarom het soms in de soep loopt als “lijn1 [enter] lijn2” gewoon na elkaar getoond wordt als “lijn1 lijn2”.

<strong>…</strong>
<em>…</em>

Respectievelijk vet en italiek.

Aha. Nog een nieuw concept: er zijn binnen de body twee soorten tags. Dingen als h1 en p die op een nieuwe lijn beginnen, en dingen als strong en em die niet op een nieuwe lijn beginnen.

Die strong en em zijn gemakkelijk te ontcijferen als je de begin-tag als “dinges áán” leest en de eind-tag als “dinges uit”:

<strong>hallo en <em>goedemorgen</em> dit is een</strong> boodschap <em>voor u</em>

wordt dan

(vet aan) hallo en (italiek aan) goedemorgen (italiek uit) dit is een (vet uit) boodschap (italiek aan) voor u (italiek uit)

en dat geeft

hallo en goedemorgen dit is een boodschap voor u

Opgelet! Je moet tegelijkertijd ook de gedachte van de doosjes of de Russische poppetjes in het achterhoofd houden! Dit kan niet:

<strong> iets vet <em>italiek en vet </strong> italiek en niet vet </em> niet meer italiek en niet meer vet

Ik heb vet aangezet, en dan italiek aan, en dan probeer ik vet uit te zetten. Dat kan niet: eerst moet dat italiek uit, en dan pas kan ik vet uitzetten. Anders klopt het verhaal met de doosjes niet meer.

Dat moet dan zoiets worden, waarbij de open-tags en de sluit-tags elkaar niet overlappen:

<strong> iets vet <em>italiek en vet </em></strong> <em>italiek en niet vet </em> niet meer italiek en niet meer vet

Andere tags van hetzelfde genre als <strong> en <em> zijn bijvoorbeeld

  • <u>: onderlijnen, zo: onderlijnd
  • <s>: doorstrepen, zo: doorstreept
  • <tt>: in “getypte tekst” zetten, zo: getypte tekst

*
*    *

Dat was de basis. “Maar Michel, hoe zit dat met links? En vooral: wat is dat allemaal met beeldjes? Dát is eigenlijk waar ik benieuwd naar was!”

Ik zou het kunnen voor een tweede keer houden, maar ach, kom, zo moeilijk is het ook niet. Te beginnen met links.

Links

Een link is een tag zoals strong en em: kan in het midden van een lijn gebruikt worden zonder een nieuwe paragraaf te veroorzaken.

Alle links gebruiken dezelfde tag: <a>…</a>. Als ik wil dat “hiero” in de paragraaf “Klik zeker ook hiero.” een link wordt, dan doe ik dat zo:

<p>Klik zeker ook <a>hiero</a>.</p>

 En hoe wordt dan gezegd waar de link naartoe moet? Aha! Met een parameter. Verschillende tags kunnen verschillende parameters hebben (ook meer dan één). Die parameters worden in de open-tag gestopt; de parameter die aan de a-tag wordt toegevoegd om te zeggen waar de link heen moet, is de href-parameter—als volgt;

<p>Klik zeker ook <a href=”URL”>hiero</a>.</p>

Dat zegt het volgende: “hiero” is een link, en als men op de link klikt, dan moet de browser surfen naar het adres dat in die href staat.

Een andere mogelijke parameter voor de a-tag is target: dat zegt waar de link naartoe moet gaan. Als je geen target-parameter ingeeft, zal de link gewoon in hetzelfde venster open gaan, maar het kan ook anders:

<p>Klik zeker ook <a href=”URL” target=”_blank”>hiero</a>.</p>

als target gelijk is aan “_blank”, dan zal de link in een nieuw venster opengedaan worden. (Door de band niet gebruiken, trouwens, die target=”_blank”, links die in een ander venster open gaan zonder dat de gebruiker daar zelf voor gekozen heeft, zijn gewoon vies. Maar dat is nog een andere discussie.)

Beelden

Beelden, da’s een beetje gelijk links: een tag met een paar parameters.

De tag hier is <img>, en de belangrijkste parameter is src, waarin gezegd wordt wat de URL van het beeld is.

Dat ziet er dan zo uit:

<img src=”URL” />

“HOLA BEER!” hoor ik u in koor roepen! “Dat is een tag die open gedaan wordt, maar die wordt niet meer dichtgedaan! Leugenaar! Awoert! Mijn geld terug!”

Ah, wel. De tag wordt wél dichtgedaan. Als er tussen begin– en eind-tag niets staat, dan kan de HTML-code afgekort worden. Een lege paragraaf kan men op twee manieren schrijven:

<p></p>

of

<p />

…en dat is dus precies wat er hier gebeurt: om allerlei historische redenen is de <img>-tag altijd al leeg geweest. Het mag zo geschreven worden:

<img src=”URL”></img>

…maar in de praktijk doet niemand dat.

En om het allemaal nog een klein beetje verwarrender te maken: de meeste webbrowsers zijn heel erg lief voor slecht geschreven HTML en maken er geen groot probleem van als er in de plaats van <img /> gewoon <img> staat—dus in de plaats van een lege open-en-sluiten-tag enkel een open-tag. Het zou niet mogen, maar ze doen het wel.

*
*    *

Zo. Als alles een beetje meezit, dan begrijpt u nu wat dit betekent:

Voor alle luie drollen, hier een code om rechtstreeks te knippen en te plakken:
<a href="http://blog.bmaes.be/2008/04/12/houd-de-charlekijn-open.html"><img src="http://blog.bmaes.be/wp-content/charlekijn.png"></a>

Als het moet, want dit staat allemaal al sinds meer dan tien jaar zeker duizend keer uitgelegd op het interweb, kan ik meer vertellen over

  • genummerde en niet-genummerde lijsten
  • tabellen
  • <div>s en <span>s
  • flash en gelijkaardige

En als het écht moet, dan vertel ik graag meer over css, en javascript en dingen.

Help! Een DOM-probleem!

maandag 3 maart 2008 in Sonstiges. Permanente link | 9 reacties

Okay. Dit is a bit of a first: ik ga plat op de vloer liggen bedelen.

Ik zat eigenlijk al in bed, maar ik ben ervan wakker geworden. Er is iets dat ik niet in orde krijg, en ik zou het enorm graag in orde krijgen. Zo snel mogelijk, deze week. En ik ken er niet genoeg van om het meteen en goed te doen, wat wil zeggen dat ik er veel tijd zou moeten in steken, en ik heb niet veel tijd, argl.

Ik kan er ook geen geld voor betalen, maar, euh, er is de eer natuurlijk. Oh, en als ik de mevrouw/meneer/firma met een werkende oplossing een plezier daarmee kan doen: ik zet ze een week in een reuzengrote banner op elke pagina van mijn weblog!

Het probleem is, zoals de titel laat vermoeden, een DOM-probleem. En het gaat om iets technisch, dus Sandra mag nù afhaken.

Korte omschrijving

Ik wil een uitklapding dat een onbeperkt aantal keer kan voorkomen op een pagina, genested kan zijn, en gemakkelijk in het (manueel) html-coderen is.

Werking

Een “uitklapding”, dat is iets dat er zó uitziet:

Uitklapding1

Als ik op “Agenda van de vergadering” klik, of op dat vraagteken-icoontje, dan gebeurt er dit:

Uitklapding2

Dus: het icoontje verandert, en er verschijnt iets onder die eerste zin. Dat “iets” is in dit geval een lijst, maar dat kan om het even wat zijn: één of meer paragrafen, lijsten, tabellen…

Klikken op “Agenda van de vergadering” of op het groene vraagtekentje, doet de tekst weer verdwijnen.

Er moet meer dan één uitklapding op een pagina kunnen staan, bijvoorbeeld:

Uitklapding3

Als ik op één van die drie plusjes klik, of op de tekst die ernaast staat, dan moet daaronder iets uitklappen. Om het gemakkelijker te maken: het gaat hier niét om een toggle group, dus het kan zijn dat er twee of zelfs drie van die plusjes uitgeklapt zijn tegelijk. Voorbeeld:

Uitklapding4

…en hier is al meteen een laatste complexiteit aan bod gekomen: in zo’n uitgeklapt gedeelte van zo’n uitklapding, kunnen er nog andere uitklapdingen zitten. En dààrbinnen nog eens uitklapdingen.

Ik ga dat niet tot in het belachelijke doen, maar het zou wel kunnen dat er pakweg drie, maximum vier niveaus zijn.

HTML

De html gaat met de hand moeten aangemaakt worden, en mag dus niet complex zijn. In de titel van het uitklapding (dat stuk waarop geklikt kan worden), moet ook html-code mogelijk zijn. Het geheel moet (in uitgeklapte toestand, zonder dat die plusjes er minnetjes zichtbaar zijn of dat het in– en uitklappen zelf werkt) kunnen gepreviewed worden met een eenvoudige style sheet.

De html-code zelf ligt ook al vast:

<div class="toggle">
   <tag class="clicktoggle">
      Dit is de zin waarop kan geklikt worden.
   </tag>
   <tag class="hidden">
      Dit is wat er uitkomt als hierboven geklikt wordt.
   </tag>
</div>

Waar hierboven “tag” staat, kan een willekeurige html-tag staan, bijvoorbeeld:

<div class="toggle">
   <p class="clicktoggle">
      Dit is de zin waarop kan geklikt worden.
   </p>
   <ol class="hidden">
      <li>ten eerste</li>
      <li>ten tweede</li>
      <li>ten ten derde</li>
   </ol>
</div>

Of nog:

<div class="toggle">
   <p class="clicktoggle">
      Dit is de zin waarop kan geklikt worden.
   </p>
   <div class="hidden">
      <p>Kies een optie:</p>
      <div class="toggle">
         <p class="clicktoggle">Keuze één</p>
         <p class="hidden">Goed gekozen!</p>
      </div>
      <div class="toggle">
         <p class="clicktoggle">Keuze twee</p>
         <p class="hidden">Awoert!</p>
      </div>
      <p>...en ga dan verder.</p>
   </div>
</div>

De HTML ligt écht al vast, er kan niet meer aan veranderd worden. Als je klikt op een element met class “clicktoggle”, moet het eerstvolgende element met class “hidden” getoond worden. Of, als het al getoond wordt, verborgen worden. 

Voor het editeren, zuiver ter info, zou dat laatste er bijvoorbeeld zo uitzien:

Dit is de zin waarop kan geklikt worden.

Kies een optie:

Keuze één

Goed gekozen!

Keuze twee

Awoert!

…en ga dan verder.

(daar hoeft niemand zich verder iets van aan te trekken trouwens, van hoe dit er precies uit ziet)

DOM, en details

Zoals uit het tweede voorbeeld duidelijk is: op de hele pagina staan geen IDs bij al die klikdingen, en natuurlijk ook geen javascript of behaviours of watdanook. Al die dingen moeten er via DOM geplaatst worden, zodat de juiste klik het juiste ding de juiste actie laat ondernemen.

Ik geef wel een voorbeeld met een vraagteken, maar het zal in de praktijk enkel gaan om plus-tekens die min-tekens worden als ze uitgeklapt zijn, en weer plustekens als ze ingeklapt zijn.

Je kan daarbij gebruik maken van JQuery en/of YUI. Van die uitschuifbeweginkjes of andere fancy stuff hoeven niet: gewoon verschijnen en verdwijnen is goed. Het màg wel, als je je daartoe geroepen voelt.

De bedoeling is dat het werkt in FF, IE7, maar ook perfect in IE6.

Ik kan me inbeelden dat dit niet écht moeilijk is voor wie weet waar hij mee bezig is. Let wel! Ik ben niét op zoek naar pointers in de zin van “zou je niet eens proberen om dat zó of zó op te lossen”, of “volgens mij lijkt dit heel erg op X, Y of Z”. Ik zoek een oplossing die volledig kant-en-klaar is, een stuk code dat ik zó kan gebruiken.

Vergoeding

Zoals ik zei: ik heb er geen geld voor te geef. Maar wel mijn eeuwige dankbaarheid. En pinten als we mekaar zien. En als dat u een plezier doet: een banner op deze site.

Praktisch

Misschien best reageren hieronder, wie van plan is om er een gooi naar te doen. Dat er geen dubbel werk gebeurt.

Ik weet niet wat ik ervan moet verwachten, maar ik hoop er het beste van. Ik hoop dat ik er in de loop van deze week mensen een plezier mee kan doen.

(vingers gekruist)

Onopvallend

zaterdag 24 juni 2006 in Internet. Permanente link | 20 reacties

Kijk, een stukje logfile van de recente wijzigingen aan een website waar ik mee bezig ben:

Svnlog

‘t Is ver gekomen, als unobtrusivering een woord is dat de meeste Mensen In De Branche wel zouden begrijpen. Waar het op neerkomt, is nochtans een simpel concept.

Er wordt al van het begin van het WWW naar gestreefd om de inhoud van de presentatie gescheiden te houden. Dus als je onder een hoofding een tekst wil die de gebruiker toeroept, dat je liever niet iets zet als

<p><font face="Arial" size="6">Inleiding</font></p>
<p>Dit mag <b style="color: red">zeker niet</b> vergeten worden.</p>

Hier heb je dan beslist dat “Inleiding” in Arial en groot zal staan, en “zeker niet” in het rood zal komen.

Nee, je zet beter iets als

<h1>Inleiding</h1>
<p>Dit mag <strong>zeker niet vergeten worden</strong>.</p>

…dan kan je nog, afhankelijk van hoe de gebruiker de webpagina zal zien, beslissen hoe die <h1> en die <strong> er precies moeten uitzien. Voor blinden zou je kunnen zeggen dat de <strong> met luide stem moet voorgelezen worden, als het uitgeprint wordt op een zwartwitprinter zou je kunnen zeggen dat de tekst in hoofdletters moet staan, en op een scherm zou je de tekst bijvoorbeeld knipperend en in het rood kunnen zetten.

Bon, goed. Klaar, helder, duidelijk, simpel. Dat doen we tegenwoordig allemaal door propere HTML te schrijven en alle layout in CSS te gooien.

Een stapje verder dan inhoud en presentatie te scheiden, is inhoud en gedrag van elkaar te scheiden. Alle javascript uit de pagina te halen, en de pagina bruikbaar houden zowel mét als zonder javascript.

Voorbeeld.

Ik had een pagina waar ergens inhoud in een doosje staat met twee tabs:

Tabs01

Die twee tabs moeten omgewisseld kunnen worden zonder dat de pagina herlaad herladen wordt. Eenvoudig te doen met wat css en javascript, bijvoorbeeld zoals hier: twee verschillende <div>s, en bij een klik op “Een” of “Twee” wordt de zichtbaarheid van de twee omgewisseld.

Maar dat is dus niet ideaal. Om te beginnen, als stijlen af staan, ziet het er zó uit:

Tabs02

Daarnaast, als javascript af staat maar stijlen staan aan, kun je nooit aan de inhoud van de tweede tab geraken.

Enfin, tinternet zou tinternet niet zijn als daar allemaal niet al lang oplossingen voor gevonden waren. En dàt, beste kijkbuiskinderen, is wat bedoeld wordt met die unobtrusive dinges: zelfs al heb je vreemde combinaties van javascript aan/uit, css aan/uit, aardige browser, print je de pagina uit, laat je ze voorlezen, zelfs dàn doet het nog zinnige dingen.

Waarschuwing: niets wereldschokkend of zo volgt hoor, maar als ik het toch moet doen, dan kan ik het net zo goed ook opschrijven terwijl ik het doe. :)

Stap één: de pagina zó zetten dat ze werkt en zin heeft zonder css en javascript.

<h2>Een</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dapibus, neque in fermentum ultricies, massa enim laoreet urna, aliquet auctor purus enim quis nisi. Nunc commodo sapien vel sapien.</p>

<h2>Twee</h2>
<p>Praesent tellus pede, mattis sed, iaculis id, sagittis sed, libero. Phasellus ultrices vestibulum risus. Aliquam erat volutpat. Vestibulum venenatis nisi et velit. </p>

Stap twee. Een aantal haken toevoegen aan de HTML waar de CSS en het javascript aan vastgehangen kan worden:

<div class="pane" id="een">
 <div id="tabseen"><h2>Een</h2></div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dapibus, neque in fermentum ultricies, massa enim laoreet urna, aliquet auctor purus enim quis nisi. Nunc commodo sapien vel sapien.</p>
</div>

<div class="pane" id="twee">
 <div id="tabstwee"><h2>Twee</h2></div>
 <p>Praesent tellus pede, mattis sed, iaculis id, sagittis sed, libero. Phasellus ultrices vestibulum risus. Aliquam erat volutpat. Vestibulum venenatis nisi et velit. </p>
</div>

Elk ding staat in een <div> met class “pane”, zodat ze met één moeite een achtergrond en border en font en dergelijke kunnen krijgen.

De twee dingen krijgen elk een uniek ID, zodat ze gemakkelijk aangesproken kunnen worden, bijvoorbeeld om ze zichtbaar/onzichtbaar te maken.

De titels staan in <div>s met een unieke IDs, zodat er gemakkelijk een <h2> bij kan geplaatst worden.

Stap drie. Op de pagina zelf het javascript in orde te krijgen. In volgorde, voor de twee <div>s:

  1. een <h2> aanmaken
  2. een <a> aanmaken
  3. een tekstnode aanmaken
  4. de tekstnode in de <a> steken
  5. een lege href in de <a> steken
  6. een onClick-handler toevoegen aan de <a> waarbij de ene <div> getoond wordt en de andere verborgen, en omgekeerd
  7. de <a> in de <h2> steken
  8. de <h2> bij de ene nà en bij de andere vóór de er al staande <h2> zetten

En als dat gedaan is, de tweede <div> alvast onzichtbaar maken, natuurlijk. In javascript geeft dat iets dergelijks (ja, ik weet dat het properder kan):

// een
var een=document.getElementById('tabseen');
var hoofdeen=document.createElement('h2');
var linkeen=document.createElement('a');
var teksteen=document.createTextNode('Twee');
linkeen.appendChild(teksteen);
linkeen.setAttribute("href", "#");
linkeen.setAttribute("onclick", "document.getElementById('twee').style.display='block';document.getElementById('een').style.display='none'; return false;");
hoofdeen.appendChild(linkeen);
een.appendChild(hoofdeen);

// twee
var twee=document.getElementById('tabstwee');
var hoofdtwee=document.createElement('h2');
var linktwee=document.createElement('a');
var teksttwee=document.createTextNode('Een');
linktwee.appendChild(teksttwee);
linktwee.setAttribute("href", "#");
linktwee.setAttribute("onclick", "document.getElementById('een').style.display='block';document.getElementById('twee').style.display='none'; return false;");
hoofdtwee.appendChild(linktwee);
twee.insertBefore(hoofdtwee,twee.firstChild);

document.getElementById('twee').style.display='none';

Een voorbeeldje van wat het in het echt doet: alhier.

Stap vier. Bon, dat werkt dus. Tijd om het automatisch te laten gebeuren. De javascript-code zomaar in de html laten staan is vies, dus zetten we alles in een externe file.

Het javascript moet automatisch uitgevoerd worden, en de manier om dat te doen is om het te verbinden met het onLoad-event op de <body> van de html-pagina.

Naiefgewijs zou je dat kunnen doen met

<body onload="prepTabs()">

of zoiets, maar wat als er al andere onLoad-events zijn? Aha! Hierzie, addLoadEvent() to the rescue.

Stap vijf. CSS toevoegen, ook in een afzonderlijk bestandje.

En dan nog wat opkuis, omdat de CSS op een <a> in een <h2> zit, ook voor de tab die eigenlijk niet klikbaar is, maar dat zijn details. 

Resultaat: hierzo. Een HTML-file zonder javascript, die werkt zonder dat javascript.

*
*   *

update voor wie het nog volgde… :)

In Internet Explorer 6 is het niet mogelijk om sia de “propere” DOM-methode setAttribute de onClick-handler van een node te verzetten.

Dan doe je het maar op deze manier, die in het absoluut en filosofisch gezien een eind minder mooi is, maar wel het voordeel heeft (a) overal of toch bijna te werken en (b) gemakkelijker te begrijpen is voor niet-programmeurs en (c) ook nog regels code uit te sparen:

function preptabs() {
document.getElementById('tabseen').innerHTML='<h2><a class="active" href="#">Een</a></h2><h2><a class="inactive" onclick="document.getElementById(\'twee\').style.display=\'block\'; document.getElementById(\'een\').style.display=\'none\'; return false;" href="#">Twee</a></h2>';
document.getElementById('tabstwee').innerHTML='<h2><a class="inactive" onclick="document.getElementById(\'een\').style.display=\'block\'; document.getElementById(\'twee\').style.display=\'none\'; return false;" href="#">Een</a></h2><h2><a class="active" href="#">Twee</a></h2>';
}

Ach ja.

Voorbeeldje alhier. Ik kan het alleen maar testen in IE6, Firefox en Opera, bij gebrek aan Macintosh in de buurt. Maar het zou normaal gezien moeten werken, enfin, hoop ik toch.

Prutsen en doen

woensdag 21 juni 2006 in Computers en dingen. Permanente link | 12 reacties

‘t Is niet genoeg dat ik op het werk met css en dingen bezig ben, nà mijn uren is het ook van dat: trekken en duwen en duwen en trekken aan templates en dingen in WordPress.

Eigenlijk feitelijk is dat wel wijs, zo prutsen met templates. Hier ook weer: gewoon het hoofd erbij houden, niet panikeren, en met enige regelmaat wat afstand nemen en een reality check uitvoeren.

Zoals daarnet: ik gebruik een aantal plugins en wat eigen php om een aantal dingen te doen die WordPress niet van zichzelf kan doen.  Dat geeft als gevolg dat ik door drie keer gelijkaardige dingen, drie verschillende mark-ups kreeg:

  1. <ul id="ding">
      <li>hoofding
        <ul class="spel"><li>item</li>
          <li>item</li></ul>
      </li>
      <li>hoofding
        <ul class="spel"><li>item</li>
          <li>item</li></ul>
      </li>
    </ul>
  2. <h3>hoofding</h3>
    <p>item</p>
    <p>item</p>
    <h3>hoofding</h3>
    <p>item</p>
    <p>item</p>
  3. <p>hoofding
    <small>item, item</small></p>
    <p>hoofding
    <small>item, item</small></p>

Die “hoofding” en “item” moeten telkens (ongeveer) dezelfde style krijgen, dus dat gaf op geen tijd atrociteiten in de zin van

div#een ul#ding li, div#twee h3, div#drie p {
regel regel regel
}

en allerlei kunst– en vliegwerk om die <small>s in display:block te krijgen, en prutserijen met uitzonderingen op uitzonderingen (ul li ul.bla li.gerief en zo).

Enfin, ‘t had geen uitzicht meer.

En dus—kogel door kerk te G.: de plugins zelf bepoteld. De output daarvan geharmoniseerd. Het kwaad bij de wortel aangepakt.

Tja, veel plugins upgraden zal er dus niet aan te pas moeten komen. Of de wijzigingen zouden ook moeten opnieuw overgenomen worden natuurlijk. Heb ik mezelf lekker (heel erg relatief) onmisbaar gemaakt! :)

<rant>
kijk hé! dààr krijg ik dus het vliegend heen en weer van bij WordPress: die hele plugin-architectuur die allemaal heel erg proper zou kunnen zijn, maar dat in de praktijk helemaal niet is. Het zou zo goed zijn mochten al die plugins hun gegevens gewoon als een structuurtje teruggeven in plaats van html en data vrolijk te mixen. Maar nee: zet er nog maar een hardgecodeerd tagsken tussen mannen! Toe maar! Een stijltje meer of minder, daar kijken wij niet op! En uiteraard structureren wij al onze gegevens met <li>’s, ah ja, da’s toch, hoe-was-het-ook-al-weer, semantisch zeker hé?
</rant>

Huh?

dinsdag 20 juni 2006 in Computers en dingen. Permanente link | 8 reacties

Wat krijgen we nu? Waar gaan we dat schrijven?

Ik ben een layout aan het omzetten naar xtml/css, en dat gaat vlotjes? Ik kom geen noemenswaardige problemen tegen, het lukt allemaal proper cross-browser—IE5/6/7, FF, zelfs de Macintosh-jongens doen niet vervelend!

Ik moet zeggen dat ik er niet naar uitkeek, om me met die zooi bezig te houden, maar dat het voorlopig nog niet echt tegensteekt. Niet dat het een uiterst complexe layout is, maar ook niet dat het super-simpel is: en toch lukt dat zonder last.

Ik denk dat het geheim is: gewoon van nul beginnen. Vertrekken van andermans templates of van hap-snel-klaar-dingen op tinternet, dat is een recept om reddeloos in de soep te lopen.

Nee: zelf alles in elkaar boksen. En alles zo eenvoudig mogelijk houden. En geen hacks tenzij het echt nodig is: ik ben een dikke honderd css-regels verder, en ik heb er voorlopig nog maar twee: een gif in plaats van een png voor een masker dat in een header komt als het IE5/6 is, en een menuutje dat ik in IE6/7 nét iets hoger wil zetten dan in al de rest (0.4 em hoger, om precies te zijn).

En die twee dingen doe ik gewoon via conditional comments:

<!--[if lte IE 6]>
<link rel="stylesheet" href="css/styles-ie.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/styles-ie7.css" type="text/css" />
<![endif]-->

niets meer te html *-nonsens, die overigens niet meer werkt in IE7.

En behalve van nul beginnen, ook, zoals bij zoveel van die dingen: rustig blijven. Het niet te ver zoeken als het niet echt moet.

Zoals één probleem dat ik had waarbij de laatste tab bovenaan (met een zoekformulier erin) op een volgende lijn kwam, maar enkel in Safari 2+ op Mac OSX 10.4. De tabs staan in een <ul>, en de <li>’s hebben een padding—die padding beprutsen? Pixelneuken tot het in orde komt? Eéntje meer, reload, zien of het lukt, ééntje minder, font-size wat groter, font-size wat kleiner? Beetje trekken aan letter-spacing? Welnee: gewoon de <ul>, die top en right absolute gepositioned stond, een expliciete width geven: daar verslikte Safari zich blijkbaar op.

Of nog zo één: het logo staat te hoog. Een margin of padding of godbetert een border toevoegen? Allerlei relatieve of absolute positioneringen proberen? Welnee: gewoon vertical-align: bottom doen en alles is in orde.

Gnaa. ‘t Doet deugd, als al die jaren nonsens-sites maken op het internet plots blijken hun nut gehad te hebben. :)

Geschreven al luisterend naar: Beck – Odelay – Where It’s At

Logica en bekering

donderdag 13 april 2006 in Computers en dingen. Permanente link | 7 reacties

Hm. Toch niet helemaal mee eens.

Om te beginnen denk ik dat het een fout is om te zeggen dat webstandaarden “XHTML” zouden zijn en vice versa. Spreek dan eerder van valide CSS en HTML, of dat nu 4.01 of XHTML 1.0 of 1.1, strict of niet is, en van scheiding van inhoud en presentatie, en van unobtrusive javascript, en dergelijke.

“Webstandaarden” lijken in het artikel op nono wel gereduceerd tot “tabellen vervangen door divs”. Dan krijg je in het slechtste geval een soort wildgroei van tientallen in elkaar geneste <div>s, en wordt uiteindelijk elke <font color=”red”> vervangen door <span style=”red”>, wat nauwelijks een verbetering is.

Want iemand mag me toch eens komen uitleggen hoe dit:

<div class="container">
  <div class="linksboven">
    <div class="rechtsboven">
      <div class="linksonder">
        <div class="rechtsonder">
          <div class="dummy">lorem ipsum</div>
        </div>
      </div>
    </div>
  </div>
</div>

—en zo bestààn er dus stapel tutorials, om afgeronde hoekjes op dingen te krijgen bijvoorbeeld—intrinsiek beter is dan

<table class="whatever">
  <tr>
    <td>lorem ipsum</td>
  </tr>
</table>

Ik denk persoonlijk dat er een grotere stap te zetten is dan van tabellen naar div/span-opmaak, en wel van tag soup naar semantische code.

Ja, XHTML kan daarbij uiteraard een gemak zijn, en uiteraard schrijf ik ook in XHTML, maar die X voor de HTML is echt niet het doel op zich, en zeker geen garantie voor goeie sites. [foei trouwens, hihi]

En kader dat dan maar meteen in de hele discussie van metadata en zooi—dààr is bekering nodig. :)

Geschreven al luisterend naar: Demis Roussos – The Golden Years – Rain and tears (Aphrodite’s Child)

Formulieren

dinsdag 11 april 2006 in Sonstiges. Permanente link | 4 reacties

Bart-van-Netlash vraagt zich af of de naam van formuliervelden op tinternet best links of rechts uitgelijnd staat.

…ik vind het zoals het bij Netlash zelf is nog beter, te weten met de naam van het veld boven het veld zelf. En eventuele bijkomende instructies in een kleiner lettertype onder het veld, eventueel in ‘t rood of zo als het echt belangrijk is.

[Al zou ik persoonlijk, Tufte indachtig, eerder met spatiëring en niet met borders rond de fieldset werken]

[Zo’n fieldset{border:0;padding:0;} en legend{padding:10px 0 3px 0;} of zo. :)]

Geschreven al luisterend naar: Demis Roussos – The Golden Years – I want to live (Aphrodite’s Child)

Lange woorden

woensdag 17 maart 2004 in (geen categorie). Permanente link | 173 reacties

In het Nederlands is het eigenlijk zinloos om te spreken van het langste woord, want bijvoorbeeld hottentottententententoonstelling kun je zonder de minste moeiete en volledig grammaticaal juist uitbreiden naar hottentottenten­tenten­toonstellings­makersopleidings­programmaontwerpers­computerscherm­reparateuren­vakvereniging.

Euh, die nonsens gewoon maar om te zeggen dat een soft hyphen (&shy;) niet werkt in Mozilla/Firefox. Wel in Internet Explorer, vergroot en verklein het venster maar om na te kijken!

Vriendjes

Zoek

<insert standard disclaimer>

Alles wat hier staat is mijn eigen opinie. Het wordt niet nagelezen of goedgekeurd door mijn werkgever voor het on-line komt, en ik bied geen enkele garantie voor kwaliteit of correctheid.

Mijn werkgever is het niet noodzakelijk eens met wat ik schrijf, en het spreekt vanzelf dat hij dan ook op geen enkele wijze aansprakelijk kan zijn voor wat ik hier publiceer.

Ter info

Eén van mijn e-mailadressen is michel [at] zog punt org. Normaal gezien antwoord ik daar, buiten de kantooruren, onmiddellijk op.

Valideert, in principe: css & xhtml.
Gemaakt met WordPress.
Syndicatie: Entries (RSS) en commentaar (RSS).



ISSN 1780-1338