IA Website

inclusief Google Sites

Eindbaas skill

Wat ga je leren?

Je gaat leren voor MVI 4.3:

Doelstelling, thema en doelgroep bepalen voor een website
In schetsen een sfeer, typografie en lay-out zichtbaar maken
Een flowchart maken
Tekst- en beeldbestanden selecteren, archiveren en bewerken

Je gaat leren voor MVI 4.4:

Teksten, grafische elementen en beelden opmaken voor een website met webdesignsoftware
Pagina's linken en een navigatiestructuur aanbrengen
Bewegende media toevoegen
Links toevoegen
Een ontworpen website controleren, gebruiksklaar maken en uploaden
Ontwerp en keuzes die zijn gemaakt, toelichten
Voor het uitvoeren van de taak beheerst de leerling de voorwaardelijke kennis, vaardigheden en houding.

Deze doelen ga je bereiken door gebruik te maken van ontwerpproces:

Probleem definiëren
Research
Brainstormen/Moodboard
Schetsfase
Prototype/testfase
Maken van het product
Reflectie en presentatie

Wat lever je uiteindelijk op:

verslag met je werkproces, onderzoek, woordweb, moodboard, schetsen en reflectiepunten
werkende website met onderdelen zoals in Skill 6
presentatie geven over je website en hoe je tot die website bent gekomen
afvinklijst die je toe voegt aan je verslag
dit alles lever je in op Microsoft Teams

Waarop wordt je beoordeeld

Klik hier om het bestand te openen.

Belangrijk:

Je mag zelf je werktempo en volgorde bepalen. Let erop dat je voor elke skill ongeveer 100 minuten nodig hebt.

Vergeet niet bij elke skill je reflectie te zetten hoe die les verlopen is. Dus, wat heb je gedaan? Wat ging goed? Wat kon er beter? Etc.

Skill 1: Wat is een website?

Leerdoelen

Ik ken de betekenis van webpagina's, host, webservers, internet, wereldwijd web, HTML, XHTML, webbrowser, broncode, hypertekst, links en internet
Ik kan beschrijven hoe je een website weergeeft.
Ik kan een stukje HTML hanteren en reproduceren.

Werkwijze

Lees de website hieronder bij skill 1.
Maak de introductie opdracht: 'Maak je eerste webpagina'.

Een website is

Een website is een verzameling samenhangende webpagina's met gegevens, zoals tekst, afbeeldingen of video's, die opgeslagen worden of in het gebruikte jargon 'gehost' (= letterlijk: 'geherbergd, onderdak geboden') worden. De website is vervolgens op een of meer webservers gezet en is (meestal) opvraagbaar gemaakt via internet. Het woorddeel web in website verwijst naar het wereldwijd web en het Engelse site betekent plek. Een website wordt ook wel aangeduid met het Engelstalige leenwoord site, dat in het Nederlands is aanvaard. Tevens bestaan er de Nederlandse woorden weblocatie of webstek voor. Deze woorden worden echter minder vaak gebruikt. Bron Wikipedia

Weergeven van een website

Dit doe je door middel van een Browser zoals:

Je ziet nu onder de browser namen een lijntje staan, dit wordt een hyperlink genoemd. Als je daar op klikt verwijst die link naar een andere website.

Webpagina

Een webpagina is een pagina op het wereldwijde web. Webpagina's bestaan uit HTML- of XHTML-code en zijn bedoeld om met een webbrowser bekeken te worden. De browser zet de broncode om naar een leesbare pagina. Door hypertekst links in de HTML-code kan eenvoudig van de ene pagina naar de andere worden genavigeerd, een bezigheid die ook wel surfen op het internet wordt genoemd. Bron Wikipedia.

Bekijk de video van SkillsDojo: Wat is HTML?

Ook van SkillsDojo: Programmeer je eigen website

Introductie opdracht: 'Maak je eerste webpagina'.

Open Kladblok (Notepad) op je PC
Kopier de tekst van rechts naar je kladblok
Sla dan op als .html bestand.
Dubbelklik en voilà!
Lees verder bij w3Schools.com.

<!DOCTYPE html><html><head><title>Mijn eerste webpagina!</title></head><body>
<h1>Dit is mijn eerste hoofdstuk</h1><p> Hier komt de inhoud van de pagina te staan, die zichtbaar moet zijn in de webbrowser.</p>
</body></html>

Klik bij HTML Editors > Stap 4 op de groene knop Try it Yourselve en vervolgens op de knop Run. Bekijk wat er gebeurt als je de tekst verandert.

Skill 2: Onderzoek

Leerdoelen

Ik weet hoe je een doelgroep onderzoek kunt uitvoeren en de prioriteiten kiezen.
Ik weet hoe je een woordweb maakt.

Werkwijze

Beantwoord de vragen zoals hieronder en in het verslag.
Maak een woordweb in Word.

Door onderzoek kom je meer over het onderwerp te weten.

Onderzoek doen is één van de belangrijkste stappen. Denk bijvoorbeeld aan het merk Coca Cola. Dat waar jij het eerste aan denkt, is waarschijnlijk ook hetgeen een ander het eerste aan denkt. Dit is dus niet origineel, door onderzoek te doen kom je ook achter andere eigenschappen van Coca Cola en kun je creatief zijn in je eigen ontwerp.

Om te onderzoeken kun je denken aan:

informatie op internet
tijdschriften
reclames
boeken en verhalen
geschiedenis
andere culturen
kunstenaars die met hetzelfde onderwerp bezig zijn
etc.

3 voorbeelden van doelgroepen zijn:

De doelgroep van Coca-Cola zijn voornamelijk studenten, mensen die graag uitgaan en stappen met vrienden of net een fulltimebaan hebben.
De doelgroep van Rolex is rijkdom uitstralen, dat als je een Rolex bezit je echt iets bereikt hebt in het leven, luxe uitstralen.
De doelgroepen waar Nike zich voornamelijk op segmenteert zijn sporters in de jonge tot middelbare leeftijdsklasse. Deze doelgroepen zijn meer bezig met sportievere merken en kleding.

Initieel richtte Nike zich voornamelijk op topsport en atleten, maar dit is al lang niet meer alleen het geval. Nike richt zich ook op een bredere doelgroep/segment door ook 'casual dagelijkse' kleding te verkopen. Het dragen van Nike is echt een levensstijl en dat draagt Nike ook uit in haar marketingbeleid. De boodschap "just do it" probeert Nike universeel uit te dragen. De boodschap gaat niet alleen op, voor de doelgroep 'atleten,' maar wordt gepositioneerd als een motiverende levensstijl quote. Doordat deze boodschap universeel toepasbaar is, beschikt Nike altijd de mogelijkheid zich nog verder te segmenteren met nieuwe producten en innovaties. De focus van het bedrijf ligt echter nog steeds voornamelijk op de doelgroep 'atleten.' In de sociale aantrekkingskracht ligt de kracht van Nike in haar doelgroep. Dit zorgt ervoor dat hoe meer mensen Nike dragen, dit anderen weer beïnvloed om ook Nike te gaan dragen.

Beantwoord de volgende vragen uit het verslag bij het onderzoek (skill 2) om een beter beeld te krijgen van het bedrijf.

Skill 3: Moodboard

Leerdoelen

Ik schets een sfeer voor de website
Ik leer welk lettertype je wanneer gebruikt.

Werkwijze

Volg de onderstaande stappen om tot een Moodboard te komen.

Stappen

maak een woordweb waar je aan denkt bij de website, maak dit in Word of op papier, komt in verslag (voorbeeld of ander voorbeeld)
zoek een lettertype om te gebruiken voor je website
zoek de kleuren die je wilt gebruiken voor je website (met kleurcodes, RGB)
zoek in tijdschriften en/of online naar foto's die een sfeer weergeven die je wilt dat je website uitstraalt
voeg de plaatjes op een A4 samen of maak het in Adobe Photoshop.
maak een foto en voeg deze in het verslag toe

Skill 4: Schetsen, Flowchart & Wireframe

Leerdoelen

Ik leert wat een schets is
Ik leer wat een flowchart is
Ik leer wat een wireframe is en
Ik beveel een schets aan, aan de opdrachtgever.
Ik stel uit mijn schets samen hoe de wireframe wordt.

Werkwijze

Maak minimaal 3 schetsen van de homepage.
Maak een flowchart met daarop minimaal de 3 webpagina's weergegeven in Microsoft Word.
Maak een wireframe van de homepage getekend of in Adobe XD.

Stappen

maak 3 schetsen van hoe je vindt dat de homepage van je website eruit zou kunnen komen te zien
bedenk welke schets je het beste vindt en schrijf in het verslag waarom je dat vindt
overtuig de opdrachtgever de website te laten maken die jij het liefst zou willen maken
maak een flowchart met de pagina's die je wilt maken
voeg de flowchart toe aan het verslag
maak een wireframe van de homepage. Dit mag je getekend doen of door gebruik van Adobe XD
voeg de wireframe toe aan het verslag