Opdracht 3: Een gegeven visueel ontwerp implementeren in een vormgegeven webpagina

Achtergrond

Je krijgt van een grafisch ontwerper een visueel ontwerp aangeleverd. Je moet dit ontwerp zo goed mogelijk nabouwen in XHTML en CSS. Hierbij houdt je er rekening met het dat digitale media andere eisen stellen dan een print. Je probeert dus wel alle aanwijzingen in het grafisch ontwerp na te volgen, maar probeert er tegelijk voor te zorgen dat je ontwerp goed schaalbaar en goed toegankelijk wordt op verschillende media en door verschillende soorten gebruikers.

Opdracht

1. Bekijk de volgende visueel ontwerpen en kies er een uit om te realiseren in XHTML en CSS:

   • Community site

     

     Deze website bestaat uit:

     • een kop met een titel in een soort sierbanner
     • Daaronder drie collomen:
       • De linker kolom bevat een afbeelding en twee omrandde tekstblokken.
       • De midden kolom bevat 3 keer een nieuws bericht, bestaande uit een kopje, een datum, een plaatje, een tekst, een tekstlink en een scheidslijn
       • De rechter kolom bevat verschillende groepjes links waarvan sommige met plaatje of beschrijving

   • Webshop

     

     Deze website bestaat uit:

     • topbanner met logo
     • Hieronder een menubalk. De menuitems zijn geen afbeeldingen maar tekstlinks.
     • Hieronde een banner met logo
     • Hieronder bevinden zich 3 kollomen:
       • Kolom 1 bevat een menu en de koppen zijn gemaakt met CSS, hieronder een winkelmandje
       • Kolom 2 bevat een afbeelding en tekst. Daaronder is ruimte voor vier berichten met een foto bij elk bericht. Elke bericht heeft zijn eigen kader met een grijslijntje.
       • Kolom 3 bevat twee informatieve blokken en een contact formulier.

   • Zakelijke site

     

     Deze website bestaat uit:

     • een header met bedrijfsnaam. Dit kan gewoon met tekst.
     • Links een plaatje
     • Rechts het hoofdmenu
     • In het midden het hoofdgedeelte, bestaande uit
       • een gedeelte met deeplinks naar bepaalde hotspots in een apart kader en een welkom gedeelte
       • daaroder de content voor deze pagina: kopjes, tekst en afwisselend rechts en links een afbeelding
2. Maak een overzicht van de verschillende onderdelen (divisies) op de pagina en bekijk de maatverhouding tussen de verschillende onderdelen en bepaal welke onderdelen een vaste grootte moeten hebben en welke moeten schalen.
3. Positioneer de verschillende (div) blokken, zodat de pagina-layout al overeenkomt met het ontwerp
4. Vul de verschillende divisies met XHTML content: teksten, kopjes, lijstjes, etc
5. Knip plaatjes los uit het ontwerp en voeg deze toe aan je XHTML (als img of als background)
6. finetune de CSS van de elementen binnen de verschillende divisies

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Lever niet alleen je XHTML en CSS bestand(en) in, maar schrijf ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk, zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

• Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
• Hoeveel tijd je hieraan gespendeerd hebt,
• Hoeveel tijd je hebt besteed aan het maken van de opdracht,
• Hoe je de opdracht hebt aangepakt
• Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar1/herfst/fed/opdracht3/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument bij voorkeur in XHTML en link daarin naar je werk.

Houd rekening met de deadline voor deze opdracht: zondagavond 9 november om 24:00. Zie voor meer informatie de modulewijzer

Beoordelingscriteria

• Je XHTML goed gestructureerd, semantisch, valide en van commentaar voorzien (net als bij opdracht 1)
• Je gebruikt die CSS technieken die het meest geschikt zijn om het ontwerp mee te realiseren
• Je CSS is gericht op flexibiliteit;
  • er moet makkelijk een XHTML element (bijvoorbeeld een nieuwsitem) bij kunnen zonder dat je je CSS hoeft aan te passen;
  • de vormgeving moet eenvoudig zijn aan te passen, zonder voor elk XHTML element nieuwe waardes op te geven
• Je implementatie gaat effectief met de ruimte om en goed leesbaar is op verschillend formaat schermen (is goed schaalbaar)
• Je implementatie ziet er in verschillende browsers hetzelfde of vergelijkbaar, maar in ieder geval goed uit (FF3, IE7, IE6, safari, opera) (browser compatibility)
• Je code is goed toegankelijk voor zoekmachines en andere slechtzienden (accessibility)

Succes.