Er is een eerste keer voor vanalles

zaterdag 18 augustus 2012 in Sonstiges. Permanente link | Geen reacties

Ik heb vandaag voor het eerst in mijn leven:

  • transition (en -webkit-transition, en -moz-transition, en -ms-transition, en -o-transition) gebruikt in css
  • een WordPress-theme gemaakt op basis van een min-of-meer-framework-achtig dink, Bones
  • gerief in zo’n Kassett-doos van Ikea gestoken, en de indruk gehad dat het daar nu voor een hele tijd een definitieve rustplaats gevonden heeft

Souvenirs en brol

Papieren geklasseerd, vandaag. Of beter: dozen waarin gerief en zooi zat die eigenlijk al 25 jaar of meer van kamer naar kot naar kot naar huis naar huis zijn verhuisd, telkens min of meer ongeklasseerd in nieuwe dozen gestoken. 

Het klinkt erger dan het is, want het was eigenlijk al tot de essentie geconcentreerd: agenda’s, boekjes, hier en daar een souvenir van op reis, stapels brieven en kaartjes, soms eens iets van school of univ of werk. 

Dat nu dus in een doos zit om dan eens naar te kijken. Er zit veel geschrijvsel van mij bij: een dik filmscript, een paar uitgewerkt verhaal, en vooral veel aanzetten tot en notities voor. 

Die ik de wereld niet kond ga maken, ik zou wel gek zijn. 

Pakommilfoo

zaterdag 17 mei 2008 in Sonstiges. Permanente link | 3 reacties

…maar dan helemaal, helemáál pas comme il faut: de website van Kommil Foo.

Kommilfoo

Mystery meat, dat is dat soort niet nader geïdentificeerd vlees waaruit hot dogs en döner kebabs gemaakt zijn. Geen mens die weet wat er precies in zit.

Mystery meat navigation, dat is wat er op de website van Kommil Foo staat: geen mens die weet wat er gebeurt als ik ergens op ga klikken. Al die blokjes inde achtergrond rond dat middenblok doen namelijk iets. En klikken op die “kf” doet ook iets, en op de achtergrond klikken doet óók iets.

En oh ja: waar wat staat, geen mens die het weet. Op bijna-random-momenten komt er een sitemap naar boven, dat wel. Maar nog heb ik de indruk dat ik niet weet wat waar staat.

Ik was op zoek naar een foto van hun laatste voorstelling, om bij een artikel te zetten. Zoek maar. Leuk hoor.

Een nieuwe website, en dergelijke

zaterdag 16 februari 2008 in Sonstiges. Permanente link | 2 reacties

Ik ben een website aan het maken, die zal beheerd worden door mogelijks heel veel verschillende mensen.

Er zijn geen deadlines, er is geen budget, er zijn niet echt richtlijnen. Dat is redelijk verlammen aan de ene kant, maar andere andere kant ook wel een groot gemak.

In de loop van vorige week er dan maar ernstig aan begonnen, in eigen beheer en op eigen tempo—na een paar maand schemerbestaan op Dreamhost:

  • Stukje webruimte gekocht bij Openminds: mensen met een uitstekende reputatie, en ook Gents. De eindgebruiker zit ook in Gent en zat er heel erg mee in dat ze naar Amerika zouden moeten gaan voor support en zo.
    Ik heb er een halve gigabyte ruimte, maar ik ben niet van plan er veel beelden en geluid en filmpjes en zo op te zetten.
  • Foto’s: Flickr pro account aangemaakt.
  • Filmpjes: Youtube-account aangemaakt.
  • Andere grote bestanden: een media.domeinnaam.tld-account aangemaakt bij Dreamhost, voor voor (virtueel) onbeperkt downloaden van pakweg zware Powerpoints of dergelijke.
  • CMS geïnstalleerd: Drupal 6.0. Na jàren zagen en doen, uiteindelijk dan toch.
  • Mail: GMail. Om één centraal adres te hebben, waar ook nog eens een redactiekalender en Google docs en zo kunnen aan hangen. Het Gmail-adres zal wel niet getoond worden, het zal een info@ worden die er naar verwijst, zoals bij Gentblogt.
  • Statistieken: Google Analytics tracker geïnstalleerd.

Mensen, mensen, mensen. Zó een enorm gemak dat al die dingen zijn, en zó dat ik er naar uitkijk.

Ladies and gents, we have a winner

maandag 4 februari 2008 in Sonstiges. Permanente link | 5 reacties

Wohow. Ik heb al veel websites gezien, en, euh, in verband met www.wittezaal.be: mensen die zo’n websites maken (in dit geval www.mrhenry.be, maar ik waarschuw u alvast, niet bekijken terwijl u op het werk zit) zouden eens een avond naast mijn madam moeten zitten terwijl ze informatie zoekt voor www.gratisingent.be.

Misschien wordt dat wel een aangename ervaring hoor. Misschien ook niet.

Deredactie.be

dinsdag 8 januari 2008 in Sonstiges. Permanente link | 20 reacties

Zeer in de snelte, hoe meer ik er naar kijk, op hoe meer dingen ik wellicht kom. En ik moet er niet te veel over nadenken of ik wil iets rigoureus schrijven, en laat ik daar nu eens geen zin in hebben.

Samenvattend. Concepten: goed. Hoop ik. Design, interactie en IA: het is nooit te laat om de dokter te bellen. Call now, and remember: if lines are busy, call later, but do call.

Voor de rest en meteen met de deur in huis: ik vind aan deredactie.be drie dingen uitstekend. Naast het concept van de integratie van de redacties, natuurlijk: klikken op het geluidsfragmenticoontje zal wat mij betreft de herontdekking van de radio zijn.

1. Het categorieënsysteem

Ik ga ervan uit dat ze een meesterplan hebben en dat ze weten wat ze aan het doen zijn, en ik ben dan ook bereid me op een tak te begeven en het een uitstekend en moedig idee te vinden: een hele reeks “grote” rubrieken, die elk een “home page” hebben (op dit moment: binnenland, politiek, verhofstadt iii, buitenland, vs-verkiezingen, cultuur & media, vrt in het nieuw, economie, de Vlaamse provincies en mediatheek), en dat is het.

Dat maakt dat er op géén tijd zoveel als gewenst nieuwe thema-home pages kunnen bijgemaakt worden, in geval van rampen of verkiezingen bijvoorbeeld.

Ze hebben zich (gelukkig!) niet laten vangen aan een soort boomstructuur, of orthogonale categorieën, of dergelijke. Buitenland, politiek, vs-verkiezingen allemaal samen: doe maar!

Elk artikel staat in één of meer van de beschikbare categorieën, en van elk daarvan worden bij het artikel de laatste andere artikels getoond. Simpel.

Wat me écht waar enórm boeit, is wàt het meesterplan is. Wie heeft dat hoe ge-informatie-gearchitecteerd? Welke richtlijnen voor aanmaak van categorieën? Welke richtlijnen voor categorisatie? Nu loopt het misschien al mis: Sport zit er (nog?) niet tussen, en een artikel over Sven Nys op tv staat in “cultuur en media” én in “media”. Wie houdt daar een kwaliteitsoog in het zeil?  Hoe gaat ze dit leefbaar gehouden worden op langere termijn, als er tientallen categorieën zullen bijgemaakt zijn? Hoe wordt dit ontsluitbaar? Want goed, we hebben dus de categorieën, en dat is heel veel waard. Maar buiten dat? Ik wil naast, onder, bij elk artikel óók de auteur, waar van toepassing: hoe kom ik te weten waar alle artikels/foto’s/interviews/fragmenten/films van Koen Fillet staan? Wie zegt me wie die camera, montage, regie deed? En hoe vind ik terug wat er precies gebeurde op 6 januari tussen 15u en 16u?

Als blijkt dat er géén meesterplan is, dan valt de site bij deze in duigen, en weet ik niet hoe dit recht te trekken is. Maar daar gaan we nu even niét van uit, denk ik.

2. River of news

Uitstekend idee, het laatste nieuws dat ten allen tijde beschikbaar is. Prominent aanwezig zoals het hoort. De nadruk op het element tijd is logisch, wenselijk, en goed uitgevoerd. De praktische uitwerking naar vorm en interactie kan veel beter, maar alla.

3. De multimedia

Videoband: de uitwerking is opnieuw voor (veel) verbetering vatbaar, maar dit voor mijn part het eerste CoverFlow-achtig ding dat ik echt nuttig vind.

Embedded audio en video: de uitwerking kan nog beter, maar ik ben onder de indruk. Veel inhoud, goede kwaliteit, vanzelfsprekend in het gebruik., gemakkelijk te bookmarken en in eigen blog te steken. Het is wel zo dat met Flash tegenwoordig gemakkelijke videootjes en geluidjes poepsimpel geworden zijn, maar bon.

*
*      *

Er zijn een groot aantal zaken in het algemeen die voor verbetering vatbaar zijn (wordt er ergens een thema duidelijk?). In min of meer willekeurige volgorde, verre van exhaustief of echt gegroepeerd:

Uitzicht

Al met al: niet slecht. Men moet er gewoon aan worden, maar dat is altijd. Er zit een goed concept achter, en dat is al bijzonder veel, vind ik. De rest zijn details die aangepakt kunnen (en moeten!) worden.

  • Dingens als details, u weet wel, die dingen waar de duivel in zit. Dit is slordig, rommelig en onsamenhangend. Foei.
  • Dingen als contrast: lichtgrijs op lichtpaars, wit op lichtgroen, da’s om miserie vragen. Er zit een logica in de kleuren (dat groen links wordt steeds lichter naar onder toe, en de letters gaan dus van wit naar donkergrijs, maar het werkt niet goed).
  • Dingen als die balk met de gezichten, die naar mijn gevoel maar een fractie zo hoog moet zijn om nog duidelijk te zijn.
  • Dingen als waar ben ik: als ik op “economie” klik als trefwoord, dan weet ik enkel aan dat paarse balkje in het menuutje rechts in het midden van de pagina waar ik zit. Niet goed. Zelfs de paginatitel verandert niet.
  • Het korte loopje in de fimpjes als je op de pagina terechtkomt, is bijzonder irriterend.
  • Ik heb er niet naar gekeken, maar ik verwacht Enige Strenge Woorden Van Roel.
  • Doe eens iets aan uw printstylesheet, jongens: die laatste nieuwsitems hoeven er écht niet in twee en een halve agina voor het artikel te staan
  • De icoontjes zijn slecht. Ik heb er voor de leute eens wat meer contrast in gestoken, maar ze blijven maar bleh:

Iconred1

Interactie

Er loopt vanalles spaak. Een echt goed product waar genoeg tijd voor was, stààt er volledig, dit is nog verre van af. Maar niets onherstelbaars, daar niet van.

  • Customizeerbaarheid: ik verwacht geen versleepbare dingen of Facebook, maar kan ik bijvoorbeeld érgens ingeven in de toekomst dat, ik geef maar een absurd voorbeeld, provincie Antwerpen uit mijn river of news mag?
  • Als ik op plaatsen als http://www.deredactie.be/cm/de.redactie/VRT-gezichten/ kom, dan loopt het helemaal de soep in. Ik verwacht dààr bijvoorbeeld nochtans de lijst van de VRT-gezichten.

  • Hier is enkel titel en “buitenland” klikbaar:
    Iconred2
    Ik verwacht dat klikken op de icoontjes me meteen respectievelijk filmpje en radioverslag geven.
  • Hier verwacht ik dat een klik op de titels bovenaan me naar hun “home page” brengen:
    Iconred3
    En/of toch minstens een “meer cultuur & media…”, “meer media…”
  • De videobalk: dat flikkert maar, en dat floept over en weer: vervelend.
  • De river of news: geen duidelijk pagineringsmechanisme (je moet onderaan 1–2–3 kiezen en dan—floeps!—verandert het allemaal ergens helemaal ver boven je).
  • Vier ankers in de kijker: niet elk hoofdje invididueel is klikbaar (alles gaat naar één pagina), niet alle foto’s zijn in dezelfde stijl gemaakt, de kleur van de achtergrondstreep wijkt af.
  • De teksten doormat-achtige blokjes in de “home pages”: hastn kom keer overeen of het mét dan wel zonder drop shadows is é.  (of beter: laten we afspreken dat het zónder moest, mkay?)

…maar er zijn dus vooral heel veel vragen. En dat het boeiend wordt.

Ik ben een positieve mens in die zaken, en bij mij overheerst vooral het gevoel van bewondering voor de moed.

Goed gedaan, erg leuk prototype. Jammer dat er niet nog een paar maand was. En ik reken op dat meesterplan, dus.

Websites

woensdag 2 augustus 2006 in Internet. Permanente link | 9 reacties

Dreamhost: het verschil tussen communicatie en geen communicatie.

Als ze nu nog iets zouden doen aan hun helpdesk… alhoewel: you get what you pay for, en ik betaal er praktisch niets. Dus ik mag niet klagen, vermoed ik.

Ik ga denk ik in de volgende weken toch nog eens een poging in de richting doen van Dreamhost: een website maken met Drupal.

WordPress is hoegenaamd niet verkeerd om een weblog mee te maken, maar als er voor een gegeven pagina meer dan honderd queries moeten over en weer gesleurd worden naar de database, dan is er toch wel iets ernstig mis met hoe het allemaal werkt.

Doe het dan zelf beter?

Nah: mijn dagen van het-wiel-opnieuw-uitvinden zijn nu echt wel definitief voorbij. Ja, een website als Gentblogt is niet moeilijk opnieuw te maken in PHP of iets dotnet-achtigs of java-achtigs (niet mis met ColdFusion trouwens). En ja, het zou allemaal veel performanter zijn en watnog. Maar ik heb er niet de minste zin in.

Bouw betere plugins voor WordPress?

Tja. WordPress en plugins, ‘t is wat. Als je je houdt aan de regels van een platform als WordPress, en het allemaal proper volgens de regels doet, dan werk je noodgedwongen op een afstandje van de database zelf.

Logisch natuurlijk, zonder abstractie kun je zo goed een aparte php-pagina op de server zetten om je ding te doen, en to hell with portability.

In de praktijk komt het er bij een min of meer complexe WordPress-site, zoals Gentblogt er één is, uiteindelijk toch op neer dat je verbastaardiseringen gaat doen, en links en rechts een query bijschrijft, links en rechts in de core files van WordPress zelf gaat zitten moosen.

Wat dan uiteraard probleempjes geeft bij upgrades, zoals nu naar van 2.0.3 naar 2.0.4.

Zoek dan een ander platform?

Wel, ja dus. Ik ga eens proberen wat Drupal geeft. Op Dreamhost dus. Met een andere site van mij.

Het is alweer een tijd geleden dat ik nog eens een Drupal in gang gestoken had, en toendertijd nooit echt voorbij de basics gegaan, maar nu ga ik het eens echt en volledig doen. Om te zien. Eerst met een eigen site, misschien Tuinsafari die toch dringend eens een update moet krijgen, en dan eens zien hoe eenvoudig of moeilijk ik er alles wat Gentblogt nu doet, in krijg.

Ik had een trouwens tijdje geleden Daisy proberen in gang stampen, maar da’s vastgelopen op de één of andere syntaxfout ergens. Ik zal er Steven eens mee lastig vallen als hij terug is uit Frankrijk. :)

Geschreven al luisterend naar: Boudewijn De Groot – Het eiland in de verte – De vondeling van Ameland

True story

woensdag 28 juni 2006 in Internet. Permanente link | 7 reacties

Een belangrijke groep in het Brusselse heeft al een hele tijd een website.

Het is een groep met verschillende doelpublieken in binnen– en buitenland. Met verschillende boodschappen en dignen te zeggen en te verkopen.

Ik weet niet of ze er helemaal uit zijn wat hun doelpubliek precies is, en welke boodschappen ze precies willen overbrengen bij hun doelpubliek. Ik weet zeker dat ze er geen flauw idee van hebben hoeveel mensen er naar welke pagina’s van hun bestaande website gaan kijken. Ik weet nog zekerder dat ze geen idee hebben wat mensen van hun website vinden, en of hun boodschappen, wat die ook zijn, overkomen.

Nu moet de website aangepakt worden. Wat doe je in zo’n geval? Wat is in zo’n geval het allereerste probleem dat je aanpakt?

Een evaluatie van wat er nu is? Een strategie opstellen? Een project definiëren? Een meeting met alle stakeholders, en met mensen die van websites afweten erbij?

Nee hoor: een stagiair aannemen om de website te vernieuwen. En wat is haar eerste vraag aan de mensen die van websites afweten? “In welk formaat moet de inhoud aangeleverd worden?”

Inderdaad. Zucht.

We zijn in België door de band nog heel erg ver van professioneel websites maken.

Geschreven al luisterend naar: Tori Amos – Strange Little Girls – Time

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.

Show/hide

vrijdag 23 juni 2006 in Internet. Permanente link | 3 reacties

Grrr. Een website aan het maken waar er eigenlijk strikt gezien teveel informatie tegelijk moet getoond worden.

Naast de navigatie en dergelijke moeten er niet minder dan zeven verschillende types informatie op de homepagina getoond worden. Nee, daar kan niets af. Ja, die moeten er allemaal op staan. Jà, daar ben ik zeker van.

Bon, schuiven en doen, trekken, duwen, sleuren, en dan zit ik met één ding dat verloren loopt in de layout: een kalender met evenementen.

Probleem: die events zijn niet zó belangrijk dat ze ergens bovenaan de pagina moeten staan, maar ze zijn wel belangrijk genoeg dat iedereen zou moeten weten dat er evenementen zijn, en dus dat ze niet ergens verloren onderaan de pagina mogen staan.

Enfin, ‘t is dus een oplossing met tabs geworden. Nog eens kijken naar de css en de layout ervan morgen, en het javascript unobtrusive maken en zo en, maar alla.

Morgen zal ik er ook eens iets over schrijven of zo. Maar nu: naar bed!

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

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