Pagina met links

Animation en transform

CSS → CSS-Animation en transform

Online dingen uitproberen zie CSS → Online wijzigingen uitproberen.

24ways.org/2010/intro-to-css-3d-transforms
An introduction to CSS 3-D Transforms.

the-art-of-web.com/css/bouncing-ball-animation
Uitleg hoe je met behulp van animation een stuiterende bal (en nog wat dingen) kunt maken.

the-art-of-web.com/css/3d-transforms
CSS: 3D Transforms and Animations.

the-art-of-web.com/css/css-animation
CSS: Animation Using CSS Transforms.

the-art-of-web.com/css/timing-function
CSS: Transition Timing Functions.

webdirections.org /blog/2d transforms in CSS3
Uitermate duidelijke uitleg over 2d transforms.

Background-image

CSS → CSS-Background-image

netters.nl/de-patrijspoort-theorie
Uitstekend Nederlandstalig artikel over background-images.

Borders en hoeken

Op deze (Nederlandstalige) site vind je voorbeelden van border-radius onder Kader.

Online ronde hoeken maken zie Gereedschap → Ronde hoeken maken. Deze gereedschappen, en enkele van de hieronder staande methodes, maken gebruik van plaatjes. Inmiddels is het veel beter om ronde hoeken te maken met behulp van border-radius.

Online dingen uitproberen zie CSS → Online wijzigingen uitproberen.

green-beast.com/experiments/css_smart_corners
Meegroeiende ronde hoeken met behulp van plaatjes.

home.tiscali.nl/developerscorner/liquidcorners/ (Flexibele ronde hoeken)
Uitgebreide Nederlandstalige tutorial over het maken van ronde hoeken met behulp van plaatjes. Met links naar een serie voorbeelden.

html.it/articoli/nifty/index
Ronde hoeken maken met behulp van marges e.d., zonder gebruik van plaatjes.

netters.nl/artikelen
Nederlandstalig artikel over ronde hoeken met slechts één plaatje.

CSS → Borders en hoeken

Browser support

CSS → Browser support

caniuse.com
Handige tabel met wat globaal in welke browser (al) werkt van css 3, svg, html5 en nog wat dingen. Inclusief mobiele browsers.

css3.info.preview
Online testen welke browser wat van css 3 ondersteunt. Laat goed zien waarom in de praktijk helaas voorlopig nog niet alles is te gebruiken...

css3.info/selectors-test
Online testen welke selectors in welke browsers werken.

dev.l-c-n.com/CSS3-selectors
Browser support tabel CSS3-selectors.

developer.apple.com/library/safari
Officiële lijst van door Safari ondersteunde CSS-eigenschappen, inclusief wat wordt ondersteund in iOS (Apples mobiele systeem).

developer.mozilla.org/en/CSS_Reference (Mozilla Developer Center)
Uitgebreid overzicht van attributen, selectors, enz., in Firefox. Geeft ook aan wat in andere browsers wordt ondersteund, inclusief mobiele browsers.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
Uitgebreide browser support tabel, inclusief css 3.

findmebyip.com/litmus
Uitgebreide tabel met wat in welke browser werkt van CSS3 en html5.

html5please.us
Geeft van groot aantal css3-eigenschappen, html5-onderdelen, API's, microdata, enz. aan in welke browser ze werken. Met manieren om ze werkend te krijgen in andere browsers.

mobilehtml5.org
Browser support voor html5 en CSS3 in mobiele browsers.

msdn.microsoft.com/ (Microsoft Developer Network)
Browser support tabel van Microsoft voor Internet Explorer.

opera.com/docs/specs
Opera's officiële pagina's over wat welke versie van Opera ondersteunt.

quirksmode.org/css/contents
Browser support tabel CSS 2.1 en 3. Met voorbeelden voor gebruik.

reference.sitepoint.com/css (Sitepoint CSS Reference)
Uitgebreid overzicht welke browser wat ondersteunt. Met uitgebreide uitleg, voorbeelden, enz.

webdevout.net/browser-support-css
Uitgebreide browser support tabel met CSS 2.1 en 3. Bovenaan de pagina kun je kiezen welke browsers moeten worden weergegeven.

Bugs en hacks

CSS → Bugs en hacks

CSS3 (Interessante artikelen e.d.)

CSS → CSS3 (Interessante artikelen e.d.)

news.css3.info
Pagina waarop bijna dagelijks een (link naar een) artikel over css3-demo's verschijnt.

CSS-imagemap

CSS → CSS-imagemap

Op deze (Nederlandstalige) site vind je voorbeelden van css-imagemaps onder Afbeelding → Imagemap.

frankmanno.com/ideas/css-imagemap
CSS-imagemap.

Float

CSS → Float

css-technik.de/css-examples
Float: Die Theorie. Duitstalig. Uitstekend artikel. Het originele Engels is alleen nog tegen betaling te lezen. Tja.

Fonts

CSS → Fonts

apaddedcell.com/web-fonts
Zeer uitgebreid overzicht van (standaard) op Linux, Mac en Windows geïnstalleerde fonts.

codestyle.org/servlets/FontStack
Online testen op hoeveel systemen een of meer fonts zijn geïnstalleerd, en hoeveel bezoekers op het generieke font terugvallen.

creativefan.com
Way Cool CSS3 Typography Experiments. Links naar typografische probeersels.

css-voorbeelden.nl/tekst/effecten/font
Met @font-face eigen aangepaste fonts (webfonts) gebruiken.

dustinbrewer.com
Tabel met standaard op Linux, Mac en Windows geïnstalleerde fonts.

font-combinator.com
Online uitproberen of tot drie fonts met verschillende lettergrootte en regelhoogte bij elkaar passen.

fontspring.com
Grote hoeveelheid (gratis) webfonts en veel informatie over fonts, @font-face, enz.

fontsquirrel.com
Grote hoeveelheid gratis te gebruiken webfonts. Online eigen fonts omzetten naar webfonts, met bijbehorende css.

google.com/webfonts/
Site met gratis te gebruiken webfonts van o.a. Google.

html5rocks.com/tutorials/webfonts/quick
Duidelijke handleiding over de css3-eigenschap @font-face.

line25.com/articles
Vergelijkend overzicht van een aantal verschillende technieken om eigen fonts te gebruiken.

losttype.com
Pay-what-you-want fonts. De volledige opbrengst gaat naar de ontwerper van het font.

openfontlibrary.org/fonts
Webfonts die vrij gebruikt kunnen worden.

paulirish.com
Uitgebreide uitleg over het gebruik van @font-face.

smashingmagazine.com
Uitgebreid artikel over webfonts met o.a. uitgebreide uitleg over @font-face.

sprungmarker.de/wp-content/uploads/webfont-services
Vergelijkend overzicht van 13 webfont hosting services.

stevesouders.com/blog
Uitstekend overzichtsartikel over @font-face met veel links naar andere artikelen.

theleagueofmoveabletype.com
Open source fonts.

typetester.org
Online allerlei eigenschappen van een font uitproberen, zoals grootte, leading en tracking.

webfonts.info/wiki
Overzicht van fonts die gebruikt kunnen worden met @font-face, voorbeelden van code, support in browsers, enz..

Forms, buttons, e.d.

CSS → Forms, buttons, e.d.

smashingmagazine.com
Pagina met voorbeelden van formulieren met links naar uitleg e.d.

Gradients

CSS → Gradients

Online dingen uitproberen zie CSS → Online wijzigingen uitproberen.

the-art-of-web.com/css/linear-gradients
CSS: Linear gradients syntax.

the-art-of-web.com/css/radial-gradients
CSS: Radial gradients syntax.

webdirections.org/blog/css3-linear-gradients
Uiterst duidelijk artikel over lineaire gradients.

webdirections.org/blog/css3-radial-gradients
Uiterst duidelijk artikel over radiale gradients.

Kleuren

CSS → Kleuren

en.wikipedia.org/wiki/Web_colors
Uitgebreid overzicht met o.a. de namen van css2 en css3 kleuren, hexadecimale en decimale waardes, enz.

Lay-outs

CSS → Lay-outs

Op deze (Nederlandstalige) site vind je voorbeelden van lay-outs onder Lay-out.

Online kolommen maken zie Gereedschap → Kolommen maken.

blog.html.it/layoutgala
Grote serie CSS-lay-outs.

css-discuss.incutio.com/wiki
Lay-outs met drie kolommen.

cssplay.co.uk/layouts/ (Stu Nicholls | CSSplay)
CSS-lay-outs.

dynamicdrive.com/style/layouts
Aantal CSS-lay-outs.

ex-designz.net/template
Grote collectie CSS-lay-outs.

free-css-layouts
css-lay-outs.

free-css-templates
CSS-lay-outs.

freecsstemplates.org
Grote collectie CSS-lay-outs

freewebtemplates.com/free-templates
Grote collectie lay-outs.

html-site.nl/css_templates
Templates in HTML met CSS. Nederlandstalig.

intensivstation.ch/en/templates
Aantal CSS-lay-outs.

jimmylin.info/templates
Aantal css-lay-outs.

openwebdesign.org/search
Lay-outs zoeken met behulp van allerlei criteria.

oswd.org (Open Source Web Design)
Enorme collectie open source lay-outs

oswt.co.uk/browse_designs (Open Source Web Templates)
Enorme collectie Open Source-CSS-lay-outs.

positioniseverything.net/articles/onetruelayout
Poging de Enige Echte Perfecte lay-out te maken.

solucija.com/home/templates/free
CSS-lay-outs.

templates/arcsin.se/category/website-templates
CSS-lay-outs.

thenoodleincident.com/tutorials/box_lesson/boxes
CSS-lay-outs.

web-garden.be/cursushtml
Twee- en driekoloms CSS-lay-outs. Nederlandstalig.

Media Queries en Responsive Web Design

CSS → Media Queries en Responsive Web Design

Viewport zie Mobiele apparatuur → Theorie.

cloudfour.com/css-media-query-for-mobile-is-fools-gold
Artikel dat waarschuwt voor de nadelen van media queries voor mobiele sites.

cloudfour.com/responsive-imgs
Artikel met overzicht van technieken voor responsive images (afbeeldingen aangepast aan de grootte van de client). Dit is een serie van acht artikelen. De links naar vorige/volgende zijn tamelijk onopvallend, dus even opletten.

fronteers.nl/blog/2011/12/een-tik-op-de-neus
Responsive web design uitgelegd aan de hand van een simpele voorbeeldsite. Nederlandstalig.

mediaqueri.es
Gigantische verzameling sites die Media Queries gebruiken.

robertnyman.com/2010/09/09
CSS3 Media Queries and creating adaptive layouts. Artikel met uitleg en voorbeelden.

slideshare.net/bytte/responsive-web-design
Slideshow met duidelijke uitleg over responsive web design door Thomas Byttebier.

slideshare.net/maxdesign/css3-media-queries
Slideshow met duidelijke uitleg over media queries.

smashingmagazine.com
Overzicht van technieken voor Responsive Web Design.

Menu's, lists

CSS → Menu's, lists

Online menu of list maken zie Gereedschap → Menu en list maken.

Op deze (Nederlandstalige) site vind je voorbeelden van menu's onder Menu.

13styles.com
CSS-menu's.

alvit.de/css-showcase
Links naar sites met CSS-navigatie-technieken, zoals menu's.

css.maxdesign.com.au/listamatic
Dezelfde list met behulp van css op heel veel verschillende manieren weergegeven.

css.maxdesign.com.au/listamatic2
Tientallen geneste lists.

cssplay.co.uk/menus/ (Stu Nicholls | CSSplay)
Tientallen menu's, waaronder hele originele.

ex-designz.net/template
Menu's.

exploding-boy.com
Verticale menu's.

instantshift.com
Links naar handleidingen over menu's en knoppen.

netters.nl/artikelen
Nederlandstalige uitleg over Suckerfish dropdown menu, een min of meer toegankelijk dropdown menu.

Online wijzigingen uitproberen

CSS → Online wijzigingen uitproberen

Alle nieuwere browsers hebben inmiddels (meer of minder) mogelijkheden om online op elke site dingen uit te proberen. Die staan bij Gereedschap → Debuggen.

border-image.com
Online code voor border-image genereren, met gebruik van een eigen afbeelding.

colorzilla.com/gradient-editor
Online css3-gradient maken met bijbehorende code. Maakt ook code voor oudere versies van Internet Explorer, voor zover dat mogelijk is.

css3generator.com
Online border-radius, box-shadow, text-shadow, rgba(), @font-face, multiple columns, box resize, box sizing, outline, transitions, transform, selectors en gradients uitproberen. De uitprobeersels worden automatisch aangepast voor de verschillende browsers, zelfs voor Internet Explorer. Dit laatste alleen voor zover Internet Explorer 'n eigen manier heeft om iets te doen.

css3.mikeplate.com (CSS3 Playground)
Online uitproberen en code genereren voor background, border, border-radius, box-shadow, column (en sub-eigenschappen), font, gradient, opacity, outline, padding, text-align, text-shadow, text-size, text-style en nog wat dingen. Al deze eigenschappen kunnen gelijktijdig bewerkt worden. Ongelooflijk knap!

css3please.com
Online border-radius, background-clipk box-shadow, gradient, rgba(), transform, transition, text-shadow, opacity, @font-face, background-size, column-count en animation uitproberen. De uitprobeersels worden automatisch aangepast voor de verschillende browsers en zelfs voor Internet Explorer. Dit laatste alleen voor zover Internet Explorer 'n eigen manier heeft om iets te doen.

cubic-bezier.com
Online de transition-timing-eigenschap cubic-bezier uitproberen en vergelijken met waarden als ease. Als je de kromme aanpast, worden automatisch de bijbehorende waarden aangemaakt.

gradients.glrzad.com
Online css3-gradient maken met bijbehorende code.

jsfiddle.net
Online css, html én JavaScript uitproberen en eventueel delen met andere ontwikkelaars.

lea.verou.me/css3patterns
Achtergronden die volledig met css (3) worden gemaakt. Je kunt online wijzigingen uitproberen.

netzgesta.de/dev/cubic-bezier-timing/function
Met behulp van schuifknoppen de transition-timing-eigenschap cubic-bezier instellen. Werkt op het moment van schrijven alleen in Opera, Safari en Google Chrome.

reference.sitepoint.com/css
Uitgebreide handleiding met welke browser wat ondersteunt en mogelijkheid online dingen uit te proberen.

rendera.heroku.com
Online css en html uitproberen. Met voorbeelden.

w3schools.com/css/css_examples
CSS online uitproberen.

westciv.com
Online een aantal nieuwe css3-eigenschappen uitproberen:
Lineaire gradients: westciv.com/tools/gradients
Radiale gradients: westciv.com/tools/radialgradients
text-shadow: westciv.com/tools/shadows
box-shadow: westciv.com/tools/boxshadows
text-stroke: westciv.com/tools/textStroke
transform: westciv.com/tools/transforms

Overzicht eigenschappen (properties), cursussen, tips

CSS → Overzicht eigenschappen (properties), cursussen, tips

BELANGRIJK: Het gebruik van frames en tabellen voor opmaak wordt al meer dan tien jaar sterk afgeraden. Een deel van de hieronder staande cursussen gebruikt helaas deze technieken nog. Omdat ze verder kwalitatief goed zijn, vermeld ik ze hier toch. De nadelen van frames en tabellen voor opmaak vind je onder de links hier gelijk boven.

Frames zijn in html5, dat momenteel al geleidelijk aan wordt ingevoerd, gewoon helemaal verboden. Als je nu dus nog frames gebruikt, blokkeer je het gebruik van alle leuke nieuwe mogelijkheden uit html5.

Tabellen zijn bedoeld voor overzichten met getallen, kalenders, e.d., niet voor opmaak. Tabellen voor opmaak zijn 'n nachtmerrie om te wijzigen, meestal volstrekt ontoegankelijk voor spraakbrowsers e.d. en meestal ook niet goed voor 'n hoge plaats in de index van zoekmachines.

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets, integendeel. Je leert technieken waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

Een aantal van onderstaande cursussen gebruikt helaas een 'transitional' doctype. Dit is bedoeld voor bestaande sites die met al tien jaar verouderde technieken zijn gemaakt. Het maakt het gebruik van al tien jaar afgeraden tags mogelijk. In html5 zijn deze tags helemaal verboden. Als je nu nog deze tags gebruikt, bezorg je jezelf dus echt ongelooflijk veel extra werk als je over wilt schakelen naar html5. Gebruik een 'strict' doctype, dit blokkeert het gebruik van verouderde tags, zodat je probleemloos naar html5 over kunt stappen. Ook het doctype van html5 kan al probleemloos worden gebruikt.

css-discuss-incutio
Inhoudspagina gigantische verzameling links naar alle denkbare onderwerpen.

dev.opera.com/articles
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

developer.mozilla.org/en/CSS_Reference
Mozilla's uitgebreide overzicht van wat Firefox ondersteunt aan attributen, selectors, enz. Heeft ook verwijzingen naar wat andere browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

handleidinghtml.nl/start
Handleiding CSS, inclusief welke browser wat ondersteunt. Nederlandstalig. Uitstekende site, maar begint wel wat verouderd te raken.

home.tiscali.nl/developerscorner/ (Golden Rules of CSS)
Lijstje met uiterst handige tips om problemen en extra werk te voorkomen.

homepage-maken.nl/csscursus
Nederlandstalige cursus.

learncss.tutsplus.com
Cursus html en css in de vorm van 31 video's.

reference.sitepoint.com/css
Uitgebreide handleiding met welke browser wat ondersteunt en mogelijkheid online dingen uit te proberen.

sceneone.nl
Nederlandstalige HTML- en CSS-tutorials.

sitemasters.be/tutorials/5/1/CSS
Nederlandstalige CSS-tutorials.

w3.org/Style/CSS/current-work
Stand van zaken met betrekking tot css3.

w3.org/TR/CSS21
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Officiële specificatie CSS 2.1.

w3schools.com/css
CSS-tutorial (met overzicht van selectors enz.).

web-garden.be/cursus-html
Nederlandstalige cursus HTML/CSS (beste Nederlandstalige cursus die ik ken).

webontwikkelaar.nl/css/cursus
Nederlandstalige cursus, ook heel duidelijk.

wpdfd.com/issues/70/css_from_the_ground_up
Engelstalige cursus.

Printen

CSS → Printen

css-voorbeelden.nl/artikelen/printen
Nederlandstalig artikel over het gebruik van css bij het printen.

css-discuss.incutio.com/wiki/Print_Stylesheets
Artikel over de problemen bij het maken van 'n lay-out voor printen.

Quirks mode

CSS → Quirks mode

hsivonen.iki.fi/doctype
Welk doctype zorgt voor almost standards, standards en quirks mode?

quirksmode.org/css/quirksmode
Uitleg over quirks mode, strict mode, e.d.

Schaduw

CSS → Schaduw

Online dingen uitproberen zie CSS → Online wijzigingen uitproberen.

Op deze (Nederlandstalige) site vind je voorbeelden van schaduw onder Schaduw.

robertnyman.com
Schaduw rondom blok-elementen in alle browsers.

viget.com
39 Ridiculous Things To Do With CSS3 Box Shadows.

Selectors, specificiteit, e.d.

CSS → Selectors, specificiteit, e.d.

Online bepalen van specificiteit zie Gereedschap → Specificiteit bepalen.

coding.smashingmagazine.com
How To Use CSS3 Pseudo-Classes. Uitgebreide uitleg over alle pseudo-classes uit CSS3.

css-voorbeelden.nl/artikelen/css
Selector, identiteit, class, specificiteit: hoe overleef ik de nieuwe klassenstrijd? Nederlandstalig.

dev.opera.com/articles
CSS3 :target based interfaces.

lea.verou.me/demos/nth
Online de css3-selectors nth-child, nth-last-child, nth-of-type en nth-last-of-type uitproberen.

reference.sitepoint.com/css/specificity
Uitstekende uitleg met voorbeelden over specificiteit.

vogtjosh.com/selectors/
Uiterst duidelijk overzicht met uitleg van alle selectors.

Transition

CSS → Transition

Online dingen uitproberen zie CSS → Online wijzigingen uitproberen.

onextrapixel.com/2010/11/17
A Comprehensive Guide to CSS 3 Transitions..

Validators

CSS → Validators

htmlhelp.com/tools/csscheck
WDG CSS-validator. Geeft heel duidelijke meldingen, maar is zo uitgebreid dat je er wat moedeloos van wordt... Wel uiterst leerzaam en volledig.

jigsaw.w3.org/css-validator
W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt. Om de fout die ik heb gemaakt te voorkomen: onder Meer opties zit de mogelijkheid om te kiezen voor css3 en om voorvoegsels als -moz- geen fout te laten geven.

Forums

Flash → Forums

flashfocus.nl/forum
Forum over het maken van sites met de nadruk op flash. Registratie alleen mogelijk als je zelf flash gebruikt. Nederlandstalig.

vintagesworld.be/forum
Forum over flash. Nederlandstalig.

Scripts

Flash → Scripts

devscripts.com/category/browse/543/FlashLinks naar scripts. Ingedeeld naar categorie en meestal met demo.

hotscripts.com/category/scripts/flash/fla_archives
Links naar scripts.

scripts.com/php-scripts/flash-scripts
Links naar scripts.

vintagesworld.be/scriptbase
Scripts. Nederlandstalig.

Tutorials, voorbeelden

Flash → Tutorials, voorbeelden

actionscript.org/resources/categories/Tutorials
Tutorials.

flashfocus.nl/forum
Gigantische lijst met links naar tutorials.

flashperfection.com
Tutorials.

good-tutorials.com/tutorials/flash
Links naar tutorials.

hotscripts.com/category/scripts/flash/tutorials-tips
Links naar tutorials.

smartwebby.com/Flash
Tutorials.

tutorial-index.com
Tutorials.

vintagesworld.be/tutorials
Flash-tutorials. Nederlandstalig.

Achtergrond of gradient (verlopende kleur) maken

Gereedschap → Achtergrond of gradient (verlopende kleur) maken

Online gradients met behulp van css3 maken of uitproberen zie CSS → Online wijzigingen uitproberen.

patterncooler.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei ronde patronen.

pixelknete.de/dotter/
Online achtergrond-afbeeldingen maken met stippels. (Om zoeken te voorkomen: downloaden via rechtsklikken.)

stripegenerator.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei lijn-patronen.

stripemania.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei lijn-patronen.

tartanmaker.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei ruit-patronen.

tools.dynamicdrive.com/gradient
Online gradient maken.

Afbeelding bewerken en optimaliseren

Gereedschap → Afbeelding bewerken en optimaliseren

advanced.aviary.com/tools/peacock
Online allerlei effecten op een (bestaande) afbeelding) aanbrengen.

advanced.aviary.com/tools/phoenix
Online afbeelding maken of bewerken met Gimp-achtige tool.

gimp.org
Professioneel programma om afbeeldingen te bewerken. Site is Engelstalig, programma is ook Nederlandstalig.
Links naar sites over Gimp. Nederlandstalig.

irfanview.com
Populair programma voor Windows, geschikt voor simpele bewerkingen. Site is Engelstalig, programma is ook Nederlandstalig.

picnik.com
Online afbeelding bewerken. Uiterst makkelijk te gebruiken.

pixlr.com/editor
Uitgebreid online afbeelding maken of bewerken.

smushit.com/ysmush.it
Bestand optimaliseren (zo klein mogelijk maken).

sumopaint.com/home
Online afbeelding maken of bewerken met Gimp-achtige tool.

tools.dynamicdrive.com/imageoptimizer/
Online optimaliseren van gif, jpg en png-afbeeldingen. Toont vooraf verschillende besparingen en bijbehorende kwaliteit(sverlies).

Animaties maken

Gereedschap → Animaties maken

animationonline.com
Online bewegende banner, knop, kader, e.d. maken.

gickr.com
Online animatie van eigen afbeeldingen maken.

picasion.com
Online animatie van eigen afbeeldingen maken.

Banner maken

Gereedschap → Banner maken

bannersketch.com
Online banner maken.

coder.com/creations/banner
Online banner maken.

Bewaking site

Gereedschap → Bewaking site

changedetection.com/monitor
Meldt als een pagina op 'n site is veranderd.

dingitsup.com (Ding It's Up)
Per e-mail melding krijgen als site weer online is.

downforeveryoneorjustme.com/
Is 'n site alleen voor mij down of voor iedereen?

uptimerobot.com
Meldt per mail, twitter, e.d. of site offline is. Tot vijftig sites.

webbuddy.nl
Meldt per mail als site offline is. Nederlandstalig.

CSS

Gereedschap → CSS

Door de veelheid aan online hulpmiddelen voor css, is het nogal lastig al het gereedschap voor css hier bij Gereedschap neer te zetten. Veel staat hier onder Gereedschap, maar vooral voor css3 staat ook een en ander bij css:

Dingen die in elke normale browser gewoon werken laten werken in Internet Explorer zie css → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer.

Online testen wat welke browser ondersteunt zie css → Browser support.

Online gereedschap voor fonts zie css → Fonts.

Online wijzigingen uitproberen zie css → Online wijzigingen uitproberen.

Cursor maken

Gereedschap → Cursor maken

cursor.cc
Online afbeelding omzetten naar eigen cursor voor Internet Explorer (.cur-bestand), of rechtstreeks zo'n cursor ontwerpen. (Alle normale browsers kunnen met normale formaten uit de voeten.)

Debuggen

Gereedschap → Debuggen

Editors en IDE's

Gereedschap → Editors en IDE's

wysiwyg-editors zie Gereedschap → wysiwygeditors.

activestate.com/komodo-edit (Komodo Edit)
Open source editor voor 'n hele reeks talen, waaronder html, css en php. Draait op allerlei systemen.

aptana.com/products/studio2 (Aptana Studio 2)
IDE voor HTML, JavaScript, CSS, DOM, en plug-ins voor tal van andere talen. Draait op allerlei systemen.

bluefish.openoffice.nl
Open source editor voor 'n hele reeks talen, waaronder html, css en php. Draait op allerlei systemen. Site is Engelstalig, programma is ook Nederlandstalig.

eclipse.org
Open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal. Draait op allerlei systemen.

en.wikipedia.org/wiki/Comparison_of_text_editors
Zeer uitgebreide vergelijking van groot aantal editors.

htmlkit.com
Editor voor onder andere HTML, XHTML, XML, CSS, JavaScript en PHP. Site is Engelstalig, programma is ook Nederlandstalig. Draait alleen op Windows.

notepad-plus-plus.org/ (Notepad++)
Simpele editor voor Windows. Veel beter dan Kladblok (Notepad). De site is Engelstalig, het programma is ook Nederlandstalig.

scintilla.org (SciTE)
Editor voor Windows en Linux, geschikt voor 'n hele serie talen. Site is Engelstalig, programma is ook Nederlandstalig.

Emulators en SDK's voor mobiele apparatuur

Zie bij Mobiele appratuur → Emulators, SDK's, specificaties, e.d. voor en van specifieke toestellen.

Favicon maken

Gereedschap → Favicon maken

favicon.cc
Zelf online tekenen of afbeelding uploaden.

tools.dynamicdrive.com/favicon
Online favicon maken van eigen afbeelding.

websonic.nl/webtools/webtools_favicongenerator
Online favicon maken van eigen afbeelding. Nederlandstalig.

Formulier maken

Gereedschap → Formulier maken

jotform.com
Online formulier maken. Nederlandstalig.

FTP-programma's

FTP-programma's

filezilla-project.org
Uitstekende open source ftp-client. Site is Engelstalig, programma is ook Nederlandstalig.

Grafiek en diagram maken

Gereedschap → Grafiek en diagram maken

Voor bibliotheken e.d. die SVG e.d. gebruiken zie SVG.

nces.ed.gov/nceskids/createagraph
Online grafiek maken en opslaan als afbeelding.

HTML

Gereedschap → HTML

Door de veelheid aan online hulpmiddelen voor (x)html, is het nogal lastig al het gereedschap voor (x)html hier bij Gereedschap neer te zetten. Veel staat hier onder Gereedschap, maar vooral voor html5 staat ook een en ander bij html:

Dingen die in elke normale browser gewoon werken laten werken in Internet Explorer zie css → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer.

Online <canvas> uitproberen zie HTML → Canvas.

Online wijzigingen uitproberen zie HTML → Online wijzigingen uitproberen.

Video converteren zie HTML → Embed, object, video, audio.

HTTP Request en Response Header, cache

Gereedschap → HTTP Request en Response Header, cache

mnot.net/cache_docs
Uitgebreid artikel over http-headers, cache, enz.

redbot.org
Online inhoud van Response Header bekijken. Geeft suggesties om eventuele problemen op te lossen.

web-sniffer.net
Toont online inhoud HTTP Request en Response Header. Laat verder code van pagina e.d. zien. Prima manier om te controleren of server juiste foutcodes zoals 'n 404 verzendt.

Imagemap maken

Gereedschap → Imagemap maken

maschek.hu/imgemap/imgmap
Online imagemap maken.

Kleuren

Gereedschap → Kleuren

0to255.com
Uitgaande van een basiskleur serie van 31 tinten genereren, van wit tot zwart.

advanced.aviary.com/launch/toucan
Online kleurenpalet maken.

colorschemedesiger.com
Kleurenschema ontwerpen met behulp van kleurenwiel. Kan ook testen op voldoende contrast voor kleurenblinden.

css.coloratum.com
Online namen van kleuren, hex-waarden, rgb() en hsl() naar elkaar converteren.

december.com/html/spec/colorshades
Uitgaande van een basiskleur worden online drie bijbehorende lichtere kleuren getoond.

degraeve.com/color-palette
Online op zelf te bepalen afbeelding gebaseerd kleurenpalet maken.

ficml.org/jemimap/style/color/wheel
Uiterst handig kleurenwiel om makkelijk 'n kleur uit te zoeken.

html-site.nl/colorpicker
Online kleurcombinaties uitproberen. Nederlandstalig.

javascripter.net/faq/hextorgb
Waarde converteren van en naar hexadecimaal, rgb() en cmyk().

slayeroffice.com/tools/color_palette
Online kleurenreeks maken van twee keer vijf bij elkaar horende kleuren.

standardista.com/hsla-color-picker
Online hsla() kleurenwaarden uitproberen en gelijk vertalen naar rgba() en hex.

Knoppenmakers

Gereedschap → Knoppenmakers

cooltext.com
Online knoppenmaker.

css-tricks.com/examples/ButtonMaker
Online css3-knoppenmaker.

css3button.net
Online css3-knoppenmaker.

lucazappa.com/brilliantMaker/buttonImage
Online knoppenmaker met mogelijkheid voor twee afbeeldingen in één knop.

tools.dynamicdrive.com/button
Online knoppenmaker.

web20badges.com
Online badge maken.

Kolommen maken

Gereedschap → Kolommen maken

developerscorner.nl/ (Online Page Creator for Dummies)
Online twee kolommen en header maken. Nederlandstalig.

neuroticweb.com/recursos-3-columns-layout
Online code voor drie kolommen, header en footer maken.

pagecolumn.com
Online code voor een tot vijf kolommen, header en footer maken.

pagecolumn.com/4_col_generator
Online code voor vier kolommen maken.

Label maken

Gereedschap → Label maken

acme.com/labelmaker
Online label zoals uit lettertang komt maken.

Links controleren

Gereedschap → Links controleren

2bone.com/links/linkchecker
Online links controleren van één pagina.

home.snafu.de/ (Xenu's Link Sleuth)
Gratis programma om links te controleren. Werkt helaas alleen op Windows.

htmlhelp.com/tools/valet/ (WDG Web Design Group)
Online links controleren van 'n hele site. Kan 'n tijdje duren, maar 't gebeurt ongelooflijk grondig en uitgebreid. Alleen de url van de site hoeft maar te worden opgegeven, de pagina's worden automatisch gevonden.

linkchecker.sourceforge.net
Open source link-checker met veel extra's. Werkt helaas alleen op Windows.

validator.w3.org/checklink (W3C)
Online links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen.

Locale server draaien

Gereedschap → Locale server draaien

usbwebserver.net/nl
Gratis locale server, hoeft niet geïnstallerd te worden. Gebundeld pakket van Apache, PHP, MySQL, MiniRelay en phpMyAdmin. Uiterst handig om PHP en dergelijke uit te proberen. Website en bijgesloten hulp zijn Nederlandstalig, programma's niet.

Logo maken

Gereedschap → Logo maken

cooltext.com
Online logo maken.

creatr.cc/creatr
Online logo maken.

grsites.com/generate
Online logo maken.

simwebsol.com/ImageTool
Online logo maken.

web2.0stylr.com/stylr
Online logo maken.

Lorem Ipsum (opvultekst) maken

Gereedschap → Lorem Ipsum (opvultekst) maken

blindtextgenerator.com/lorem-ipsum
Online Lorem Ipsum-tekst genereren.

generator-lorem-ipsum.info
Online Lorem Ipsum-tekst genereren.

hipsteripsum.me
Online artistieke Lorum Ipsum-tekst genereren.

lorizzle.nl
Online Gangsta Lorem Ipsum-tekst genereren. Wat is Gangsta Lorem Ipsum? Eh, tja, eh, laat ik zeggen: zeer onnette Lorem Ipsum. Je bent gewaarschuwd, als je niet tegen Engelse vleeswaren en zo kunt, moet je dit niet bezoeken. Maar 't is weer 'ns wat anders...

nl.lipsum.com
Online Lorem Ipsum-tekst genereren. Nederlandstalig.

Meerdere versies van Internet Explorer draaien

Gereedschap → Meerdere versies van Internet Explorer draaien

Andere browsers zie Gereedschap → Weergave testen.

De link die hier stond naar portable versies van Internet Explorer komt niet meer terug. De door mij geteste versies bleken zonder uitzondering bijzonder slecht of niet te werken. Daarnaast kreeg je regelmatig als extra bonus Trojaanse paarden, virussen, wormen en zelfs eenmaal 'n giraf gratis meegeleverd. Kortom: niet doen.

expression.mocrosoft.com (Expression Web SuperPreview)
Verschillende versies van Internet Explorer gelijktijdig bekijken.

finalbuilds.com/iecollection (Final Builds Site)
Pakket met Internet Explorer 1.0 t/m 8.0. Je kunt kiezen welke je wilt installeren.
WAARSCHUWING: er zijn nogal wat verhalen dat het installeren van dit programma je bestaande Internet Explorer-installatie kan beschadigen. Bij mij persoonlijk maakte het Internet Explorer 7 onbruikbaar. Maar er zijn minstens evenveel verhalen dat het prima werkt. Wel iets om even over na te denken voor je dit installeert.

github.com/xdissent/ievms
Script, handleiding, e.d. om binnen VirtualBox op Linux of OS X images van Internet Explorer 7, 8 of 9 te draaien. Dit is, samen met de gelijk hieronder staande methode, de enige manier om Windows perfect te imiteren.

microsoft.com/ (Internet Explorer Application Compatibility VPC Image)
Images van Internet Explorer 6, 7, 8 en 9 om binnen Virtual PC te draaien. Dit is, samen met de gelijk hierboven staande methode, de enige perfecte testsituatie die ik ken voor Internet Explorer, omdat de échte browser binnen een volledig eigen os draait. Alleen virtualisatie werkt even goed.

my-debugbar.com/wiki/IETester/HomePage
Programma om site te testen in Internet Explorer 5.5, 6, 7, 8, 9 en 10.

Menu en list maken

Gereedschap → Menu en list maken

accessify.com/tools-and-wizards/ (List-O-Matic)
Online list met uitgebreid menu maken.

cssmenumaker.com
Online allerlei css-menu's maken.

cssplay.co.uk/menus/menu_builder_flyout (Stu Nicholls | CSSplay)
Online css-uitklapmenu maken.

lab.mattvarone.com/navbar
Online navigatie-balk met afbeelding maken.

purecssmenu.com
Online uitklapmenu met meerdere niveaus maken. Gebruikt alleen css en werkt ook in Internet Explorer 6.

tabsgenerator.com
Online tabbladen maken.

Metatags genereren

Gereedschap → Metatags genereren

homepage-maken.nl/metatag
Online metatags genereren. Nederlandstalig.

Outliner

Gereedschap → Outliner

gsnedders.html5.org/outliner
html5 outliner. Online outline met behulp van de nieuwe html5 tags zichtbaar maken.

Reguliere expressies ('Regular Expressions')

Reguliere Expressies ('Regular Expressions')

regexlib.com
Grote bibliotheek met reguliere expressies.

regexpal.com
Online reguliere Expressies testen.

Ronde hoeken maken

Gereedschap → Ronde hoeken maken

Bij deze online-gereedschappen wordt gebruik gemaakt van afbeeldingen. Inmiddels is het veel beter om de css3-eigenschap border-radius te gebruiken. Deze werkt in alle goede browsers, en daarnaast ook in Internet Explorer 9. Zie hiervoor CSS → borders. De oude bagger van Microsoft krijgt dan gewoon geen ronde hoeken, of je kunt eventueel JavaScript gebruiken voor deze fossielen.

tools.sitepoint.com/spanky
Online ronde hoeken genereren.

wigflip.com/cornershop
Online ronde hoeken genereren.

Snelheid van de site testen

Gereedschap → Snelheid van de site testen

Snelheid mobiele apparatuur testen zie Mobiele apparatuur → Validators, snelheid testen, e.d.

code.google.com/ (PageSpeed))
Extensie voor Firefox en Google Chrome die problemen op het gebied van snelheid (en mogelijke oplossingen) laat zien.

developer.yahoo.com/yslow
Extensie voor Firefox en Google Chrome die problemen op het gebied van snelheid (en mogelijke oplossingen) laat zien.
Door yslow gebruikte regels staan op developer.yahoo.com/preformance/rules.

gtmetrix.com/
Online testen hoe snel de pagina laadt met behulp van YSlow en Page Speed. Met suggesties voor oplossingen.

pagespeed.googlelabs.com/
Online testen hoe snel de pagina laadt e.d.. Met suggesties voor oplossingen.

websiteoptimization.com/services/analyze
Online testen hoe snel de verschillende onderdelen van 'n pagina laden.

zoompf.com
Online testen hoe snel de site laadt. Met gedetailleerde informatie en links naar artikelen met oplossingen.

Sprite maken

Gereedschap → Sprite maken

spritebox.net
Sprite) maken en uploaden. Daarna met behulp van de muis de grenzen van de deel-afbeeldingen aangeven, waarna de css wordt aangemaakt.

spritegen.website-performance.org
Online sprite maken van afbeeldingen die je uploadt. Nederlandstalig.

spriteme.org (SpriteMe)
Online achtergrond-afbeeldingen vanuit een bestaande pagina samenvoegen tot sprites. Inclusief de benodigde css.

Tabel maken van spreadsheet

Tabel maken van spreadsheet

tableizer.journalistopia.com
Online html-tabel maken van Excel-, Calc- of andere spreadsheet.

Tekst langs ronde lijnen zetten

Tekst langs ronde lijnen zetten

csswarp.eleqtriq.com/
Online tekst langs ronde lijnen zetten met behulp van css3. Lettersoort, ronding, enz. kan worden aangepast. Maakt automatisch benodigde html en css.

Tekstbrowser simuleren

Gereedschap → Tekstbrowser simuleren

delorie.com/lynxview
Laat online site zien zoals 'n tekstbrowser (Lynx) hem ziet. Je moet wel 'n bestandje op je site plaatsen als bewijs dat 't echt jouw site is.

w3.org/cgi-bin/html2txt (W3C)
Zet online html om in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Thumbnails maken

Gereedschap → Thumbnails maken

thumbalizr.com
Maakt online afbeelding van een site. Grootte van thumbnail tot schermvullend.

thumber.bigplain.com
Online afbeelding verkleinen tot zelf gekozen maat.

Tijdelijk online zetten

Gereedschap → Tijdelijk online zetten

webdevout.net/test
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

URL-verkorter

URL-verkorter

goo.gl
Adres van een site of pagina coderen, zodat het gebruikt kan worden in forums e.d., zonder dat het adres zelf geïndexeerd wordt door zoekmachines.

Vector-editor

Gereedschap → Vector-editor

advanced.aviary.com/tools/vector-editor (Raven)
Online vector-editor.

Voortgangsindicator maken

Gereedschap → Voortgangsindicator maken

ajaxload.info
Online bewegende voortgangsindicator maken.

loadinfo.net
Online bewegende voortgangsindicator maken.

webscriptlab.com
Online bewegende voortgangsindicator maken.

Weergave testen

Gereedschap → Weergave testen

Alleen meerdere versies van Internet Explorer naast elkaar draaien zie Gereedschap → Meerdere versies van Internet Explorer draaien.

Sites voor mobiele apparatuur e.d. testen zie Mobiele apparatuur → Emulators, SDK's, specificaties, e.d. voor en van specifieke toestellen

Ik vermeld hier alleen maar gratis mogelijkheden. Er zijn nog tal van programma's en services, waarin je tegen betaling kunt testen in verschillende (versies van) browsers. Voor je ergens voor betaalt, zou ik eerst heel erg goed recensies lezen, want er schijnt nogal wat kaf onder het (dure) koren te zitten.

asisness.com/Tools/screensize
Online de pagina bekijken in 'n hele reeks verschillende resoluties.

browserlab.adobe.com/en-us
Online testen in o.a. Safari, Google Chrome, Firefox en Internet Explorer 6, 7, 8 en 9. Ik heb dit zo'n jaar geleden geprobeerd en nu (oktober 2010) nog 'ns. Registreren bij De Nederlandse Bank als gemachtigde om de kluis te betreden is vermoedelijk simpeler. Het werkt met flash, dus het is behoorlijk traag.

December 2010: een deel van de kritiek die hier stond, heb ik weggehaald. Inmiddels werkt dit uitstekend, ook met Google Chrome en Safari.

browsers.evolt.org
Groot archief van te downloaden oude browsers.

browsershots.org
Test online je pagina in heel veel verschillende browsers op allerlei besturingssystemen met behulp van 'n screenshot.

lunascape.tv
Alleen voor Windows. Browser met ingebouwd gecko, trident en webkit, de weergave-delen van Firefox, Internet Explorer, Google Chrome en Safari. Volgens eigen zeggen zou je sites met Lunascape in deze browsers kunnen testen. Ik heb dit niet uitgeprobeerd, maar weet wel dat er tussen Safari en Google Chrome (soms tamerlijk grote) verschillen zijn, terwijl die beide webkit gebruiken. Verder hebben ze het over "trident", terwijl Internet Explorer 7 (laat staan eerdere versies) niet te vergelijken is met Internet Explorer 9. Het is stomweg uitgesloten dat je alle versies van Internet Explorer in 'trident' kunt testen. Maar goed, voor de volledigheid vermeld ik ze hier ook maar.

netrenderer.com
Laat online zien hoe de pagina er in Internet Explorer 5.5 t/m 9 uitziet, met zelfs de verschillen tussen enkele versies. De weergave in Internet Explorer 9 werkt ook, als je Windows XP hebt. Hoewel de enige écht zekere weergave natuurlijk de echte Internet Explorer 9 blijft.

responsivepx.com
Online de pagina bekijken in een reeks verschillende resoluties. Tot 3000 x 3000 kan worden geëmuleerd. In Firefox en Internet Explorer met vooraf ingestelde keuzes, in Safari, Google Chrome en Opera traploos.

spoon.net/browsers
Internet Explorer 6, 7 en 8, Safari, Google Chrome, Opera en Firefox naast elkaar draaien, volgens xenocode zonder ze te installeren.
De extensie voor Firefox die dit heel simpel mogelijk zou moeten maken, liet alleen Firefox crashen. Maar dat deed hij dan ook heel consequent...
Er wordt wel degelijk iets geïnstalleerd, 'n sandbox waarbinnen kennelijk de browsers draaien.
Internet Explorer 6, 7 en 8 draaiden goed naast elkaar, maar er waren wel kleine verschillen tussen Internet Explorer 6 en 7 die volledig zelfstandig draaien, en deze versies binnen 'n sandbox. Geen grote verschillen, maar ze zijn er dus wel, althans in juli 2009 toen ik dit bekeek.

Oktober 2010 weer 'ns bekeken. Nu crashte Firefox meermalen bij het inloggen op mijn account bij spoon.net. Firefox crasht dus eigenlijk nooit... Omdat ik inmiddels had ontdekt, dat Internet Explorer 9 op XP niet wordt ondersteund, heb ik het verder niet geprobeerd. Misschien crasht de extensie nu niet meer, maar dat weet ik dus niet.

viewlike.us
Online de pagina bekijken in een reeks verschillende resoluties. Tot 1920 x 1200 kan worden geëmuleerd.

wysiwyg-editor

Gereedschap → wysiwyg-editor

Editors en IDE's zie Gereedschap → Editors en IDE's.

Verreweg het beste is om zelf html, css, enz. te leren schrijven.

Drie veel gebruikte programma's van Microsoft zijn in ieder geval zonder meer ongeschikt: FrontPage, Publisher en Word.

Publisher en Word stoppen er code in die alleen voor Internet Explorer werkt. Waarom je Word niet moet gebruiken staat hier duidelijk uitgelegd: MS Word-document opslaan als HTML-pagina? Niet doen!

FrontPage maakt code die vaak alleen goed werkt in Internet Explorer. In alle andere browsers zie je 't vaak helemaal verkeerd of soms zelfs helemaal niets. Ook in Internet Explorer 8 geeft 't vaak problemen. Microsoft zelf raadt al jaren aan het niet meer te gebruiken.

Als je om een of andere reden zelf geen html, css, enz. wilt leren, is Kompozer 'n goede gratis wysisyg-editor. Kompozer is de opvolger van nvu, dat niet meer wordt onderhouden. Kompozer zelf schijnt inmiddels ook niet meer echt ontwikkeld te worden. Wel nog actief ontwikkeld wordt BlueGriffon, van de makers van het oorspronkelijke nvu.

bluegriffon.org
wysiwyg-editor voor html5, css3, SVG en MathML. De site is Engelstalig, het programma is ook Nederlandstalig.

kompozer.net/download
Downloadpagina van Kompozer.

handleiding.helpmij.nl
Beknopte Nederlandstalige handleiding voor Kompozer.

mozbrowser.nl/forum
Nederlandstalig forum over Kompozer, nvu en Bluegriffon.

kompozer.nl
Uitgebreide Nederlandstalige cursus Kompozer.

en.wikipedia.org/wiki
Vergelijkend overzicht van groot aantal wysiwyg-editors.

Browser support

HTML → Browser support

caniuse.com
Handige tabel met wat globaal in welke browser (al) werkt van css 3, svg, html5 en nog wat dingen. Inclusief mobiele browsers.

developer.apple.com/library/safari
Apple's officiële pagina's over wat Safari van html ondersteunt. Inclusief iOS (Apples mobiele systeem).

developer.mozilla.org/en/HTML/Element
Mozilla's officiële pagina's over wat Firefox van html ondersteunt.

en.wikipedia.org/wiki
Tabel welke browser wat ondersteunt van html5.

findmebyip.com/litmus
Uitgebreide tabel wat in welke browser werkt van html5 en css3.

handleidinghtml.nl/start
Handleiding HTML, inclusief welke browser wat ondersteunt. Nederlandstalig.

html5please.us
Geeft van groot aantal css3-eigenschappen, html5-onderdelen, API's, microdata, enz. aan in welke browser ze werken. Met manieren om ze werkend te krijgen in andere browsers.

mobilehtml5.org
Browser support voor html5 en css3 in mobiele browsers.

opera.com/docs/specs
Opera's officiële pagina's over wat welke versie van Opera ondersteunt.

reference/sitepoint.com/html
Uitgebreide handleiding inclusief welke browser wat ondersteunt.

webdevout.net/browser-support-html
Uitgebreide browser support tabel met html 4.01 en XHTML1.0 en 1.1. Bovenaan de pagina kun je kiezen welke browsers moeten worden weergegeven.

wufoo.com/html5/example/
Online testen wat in welke browser werkt van html5 voor formulieren.

Canvas

HTML → Canvas

code.google.com/p/explorercanvas (ExplorerCanvas)
Maakt het gebruik van <canvas> (HTML5) in Internet Explorer mogelijk.

dev.opera.com/articles/
HTML5 canvas - the basics. Korte cursus.

developer.apple.com/library/safari
Safari HTML5 Canvas Guide. Uitgebreide inleiding over canvas.

developer.mozilla.org/en/Canvas_tutorial
<canvas> (HTML5) tutorial .

diveintohtml5.info/canvas
Inleiding over canvas.

en/wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Canvas)
Browser support tabel.

sitepoint.com
A Developer's Guide to HTML5 Canvas.

netsetters.nl/2010/05/html5-het-canvas-element
Korte Nederlandstalige inleiding over het canvas-element (HTML5).

tutorialspoint.com/html5/html5_canvas
Handleiding met voorbeelden en de mogelijkheid online veranderingen uit te proberen.

Charsets, unicode, entiteiten

HTML → Charsets, unicode, entiteiten

alanwood.net/unicode/ (Alan Wood's Unicode Resources)
Alle tekens uit unicode. Kunnen online bekeken worden. Veel andere info over unicode.

css-voorbeelden.nl/artikelen/html/head
Artikel over charset, tekenset, utf-8, entiteiten, accenten, en dergelijke. Nederlandstalig.

css-voorbeelden.nl/artikelen/lijsten
Lijsten met utf-8-codes en entiteiten. Nederlandstalig.

evolt.org/entities
Entiteiten ISO 8859-1.

fileformat.info/info/unicode
Zeer uitgebreide informatie over utf-8 zoals welk font welk teken ondersteunt en zelfs welke fonts in je eigen computer welke tekens ondersteunen.

htmlhelp.com/reference/html40/entities
Tabellen om te controleren of je browser entiteiten, decimale en hexadecimale codes goed weergeeft.

iana.org/assignments/character-sets
Overzicht en beschrijving van charsets.

ltg.ed.ac.uk/~richard/utf-8
Zoeken op naam en zoeken op en converteren tussen decimale, octale en hexadecimale utf-8 code.

kostis.net/charsets
Tekensets uit heel veel charsets. Laat online de inhoud van elke charset zien.

unicode.org/charts/ (The Unicode Consortium)
Unicode - Lettertekens. Te downloaden pdf-bestanden.

Dingen mogelijk maken specifiek voor Internet Explorer

Dingen mogelijk maken specifiek voor Internet Explorer

Zie CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer

Doctype (DTD)

HTML → Doctype (DTD)

w3.org/QA/04/valid-dtd-list
Lijst met geldige doctypes (DTD's).

w3schools.com/dtd
DTD Tutorial en overzicht.

Embed, object, video, audio

HTML → Embed, object, video, audio

camendesign.com/code/ (Video for Everybody!)
Zonder gebruik van JavaScript in alle browsers video tonen. Maakt gebruik van het video-element uit HTML5 en, als dat niet aanwezig is, alternatieve manieren. Het installeren van een plug-in is niet nodig, werkt ook zonder JavaScript. Flash wordt alleen gebruikt, als het niet anders kan.

diveintohtml5.info/video
Uitgebreid artikel over video en audio.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
Browser support <video>- en <audio>-element uit HTML5. Toont ook ondersteuning voor alle parameters, DOM, enz.

firefogg.org
Video naar Ogg Theora converteren met behulp van Firefox-extensie.

fronteers.nl/blog
Uiterst leesbare Nederlandstalige uitleg over het video-element.

html5rocks.com/tutorials/audio/quick
Voorbeeld van het html5-element <audio>, met fall-back voor browsers die het niet ondersteunen.

html5rocks.com/tutorials/video/basics
Uitgebreide handleiding voor het html5-element <video>.

joliclic.free.fr/html/object-tag/en
Uitgebreide uitleg van object-element in HTML strict. Met testmogelijkheden.

longtailvideo.com
Flash embedden.

reelseo.com/html5-ogg-h264-encoding-tools
Lijst met links naar sites e.d. die video converteren naar OGG Theora en/of H.264.

video.online-convert.com/convert-to-webm
Online video converteren naar WebM (VP8).

w3schools.com/html/html_media
Multimedia tutorials en online uitproberen.

webdirections.org/blog
Getting Sourcey - native HTML5 Audio and video. Uiterst duidelijk artikel over <audio> en </video>.

Favicon

HTML → Favicon

en.wikipedia.org/wiki/Favicon
Overzichtsartikel met links naar meer artikelen, browser support, enz.

Frames

HTML → Frames

webrichtlijnen.nl/aan-de-slag/alles-over-frames
Uitstekend overzicht van de nadelen van frames. Nederlandstalig.

HTML5 (Interessante artikelen e.d.)

HTML → HTML5 (Interessante artikelen e.d.)

html5demos.com
Allerlei demonstraties.

html5rocks.com
Voorbeelden, handleidingen, enz. Mogelijkheid dingen online uit te proberen.

Imagemap

HTML → Imagemap

Online imagemap maken zie Gereedschap → Imagemap maken.

Landcodes

HTML → Landcodes

loc.gov/standards/iso639-2/php/English_list
Alfabetische lijst met álle ISO-landcodes. Voor een website wordt de tweeletterige ISO 639-1-code gebruikt, eventueel met een subcode.

nl.wikipedia.org/wiki/ISO_639
Nederlandstalig artikel over ISO 639, de standaard voor taalcodes. Hierin wordt uitstekend beschreven hoe techneuten een toch niet al te ingewikkeld systeem vrijwel onbegrijpelijk weten te maken.

people.w3.org/rishida/utils/subtags
Online zoekmogelijkheid om subcodes bij talen te vinden, zoals en-ca (Canadees Engels).

xml.coverpages.org/iso639a
ISO-landcodes, de beknopte versie met alleen tweeletterige codes.

Li, ol en ul

HTML → Li, ol en ul

sceneone.nl/tekst/list
Opmaak en positionering van ol, ul en li. Nederlandstalig.

Microdata

HTML → Microdata

diveintohtml5.info/extensibility
Uitgebreide uitleg over microdata.

google.com/webmasters/tools/richsnippets
Rich snippets-validator, valideert ook microdata.

html5doctor.com/microdata
Zeer uitgebreide uitleg over microdata.

microdata.freebaseapps.com
Online microdata maken voor calendar, content, organization, person, review.

microdatagenerator.com
Online microdata maken voor attorney, auto dealer, dentist, HVAC, local business, locksmith, phisician, plumber, real estate, restaurant.

netsetters.nl/2011/07/semantisch-html5-gebruik-van-microdata
Korte Nederlandstalige inleiding over microdata.

schema.org
Overzicht van gedefinieerde microdata.

schema-creator.org
Online microdate maken voor book, event, movie, organization, person, product, review.

schemafied.com
Online microdata maken voor aggregate rating, article, contact point, creative work, event, local business, media object, nutrition information, offer, organization, person, place, postal address, product, rating, recipe, thing.

support.google.com/webmasters
Uitleg over het gebruik van microdata. Nederlandstalig.

w3.org/TR/microdata
(Ontwerp-)specificatie microdata.

MIME-types

HTML → MIME-types

reference.sitepoint.com/html/mime-types-full
Lijst van mime-types zoals die onder andere kunnen worden gebruikt bij formulieren.

Niet-ondersteunde elementen enz. mogelijk maken

HTML → Niet-ondersteunde elementen enz. mogelijk maken

Zie CSS → Bugs en hacks → Niet-ondersteunde elementen, eigenschappen, enz. mogelijk maken

Online wijzigingen uitproberen

HTML → Online wijzigingen uitproberen

Voor Firefox bestaat 'n aantal extensies waarmee je op elke site online dingen kunt uitproberen. Die staan bij Gereedschap → Debuggen → Firefox. Verder heeft inmiddels elke browser mogelijkheden ingebouwd om online dingen uit te kunnen proberen op 'n willekeurige site.

jsfiddle.net
Online css, html én JavaScript uitproberen en eventueel delen met andere ontwikkelaars.

rendera.heroku.com
Online css en html uitproberen. Met voorbeelden.

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Overzicht elementen, cursussen, tips

HTML → Overzicht elementen, cursussen, tips

BELANGRIJK: Het gebruik van frames en tabellen voor opmaak wordt al meer dan tien jaar sterk afgeraden. Een deel van de hieronder staande cursussen gebruikt helaas deze technieken nog. Omdat ze verder kwalitatief goed zijn, vermeld ik ze hier toch. De nadelen van frames en tabellen voor opmaak vind je onder de links hier gelijk boven.

Frames zijn in html5, dat momenteel al geleidelijk aan wordt ingevoerd, gewoon helemaal verboden. Als je nu dus nog frames gebruikt, blokkeer je het gebruik van alle leuke nieuwe mogelijkheden uit html5.

Tabellen zijn bedoeld voor overzichten met getallen, kalenders, e.d., niet voor opmaak. Tabellen voor opmaak zijn 'n nachtmerrie om te wijzigen, meestal volstrekt ontoegankelijk voor spraakbrowsers e.d. en meestal ook niet goed voor 'n hoge plaats in de index van zoekmachines.

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets, integendeel. Je leert technieken waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

Een aantal cursussen gebruikt helaas een 'transitional' doctype. Dit is bedoeld voor bestaande sites die met al tien jaar verouderde technieken zijn gemaakt. Het maakt het gebruik van al tien jaar afgeraden tags mogelijk. In html5 zijn deze tags helemaal verboden. Als je nu nog deze tags gebruikt, bezorg je jezelf dus echt ongelooflijk veel extra werk als je over wilt schakelen naar html5. Gebruik een 'strict' doctype, dit blokkeert het gebruik van verouderde tags, zodat je probleemloos naar html5 over kunt stappen. Ook het doctype van html5 kan al probleemloos worden gebruikt.

dev.opera.com/articles
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

dev.w3.org/html5/spec
Ontwerp-specificatie html5. Dit is een link naar de inhoudsopgave, van waaruit je naar het betreffende onderdeel kunt gaan. Er is ook 'n pagina waar de volledige specificatie in z'n geheel op staat, maar die is echt onwijs groot.

developers.whatwg.org
html5-specificatie van WHATWG. Deze is iets leesbaarder dan die van w3c, die veel technischer is.

handleidinghtml.nl/start
Overzicht van alle html-elementen. Nederlandstalig.

homepage-maken.nl/xhtml
Nederlandstalige cursus over verschil tussen xhtml en html.

html-site.nl/html_referentie
Alle elementen van XHTML 1.0 met uitleg. Nederlandstalig.

learncss.tutsplus.com
Cursus html en css in de vorm van 31 video's.

sceneone.nl
HTML- en CSS-tutorials. Nederlandstalig.

w3.org/TR/html401
Officiële specificatie html 4.01.

w3schools.com/tags
Overzicht van HTML 4.01 en XHTML 1.0 tags.

w3schools.com/html5/html5_reference
Overzicht van HTML5, inclusief verschillen met HTML 4.01 en dergelijke.

web-garden.be/cursus-html
Nederlandstalige cursus HTML/CSS (beste Nederlandstalige cursus die ik ken).

Tabellen

HTML → Tabellen

webrichtlijnen.nl/aan-de-slag/tabellen
Overzicht van de voor- en nadelen van het gebruik van tabellen voor opmaak. Nederlandstalig.

URL-encoding en links

HTML → URL-encoding en links

microformats.org/wiki/existing-rel-values
Lijst met toegestane waarden bij rel="..."

w3schools.com/tags/ref_urlencode
URL-encoding Reference (Dat zijn die % in url's).

Validators

HTML → Validators

htmlhelp.com/tools/validator
WDG (X)HTML-validator. Kan online site tot honderd pagina's in één keer doen. Alleen de index hoeft ingevoerd te worden, de andere pagina's vindt 't ding zelf. Is wel ontzettend streng en uitgebreid. Valideert geen html5.

lint.brihten.com/html
Valideert html5. Anders dan bij de validator van w3c kun je hier opgeven dat bijvoorbeeld elke <p> gesloten moet worden, elke tag in kleine letters moet zijn geschreven, enz. Zeg maar html valideren alsof het xhtml is.

manifest-validator.com
Cache Manifest Validator.

validator.nu
Online bij één pagina tegelijk (x)html valideren.

validator.w3.org
W3C-validator voor HTML, XHTML, SMIL, MathML, enz. Online één pagina tegelijk testen. Is wat soepeler dan de validator van htmlhelp hierboven. W3C is de organisatie die de officiële standaard voor html, css, enz. bij houdt. Kan ook html5 valideren.

DOM

JavaScript, DOM → DOM

domassistant.com
The idea of DOMAssistant is to provide a simpler and more consistent way to script against the DOM.

quirksmode.org/compatibility
Diverse compatibiliteits-tabellen voor 'n hele rits browsers.

w3schools.com/html5/html5_ref_eventattributes (HTML5 Event Attributes)
Overzicht van HTML5 event-attributen. LET OP: deze werken (nog lang) niet in alle browsers!

w3schools.com/tags/ref_eventattributes
Overzicht van HTML-event-attributen.

Scripts, bibliotheken en frameworks

JavaScript, DOM → Scripts, bibliotheken en frameworks

aplus.rs/adxmenu/#examples
Menu's.

code.google.com/p/hyphenator
Script dat woorden automatisch laat afbreken, net zoals dat in een tekstverwerker zou gebeuren.

developer.yahoo.com/yui/ (Yahoo! User Interface Library)
Bibliotheek met van alles en nog wat.

dojotoolkit.org
Bibliotheek met allerlei functies.

downloadjavascripts.com
Grote verzameling scripts met uitleg en demo's.

dynamicdrive.com
Grote hoeveelheid JavaScripts met werkende voorbeelden.

hesido.com/ (fleXcroll)
Scrollbar aanpassen in alle browsers (niet alleen in Internet Explorer). Begint met 'n waarschuwing dat dit meestal 'n slecht idee is, waar ik het helemaal mee eens ben.

hotscripts.com/category/scripts/javascript/scripts-programs
Grote verzameling scripts met uitgebreide beschrijving.

java-scripts-net
Scripts.

javascriptkit.com/cutpastejava
JavaScripts met werkende voorbeelden.

jquery.com
Bibliotheek met allerlei functies.

krijnhoetmer.nl/stuff
Allerlei JavaScripts met werkende voorbeelden.

lokeshdhakar.com/projects/lightbox2 (Lightbox)
Slideshow met effecten.

mastercode.nl/forum
Scripts met uitgebreide Nederlandstalige uitleg.

mochi.github.com/mochikit
Bibliotheek met allerlei functies.

moofx.mad4milk.net
Bibliotheek met allerlei functies voor animaties.

mootools.net
JavaScript framework.

prototypejs.org
JavaScript Framework.

script.aculo.us
Bibliotheek met functies voor animaties.

scriptsearch.com/JavaScript
Links naar JavaScripts op andere sites.

scripty2.com
Framework om visuele effecten te maken.

sencha.com/ (Ext JS)
Bibliotheek voor het bouwen van rijke internet applicaties.

simplythebest.net/scripts
JavaScripts met werkende voorbeelden.

sitemasters.be/scripts/2/JS
JavaScripts met vaak uitleg hoe ze werken. Nederlandstalig.

thejit.org (JavaScript InfoVis Toolkit)
Toolkit voor het maken van interactieve visualisaties.

udm4.com
Toegankelijk dropdownmenu in allerlei uitvoeringen.

users.skynet.be/javascript
JavaScripts met werkende voorbeelden. Nederlandstalig.

w3schools.com/js/ (JavaScript Examples)
Online wijzigingen in JavaScripts uitproberen.

webtoolsnation.be/javascripts
JavaScripts met werkende voorbeelden. Nederlandstalig.

wmcity.nl/scripts (WebmasterCity)
JavaScripts. Nederlandstalig.

Tutorials, voorbeelden

JavaScript, DOM → Tutorials, voorbeelden

dev.opera.com/articles
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

developer.mozilla.org/en/JavaScript
Links naar allerlei uiterst nuttige onderwerpen, zoals wat nieuw is in welke versie van JavaScript, afwijkingen in Internet Explorer van ECMAScript, enz.

good-tutorials.com/tutorials/javascript
Tutorials.

homepage-maken.nl/javascript
Beknopte Nederlandstalige cursus.

reference.sitepoint.com/javascript
Zeer overzichtelijke JavaScript referentie met voorbeelden en compatibiliteit met browsers.

tutorialized.com/tutorials/Javascript/1
Grote hoeveelheid handleidingen over allerlei onderwerpen.

w3schools.com/dhtml
DHTML Tutorial.

w3schools.com/dhtml/dhtml_examples
DHTML-voorbeelden, die online gewijzigd kunnen worden.

w3schools.com/htmldom
HTML DOM Tutorial en overzicht.

w3schools.com/js
JavaScript Tutorial en overzicht.

Validators, debuggers en online uitproberen

JavaScript → Validators, debuggers en online uitproberen

code.google.com/intl/nl/closure/utilities (Closure Linter)
Script om JavaScript te controleren op syntax-fouten e.d.

jsfiddle.net
Online css, html én JavaScript uitproberen en eventueel delen met andere ontwikkelaars.

jshint.com
JavaScript-validator. Online, maar kan ook worden gedownload.

jslint.com
Online JavaScript-validator.

Emulators, SDK's, specificaties, e.d. voor en van specifieke toestellen

Mobiele apparatuur → Emulators, SDK's, specificaties, e.d. voor en van specifieke toestellen

WAARSCHUWING

De meeste online simulators e.d. doen niet precies hetzelfde als een écht mobiel apparaat. In de regel wordt, met meer of minder succes, een mobiel apparaat geïmiteerd. Ik heb geprobeerd in dit overzicht geen simulators op te nemen die alleen het venster verkleinen, want dat heeft niets met een simulatie te maken en dat kun je zelf ook wel. Maar het kan best zijn dat er eentje doorheen is geglipt.

Dit is niet onbelangrijk, want je kunt tijden bezig zijn om iets te testen op zo'n nep-simulator, en dan blijkt het uiteindelijk gewoon niet te werken, omdat je bijvoorbeeld css gebruikt die op het echte apparaat niet wordt ondersteund. Om te testen kun je het best de downloads die door de officiële makers worden geleverd gebruiken. Of echte apparaten natuurlijk, maar dan moet je óf 'n hele grote vriendenkring hebben, óf eerst 'n bankoverval plegen, vrees ik.

Frameworks

Mobiele apparatuur → Frameworks

dhtmlx.com/touch
Open Source JavaScript Mobile Framework for HTML5 Web apps.

jquerymobile.com
Open Source mobile framework.

sencha.com/products/touch
Open Source mobile JavaScript framework.

winktoolkit.org (Wink toolkit)
Lightwidht JavaScript toolkit voor mobiele apps.

zeptojs.com
Zeer compact Open Source JavaScript framework.

Online bouwen

Mobiele apparatuur → Online bouwen

mobisitegalore.com
Online mobiele site maken. Met uitgebreide uitleg.

Theorie

Mobiele apparatuur → Theorie

Browser support voor html zie HTML → Browser support, voor css zie CSS → Browser support, voor SVG zie SVG. Media queries zie CSS → Media Queries en Responsive Web Design.

alistapart.com/articles/ (Return of the Mobile Stylesheet)
Overzichtsartikel over stylesheets en dergelijke.

buildmobile.com
Allerlei artikelen over mobiele sites.

dev.opera.com/an-introduction-to-meta-viewport-and-viewport
An introduction to meta viewport and @viewport.

dev.opera.com/articles/view/the-mobile-web-optimization-guide
Mobile-friendly: The mobile web optimization guide.

developer.mozilla.org/en/Mobile/Viewport_meta_tag
Using the viewport meta tag to control layout on mobile browsers.

mobiforge.com
Site met handleidingen, forum, enz.

mobilewebbestpractices.com
Site met hele serie artikelen, links, enz.

noupe.com/how-tos
Links naar handleidingen voor mobiele apparatuur op allerlei gebieden.

quirksmode.org/mobile/viewports
Uitgebreide uitleg over viewport.

w3.org/TR/mobile-bp
W3C-specificatie voor mobiele sites.

w3.org/TR/mobileOK-basic10-tests
Beschrijving van de tests die bij bovenstaande specificatie horen.

Validators, snelheid testen, browser sniffing, e.d.

Mobiele apparatuur → Validators, snelheid testen, browser sniffing, e.d.

blaze.io/mobile
Geeft online overzicht van wat er met welke snelheid wordt gedownload e.d. Voor het testen wordt een echte iPhone, Blackberry, iPad, Galaxy, e.d. gebruikt. (De 'waterval' zit zeer goed verstopt op de resultatenpagina onder de link 'View HAR file'.)

detectmobilebrowsers.com
Script in tig talen om mobiele browsers te herkennen en naar mobiele site te sturen.

ready.mobi/launch
Test op groot aantal dingen en meldt wat er mis is.

useragentstring.com
Gigantische verzameling User Agents Strings (browser-identificaties), met uitleg.

validator.w3.org/mobile/ (W3C mobileOK Checker)
Controleren of site geschikt is voor mobiele apparatuur.

Forums

PHP → Forums

pfz.nl/forum
Forum met de nadruk op PHP. Nederlandstalig.

phphulp.nl/php/forum
Forum met de nadruk op PHP. Nederlandstalig.

Scripts

PHP → Scripts

developertutorials.com/scripts
PHP-scripts.

gscripts.net
Links naar sites met PHP-scripts.

hotscripts.com/category/scripts/php/scripts-programs
Honderden scripts en links naar sites met PHP-scripts.

pear.php.net
Enorme bibliotheek met open source-code.

pfz.nl/scripts
Scripts. Nederlandstalig.

php.resourceindex.com
Links naar sites met scripts.

phpclasses.org/browse
Gigantische hoeveelheid classes.

phphulp.nl/php/scripts
Scripts. Nederlandstalig.

px.sklar.com
Links naar sites met scripts.

robsdomein.nl/scripts/php_scripts
Gratis scripts. Nederlandstalig.

scripts.com/php-scripts
Enorme lijst met links naar sites met PHP-scripts.

scriptsearch.com/PHP
Links naar sites met scripts.

simplythebest.net/scripts
Links naar sites met PHP-scripts.

sitemasters.be/scripts/1/PHP
PHP-scripts. Nederlandstalig.

wmcity.nl/scripts (WebmasterCity)
Diverse PHP-scripts. Nederlandstalig.

Tutorials, voorbeelden

PHP → Tutorials, voorbeelden

developerscorner.nl/csshunter/phpsite
Zeer duidelijke en uitgebreide Nederlandstalige handleiding over het gebruik van php voor het invoegen van code. Dit voorkomt de nadelen van de zwaar verouderde (en in de toekomst niet meer toegestane) frames. Hier staat het begin van de handleidiing.

good-tutorials.com/tutorials/php
Links naar tutorials.

mastercode.nl/forum
Nederlandstalige handleidingen. Ook handleidingen over phpBB2 en phpBB3.

php.net
Officiële site van PHP met veel documentatie.

php.resourceindex.com
Links naar sites met handleidingen en voorbeelden.

phphulp.nl/php/tutorials
Tutorials. Nederlandstalig.

tutorialized.com/tutorials/PHP/1
PHP-tutorials.

w3schools.com/php/default
PHP-tutorial en overzicht.

Algemene tests

Toegankelijkheid → Algemene tests

Voor tests e.d. voor een speciale taal, zoals Java, zie bij de betreffende taal.

contentquality.com (Cynthia Says)
Test online je pagina op problemen met toegankelijkheid. Heel overzichtelijk.

w3.org/WAI/ER/tools/ (Web Accessibility Initiative)
Links naar elke bekende toegankelijkheidstest, met uitgebreide toelichting bij elke link.

w3.org/WAI/UA/TS/html401
Mogelijkheid om online te testen welke browser wat ondersteunt op het gebied van toegankelijkheid.

wave.webaim.org
Test online je pagina op problemen met toegankelijkheid. Resultaten worden grafisch weergegeven met icoontjes.

wave.webaim.org/icons
Uitleg van de icoontjes van de hierboven staande test-site.

webrichtlijnen.nl/toetsen
Online testen of 'n pagina aan de webrichtlijnen van de Nederlandse overheid voldoet. Nederlandstalig.

Blinden en slechtzienden

Toegankelijkheid → Blinden en slechtzienden

addons.mozilla.org/nl/ (Fangs Screen Reader Emulator)
Extensie bij Firefox. Simuleert een screenreader.

csant.info/lynx
Installatie-programma voor Lynx op Windows. Lynx is een tekstbrowser die de pagina ongeveer laat zien zoals een spraakbrowser en dergelijke hem zien.

freedomscientific.com/ (JAWS for Windows Screen Reading Software)
Dit is een echte screenreader, met alle toeters en bellen. Je kunt een gratis proefversie downloaden. Deze is veertig minuten te gebruiken, daarna moet je je computer opnieuw opstarten. Als je het een beetje handig aanpakt, is veertig minuten lang zat om een pagina op toegankelijkheid te testen. Werkt helaas alleen op Windows. In deze screenreader test ik zelf alles. Ik heb deze gekozen, omdat dit de meest gebruikte is.

gwmicro.com/Window-Eyes
Ook een echte screenreader. De gratis demo werkt dertig minuten, daarna moet je je computer weer herstarten. Ook deze screenreader werkt helaas alleen op Windows.

juicystudio.com/services/luminositycontrastratio
Online controleren of contrast tussen twee kleuren groot genoeg is.

nvda-project.org (Non Visual Desktop Access)
Gratis en open source screenreader. Werkt alleen op Windows.

snook.ca/technical/colour_contrast
Online controleren of contrast van voor- en achtergrondkleur voldoet aan richtlijnen van WCAG.

trace.wisc.edu/contrast-ratio-examples
Enorme lijst met voorbeelden van allerlei kleuren tekst op allerlei kleuren achtergrond. De contrast ratio staat er steeds bij.

w3.org/WAI/Resources/Tablin
Laat online zien hoe tekstbrowsers, spraakbrowsers, spiders, e.d. 'n tabel lezen en weergeven (en waarom je dus geen tabellen moet gebruiken voor lay-out!).

webbie.org.uk
In Windows kun je het gratis programma WebbIE installeren. WebbIE laat de pagina zien zoals een spraakbrowser en dergelijke hem zien. (Site is Engelstalig, programma heeft een Nederlandstalige versie.)

webformator.com
Gratis uitbreiding bij Internet Explorer, die de pagina laat zien zoals een spraakbrowser en dergelijke hem zien. (Site is Duitstalig, programma heeft een Nederlandstalige versie.)

Forums, richtlijnen, links, artikelen en dergelijke

Toegankelijkheid → Forums, richtlijnen, links, artikelen en dergelijke

accessibility.nl/over-toegankelijkheid/voordelen
Voordelen van toegankelijk bouwen. Nederlandstalig.

accessibility.nl/kennisbank/webrichtlijnen1
Uitleg Webrichtlijnen en Drempelvrij richtlijnen. Nederlandstalig.

anysurfer.be/nl
Site met veel informatie over toegankelijkheid. Nederlandstalig.

forums.htmlhelp.com
Engelstalig forum over het maken van sites met nadruk op toegankelijkheid.

w3.org/Translations/WCAG20-nl
Web Content Accessicbility Guidelines 2.0. Nederlandse vertaling.

w3.org/WAI/demos/bad/
Dezelfde pagina wel en niet toegankelijk, met uitleg over de verschillen. Om de uitleg te zien moet je bovenaan op de felgekleurde knoppen klikken.

w3.org/WAI/Resources
Links van W3C naar van alles over toegankelijkheid.

webrichtlijnen.nl
Uitmuntende, zeer leesbare Nederlandstalige handleiding over het toegankelijk maken van 'n site. Dit helpt dus ook om hoger te komen in de index van 'n zoekmachine. Dit zijn de officiële richtlijnen van de overheid, waaraan geleidelijk aan overheidssites moeten gaan voldoen. Echt 'n uitstekende handleiding.
Algemene site
Webrichtlijnen versie 2

Kleurenblindheid

Toegankelijkheid → Kleurenblindheid

colorfilter.wickline.org
Laat online je pagina zien zoals die bij allerlei soorten kleurenblindheid wordt gezien.

coloracle.cartography.ch
Gratis programma om in je eigen computer kleurenblindheid te simuleren. Java, dus geschikt voor Linux, Windows en OS X.

vischeck.com/vischeck/vischedkURL
Laat online je pagina zien zoals die bij allerlei soorten kleurenblindheid wordt gezien.

Algemene artikelen en forums

Zoekmachines → Algemene artikelen en forums

edwords.nl/kennisbank/handleidingen
Artikel over zoekmachine-optimalisatie en flash. Nederlandstalig.

jeroen.com/woordenboek
Zoekmachine woordenboek. Nederlandstalig.

seoguru.nl/handleiding-seo
Handleiding over optimaliseren van 'n site voor zoekmachines. Nederlandstalig.

support.google.com/webmasters
Waar je op moet letten als je gaat betalen voor zoekmachine-optimalisatie. (In het Engels SEO, Search Engine Optimization.)

Bing

Zoekmachines → Bing

bing.com/toolbox/webmaster/
Microsoft hulpmiddelen voor webmasters. Nederlandstalig.

Google

Zoekmachines → Google

google.nl/webmasters
Google centrum voor Webmasters. Om site te beheren, met 'n hele reeks hulpmiddelen daarvoor.

google.com/webmasters/docs (Google's Search Engine Optimization Starter Guide)
LET OP: dit is een pdf-bestand dat gelijk begint te downloaden. Handleiding van Google voor een zoekmachine-vriendelijke site.
Nederlandse vertaling. Dit is de officiële vertaling van Google, ook in pdf-formaat.
Een onofficiële Nederlandse vertaling kan online worden gelezen op marketbizz.nl/seo-guide-nl. Aan deze vertaling zijn nog behoorlijk wat nuttige aanvullende tips van 'n ervaren zoekmachine-specialist toegevoegd.

google.com/webmasters/docs/ (Google SEO Report Card)
LET OP: dit is een pdf-bestand dat gelijk begint te downloaden. Checklist die door Google is gebruikt om de sites van Google zelf te optimaliseren voor zoekmachines.

googleproducts-nl.blogspot.com
Nederlandstalig algemeen blog van Google. Een algemeen blog, dus niet alles gaat over zoekmachines.

googlewebmastercentral.blogspot
Blog van Google met veel info over wat je wel en niet moet doen.

groups.google.com/a/googleproductforums
Nederlandstalig forum van Google.

support.google.com/webmasters
Webmasterhulpprogramma's. Nederlandstalig.

support.google.com/webmasters
Richtlijnen voor webmasters. Nederlandstalig.

support.google.com/webmasters
Welke metatags Google gebruikt. Nederlandstalig. (Deze link is hier alleen neergezet vanwege de ongelooflijke hoeveelheden onjuiste informatie over dit onderwerp. Vrijwel alles wat op internet te vinden is, is volstrekte onzin.)

Hulpmiddelen

Zoekmachines → Hulpmiddelen

rexswain.com (Rex Swain's HTTP Viewer)
Laat exact zien wat de server naar een gebruiker verstuurt, inclusief álle codes e.d. Je kunt zelf de user agent opgeven, dus dat kan bijvoorbeeld ook googlebot zijn.

smart-it-consulting.com
Laat online zien hoe 'n spider van 'n zoekmachine de pagina ziet.

robots.txt

Zoekmachines → robots.txt

code.google.com/intl/nl/web/controlcrawlindex
Uitgebreid artikel hoe robots.txt te gebruiken voor zoekmachines.

robotstxt.org/robotstxt (The Web Robots Pages)
Site over robots.txt.

seoking.nl
Uitstekende uitleg over robots.txt. Nederlandstalig.

tool.motoricera.info/robots-checker
Test op fouten en legt (in gewone taal) uit wat er aan opdrachten in staat.

websonic.nl/tutorials/website
Handleiding over rotobst.txt. Nederlandstalig.

yellowpipe.com/yis/tools/robots.txt
Automatisch online robots.txt laten aanmaken door het invullen van een aantal velden.

Yahoo!

Zoekmachines → Yahoo!

help.yahoo.com/kb
Yahoo! Search Content Quality Guidelines.

XML-sitemap

Zoekmachines → XML-sitemap

auditmypc.com/xml-sitemap
Online XML-sitemap maken zoals gebruikt door Google, Yahoo! en Microsoft. Werkt prima, maar gebruikt Java, dus het laden kan even duren. Online kan van alles worden bijgewerkt, zoals de priority, waarna de map kan worden gedownload.

sitemaps.org/nl
Uitgebreide Nederlandstalige uitleg over wat een sitemap is en zo.

sitemapxml.net/sitemap-validator
Online XML-sitemap valideren.

validome.org/google/validate
Online XML-sitemap valideren.