26 Oktober 2006, geplaatst in CSS door Davy
Wanneer ik een website bezoek heb ik nogal vaak te neiging om de broncode ervan te bekijken. Natuurlijk niet bij alle sites, maar toch die van collega’s, of sites die ik inspirerend vind. Broncode van goede sites bekijken heeft ertoe bijgedragen dat ik nu zo handig overweg kan met XHTML en CSS. Maar ook het bekijken van slechtere voorbeelden kan verhelderend zijn.
De afgelopen weken en maanden heb ik mijn eigen manier van werken onder de loep genomen en het verder verfijnd. Zo heb ik op het werkvloer een aantal HTML en CSS templates gemaakt die kunnen dienen als startpunt voor nieuwe websites. Daarnaast heb ik bij Marlon ook nog een stijlgids geschreven met daarin mijn methodiek uitgelegd alsook een referentie voor veelgebruikte XHTML elementen. Alvast hier enkele tips en conclusies.
Wees consistent bij naamgeving
Dit is niet alleen belangrijk bij XHTML en CSS productie, maar ook bij het programmeren en scripten. Wees consistent bij het benoemen van elementen, functies, variabelen, … Vaak zie ik in de broncode van websites dat de maker sommige elementen een Engelstalige id of classe geeft, en andere dan weer in het Nederlands benoemd. Het is wel zo dat je sommige elementen moeilijk naar het Nederlands kan vertalen, maar daarom ben ik ook van mening dat je alles in het Engels moet plaatsen. Dus zowel bij XHTML en CSS als bij programmeren.
Dat is iets dat vooral nog voorkomt bij studenten, stagiairs en programmeurs van de oude stempel. Maar je vergroot de leesbaarheid van je bronbestanden enorm door deze tip te hanteren. En zoals Vincent altijd zegt: Je weet nooit wie je broncode nog moet gebruiken
.
Probeer ook een zekere consistentie te hanteren bij de casing van een id of classe. Zelf schrijf ik alles met kleine letters en scheid ik meerdere woorden aan de hand van een koppelteken (-). Kleine letters omdat XHTML ook in lowercasing staat. Een visuele scheiding tussen verschillende woorden vergroot de leesbaarheid en dus opteer ik voor dat koppelteken (of hyphen).
Bijvoorbeeld:
class="sidebar-news"
De underscore is af te raden, omdat het niet ondersteund wordt door de W3C specificatie, alsook niet in sommige browsers.
Structuur leidt tot productiviteit
Door mijn CSS files goed te structureren, weet ik voortaan perfect waar elk deel van de site zich bevindt. Door de verschillende stijlen onder te verdelen in groepen naargelang functie of plaats in de site is het voortaan een simpel denkwerkje om te achterhalen waar ik moet zoeken om een bepaalde stijl te wijzigen. Hiervoor baseer ik me op het modulair CSS principe, maar verfijnd naar mijn eigen visie en manier van werken.
Wat ook zeker helpt bij het verhogen van je productiviteit is voor jezelf een bepaalde volgorde bepalen voor de verschillende CSS properties. Zo doe ik het:
- float of position
- display
- overflow
- margin
- padding
- width
- height
- specifieke eigenschappen
- font
- text
- color
- border
- background
Specifieke eigenschappen kunnen zijn: list-type, cursor, vertical-align, … Text eigenschappen zijn dan weer: line-height, letter-spacing, decoration, …
Door op deze manier te werken kan ik sneller bepaalde properties terugvinden die in een grote stijlclasse zijn opgesomd. Het vergroot voor mij alleszins ook de leesbaarheid. Maar het is belangrijk dat je voor jezelf eens op een rijtje zet welke volgorde jij prefereert. Misschien ben je wel het chaotische type en hou je wel van wat zoekwerk.
Shorthand properties
Sommige CSS elementen kunnen gespecifieerd worden op 1 enkele regel. Persoonlijk vind ik dit een handige shortcut en wordt alles wat leesbaarder. Toch zijn er ook ontwikkelaars die dit tegenspreken en de normale manier van werken beter vinden. Aan u de keuze… Alvast hier een voorbeeld:
.someclass {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 20px;
}
Kan aan de hand van een shorthand property omgetoverd worden tot:
.someclass {
margin: 10px 20px 10px 0;
}
De volgore van de properties is: top, right, bottom, left (TRouBLe). Dit kan mij dan uiteindelijk brengen tot:
.someclass { margin: 10px 20px 10px 0; }
Dit laatste doe ik wel enkel wanneer er slechts 1 CSS eigenschap wordt gedefinieerd.
De meest gebruikte shorthand properties zijn: font, background, list-style, margin, padding en border.
En ten slotte: wanneer een hexadecimale kleur is samengesteld uit 3 paar hexadecimale getallen, dan kan je deze inkorten tot 3 getallen.
Vb: #000000 wordt #000 en #667733 wordt #673
Tot zover deze korte toelichting over mijn structureren van CSS files. Ik heb hier zeker niet willen bewijzen dat mijn manier van werken de beste is, maar ik heb wel willen aantonen dat het belangrijk is na te denken over hoe je iets aanpakt. U bent alleszins vriendelijk uitgenodigd om mijn CSS bestand(en) te bekijken. Reacties zijn zoals altijd meer dan welkom.
25 Oktober 2006, geplaatst in Browsers door Davy
Vrij kort na de release candidate is nu ook de final release van Firefox 2.0 uitgebracht. Mozilla komt hiermee snel na de release van de Internet Explorer 7.
Mijn verwachtingen zijn vrij hoog, dus ik ga hem direct downloaden en installeren. Benieuwd wat dat gaat geven!
23 Oktober 2006, geplaatst in Job door Davy
Binnen een week is het precies een jaar geleden dat ik voor het eerst als webdeveloper aan de slag kon. Dus ik vond de tijd wel rijp om eens de balans op te maken.
Eigenlijk ben ik een bofkont. Ik heb vrij snel werk gevonden en direct bij een bedrijf waar ik me uitstekend voel. Ik doe mijn huidige job echt graag. Meer zelfs, ik ben er gepassioneerd door en het voelt eigenlijk totaal niet aan als mijn job. Ik beschouw het eerder als een uit de hand gelopen hobby.
Zelf ben ik wel nogal een all-rounder als webdeveloper, maar toch probeer ik me te profileren in een bepaald aspect bij het ontwikkelen van sites, namelijk de webstandaarden. Het is nu sinds ik er men eindwerk over maakte dat dit deeltje van het webontwikkelen me in de genen is gekropen.
Voor mij bestaat er op professioneel vlak niets leukers dan het structureren van webpagina’s in XHTML om nadien de verschillende elementen op de juiste plaats te positioneren via CSS. Ik heb nu ondertussen toch al een hele hoop sites gesliced, kleine en grotere projecten en ik denk toch wel dat ik echt de feeling in de vingers heb.
Maar toch reikt mijn passie verder dan XHTML en CSS. Toegankelijkheid is een begrip dat ik niet kan loskoppelen bij het ontwikkelen van websites, maar ook usability draag ik hoog in het vaandel. Maar uiteindelijk vallen ook die begrippen wel enigzins onder de filosofie achter de webstandaarden.
Toch moet ook ik af en toe mijn principes even aan de kant schuiven. Vooral dan wanneer ik in Flash een hele website moet ontwikkelen. Het gebeurt niet zo heel vaak, maar af en toe komen er toch nog klanten op de proppen, die erop staan een Flash website te hebben. Blijkbaar is het om de een of andere duistere reden toch nog vrij populair en associeren sommige mensen Flash sites met kwaliteitssites. Wie ben ik om die illusie te doorprikken? Dus het is dan op die momenten dat je even de morele bezwaren doorslikt en gewoon doet wat van je verwacht wordt.
Na men uren zit ik ook wel niet stil. Ik doe niets liever dan lui vanuit men bureaustoel men RSS feeds te overlopen en op zoek te gaan naar interessante artikels met betrekking tot het ontwikkelen van sites. Boeken lezen doe ik normaal ook wel veel, maar de laatste tijd lijkt dat er niet meer van te komen. Er zijn te weinig uren in een dag !
Maar ik wil mezelf toch nog wel op bepaalde gebieden verbeteren, vooral dan op vlak van DOMScripting. Er liggen hier nu al een tijdje 2 boeken te wachten tot ik ze lees, maar het lijkt er voorlopig maar niet van te komen. Maar het staat alvast op men prioriteitenlijstje en zal een van de komende weken en maanden zeker aan bod komen.
Terwijl ik dit trouwens aan het schrijven was heeft Andy Budd een artikel gepubliceerd waarin ik mezelf wel kan herkennen:
…the best web designers are endlessly inquisitive and always want to keep abreast of the latest trends and technologies. They will scour the web reading every blog post or article they can find, their RSS reader literally building under the weight of new content. Their Amazon wishlist will be full of the latest titles and they will always have a couple of unread books lying around just waiting to be digested.
Overigens een interessant artikel, vooral dan met betrekking tot freelancers, maar elke gedreven webdeveloper zal er toch ook wel bepaalde eigenschappen van zichzelf erin herkennen.
Mijn conclusie na een jaar werken is eenvoudig: ik doe mijn job met enorm veel vuur en passie en hoop dat nog lang te blijven doen. U bent gewaarschuwd !
20 Oktober 2006, geplaatst in Browsers door Davy
Na IE7 komt nu ook nog eind deze maand de finale versie van Firefox 2. Mozilla heeft nu alleszins nog de Release Candidate 3 vrijgegeven. De features omvatten onder andere:
- Visuele vernieuwing van de interface
- Phishing bescherming
- Verbeterde zoekvoorzieningen
- Browser sessies kunnen hernomen worden
- Previewen en subscriben op rss feeds
En nog een hele boel andere features. Mij spreekt vooral het hernemen van browser sessies aan. Hoe vaak is het al niet gebeurt dat ik per ongeluk een browservenster heb afgesloten. Hiermee kan je snel weer verdersurfen waar je gebleven was.
Ik kijk alvast uit naar deze browser release !
19 Oktober 2006, geplaatst in Browsers door Davy
Zoals ik ook reeds aankondigde, is na 20 maanden in development, vijf beta’s en 1 release candidate Internet Explorer 7 sinds gisteren eindelijk uit. Installeren zal ik misschien pas volgende week doen, eerst nog wat de kat uit de boom kijken. Maar mensen die het wel al installeren, en hun reacties willen delen, doe gerust!
Meer over de release kan je lezen op het IEBlog.