Praktijkberichten
Thursday, 29 March 2012
Kode-generatoren en hun erfenis
Voor enkele van mijn klanten heb ik oude websites omgebouwd naar een CMS. hier beschrijf ik een paar voorbeelden van de problemen waarmee ik zo te maken heb.
Deze websites waren gemaakt met oudere kodegeneratoren. Dat was in de tijd, dat de layout van websites voornamelijk met hulp van een geneste tabellen-struktuur werd gemaakt. Geen CSS met classes die je maar 1 keer definieert en dan in alle pagina's gebruikt om een konsistente layout te krijgen.
Eerste voorbeeld:
Het eerste voorbeeld was de site van een paarden-trein in noordwest Oostenrijk.
Die site liep tot voor een jaar op het oude systeem. Onderhouden van een zogenaamd technisch vooruitstrevend samenwerkingsverband, speciaal voor het tourisme in deze regio. Nu is het een nieuw CMS.
Er werd bij deze site illegaal een tracking van de gebruikers van de website gedaan op een absurde manier, naar een server die uitsluitend voor dit verband bestemd was/is (die zijn nog steeds aktief). Oostenrijk heeft een uitstekende wetgeving waar het privacy betreft maar bijna niemand houdt zich er aan.
Die site werd overgenomen op de hosting van de gemeente, waaronder het dorp valt, waar het museum van die paardentrein staat. Dit omdat ik daar de website nieuw gemaakt had. Het gevolg was een extreme hoeveelheid foutmeldingen omdat de tracking-host niet gevonden werd.
Na overleg werd besloten de site te "reinigen" een beslissing die ik beter niet had genomen.
Van de 465KB tekstfiles met de html-kode had ik na afloop nog maar 95 Kb over en nog steeds een volledig werkende site, en een paar rooie oogjes. Voor het uitlijnen "<td> </td>" gebruiken is niet goed te praten.
Ook bij oude Frontpage websites vindt je vaak dat extreme hoeveelheden kode gebruikt wordt omdat bij iedere zin opnieuw het font, de fontgrootte en de de font-attributen vastgelegd worden, zo in de zin van:
<span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span>
Terwijl je dit normaal 1 keer vastlegt, aan het begin van de gehele site.
Tweede voorbeeld:
Het tweede voorbeeld is een oud CMS waar de gehele menustruktuur bestaat uit een ongelofelijke hoeveelheid kode,
de eerste 870 regelskode worden gebruikt voor de menustruktuur met html en javascript, dan eerst komt de inhoud. Lege regels worden met:
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
gemaakt.
Waar 7 keer <p></p> of nog eenvoudiger 7 keer <br> ook mogelijk zouden zijn.
De tekst zit verstopt in drievoudig geneste tabellen. Waar een PDF getoond werd, zijn de oude anchors nog aanwezig maar zonder inhoud om op te klikken, zoals
<a href="http://subsubdomain.subdomain.domain.tld/path1/path2/oudbestand.pdf"></a> en dat ook 5 keer of meer, restanten die nooit verwijderd waren.
Voor een webpagina met een halve A4 tekst en twee fotootjes worden dan 1500 regels kode gebruikt, geen wonder dat zo'n site langzaam wordt.
Sprookjes en werkelijkheid:
Wie de mooie sprookjes gelooft dat een generator "zonder programmeerkennis" "professionele webpagina's" kan maken raad ik aan twee dagen dit soort opruimwerk te doen, dat is zeer illustratief.
Een goede oplossing is een CSS-raamwerk als YAML (Yet Another Multicolumn Layout) het behoeft geen betoog dat daar natuurlijk de nodige basiskennis noodzakelijk is.
Wanneer ik een website met de hand programmeer (geen CMS) dan blijven pagina's over het algemeen onder de 10 Kb exklusief foto's. Foto's worden gekomprimeerd en blijven meestal onder de 50 Kb, meer als 100 Kb vindt ik eigenlijk al te veel. Een voorbeeld is Danner staal
Er zijn genoeg sites waar je even kan lachen over de foto van X Mb (6000 x 4000 pixel) geskaleerd op 600 x 400 pixel. Een weing geduld is gevraagd als die foto stukje bij beetje wordt geladen en tergend langzaam regel voor regel op het scherm verschijnt.
Standaards:
Webdesign en webprogrammering is een beroep, en ook nog een beroep waar je steeds bij moet blijven met de laatste ontwikkelingen, en die gaan snel.
Was tot voor kort HTML5 nog toekomst, nu is het aktueel.
Als je internationaal bezich bent met websites in nederlands, duits, engels en zelfs in slowaaks (met een eigen set aan tekens zoals ž) dan is het zaak UTF8 als standaard aan te nemen. Deze standaard bestaat sinds 1996 maar werd in 2008 nog steeds niet globaal ingezet, ik tref regelmatig sites die ISO-8859-1 gekodeerd zijn voor duits en in bepaalde browsers verkeerde tekens op het scherm tonen.
Bij een goede website worden de standaards die vastgelegd zijn door het W3C aangehouden, iedere zichzelf respekterende webdesigner/webprogrammeur kontroleert of zijn site valideert. Sites met tientallen fouten zijn mijns inziens niet acceptabel. Niemand is perfekt maar jezelf kontroleren is noodzakelijk als je voor klanten werkt.
Ik hoop dat ik met deze voorbeelden in ieder geval een indruk gegeven heb van de praltijk van iemand die professioneel websites maakt, een werkzaamheid die vaak onderschat wordt, mede door de beloftes van zogenaamde kodegeneratoren.
Eerste voorbeeld:
Het eerste voorbeeld was de site van een paarden-trein in noordwest Oostenrijk.
Die site liep tot voor een jaar op het oude systeem. Onderhouden van een zogenaamd technisch vooruitstrevend samenwerkingsverband, speciaal voor het tourisme in deze regio. Nu is het een nieuw CMS.
Er werd bij deze site illegaal een tracking van de gebruikers van de website gedaan op een absurde manier, naar een server die uitsluitend voor dit verband bestemd was/is (die zijn nog steeds aktief). Oostenrijk heeft een uitstekende wetgeving waar het privacy betreft maar bijna niemand houdt zich er aan.
Die site werd overgenomen op de hosting van de gemeente, waaronder het dorp valt, waar het museum van die paardentrein staat. Dit omdat ik daar de website nieuw gemaakt had. Het gevolg was een extreme hoeveelheid foutmeldingen omdat de tracking-host niet gevonden werd.
Na overleg werd besloten de site te "reinigen" een beslissing die ik beter niet had genomen.
Van de 465KB tekstfiles met de html-kode had ik na afloop nog maar 95 Kb over en nog steeds een volledig werkende site, en een paar rooie oogjes. Voor het uitlijnen "<td> </td>" gebruiken is niet goed te praten.
Ook bij oude Frontpage websites vindt je vaak dat extreme hoeveelheden kode gebruikt wordt omdat bij iedere zin opnieuw het font, de fontgrootte en de de font-attributen vastgelegd worden, zo in de zin van:
<span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span><span style="font-family:arial;font-size:100%;fontweight:normal;">drie woorden tekst.</span>
Terwijl je dit normaal 1 keer vastlegt, aan het begin van de gehele site.
Tweede voorbeeld:
Het tweede voorbeeld is een oud CMS waar de gehele menustruktuur bestaat uit een ongelofelijke hoeveelheid kode,
de eerste 870 regelskode worden gebruikt voor de menustruktuur met html en javascript, dan eerst komt de inhoud. Lege regels worden met:
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
<p dir="ltr" align="justify"></p>
gemaakt.
Waar 7 keer <p></p> of nog eenvoudiger 7 keer <br> ook mogelijk zouden zijn.
De tekst zit verstopt in drievoudig geneste tabellen. Waar een PDF getoond werd, zijn de oude anchors nog aanwezig maar zonder inhoud om op te klikken, zoals
<a href="http://subsubdomain.subdomain.domain.tld/path1/path2/oudbestand.pdf"></a> en dat ook 5 keer of meer, restanten die nooit verwijderd waren.
Voor een webpagina met een halve A4 tekst en twee fotootjes worden dan 1500 regels kode gebruikt, geen wonder dat zo'n site langzaam wordt.
Sprookjes en werkelijkheid:
Wie de mooie sprookjes gelooft dat een generator "zonder programmeerkennis" "professionele webpagina's" kan maken raad ik aan twee dagen dit soort opruimwerk te doen, dat is zeer illustratief.
Een goede oplossing is een CSS-raamwerk als YAML (Yet Another Multicolumn Layout) het behoeft geen betoog dat daar natuurlijk de nodige basiskennis noodzakelijk is.
Wanneer ik een website met de hand programmeer (geen CMS) dan blijven pagina's over het algemeen onder de 10 Kb exklusief foto's. Foto's worden gekomprimeerd en blijven meestal onder de 50 Kb, meer als 100 Kb vindt ik eigenlijk al te veel. Een voorbeeld is Danner staal
Er zijn genoeg sites waar je even kan lachen over de foto van X Mb (6000 x 4000 pixel) geskaleerd op 600 x 400 pixel. Een weing geduld is gevraagd als die foto stukje bij beetje wordt geladen en tergend langzaam regel voor regel op het scherm verschijnt.
Standaards:
Webdesign en webprogrammering is een beroep, en ook nog een beroep waar je steeds bij moet blijven met de laatste ontwikkelingen, en die gaan snel.
Was tot voor kort HTML5 nog toekomst, nu is het aktueel.
Als je internationaal bezich bent met websites in nederlands, duits, engels en zelfs in slowaaks (met een eigen set aan tekens zoals ž) dan is het zaak UTF8 als standaard aan te nemen. Deze standaard bestaat sinds 1996 maar werd in 2008 nog steeds niet globaal ingezet, ik tref regelmatig sites die ISO-8859-1 gekodeerd zijn voor duits en in bepaalde browsers verkeerde tekens op het scherm tonen.
Bij een goede website worden de standaards die vastgelegd zijn door het W3C aangehouden, iedere zichzelf respekterende webdesigner/webprogrammeur kontroleert of zijn site valideert. Sites met tientallen fouten zijn mijns inziens niet acceptabel. Niemand is perfekt maar jezelf kontroleren is noodzakelijk als je voor klanten werkt.
Ik hoop dat ik met deze voorbeelden in ieder geval een indruk gegeven heb van de praltijk van iemand die professioneel websites maakt, een werkzaamheid die vaak onderschat wordt, mede door de beloftes van zogenaamde kodegeneratoren.