Mijn blog

Vanaf vandaag hebben alle web pagina's van richardlagendijk.nl een nieuw uiterlijk.
Voor het maken van deze nieuwe "look" is gebruik gemaakt van de css ontwerpen van Erwin Aligam. Zijn css ontwerpen kan je bekijken op de web pagina StyleShout.

Naast het aanpassen van de css en view bestanden was het ook noodzakelijk om diverse controller bestanden en de database aan te passen. De gehele "verbouwing" heeft ongeveer twee weken in beslag genomen.

Een jaar geleden heb ik de cursus Master Class PHP gevolgd om meer te leren over PHP, MySQL en web development in het algemeen.

Na het voltooien van de cursus ben ik gestart om al mijn web pagina's opnieuw op te bouwen. Een van mijn doelen was om het aantal bezoekers te verhogen. Vele jaren was het aantal bezoekers van de Commodore Info Page ongeveer 300 per maand. Het doel was om 1000 bezoekers te halen.

Het verbeteren van de web pagina:
- Zoek machine vriendelijke URL's.
- Kwalitatief goede HTML en CSS.
- Site maps, op de web pagina en een voor Google.
- Alle pagina's een description en keywords.
- Meer inhoud op de pagina's.
- RSS feed.

Na alle verbeteringen ging het aantal bezoekers omhoog. In Februari 2009 werd het doel van 1000 bezoekers per maand gehaald. Maar de groei stopte niet, er kwamen steeds meer bezoekers. In Maart besloot ik om al mijn foto's te hernoemen. Voor het hernoemen van de foto's waren ongeveer 400 foto's opgenomen in de Google images index. Na het hernoemen was dit ongeveer 40. Omdat een groot deel van de bezoekers via Google Images op mijn web pagina kwamen zakte het aantal bezoeker wat in.

Problemen in Juli 2009. De foto's in de info pagina's en de artikelen werden door browser in maximale grootte ingelezen. Dit betekende dat bij een groot artikel zoals "Spot the Commodore" ongeveer 100 foto's werden ingeladen, wat resulteerde in 1 MB data verkeer per bezoeker. Mijn maximum bandbreedte is 10 GB per maand. Aan het einde van Juli 2009 ging ik over de grens en de web pagina's gingen off-line voor een dag.

In het begin van Augustus 2009 heb ik besloten om kleine versies te maken van al mijn foto's om zo de hoeveelheid data te verminderen. In Augustus was het data verkeer "slechts" 5 GB, maar met meer bezoekers.

Soms lijkt het wel of alle e-mail SPAM is. Na het plaatsen van een contact formulier op mijn web pagina nam de hoeveelheid SPAM toe. Om niet elke dag aanbiedingen te krijgen voor allerlei horloges, pillen etc. heb ik besloten om een CAPTCHA systeem te maken. CAPTCHA staat voor "Completely Automated Public Turing-test to tell Computers and Humans Apart". Wat er op neer komt dat het systeem een mens en een machine uit elkaar weet te houden.

Om in het "Commodore" thema te blijven is mijn CAPTCHA gemaakt met de originele karakter-set van de Commodore C64. Het CAPTCHA plaatje wordt gemaakt van 6 willekeurige letters en cijfers. De hoogte en breedte van de karakters varieert, en er worden horizontale en verticale strepen door de tekst getrokken.

De hoeveelheid SPAM van mijn web pagina is nu gereduceerd tot nul door het CAPTCHA systeem.

Deze internet pagina's worden bezocht met behulp van diverse browsers. De meerderheid van de bezoekers, circa 55%, gebruikt Firefox daarna komt Internet Explorer met zo'n 30%. De rest gebruikt Safari, Opera etc.

Ik ontwikkel deze pagina's op een Linux platform met als browser Firefox. Ik controleer de pagina's ook in Safari met mijn iPod Touch.

Hier een paar van de problemen die ik ben tegen gekomen:

Minimum hoogte van een div.

min-height: 465px; in de css werkt niet bij gebruik van IE6. Dit is niet zo verwonderlijk omdat het gewoonweg niet wordt ondersteund in IE6. Er bleken toch wat foutjes te zitten in een paar pagina's. Door het aanpassen van een aantal div's is dit nu ook opgelost.

Witte ruimte tussen div's.

Als je geen margin of padding opgeeft in de css, dan laat IE een witte ruimte zien tussen twee div's.
Oplossing:
* {margin: 0px; padding: 0px;}

Plaatjes komen buiten de div's.

Bij de artikelen gebruik ik per paragraaf een div waarin een tekst staat met eventueel een plaatje. De afbeelding staat links of rechts met behulp van een float. Is nu echter het plaatje "hoger" dan de tekst dan komt de onderzijde van het plaatje uit de div. Aangezien de div ook de scheidingslijn heeft ontstond er een rommelige layout.
Oplossing:
Een scheider div gemaakt tussen elke paragraaf, deze scheider heeft nu de scheidingslijn maar doet ook een clear: both;. Dit zorgt ervoor dat de scheidingslijn altijd onder de laatste paragraaf komt onafhankelijk van het plaatje.

Voor een betere indexering in de Google zoekmachine heb ik een script gemaakt om een xml Sitemap te produceren. Deze xml Sitemap is aangemeld bij Google m.b.v. Google's webmaster tools.

Na het introduceren van de nieuwe versie web pagina's is helaas de indexering van alle afbeeldingen verloren gegaan. Om dit te herstellen heb ik het volgende aangepast:
Bij alle relevante afbeeldingen zijn nu de height & width attributen toegevoegd.
Verder heb ik, in de webmaster tools van Google, aangegeven dat alle afbeeldingen geïndexeerd mogen worden.

Bij alle web pagina's staat nu de "start pagina" navigatie-link op dezelfde plek.

Ik heb een robot.txt bestand toegevoegd om verwarring te voorkomen. Met de mod_rewrite worden alle niet bestaande urls omgezet naar index.php. De zoekmachines beschouwden dan ook index.php als robot.txt.

Het nieuwsbrief systeem is nu officieel in werking. De nieuwsbrief wordt maandelijks verzonden aan de abonees.
In de nieuwsbrief worden de laatste nieuw items getoond van de Commodore Nieuws Pagina, de nieuwe items van de Commodore Info Pagina en de aankomende evenementen.

Aanmelden geschiedt via een email verificatie. Afmelden is ook mogelijk.

Vandaag alle links gecontroleeerd van de nieuws pagina. Enkele tientalle links aangepast.

Tevens de laatste niet UTF-8 karakters vervangen door UTF-8 karakters.

Vandaag een aantal verbeteringen doorgevoerd aan de web pagina's.

Bij het kiezen van een andere taal blijf je nu op dezelfde pagina, in plaats van terug te gaan naar het menu.

Voorpagina van CIP geeft nu de meest recente nieuwsberichten van CNP.

Layout van de pagina's werkt nu beter bij gebruik van Internet Explorer.

Vandaag kreeg ik mijn certificaat van de cursus masterclass PHP in handen.

De eind-opdracht:

De eind-opdracht voor de cursus is deze verzameling van web pagina's. Het was een heel karwei om mijn nieuwe pagina's te bouwen. In totaal ben ik er ongeveer 6 weken aan bezig geweest en er meer dan 150 uur aan besteed. Om de eind-opdracht te kunnen maken heb ik gebruik gemaakt van de volgende programma's: Kdevelop, Umbrello, kdesvn, GIMP, gFTP, Open Office en Firefox.

Ik zal me eerst even voorstellen. Ik ben Richard Lagendijk, en de persoon achter deze web pagina's. Hier volgt een korte geschiedenis van mijn web pagina's.

Het begin:

In Juli 2000 ben ik begonnen met het maken van web pagina's. De eerst stappen maakte ik met Frontpage van Microsoft, later nog even Dreamweaver van Adobe. Maar het gebruik van de PC werd steeds serieuzer en een omschakeling naar Linux was de volgende stap.

Linux:

De omschakeling naar Linux ging vlot maar het was wel even wennen aan de nieuwe programma's voor web development. Mozilla Composer was lange tijd mijn HTML editor, daarna Nvu. Aangekomen in 2007 werd het duidelijk dat HTML niet meer toereikend was. De Commodore Info Pagina was uitgegroeid tot meer dan 850 statische HTML pagina's. De Commodore Nieuws Pagina liep al richting de 200 pagina's. Wijzigen en onderhouden van de pagina's werd een nachtmerrie.

De volgende stap:

PHP en MySQL. Na het lezen van een boek, PHP5 and MySQL Bible, maakte ik mijn eerste scriptjes. De nieuws pagina ging als eerste de database in. Dit was een enorm karwei, meer dan 500 nieuws-items in de database kopiëren. De volgende pagina was de puzzel pagina.

Op zoek naar perfectie:

Om een volgend niveau te bereiken ben ik een cursus gaan volgen om PHP professioneel te gaan gebruiken. Ik heb de cursus masterclass PHP van Eduvision gevolgd, docent was Jan-Willem Eshuis.
Hier ben ik in aanraking gekomen met Object georiënteerd programmeren, mod_rewrites, (X)HTML, CSS, PHP, XML, MySQL, UML, MVC, Smarty en SVN. Om voor de cursus te slagen moest er een eind opdracht worden gemaakt.