Webdesign - IT 11
Websites gebruik je zo vaak dat je bijna zou vergeten dat ze door iemand ontworpen en gebouwd zijn. Sterker nog, 30 jaar geleden bestonden ze nog helemaal niet! In dit bok leer je hoe websites zijn ontstaan, waar een goede website uit bestaat en ga je er zelf één bouwen!
Geschiedenis
Je leert hoe is het internet ontstaan, wat waren de eerste websites en welke ontwikkelingen hebben tot het hedendaagse web geleid?
Webdesign
Je leert denken als een website ontwerper. Waar bestaat een goede website uit? Hoe breng je overzichtelijk informatie over?
HTML en CSS
Je leert een simpele website te bouwen in HTML en CSS, de programmeertalen van websites.
Lesweek 1 (les 1 en 2)
Wat weet je al over websites?
Websites gebruik je dagelijks, dus de kans is groot dat je hier al veel over weet. In de les gaan we deze kennis inventariseren en bespreken.
De opdrachten maak je in de les, in samenwerking met een groepje. De antwoorden plaats je op jouw blog.
Opdracht 1 - Wat weet je al?
- Beantwoord met jouw groepje de volgende vragen:
- Wat is het verschil tussen een app en een website?
- Wat is een website?
- Waar gebruik je een website voor?
- Hoe kom je bij een website terecht
Opdracht 2 - Welke websites gebruik jij dagelijks?
Maak een lijst van websites die jouw groepje dagelijks bezoekt. Schrijf er ook bij waar je de website voor gebruikt.
Verdeel met je groepje de websites over de volgende categorieen:
- Nieuws
- Sociale Media (geen Apps)
- Webshop
- Vereniging (bijv. sport/muziek)
- Entertainment (bijvoorbeeld Netflix of YouTube)
- Zoekmachine
- Je mag zelf ook eventuele categorieen toevoegen
Beantwoord vervolgens de volgende vragen:
- Welke categorie is het meest vertegenwoordigd? Maak een top 3
- Benoem het voornaamste doel en doelgroep per website.
- Bechrijf de drie voornaamste verschillen in webdesign. Dat wil zeggen hoe de website is vormgegeven (kleurgebruik, indeling, afbeeldingen etc.).
INLEVEREN
Alle resultaten van de eerste week komen op jouw eigen blog. Zorg er dus voor dat iedereen in het groepje de informatie heeft.
Lesweek 2 (les 3 en 4)
De geschiedenis van het Web
Op 6 augustus 1991 werd de eerste website gelanceerd door Tim Berners Lee.
Deze website staat nog steeds online:
https://info.cern.ch/hypertext/WWW/TheProject.html
In de les leer je meer over het ontstaan van het internet, het wereldwijde web en websites.
Bekijk de video hier onder over het ontstaan van het internet.
Download hieronder de Powerpoint die we in de les gebruiken
Opdracht 3 - The Way Back Machine
The Internet Archive is een organisatie die een archief van het internet maakt en bewaart. Met gebruik van hun archief hebben ze de Way Back Machine gemaakt. In die online machine kun je terug in de tijd en websites zien door de jaren heen.
- Ga naar https://web.archive.org/web/20190101000035/https://www.youtube.com/ Je bent nu in de Way Back Machine van YouTube.
- In de balk bovenaan kun je klikken op verschillende data om te zien hoe YouTube eruit zag op die dag, in dat jaar. The Way Back Machine is niet heel snel, heb dus even geduld tot de pagina geladen is.
- Kies drie versies, die van elkaar verschillen, en maak van elk een screen shot met knipprogramma. Deze screenshots plaats je vervolgens in een blogbericht.
- In dit blogbericht beantwoord je over de screenshots de volgende vragen:
> Welke functionaliteiten zijn bewaard gebleven?
> Welke functionaliteiten zijn verdwenen?
> Welke functionaliteiten zijn er bijgekomen?
> Benoem per screenshot 4 belangrijke verschillen in webdesign
> Welke versie vind je zelf het beste? Waarom?
Plaats alle screenshots en antwoorden op jouw blog.
Week 3 (les 4 en 5)
Wat maakt een goede website?
Als webdesigner zorg je ervoor dat de informatie die men op een website vindt functioneel, overzichtelijk en aantrekkelijk vormgegeven is. In de les leer je uit welke onderdelen een goede website bestaat en hoe deze op een goede manier vormgegeven wordt.
Je gaat deze week aan de slag met een functioneel ontwerp, dat is een ontwerp waarbij je eerst op papier uitwerkt uit welke onderdelen en pagina's jouw website moet bestaan en hoe deze onderling naar elkaar verwijzen.
Opdracht 4 - Waar bestaat een website uit?
Elk groepje krijgt een onderwerp voor een website. De keuze is uit de volgende onderwerpen: Restaurant, Sportvereniging, Muzikant/Artiest, School, Bakker, Krant
- Maak met jouw groepje een overzicht van alle informatie die op deze website moet staan
- Maak een functioneel ontwerp voor jouw website met post-its op een A3 papier.
Maak een foto van dit functionele ontwerp en plaats het op jouw blog.
De groepjes met dezelfde onderwerpen wisselen nu van samenstelling.
- Maak met je nieuwe groepje een schets van de startpagina van de website, van waaruit toegang is tot alle informatie. Maak een foto van jouw schets voor op jouw blog.
Week 4 t/m 6 (les 6 t/m 11)
HTML & CSS
Eindopdracht - Zelf een website bouwen en programmeren
Websites worden gebouwd met de programmeertalen HTML (5), CSS en Javascript.
HTML is het skelet, CSS de opmaak en Javascript de interactiviteit.
Je gaat zelf leren een simpele website te bouwen met gebruik van HTML en CSS.
Dat doe je met deze online cursus (klik op de zwarte knop onder deze tekst).
- Let op! Als tekstverwerker voor de HTML en CSS code gebruiken we het programma NotePad++.
Volg de cursus en plaats het resultaat op jouw blog. Je hebt hier 3 weken de tijd voor.
Begrippen HTML CSS
HTML - Hypertext Markup Language, de basis codeertaal waarin Websites worden geprogrammeerd. Deze taal zet de structuur van een website neer.
CSS - Cascading Style Sheets, de codeertaal waarin Websites worden opgemaakt, deze bepaald de vormgeving van een website.
Notepad ++ - Het computerprogramma waarin de HTML code en CSS code wordt gemaakt.
Browser - Dit is het computerprogramma waarin je websites bezoekt/bekijkt. Bijvoorbeeld Internet Explorer of Google Chrome.
Folder - Dit is het Engelse woord voor mapje. Op de computer sla je al jouw HTML en CSS codes op in een mapje.
Sub-Folder - Dit duidt op mapjes die in jouw mapje zitten, sub-mapjes dus.
Programmeren/coderen - is het schrijven van een computerprogramma, een concrete reeks instructies die een computer uitvoert.
Tag - In HTML gebruik je tags, dit zijn opdrachten die je aan de browser geeft. In HTML worden deze altijd geplaatst tussen < >. Elementen - Alle codes die je als tag plaatst noem je elementen, binnen deze elementen (dus tussen de tags < >) kun je extra Attributen toevoegen die nadere specificaties geven aan dit element. Deze nadere specificatie kun je ook nog een bepaalde "waarde" geven, deze zet je altijd tussen aanhalingstekens. " " .
Open-Tag en Sluit-Tag - Om een opdracht te activeren (starten) of beëindigen (sluiten) gebruik je een Open-Tag: < > of een Sluit-Tag </ >.
Container - Datgene wat je tussen tags plaatst noem je de container. Hier staat meestal een tekst, titel of afbeelding in.
Head - Dit is het gedeelte van de HTML code dat niet zichtbaar is op de webpagina maar bovenin de browser informatie geeft over wat voor een website het is.
Content - Datgene wat in jouw code staat.
Stylesheet - Een CSS bestand waarin alle opmaakcode staat die bepaald hoe jouw website eruit komt te zien. Dit stylesheet koppel je aan de HTML code door hiernaar te verwijzen in de head van jouw website.
Anker - Deze term wordt als tag <a> gebruikt om hyperlinks te plaatsen.
Division - Deze term wordt als tag <div> gebruikt om een bepaald deel van de code te aan te geven als gebied. Dit gebruik je bijvoorbeeld als je een bepaald deel van jouw website een specifieke opmaak wilt gegeven.
Klik op de link hieronder voor een overzicht van de meest gebruikte HTML tags.
Week 7 (les 12 en 13)
Beoordeling en Reflectie
Je gaat elkaars werk beoordelen en schrijft een reflectie over jouw eigen werk op jouw blog.
Gebruik onderstaand beoordelingsformulier om elkaar te beoordelen, vul ook de opmerkingen in.
Bonus: Bijzondere Websites
Websites bestaan vaak om informatie over te brengen en zijn dan vooral functioneel, overzichtelijk en aantrekkelijk. Het medium biedt gelukkig ook een platform aan kunstenaars en andere vrije geesten. Hieronder vind je een verzameling aan bijzondere websites.
Kunstenaar Rafael Rozendaal