Tijdens de opdracht Layout ga je een nieuwsportaal maken over jouw favoriete hobby. De opdrachtgever is geïnteresseerd in jouw hobby en zou graag meer informatie willen hebben over je hobby. Wat is er nu leuker om dit met nieuwsberichten te doen.
Functionele eisen beschrijven welke functionaliteit je eindproduct moet bevatten. Functionele eisen mogen nooit van technische aard zijn! Ieder persoon moet kunnen begrijpen welke functionaliteit de opdracht moet bevatten, ongeacht kennisniveau.
Layout moet aan de volgende functionele eisen voldoen:
- Er moet een homepage zijn waarop een kop te vinden is, samen met een menu, een lijst met minimaal 4 nieuwsberichten, een balk aan de zijkant met advertenties en een melding aan de onderkant van de pagina
- Bij elk nieuws bericht staat een lees-meer link. Die opent een nieuwe pagina met een mooi opgemaakt nieuwsbericht in de zelfde layout
- Elk artikel heeft een kopje, inleiding, afbeelding en een knop om door te klikken
- De advertenties aan de zijkant zijn klikbaar en openen een nieuwe link
- In het menu staan de kopjes Home, Over 'mijn hobby' en Nieuws
Technische eisen beschrijven aan welke vakgerichte voorwaarden de opdracht moet voldoen. Bijvoorbeeld dat de opdracht in correct validerend HTML en CSS moet worden geschreven.
Layout moet aan de volgende technische eisen voldoen:
- Alle documenten zijn geschreven in HTML5
- Alle documenten bevatten het correcte doctype
- Alle documenten bestaan uit een head en body
- Alle documenten hebben een title
- Alle documenten bevatten correcte koppen, paragrafen, lijsten, afbeeldingen en links
- Alle documenten valideren als correct HTML5, http://validator.w3.org/
- Alle documenten bevatten een sans serif lettertype
- De 'float' wordt alleen gebruikt waar hij voor in het leven is geroepen: het uitlijnen van afbeeldingen. Dus niet het uitlijnen van divs, sections etc.
- Je maakt gebruik van HTML 5 elementen als header, section, article, aside, nav en footer zoals ze bedoeld zijn
- De positionering van de pagina doe je door gebruik van het flex weergave type
- Er staan geen style elementen en atributen in de HTML
Wanneer je een mooi nieuwsportaal hebt gemaakt voor jouw favoriete hobby, kun je de website uitbreiden zodat hij ook op een tablet en een mobiel goed zichtbaar is. Hiervoor kun je de stylesheet uitbreiden met 'media queries'. Hierdoor kunnen alle bezoekers jouw nieuwsportaal goed bekijken. Pas per weergave (tablet en mobiel) de flex weergave zo aan dat hij per weergave een iets ander uiterlijk krijgt.
