Voor de nieuwe leerlingen in H4 en V4.
- 3+1 weken HTML/CSS Tutorials
- 3+1 weken handmatig website bouwen
Je hebt leerlingen die de tutorials pas volgen als ze aan hun site beginnen. In dat geval begin je dus gelijk aan je site en volg je de tutorials op een need-to-know basis. Ook na 4 weken je tutorials inleveren plus de code. Hopelijk heb je al wat 😉
Code Academy Tutorials
Maak een codeacademy account met je idiote nickname als username en je school email adres. Op de profile pagina zet je de boel dicht voor iedereen behalve jezelf.
Voor al deze opdrachten geldt: bewaar je code. Copy-paste naar Notepad++. Opslaan in map H:\Documenten\website\tutorials
- What is HTML?
- https://www.codecademy.com/learn/learn-html
- Learn HTML: 1. Elements and Structure, 2. Tables. 3. Forms (optioneel). 4. Semantic HTML.
- Learn CSS. (Forms overgeslagen = CSS helemaal afmaken voor cijfer = 7)
- Tijd over? Kies zelf een meer gevorderd onderwerp op codeacademy. Dit is voor cijfer > 7.
- Inleveren? Je Profile Pagina van Codeacademy. Screenshot ‘m in een Powerpont die je inlevert. En e code uploaden naar je site.
Je kunt ook op verzoek van de docent even moeten inloggen en je vorderingen overleggen.
Stappenplan website bouw
- 1. Kies een onderwerp. Niet te klein, maar zeker niet te groot. Niet auto’s maar Ferrari. Niet paarden maar Shetlanders
- 2. Maak een map. Ga eerst naar de O: schijf in Netwerk Dat is de Onedrive. Maak daar een map
websiteen daarbinnen een mapcssen een mapimages, en eventueel een maptutorials. In boomvorm: O:/website/>cssimagestutorials(hier zet je evt stukken code die je met een tutorial gemaakt hebt)
- Kies het juiste programma. Notepad++ op school.
- Bereik je documenten via de cloud vanaf thuis: office.com en dan onedrive
- Pro: Kies voor een bepaalde layout. Pak bijvoorbeeld 1 van de voorbeelden van https://www.w3schools.com/css/css_website_layout.asp. Maar je mag ook zelf wat proberen ;-).
- Pro: Maak gebruik van Google Fonts of van “de standaard fonts” of een zelf-gedownload font – zoeken via fontsly of dafont.com
- Pro: gebruik bijpassende kleuren uit een kleurenpalet
- uploaden van je bestanden
- bezoeken van je website
- Het uploaden, bekijken, testen, aanpassen is een kwestie van omgaan met de tools. Dat is wat je eigenlijk moet leren. Ja, ook de code zelf, maar ook en vooral het bouwproces.
- Check de Requirements (onder) en het privacy beleid
Upload je bestanden met FTP naar airybubbles7
Je ontvangt via teams van je docent een bericht met username / password. Deze heb je nodig om je bestanden te uploaden met het File Transfer Protocol. Er is een uitgebreide help pagina voor diverse programma’s en de website net2ftp
Op je site als bezoeker
Je moet je website ook bezoeken, duh. Waar staat ie?
- Als je username
snoozing servant 444is, dan is je url https://blub.airybubbles7.nl/~snoozingservant444/- Het wokkeltje ~ (de tilde heet het eigenlijk) zit linksboven naast de [1].
- Kopieer en plak deze URL naar de browser en naar je bookmarks. Ga niet googlen op deze url.
- Zo kom je dus op de site als bezoeker
Thuis kun je evt gebruik maken van een betere HTML editor zoals Brackets voor Windows. Bewaar je files netjes en uploaden via de file manager.
Werkt het niet? Kijk op de FTP pagina bij de kleine lettertjes.
Privacy Beleid
Deze site weet alleen je nickname. […] Verder weet deze site niets van jou.
Airybubbles7 privacy beleid
En dat blijft zo: want jij mag er niks op plaatsen over jezelf. Geen Naam. Geen Telefoon. Geen Insta. Geen Snap. Geen Woonplaats. Geen Geboortedatum. Alleen de nickname die we je gegeven hebben.
Opdracht Mini-site: Requirements
Maak nu een site van minstens 3 pagina’s met toffe kleuren, de juiste links, afbeeldingen etc over een onderwerp naar keuze buiten de school / binnen jouw hobbies.
- Zorg dat de navigatie en branding consequent (op elke pagina hetzelfde) zijn.
- Interpunctie en afwerking dient vlekkeloos te zijn. Maak volop hyperlinks. Embed media. Hier show je de kennis van de tags die je hebt opgedaan. Je kunt alles nu opzoeken!
- Lees het privacy-beleid en zorg dat je die ook in dit project respecteert (7)
- Een moderne navbar is eigenlijk wel essentieel als je serieus verder wilt met deze site (7). w3schools legt het uit.
- Wil je meer fancy stuff maar dan server-side, probeer dan eens een php script. Je kunt ook een database aanmaken en gebruiken, via plesk stel je dat in (9)
- Een echt goede website voldoet aan standaarden op het gebied van HTML5 en toegankelijkheid (eng: accessibility) Bijv. voor slechtzienden, kleurenblinden. Controleer (en repareer) je site daarop met online tools – w3c (9)
- In de rest van het schooljaar en je schoolcarrière ga je verder met deze website of met een wordpress op airybubbles7.nl. Om je erop voor te bereiden maak je een p5js test pagina waarin je enkele sketches van anderen embed. Stel je voor dat het jouw werkstukken waren: wilde je die dan hier plaatsen of zou je er niet aan denken?!
- Aan het einde van het project maak je je keuze: je gaat verder met deze HTML website of je vraagt om een WordPress site bij je docent. Nee, niet zelf aanmaken op wordpress.com, dat is echt niet toegestaan.
Rubrics HTML Tutorials
Gebruik deze rubrics voor je zelfbeoordeling op de laatste lesdag voor de deadline en lever je zelfbeoordeling in als powerpoint via Som. Vergeet de screenshots uit codeacademy niet.
| 3 | 5 | 7 | 9 | |
| Teacher HTML Tutorials | Niks ingeleverd of aangetoond binnen de deadline. | Je hebt HTML af en met CSS ben je tot halverwege gekomen. Niet op tijd af, maar je hebt wel op tijd ingeleverd. | Codeacademy Learn HTML 1 + 2 + 3 + 4 ; Toon aan met screenshot van profiel pagina. | Kijk ook video tutorials van bijv. Dani Krossing. Kijk zelf wat je nodig hebt of interesseert. PHP of Javascript kan ook. |
| Teacher CSS Tutorials | LearnCSS amper begonnen | LearnCSS tot 1/3 af (t/m Box Model) | Learn CSS voor 2/3 af : t/m Colors | LearnCSS Helemaal af = t/m Typography. |
| Eigen tutorials (wie ervoor koos niet met codeacademy te werken) | HTML + gedeelte CSS | HTML + CSS gelijkwaardig. Code inleveren | Ook nog een ander onderwerp als Javascript, PHP of SQL. |
Rubrics HTML Website
| 3 | 5 | 7 | 9 | |
| Navigatie en Branding | Er is geen voorpagina (index.html) dus je krijgt de apache-index. De beoogde voorpagina linkt wel naar de anderen, maar geen back. | Elke pagina heeft een andere look-and-feel | Interne navigatie klopt en de pagina’s hebben dezelfde look-and-feel met een font vastgelegd in CSS. | Je hebt een uitgekiende kleurencombinatie om je site een professioneel tintje te geven en minstens 2 bijpassende fancy lettertypes via google fonts of een geuploade font-file. |
| Privacy | Je site lekt gegevens van anderen of uit je omgeving. Pas dus op voor de naam van je manege of je pony. | Je site lekt alleen je eigen gegevens. | Je voldoet aan het reglement en je kunt uitleggen wat het privacy-reglement inhoudt. | Je hebt docent of klasgenoten aantoonbaar geholpen de privacy te bewaken. Je kiest niet voor een google font maar een zelf geupload font om onze privacy te bewaken |
| Code, CSS en Navbar | Je hebt nog amper HTML codes ontdekt. | De images staan niet op je site zelf maar zijn ingelinkt van google images search results of andere externe sites. Of je CSS staat op een externe site OF Je hebt volop HTML tags maar die staan in een volgorde die helemaal nergens op slaat. OF Je code staat zo vol syntax fouten dat je dus nu een onvoldoende krijgt. | Je hebt alle basiscodes zo’n beetje wel gebruikt. Je hebt een werkende navbar uit CSS code. Je CSS code kleurt je site op een manier die past bij jouw project. | Je hebt je code gechecked op HTML5 validiteit (bijv met een validator) en ook op toegankelijkheid (accessibility, bijv via WAVE). Toon aan! |
| Inzet | Werken aan andere vak(ken) tijdens de les, klaar of niet klaar. | Je hebt moeite je telefoon en andere onzin af te blocken. | Je werkt prima in het tempo van de klas. | Je hebt doorgewerkt tijdens en buiten de les, zodat je ver voor loopt op de deadlines van de klas |
