Webdesign - webstandaarden - validators - tools
Tekstbureau TekstBaken
Harrie Baken - freelance tekstschrijver & seo'er
Tekstbureau TekstBaken
Harrie Baken - freelance tekstschrijver & seo'er
Voor het 'technisch' laten keuren van een HTML-bestand zijn er hier drie mogelijkheden: Validate by URL, by File Upload, by Direct Input. Kies meteen voor 'More Options' en vink minstens 'Show Outline' aan. Ook kun je bij 'More Options' een bestand zonder Doctype valideren.
Handig voor een routine-controle! Je kunt aan- of uitzetten: Show input, Validate entire site (100 pagina's is overigens het maximum) en Hide valid results.
Lees de WDG Validator Tips over het valideren van webpagina's die met een wachtwoord beveiligd zijn, het valideren via FTP en het valideren van HTML-documenten die door je robots.txt voor de validator eigenlijk 'verboden toegang' zijn.
Valideer een webpagina in Opera met de W3C-validator. Gebruik het rechtsklikmenu of je toetsenbord: Ctrl+Alt+V.
Semantic Web, Wikipedia
Semantiek - Waarom zou je? - Michiel Roding, 2005
The Semantic Web, Tim Berners-Lee, James Hendler and Ora Lassila, 2001
The Elements of Meaningful XHTML, Tantek Çelik
Semantic Data Extractor, W3C.org
"This tool [...] tries to extract some information from a HTML semantic rich document. It only uses informations available through a good usage of the semantics defined in HTML The aim is to show that providing a semantically rich HTML gives much more value to your code: using a semantically rich HTML code allows a better use of CSS, makes your HTML intelligible to a wider range of user agents (especially search engines bots)."
Op Wikipedia een handig, beknopt overzicht: Cascading Style Sheets
Cascading Style Sheets home page, W3C.org
Specificaties CSS 2.1, W3C.org
CSS Work van Eric Meyer, css-specialist. Meyer heeft veel boeken en artikelen over CSS op zijn naam staan.
De afdeling Cascading Style Sheets van Handleiding HTML. (Nederlandstalig, dus.)
CSS Crib Sheet van mezzoblue.com. Waar moet je op letten bij het werken met stijlbladen - een checklist. (Een min of meer geslaagde Nederlandse vertaling staat op gigadesign.be)
De volgende websites over webontwerp, CSS, tableless design, browsers en bugs zijn inmiddels beroemd. Vol met artikelen, discussies, voorbeelden en templates (sjablonen).
A List Apart - een goudmijn!
BlueRobot, met The Layout Reservoir
css Zen Garden: The Beauty in CSS Design, Nederlandse vertaling: css Zen Garden: De Schoonheid van ontwerpen met CSS
"We're Big John and Holly Bergevin, and together we built this site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to "make it work" without using tables for layout purposes."
W3C heeft een (min of meer) Nederlandstalige CSS Validation Service. Drie mogelijkheden voor de validatie: via een URI, via het uploaden van een bestand en via directe invoer.
De CSSCheck van WDG zou ik links laten liggen. Hij is verouderd en zadelt je daardoor op met een berg onterechte foutmeldingen. (WDG: "CSSCheck is primarily a CSS1 checker. Many CSS2 properties are supported, but new CSS2 selectors will generate errors.")
Gebroken links, 404's, 'De gezochte pagina bestaat niet meer' enzovoort - zowel bezoekers als zoekmachines hebben er een hekel aan. (Zie ook Wikipedia, Linkrot en Jakob Nielsen, Fighting Linkrot.)
Link Valet Online, zie ook de gebruiksaanwijzing. De resultaten zijn tamelijk warrig en bevatten nogal eens fouten. Dat wordt goedgemaakt door een uitgebreide toelichting op de Status Code Definitions.
Hoe korter de laadtijd van je webpagina's, hoe beter. Maak ze niet zwaarder dan 100 Kb. Probeer je homepage onder de 50 kilo te houden. Alles wat door de browser geladen moet worden, telt mee. HTML en tekst, JavaScript, afbeeldingen, CSS, Flash.
Cyber-Junkie.com heeft een leuke tweedelige Download Speed Test. De 'Bandwidth Tester' meet bij aankomst eerst de snelheid van je eigen verbinding. Met de 'Webpage Download Speed Checker' kun je vervolgens de laadtijd van je webpagina's meten. Cyber-Junkie negeert helaas de laadtijd van externe stijlbladen.
Web Page Speed Analysis van WebSiteOptimization.com.
"(...) page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time."
De analyse bevat dus een gedetailleerde uitsplitsing (HTML, afbeeldingen, 'CSS-afbeeldingen', JavaScript, CSS, Multimedia) en je krijgt er adviezen bij.
Voorlopig vind ik OctaGate SiteTimer de beste. Nauwkeurig en volledig. Met adviezen (Optimizing your site) en toelichting (Reasons for slow load speeds). Vergeet niet op het kleine blauwe knopje te klikken voor een overzicht van de bestanden en hun grootte.
Webrichtlijnen voor de overheid met een lijst van alle richtlijnen waaraan websites van Nederlandse staatsinstellingen zouden(!) moeten voldoen.
Web accessibility op Wikipedia.org.
Vermeldenswaardig is de Toegankelijkheidsverklaring van de AMINAL Website van de Vlaamse leefmilieuadministratie.
W3C - Web Content Accessibility Guidelines (WCAG)
Een overzicht van Government Guidelines in een stuk of 15 landen/gebieden.
Eerst even een wijs woord van W3C.org over wat checkers van de toegankelijkheid van een webpagina kunnen en niet kunnen. De kern: tools kunnen de toegankelijkheid van een website niet echt vaststellen, maar ze komen er wel bij van pas. (Web accessibility evaluation tools can not determine the accessibility of Web sites, they can only assist in doing so.) Zie: Selecting Web Accessibility Evaluation Tools.
HiSoftware Cynthia Says Portal
De test van cynthiasays.com vind je ook op International Center for Disability Resources en isocdisab.org.
De Functional Accessibility Evaluator is geweldig. Voer een URI in en verbaas je erover hoe ontoegankelijk websites kunnen zijn. Als je je registreert bij FAE kun je in één keer een hele website valideren.
Met een link naar FAE kun je eventueel aan anderen laten zien hoe het er met de toegankelijkheid van een pagina bijstaat - Check Accessibility with FAE.
Een FEA-extensie voor Firefox staat op Firefox Accessibility Extension (FEA-site) en Firefox Accessibility Extension (addons.mozilla.org).
Wikipedia over kleurenblindheid
WebrichtlijnenQuickscan van de Nederlandse staat.
Robots.txt Checker van www.motoricerca.info »» 
Met de robots.txt kun je robots (of spiders, crawlers) de toegang tot (delen van) je site ontzeggen, of juist expliciet toestaan. De robots.txt moet strikt aan de regels voldoen. Zie het onderdeel What to put into the robots.txt file op Web Server Administrator's Guide to the Robots Exclusion Protocol.
Kris Shaffer belicht uitgebreid de verschillen tussen Opera en Firefox in Opera and Firefox: A side-by-side review (2005).
Recente kritiek: Fx vreet steeds meer CPU en geheugen (vooral door sommige extensies) en wordt daardoor slomer.
Nieuwe details over Firefox 3.0 bekend, Jolanda Woltjer, wo 28 februari 2007
Firefox 3.0 opens door to Web apps, Jeremy Kirk, IDG News Service, 27 februari 2007
"Most importantly, Firefox has to be fast and standards-compliant, [Mike Schroepfer] said. Some users have complained about Firefox sucking up processing power because of add-ons or extensions, a popular aspect of Firefox where small programs can be downloaded into the browser to add new functions."
Close to 25% of Use Rate in Europe for Firefox. [XiTi Monitor, 28 maart 2007]
De tofste browser om snel, slim en safe mee rond te sjezen blijft voor mij Opera (Opera is al een paar jaar gratis, maar helaas niet vrij en open.)
Hoewel ik al ruim 10 jaar smoorverliefd ben op Opera, maak ik de laatste jaren meer gebruik van Firefox dan van Opera. Als hulpmiddel bij alles wat met webdevelopment, validatie en SEO te maken heeft, is Mozilla Firefox, aangevuld met enkele extensies (of extensions, plugins, add-ons), fantastisch en eigenlijk onmisbaar. Firefox is open bron-software en draait onder Linux, Mac OS X en MS-Windows.
Kies eerst bij het installeren van Firefox voor 'Dom Inspector (ook) installeren' (via 'geavanceerd').
In de categorie webontwikkeling zijn er nu (januari 2008) al meer dan 350 extensies. Ik beperk me tot een aantal extensies die IMNSHO zó nuttig zijn, dat je wel gek bent als je ze niet gebruikt. Natuurlijk kun je de informatie die de besproken extensies opleveren ook op andere manieren vergaren. Maar het grote voordeel van Firefox met een uitgekiende verzameling plugins is, dat je alles bij de hand hebt. Dat je browser als het ware een Zwitsers zakmes voor het web wordt.
Web Developer is op zichzelf al een Zwitsers zakmes. Deze plugin voorziet Firefox van een veelzijdige werkbalk. Een kleine greep uit de mogelijkheden:
De headings weergeven (of álle block level elements), meta-elementen (vaak ten onrechte 'metatags' genoemd, zelfs door de schrijvers van dit Wikipedia-artikel) tonen, alle details geven van de links, title-attributen tonen... alles, eigenlijk.
Uitschakelen (op onderdelen of compleet, zoals met Opera), opslaan, bewerken, de printversie weergeven.
Gedetailleerde weergave - door omlijnen en benoemen - van alle elementen, attributen, selectors, eigenschappen en waarden.
Uitschakelen, omlijnen (outline), alt-attributen ('alt-text') weergeven.
Snel een compleet overzicht van meta-elementen, formulieren, koppelingen en media.
Ook een must is HTML Validator. Met HTML-Validator kun je op alle webpagina's meteen zien welke fouten erin zitten of welke 'waarschuwingen' er gegeven worden. Erg doeltreffend om snel je eigen werk te controleren, of dat van je sitebouwer of webbureau.
"HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page."
Op bovengenoemde pagina over addon 249 staat ergens plompverloren "Html Validator is not available for Linux." Dat is kolder. Op de website van Marc Gueury staan alle beschikbare versies en een uitgebreide handleiding. Heb je geen zin of tijd om moeilijk te doen, kies dan tijdens de installatie voor de Tidy-variant en niet voor de SGML parser.
Aan het icoontje van de HTML-validator (gebaseerd op Tidy van Dave Raggett) zie je direct hoeveel fouten een pagina bevat. Alle details verschijnen wanneer je in je werkbalk kiest voor 'Broncode tonen' - 'View Source', of wanneer je dubbelklikt op het icoon. (Rechtsklikken levert je nog meer mogelijkheden.) Tidy vermeldt voor zover mogelijk de oorzaken van fouten en waarschuwingen, en doet suggesties voor oplossingen.
De tweede manier om fouten te achterhalen is via de Validator van W3C. Je gaat dan in je werkbalk naar 'Tools' »» 'Validate HTML' (sneltoets: Ctrl+Shift+H).
HTML, CSS en JavaScript doorlichten en debuggen - na wat pielen en prutsen met Firebug heb je er weer een goed stuk gereedschap bij. Documentatie vind je op Firebug, Web Development Evolved.
De Firefox-plugin SearchStatus hoort eigenlijk op de pagina over seo-tools die ik allang had moeten maken, maar ik noem hem hier alvast. Een geweldig hulpmiddel voor de seo-maniak!
'Display the Google PageRank and Alexa popularity score anywhere in your browser, along with fast keyword density analyser, keyword/nofollow highlighting, backward/related links, Alexa info and other seo tools.'
Vergelijkbaar met SearchStatus is SeoQuake. 'n Paar onderdelen: PageRank, whois, inbound links, keywords density. Vergeet niet de preferences in te stellen en ook niet dat je af en toe een ram op F5 moet geven. Gelukkig kun je dat ding snel uitzetten, want bij 'gewoon' browsen word je er knettergek van.
Tekstbureau TekstBaken van Harrie Baken specialiseert zich in het optimaliseren van websites voor zoekers, bezoekers én zoekmachines. Uiteraard kun je bij TekstBaken terecht voor zoekmachinevriendelijke webteksten, maar ook voor alle andere aspecten van SEO.
Voor het optimaliseren van je website maak ik graag een offerte. Daaraan vooraf gaat echter altijd een grondig optimalisatie-advies.
Eerste versie: 2007-04-30, bijgewerkt op 2008-03-29 om 17:48:10
Baken
voor tekst!
Tekstbureau TekstBaken
tekstcorrectie & redactie
webteksten
SEO: website-optimalisatie
voor (be)zoekers én zoekmachines
ontwerp & onderhoud:
Harricot & Co WebDinges
webmaster@tekstbaken.nl
De URI van deze pagina is http://www.tekstbaken.nl/website-optimalisatie/webdesign-webstandaarden-validators.html