Beoordeling Website Gemeente Medemblik – Deel 2
Inleiding
In het vorige deel “Nieuwe Website Gemeente Medemblik – Deel 1” heb ik een algemene beoordeling gegeven over de nieuwe website van de gemeente Medemblik. Daarin zijn een aantal kritische punten belicht en is de html op een paar punten aangepakt zodat de site nu valideert. In deel 2 belicht ik de semantische waarde van de html structuur. Om een eerste indruk te krijgen van de semantische waarde van de gebruikte html, kun je heel eenvoudig alle stylesheets ontkoppelen en kijken hoe de site presteert als alleen de tekst overblijft. Deze simpele handelingen laat enkele tekortkomingen zien die simpel op te lossen zijn.
HTML Structuur
Wat direct opvalt als je de site zonder css bekijkt is dat de naam van de website niet voorkomt op de pagina met uitzondering van de copyright melding in de footer. Op zich is dat geen probleem, maar in de regel wordt dit wel gedaan en wordt deze tekst dan gebruikt voor het logo van de site en als link naar de index. Bij deze site wordt een gelijksoortig effect bereikt met een lege span met een onclick event.
<span id="toplogo" onclick="location.href='/'"></span>
Semantisch gezien zou een h1 element met de tekst “Gemeente Medemblik” en een link naar de index correcter zijn. Met css is dit te stijlen tot een logo met een link naar de index zoals die nu ook voorkomt alleen html technisch krijgt de link dan meer betekenis.
<h1><a href="/"><span>Gemeente Medemblik</span></a></h1>
Het tweede dat opvalt is de structuur van de menu’s in het bovenste groene deel van de website. Deze menu’s zijn allemaal in span structuur gezet in plaats van de gebruikelijke ul/li structuur zoals je zou verwachten.
<span id="firstmenu"> <a href="index-01-01-2007.html?id=51630&menu=51630" title="Nieuws" target="_self">Nieuws</a> <a href="index-01-01-2007.html?id=51261&menu=51261" title="Bestuurlijke organisatie" target="_self">Bestuurlijke organisatie</a> <a href="index-01-01-2007.html?id=51634&menu=51634" title="Gemeentelijke organisatie" target="_self">Gemeentelijke organisatie</a> <a href="index-01-01-2007.html?id=51633&menu=51633" title="Digitaal loket" target="_self">Digitaal loket</a> <a href="index-01-01-2007.html?id=51636&menu=51636" title="Bekendmakingen/publicaties" target="_self">Bekendmakingen/publicaties</a> <a href="index-01-01-2007.html?id=51637&menu=51637" title="Recreatie en toerisme" target="_self">Recreatie en toerisme</a> <a href="index-01-01-2007.html?id=51638&menu=51638" title="Projecten en plannen" target="_self">Projecten en plannen</a> <a href="index-01-01-2007.html?id=51836&menu=51836" title="WMO" target="_self">WMO</a> <a href="index-01-01-2007.html?id=51640&menu=51640" title="Contact" target="_self">Contact</a> </span> <span id="secondmenu"> </span> <span id="thirdmenu"> <a id="item_contact" href="index-01-01-2007.html?id=51640">Contact</a> <a id="item_sitemap" href="index-01-01-2007.html?id=51675">Sitemap</a> <a id="item_loket" href="index-01-01-2007.html?id=51648">Loket Medemblik</a> <a id="item_gids" href="index-01-01-2007.html?id=51838">Laatste nieuws</a> <a id="item_vacatures" href="index-01-01-2007.html?id=51717">Vacatures</a> <a id="item_pers" href="index-01-01-2007.html?id=51721">Perslounge</a> </span> <span id="fourthmenu"> <a href="index-01-01-2007.html?id=51712"> <img src="files/vb_nieuwsbrief.jpg" height="175" width="191" alt="Nieuwsbrief" title="Nieuwsgierig naar het laatste gemeente nieuws"> </a> </span>
De span structuur zorgt ervoor dat op de pagina zonder opmaak, alle linkjes zonder enige enter achter elkaar staan en zodoende aandoen alsof het één lange tekst met linkjes is. Zeker het laatste menu met de nieuwsbrief link ziet er daardoor erg vreemd uit. Het plaatjes van de koe rekt de zin geheel uit zijn verband waardoor de structuur helemaal verloren gaat. Een mogelijke optie zou zijn om tussen elke span een <br> te zetten waardoor er vier gescheiden menu’s ontstaan. In de site is echter duidelijk terug te zien dat de bovenste menu’s bestaan uit drie lijstjes met links waarvan de twee buitenste statisch zijn en de middelste dynamisch veranderd op basis van de getoonde pagina. In unordered list structuur past daar het beste bij.
De link van de nieuwsbrief kan vervangen worden door een normale tekstlink met betekenis en kan door middel van css uiteindelijk weer gestyled worden naar zijn huidige vorm.
<ul id="firstmenu"> <li><a href="index-01-01-2007.html?id=51630&menu=51630" title="Nieuws" target="_self">Nieuws</a></li> <li><a href="index-01-01-2007.html?id=51261&menu=51261" title="Bestuurlijke organisatie" target="_self">Bestuurlijke organisatie</a></li> <li><a href="index-01-01-2007.html?id=51634&menu=51634" title="Gemeentelijke organisatie" target="_self">Gemeentelijke organisatie</a></li> <li><a href="index-01-01-2007.html?id=51633&menu=51633" title="Digitaal loket" target="_self">Digitaal loket</a></li> <li><a href="index-01-01-2007.html?id=51636&menu=51636" title="Bekendmakingen/publicaties" target="_self">Bekendmakingen/publicaties</a></li> <li><a href="index-01-01-2007.html?id=51637&menu=51637" title="Recreatie en toerisme" target="_self">Recreatie en toerisme</a></li> <li><a href="index-01-01-2007.html?id=51638&menu=51638" title="Projecten en plannen" target="_self">Projecten en plannen</a></li> <li><a href="index-01-01-2007.html?id=51836&menu=51836" title="WMO" target="_self">WMO</a></li> <li><a href="index-01-01-2007.html?id=51640&menu=51640" title="Contact" target="_self">Contact</a></li> </ul> <ul id="thirdmenu"> <li><a id="item_contact" href="index-01-01-2007.html?id=51640">Contact</a></li> <li><a id="item_sitemap" href="index-01-01-2007.html?id=51675">Sitemap</a></li> <li><a id="item_loket" href="index-01-01-2007.html?id=51648">Loket Medemblik</a></li> <li><a id="item_gids" href="index-01-01-2007.html?id=51838">Laatste nieuws</a></li> <li><a id="item_vacatures" href="index-01-01-2007.html?id=51717">Vacatures</a></li> <li><a id="item_pers" href="index-01-01-2007.html?id=51721">Perslounge</a></li> </ul> <ul id="fourthmenu"> <li id="item_nieuwsbrief"><a href="index-01-01-2007.html?id=51712" title="Nieuwsgierig naar het laatste gemeente nieuws">Nieuwsbrief</a></li> </ul>
In de code hierboven is meteen het lege “secondmenu” weggehaald aangezien lege elementen zoveel mogelijk voorkomen moeten worden en een lege ul natuurlijk helemaal not-done is.
Het volgende onderdeel dat aan de beurt is, zijn de nieuwsblokjes. Wat opvalt is dat de titel van een nieuwsitem en de daadwerkelijke tekst van het item achter elkaar staan. Het mag geen verrassing zijn dat hier span’s gebruikt zijn terwijl kopjes en paragrafen op zijn plek zouden zijn. De huidige structuur is als volgt.
<div id="blok1">
<h1>Nieuws</h1>
<div class="blokcontent">
<img src="files/narcissen.jpg" alt="Narcissen" height="65" width="174">
<span class="nieuwskop"><span>{+}</span>Sluiting afdeling Burgerzaken</span>
<span class="nieuwstekst">De Gemeentelijke Basisadministraties (GBA) van de drie fusiegemeenten worden samengevoegd tot één ad...<br></span>
<span class="leesmeer"><a href="index-01-01-2007.html?id=50069" target="_self" title="%title%">>></a></span>
</div>
<div class="divider"></div>
<div class="blokcontent">
<img src="files/traktor.jpg" alt="Traktor" height="65" width="174">
<span class="nieuwskop"><span>{+}</span>Eerste vergadering nieuwe raad</span>
<span class="nieuwstekst">Op 2 januari 2007 wordt de 1e vergadering van de raad van de nieuwe gemeente Medemblik gehouden. Ter...<br></span>
<span class="leesmeer"><a href="index-01-01-2007.html?id=51792" target="_self" title="%title%">>></a></span>
</div>
</div>
Hiervan is uiteraard een betere structuur te maken door kopjes en paragrafen te maken. De {+} aanduidingen in de tekst zijn grafisch natuurlijk erg mooi op de site, maar dienen uiteraard niet terug te komen in de html, dus ook deze verdwijnen. Omdat we al een h1 hebben gebruikt voor de naam van de site bouwen we de nieuws titel om naar een h2 en gebruiken we voor de kopjes van de nieuwsitems een aantal h3’s.
<div id="blok1"> <h2>Nieuws</h2> <ul> <li class="img_narcissen"> <h3>Sluiting afdeling Burgerzaken</h3> <p>De Gemeentelijke Basisadministraties (GBA) van de drie fusiegemeenten worden samengevoegd tot één ad...<br> <a href="index-01-01-2007.html?id=50069" class="leesmeer" target="_self">>></a></p> </li> <li class="img_traktor"> <h3>Eerste vergadering nieuwe raad</h3> <p>Op 2 januari 2007 wordt de 1e vergadering van de raad van de nieuwe gemeente Medemblik gehouden. Ter...<br> <a href="index-01-01-2007.html?id=51792" class="leesmeer" target="_self">>></a></p> </li> </ul> </div>
In bovenstaande structuur zijn tevens de onsamenhangende images weggehaald zodat de leesbaarheid van de tekst beter wordt. Ook zijn de lege divider divs weggehaald, deze dienen enkel voor het aanbrengen van een border terwijl dit ook simpel gerealiseerd kan worden door de list-items een border te geven. Deze structuur zetten we uiteraard door in het werkzaamheden blok. Volgende stap is uiteraard de wijziging van de “actueel” en “bedrijven” kopjes van een h1 naar een h2 kopje.
De volgende verbetering die gedaan kan worden is het toevoegen van een submit button bij het zoekformulier aangezien dat de toegankelijkheid van het formulier ten goede komt. En tot slot zou de afbeelding van de tulp verhuist moeten worden naar de css en zou het in principe loze element uit de html moeten verdwijnen.
Na alle aanpassingen komen we tot de tweede revisie van de html code die er zonder css als volgt: (revisie 2 zonder css) uitziet. Als we de oude stylesheet er opnieuw aankoppelen komen we tot het volgende resultaat: (revisie 2 met oude stylesheet).
Conclusie
Na een kritische blik op de html is er het één en ander veranderd aan de html structuur. De volgende stap is het aanpassen van de stylesheet zodat we uitkomen op het oorspronkelijke resultaat. Hierop kom ik terug in deel drie van dit artikel.
development 
Medemblik, Werk 
Reageren en trackback's plaatsen is niet mogelijk.