Over deze website

Deze website is opgezet als test-project voor een demo-webshop. Dit is de eerste demo-webshop die ik gemaakt heb. Verschillende techieken zijn hier gebruikt. Mijn doel was om een demo-webshop te bouwen met onderstaande technieken. Gebruik makend van een template systeem in PHP. Nautilus is onderdeel van AtlantisDesign .

De HTML die geschreven is moet zich voldoen aan de W3C specificaties van XHTML. In combinatie met pure Css-layouts worden de posities bepaalt van elk element op de website.

Techniek

XHTML 1.0 Transitional: Website maken volgens de W3C specificaties. Gebruik maken van structurele opmaak. Hierdoor wordt de toegankelijkheid van de website veel beter voor mensen met een handycap of gebruikers van PDA handhelds. XHTML wordt de opvolger van het oude HTML 4.0.1.
RSS: De producten van de webshop worden ook opgesomd in XML formaat zodat deze snel via nieuws lezers bekeken kunnen worden. Let op! Voor deze demo webshop moet u wel ingelogd zijn om de XML lijst op te vragen of een item te bekijken in uw webbrowser vanuit uw nieuws lezer.
Cascading Style Sheets - Css level 1 en 2: Gebruik wordt gemaakt van pure Css layouts. Css bepaalt de look en feel van de website. Terwijl de source-code schoon blijft van enige presentatie opmaak zoals: font tags, 'br' tags, van die vreselijke 'spacer' plaatjes, plaatjes die worden gebruikt voor het design van de website. Alle elementen op de webiste worden ge-positioneerd op basis van Css regels.
PHP 4.x: Dit is de server-side scripting taal. Hierdoor worden een verbinding met de demo-webshop database gemaakt. Tevens wordt PHP gebruikt om templates te vullen met dynamische data.
MySQL 4.x: In de database worden alle users en shop items opgeslagen. Als men een bestelling maakt dan wordt deze opgeslagen in de database. Naderhand kan men een overzicht krijgen van zijn/haar bestelling.

Browser compatibiliteit

De layout van de demo-webshop is met zorg gemaakt en getest in onderstaande browsers.

De Lynx browser is een text-based webbrowser voor Unix/Linux/MacOSX terminals. Deze bevat geen mogelijkheid om plaatjes weer te geven of javascripten te gebruiken. Lynx was de eerst webbrowser waarmee je op het World Wide Web kon surfen in 'the good old days'. De eerste echte grafische webbrowser was NCSA Mosaic uit juni 1993.

Apple's Safari webbrowser is afgeleidt van dezelfde render-engine als die van KDE Konqueror. Een mooie samen werking tussen Apple en de Open Source gemeenschap.

Designing with web standards

Enige tijd voor het maken van deze demo-webshop heb ik het boek van Jeffery Zeldman: Designing with web standards gelezen. Dit heeft mij over de streep getrokken om nooit, meer tabellen te gebruiken voor de opmaak van websites. Om nooit meer font tags te gebruiken. De source-code wordt hierdoor zo simpel en minimaal dat programma's als Macromedia Dreamweaver of Adobe GoLive langzamerhand overbodig worden voor een door gewinterde webdesigner die HTML met de hand kan programmeren. Ze zijn gewoon niet meer nodig voor het webdesign. Af en toe gebruik ik ze nog wel eens om eens een javascript te laten maken of oude websites, die nog uit tabellen bestaan, om te bouwen naar pure Css websites.

De manier van opmaken is zoveel makkelijker dan met tabellen. Als de klant een aanpassing wil maken in de website. Dan zijn een paar regels van het Css bestand voldoende om de hele website te veranderen. Tevens legt Zeldman het voordeel van web standaarden uit. Waarom we ook rekening moeten houden met minder valide websurfers (visueel en lichamelijk). PDA handhelds en gebruikers van mobiele telefoons zullen zeker baat hebben bij web standaarden. De XHTML source-code voldoet zich aan standaarden. Als alle browsers of andere internet gerelateerde apparaaten zich aan die standaarden houden komt het allemaal goed. Dan maakt het niet meer uit of je op Mac, Windows of Linux op het web surft met welke browser dan ook. Daarnaast werkt dezelfde website ook nog op handheld internet enabled apparaten.

Het allergrootste voordeel is dat je de content maar 1 keer maakt of 1 keer laat generen door een script i.c.m. een database. Met behulp van verschillende Css stylesheets kan een versie voor print en screen gemaakt worden. Een leuke bijkomstigheid is natuurlijk een stylesheet 'switcher' die het mogelijk maakt meerdere ontwerpen te maken voor dezelfde structurele content.

Als de webbrowser, handheld of welk ander apparaat

geen Css

[menu]

[status]

Nautilus

Over deze website

Techniek

Browser compatibiliteit

Designing with web standards

Navigation

Printen?