17 April 2008, geplaatst in XHTML door Davy
Johan (Wolfr) heeft het nieuwe design van zijn blog Wolf’s Little Store deze week gelanceerd. Vriend Dieter heeft hierop al zijn mening geventileerd. De conversaties over dat nieuwe design zijn jammer genoeg verspreid, maar ik wou toch nog even inpikken op een conversatie op Twitter gisterenavond.
Wolf zegt dat de inhoudtafel op de homepage tabulaire data is. Ik ben het daar niet helemaal mee eens.
Waaruit bestaat zijn homepage? Uit een overzicht van alle artikels die op zijn blog zijn gepost. Technisch gesproken kan je dat wel in tabelvorm gieten, maar volgens mij kan je het eleganter oplossen.
Zo ziet de huidige markup eruit:
<table cellspacing="0" cellpadding="0" id="grid">
<tr>
<td class="date"><p>April 16, 2008</p></td>
<td class="category">
<ul class="post-categories">
<li><a href="" title="" rel="category tag"></a></li>
</ul>
</td>
<td><h2><a href="" rel="bookmark" title=""></a></h2></td>
</tr>
</table>
Eerste bedenkingen:
- Waarom zou je de datum in
<p> tag plaatsen?
- Waarom categorieën in
<ul> als je maar 1 categorie telkens gaat gebruiken?
- Waarom een tabel?
Waarom geen tabel?
Wanneer ik de CSS uitschakel en ik de broncode lineair overloop, dan krijg ik nu:
- datum
- categorie
- titel
Dit voelt niet goed aan. De titel is belangrijker dan de datum en de categorie, en dus zou die eerst moeten komen.
Een andere bedenking die ik me maak is: hoe zal de homepage zal weergegeven worden op mobile devices. Tabelrendering lijkt me door de kleine schermen minder evident.
Daarom zou ik met deze oplossing op de proppen komen:
<ul id="articles">
<li>
<h2><a href="" rel="bookmark" title=""></a></h2>
<p class="meta">
On <span class="date">April 16, 2008</span> in
<a href="" rel="category tag">Category</a>
</p>
</li>
</ul>
Via negatieve text-indent, en absolute positionering van de date en link, kan je de woorden ‘on’ en ‘in’ verbergen op de frontend.
Je zou zelfs een <ol> (ordered list) kunnen gebruiken, omdat het kan beschouwd worden als een numerieke opsomming van de artikels.
Een andere mogelijkheid is via een definition list, waarbij er een relatie bestaat tussen de titel van het artikel en de meta data:
<dl id="articles">
<dt><h2><a href="" rel="bookmark" title=""></a></h2></dt>
<dd class="date">April 16, 2008</dd>
<dd class="category">
<a href="" title="" rel="category tag">inspiration</a>
</dd>
</dl>
Niet alleen wordt de markup compacter, ook wanneer je CSS uitschakelt, leest het iets natuurlijker.
Via CSS kan je dan uiteraard identiek dezelfde visuele tabel creëren.
In HTML kan je meestal een probleem op verschillende manieren benaderen. Het is alleen kwestie van alle opties te overwegen en uitmaken wat een goeie manier is en wat de betere manier.
Minimal design is 1 ding, minimale markup iets anders.
6 December 2007, geplaatst in CSS door Davy
Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.
Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:
Dit is echter heel simpel te vermijden:
h1 a {
text-indent: -999em;
overflow: hidden;
}
De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.
5 December 2007, geplaatst in CSS door Davy
Bij het templating en structureren van CSS files gebruikte ik deze techniek al in bepaalde mate, maar nu is er dus een draft klaar om CSSDOC richtlijnen te specifiëren.
Via CSSDOC kan er relevante informatie in de CSS comments geplaatst worden in zogenaamde DocBlocks, die hun oorsprong kennen uit de Javawereld.
De huidige draft geeft alleszins al een mooi overzicht van de verschillende tags. Zeker dus de moeite om eens uit te printen en door te nemen, of naast je te leggen als referentie.
29 Mei 2007, geplaatst in Conferenties door Davy
De eerste sessie die ik bijwoonde op Multi-Mania 2007 was CSS Layouts in Dreamweaver CS3, gegeven door Stephanie Sullivan (w3conversions).
Dreamweaver CS3 is standaard uitgerust met een hele resem templates om verschillende soorten layouts samen te stellen, of het nu gaat om fixed of liquid layouts, met 1, 2 of 3 kolommen. Dit allemaal kan wel goed zijn voor beginners, voor de doorgewinterde professional lijkt het mij overbodige luxe. Meer zelfs, volgens hetgeen ik kon opmaken uit de presentatie, staat de CSS inline geplaatst en staat hij boordevol overtollige comments, die je via een of andere tool wel eruit kon strippen.
Stephanie gebruikte tijdens de presentatie uitsluitend gebruik van de UI van Dreamweaver om de CSS aan te passen. Ik stel mij daar dan toch wel vragen bij. Het gaat toch allemaal veel sneller als je de CSS rechtstreeks kan typen. Ik versta wel dat zij haar product zo in de kijker moet zetten, maar ik heb absoluut geen nood aan dat soort toeters en bellen.
Ikzelf gebruik al een tijdje geen Dreamweaver meer, maar wel voor Aptana. Dreamweaver is een programma goed voor newbies, maar niet voor mij.
20 Mei 2007, geplaatst in Job door Davy
Eigenlijk zijn het ondertussen al bijna 13 maanden, maar dat doet er nu niet toe. Net zoals een halfjaar geleden, toen ik de balans opmaakte na 1 jaar aan de slag als webdeveloper, heb ik nu weer een aantal dingen op een rijtje gezet.
De laatste maanden hebben er enkele verschuivingen plaatsgevonden in het werk dat ik doe. Vroeger concentreerde dat zich vooral op XHTML / CSS en Flash. Met die laatste, Flash dus, zat ik al een tijdje verveelt. De passie die ik daar ooit voor had, slonk steeds verder weg. Gelukkig werk ik in een bedrijf waar er rekening wordt gehouden met de werknemers. Ik kreeg de tijd en ruimte om mezelf te herprofileren.
De laatste paar weken wordt ik dan, net zoals bij mijn beginmaanden als webdeveloper, ingezet om met PHP te ontwikkelen. Die passie heeft weer vuur gekregen na een workshop van Rasmus Lerdorf op FOWA. Ik moet wel zeggen dat ik me daar echt wel mee amuseer. Omdat dit via OOP gebeurt, is het ook fijn om in zo’n gestructureerde code te werken.
Verder heb ik Flash dan geruild voor de robuustere Flex omgeving en de Adobe Apollo technologie. Vooral die Apollo boeit me wel, omdat die HTML integratie heel wat mogelijkheden biedt. Ik ben trouwens bezig met een leuk Apollo project, wat zeer binnenkort het daglicht zal aanschouwen. Meer daarover zeker later.
Er zijn dus nu vooral 3 grote peilers waar ik me ten volle kan op concentreren:
- XHTML / CSS
- PHP
- Flex / Apollo
Toch heerlijk wanneer je een droomjob hebt, niet?