maxdebosscher / layout Goto Github PK

Tijdens de opdracht Layout ga je een nieuwsportaal maken over jouw favoriete hobby. De opdrachtgever is geïntresseerd 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

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

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

• Voorbeeld webpagina over auto's
• Wat zijn de nieuwe HTML5 elementen?
• Hoe moet ik met flex display aan de slag?

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.

• Voorbeeld webpagina tablet
• Voorbeeld webpagina mobiel
• Hoe gebruik ik een media query?