Tutorials
W3C Valid & Crossbrowser testen
W3C Valid maken van je site en Cross-browser testen, wat houd het in, en waarvoor dient het?
Pagina 1
De inleiding
Vaak krijgen we hier beginnende mensen waar wij vaak tegen zeggen maak je site W3C valid, of de site van de beginnende siteontwikkelaars ziet er in sommige browsers anders uit.
Wat houd dit nou precies allemaal in?
W3C Valid houd in dat je je (x)HTML of CSS correct schrijft. Waarom is dit van belang? Sommige browsers gebruiken standaard settings als er iets niet of slecht word opgegeven. Dan zou het dus kunnen dat de site er in verschillende webbrowsers héél anders uit ziet. Test daarom altijd in meerdere internetbrowsers
Op de volgende pagina's ga ik uitleggen hoe dit precies gedaan moet worden.
Wat houd dit nou precies allemaal in?
W3C Valid houd in dat je je (x)HTML of CSS correct schrijft. Waarom is dit van belang? Sommige browsers gebruiken standaard settings als er iets niet of slecht word opgegeven. Dan zou het dus kunnen dat de site er in verschillende webbrowsers héél anders uit ziet. Test daarom altijd in meerdere internetbrowsers
Op de volgende pagina's ga ik uitleggen hoe dit precies gedaan moet worden.
Pagina 2
W3C Valid
Waarom moet je site nou W3C Valid zijn?
Door verschillende interpretatie van de verschillende internetbrowsers.
Allereerst moet er boven je site, voordat er ook maar iets in je in de code neergezet word (php includes voor bijvoorbeeld een config.php dus niet, zolang er maar niks geëchoed word) staan wat voor soort HTML/xHTML gebruikt word. Hoe?
Alle soorten staan op de volgende site gemeld:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Welke je moet kiezen?
Dat staat hier vermeld (voor deze is toch wel een beetje Engels vereist :)):
http://htmlhelp.com/tools/validator/doctype.html
Verder moet je site je wel aan de échte HTML specificaties houden.
Zo zijn er een aantal dingen die wél worden ondersteund door Internet Explorer maar niet door bijvoorbeeld Netscape of Firefox. Marquee is hier een goed voorbeeld van, deze werd tot voor kort alleen door Internet Explorer ondersteund. In de nieuwe Netscape 7 en Firefox word deze wel ondersteund.
Máár W3C Valid is deze tag nog steeds niet. Kijk voor oplossing met bijvoorbeeld Javascript o.i.d.
Andere veelgemaakt fouten:
Andere veelgemaakt fouten is dat een tabel (<table>) een height meegegeven word, maar dit mag helemaal niet (vb: <table height="100%">) volgens W3C.
Ook kan een cel van een tabel (vb: <tr>, <td>) geen background meegegeven worden (vb: <td background="/images/header.gif">)
Ook moet een plaatje een alternatieve tekst mee gegeven worden (<img src="/images/content.gif" alt="Alternatieve tekst">)
De form tag heeft ook altijd een action nodig, zelfs als de verwerking van het formulier op dezelfde pagina staat!
<form action="$_SERVER['PHP_SELF']"> is dan een goede oplossing :)
Let er ook op dat bij het invoegen van een CSS sheetje of Javascriptje het type en de taal (<script type="text/javascript" language="JavaScript">) (Let op: Bij CSS is de taal (language="xxxxx") niet nodig!
En wat ook niet hoort is dat bijvoorbeeld het teken "&" zo in de code word opgenomen. Dit hoort te zijn &
Dit geld ook voor het copyright logo, dit moet zijn © en zo kan ik nog wel even doorgaan.
Voor een volledig lijstje kijk op:
http://tlt.its.psu.edu/suggestions/international/web/codehtml.html
Vaak is de naam hiervoor ook heel logisch
Voor firefox kun je de volgende handige add-ons downloaden:
https://addons.mozilla.org/firefox/2289/ (Voor CSS)
https://addons.mozilla.org/firefox/249/ (Voor de HTML)
Als gewone sites zijn ze hier te vinden:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Door verschillende interpretatie van de verschillende internetbrowsers.
Allereerst moet er boven je site, voordat er ook maar iets in je in de code neergezet word (php includes voor bijvoorbeeld een config.php dus niet, zolang er maar niks geëchoed word) staan wat voor soort HTML/xHTML gebruikt word. Hoe?
Alle soorten staan op de volgende site gemeld:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Welke je moet kiezen?
Dat staat hier vermeld (voor deze is toch wel een beetje Engels vereist :)):
http://htmlhelp.com/tools/validator/doctype.html
Verder moet je site je wel aan de échte HTML specificaties houden.
Zo zijn er een aantal dingen die wél worden ondersteund door Internet Explorer maar niet door bijvoorbeeld Netscape of Firefox. Marquee is hier een goed voorbeeld van, deze werd tot voor kort alleen door Internet Explorer ondersteund. In de nieuwe Netscape 7 en Firefox word deze wel ondersteund.
Máár W3C Valid is deze tag nog steeds niet. Kijk voor oplossing met bijvoorbeeld Javascript o.i.d.
Andere veelgemaakt fouten:
Andere veelgemaakt fouten is dat een tabel (<table>) een height meegegeven word, maar dit mag helemaal niet (vb: <table height="100%">) volgens W3C.
Ook kan een cel van een tabel (vb: <tr>, <td>) geen background meegegeven worden (vb: <td background="/images/header.gif">)
Ook moet een plaatje een alternatieve tekst mee gegeven worden (<img src="/images/content.gif" alt="Alternatieve tekst">)
De form tag heeft ook altijd een action nodig, zelfs als de verwerking van het formulier op dezelfde pagina staat!
<form action="$_SERVER['PHP_SELF']"> is dan een goede oplossing :)
Let er ook op dat bij het invoegen van een CSS sheetje of Javascriptje het type en de taal (<script type="text/javascript" language="JavaScript">) (Let op: Bij CSS is de taal (language="xxxxx") niet nodig!
En wat ook niet hoort is dat bijvoorbeeld het teken "&" zo in de code word opgenomen. Dit hoort te zijn &
Dit geld ook voor het copyright logo, dit moet zijn © en zo kan ik nog wel even doorgaan.
Voor een volledig lijstje kijk op:
http://tlt.its.psu.edu/suggestions/international/web/codehtml.html
Vaak is de naam hiervoor ook heel logisch
Voor firefox kun je de volgende handige add-ons downloaden:
https://addons.mozilla.org/firefox/2289/ (Voor CSS)
https://addons.mozilla.org/firefox/249/ (Voor de HTML)
Als gewone sites zijn ze hier te vinden:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Pagina 3
Cross browser testen
Cross browser testen?
Inderdaad, dit houd simpelweg in een site testen in meerdere browsers op meerdere Operating Systems.
Waarom? Sites worden vaak in elke browser net weer iets anders aangegeven (zoals al is gezegd op de vorige pagina)
Nu zul je je vast afvragen hoe ik dit ook bijvoorbeeld op een Mac kan testen als je alleen maar een windows PC hebt?
Een van de beste oplossing bevind zich maar een aantal klikjes in Google weg. :)
http://www.danvine.com/icapture/ test in Safari 2.0.4 op de meeste recente Mac OS X
http://www.danvine.com/iecapture/ test in Internet Explorer 7.xx op ook de Mac OS X
http://www.browsercam.com/ is helemaal een goede. Helaas zitten hier na 24 uur of 200 probeerseltjes kosten aan verbonden. Of je kunt wellicht steeds een nieuw mailadres aanmaken? ;-)
Als je de site maakt werk dan met Firefox of Netscape, deze houd zich namelijk aan de standaarden. Ga dan de bugs in Internet Explorer & Opera wegwerken.
Maar test zeker ook onder Mac machines en als het mogelijk is ook onder Linux!
Krijg je hem niet goed in een bepaalde browser? Dan zijn er vaak wat bugs voor waardoor je een bepaalde code creeërt die alleen in bijvoorbeeld Internet Explorer uitgelezen word!
Linux kun je via dual-boot gewoon naast je Windows machine zetten.
Via deze site kun je zien waarvoor je eigenlijk je site wel moet optimaliseren:
http://www.w3counter.com/globalstats/
Of houd zelf statistieken bijvoorbeeld via http://www.w3counter.com of http://www.i-mining.nl.
Zo krijg je een goed inzicht in wat de groep is die jouw site bezoekt.
Voorbeeldje voor een site van een klant:
Besturingssysteem Pageviews Totaal
1. Microsoft 2658 98,19%
2. Macintosh 49 1,81%
Browser Pageviews Totaal
1. IE 1897 70,08%
2. Firefox 796 29,41%
3. Safari 14 0,52%
Totaal 2707 100%
Let ook op de schermgrootte!
Schermresolutie Pageviews Totaal
1. 1024x768 1650 60,95%
2. 1400x1050 335 12,38%
3. 1280x1024 229 8,46%
4. 1280x800 150 5,54%
5. 800x600 141 5,21%
6. 1152x864 88 3,25%
7. 1600x1200 62 2,29%
8. 1440x900 24 0,89%
9. 1024x763 7 0,26%
10. 1280x960 6 0,22%
11. 1010x695 5 0,18%
12. 1920x1200 4 0,15%
13. 1024x738 2 0,07%
14. 1680x1050 2 0,07%
15. 1274x961 2 0,07%
Totaal 2707 100%
*1600x1200 komt veel minder voor, maar dit komt omdat ik de site wel eens moet bezoeken voor onderhoud ;-)
Ik hoop dat jullie wat aan deze tutorial hebben.
Bedankt voor het lezen :)
Inderdaad, dit houd simpelweg in een site testen in meerdere browsers op meerdere Operating Systems.
Waarom? Sites worden vaak in elke browser net weer iets anders aangegeven (zoals al is gezegd op de vorige pagina)
Nu zul je je vast afvragen hoe ik dit ook bijvoorbeeld op een Mac kan testen als je alleen maar een windows PC hebt?
Een van de beste oplossing bevind zich maar een aantal klikjes in Google weg. :)
http://www.danvine.com/icapture/ test in Safari 2.0.4 op de meeste recente Mac OS X
http://www.danvine.com/iecapture/ test in Internet Explorer 7.xx op ook de Mac OS X
http://www.browsercam.com/ is helemaal een goede. Helaas zitten hier na 24 uur of 200 probeerseltjes kosten aan verbonden. Of je kunt wellicht steeds een nieuw mailadres aanmaken? ;-)
Als je de site maakt werk dan met Firefox of Netscape, deze houd zich namelijk aan de standaarden. Ga dan de bugs in Internet Explorer & Opera wegwerken.
Maar test zeker ook onder Mac machines en als het mogelijk is ook onder Linux!
Krijg je hem niet goed in een bepaalde browser? Dan zijn er vaak wat bugs voor waardoor je een bepaalde code creeërt die alleen in bijvoorbeeld Internet Explorer uitgelezen word!
Linux kun je via dual-boot gewoon naast je Windows machine zetten.
Via deze site kun je zien waarvoor je eigenlijk je site wel moet optimaliseren:
http://www.w3counter.com/globalstats/
Of houd zelf statistieken bijvoorbeeld via http://www.w3counter.com of http://www.i-mining.nl.
Zo krijg je een goed inzicht in wat de groep is die jouw site bezoekt.
Voorbeeldje voor een site van een klant:
Besturingssysteem Pageviews Totaal
1. Microsoft 2658 98,19%
2. Macintosh 49 1,81%
Browser Pageviews Totaal
1. IE 1897 70,08%
2. Firefox 796 29,41%
3. Safari 14 0,52%
Totaal 2707 100%
Let ook op de schermgrootte!
Schermresolutie Pageviews Totaal
1. 1024x768 1650 60,95%
2. 1400x1050 335 12,38%
3. 1280x1024 229 8,46%
4. 1280x800 150 5,54%
5. 800x600 141 5,21%
6. 1152x864 88 3,25%
7. 1600x1200 62 2,29%
8. 1440x900 24 0,89%
9. 1024x763 7 0,26%
10. 1280x960 6 0,22%
11. 1010x695 5 0,18%
12. 1920x1200 4 0,15%
13. 1024x738 2 0,07%
14. 1680x1050 2 0,07%
15. 1274x961 2 0,07%
Totaal 2707 100%
*1600x1200 komt veel minder voor, maar dit komt omdat ik de site wel eens moet bezoeken voor onderhoud ;-)
Ik hoop dat jullie wat aan deze tutorial hebben.
Bedankt voor het lezen :)
Reacties
0