Labo 2: semantische HTML en versiebeheer

Vorige week stond er een website van jou op het internet. Ze werkte, maar ze betekende nog niets: een hoop tekst en links zonder structuur.

Vandaag herwerk je diezelfde pagina's tot HTML met betekenis, en zet je je project onder versiebeheer. Vanaf nu kan je terug naar elke versie die ooit gewerkt heeft.

Doelstellingen

Na dit labo kan je:

• de heading map van een pagina uitschrijven vóór je ze bouwt CORE_2.2
• je pagina indelen in landmark regions en controleren dat alle inhoud erin zit CORE_2.2 CORE_7.1
• je hoofdinhoud onderverdelen in sections met een titel CORE_2.2
• een verzameling links of items markeren als een lijst CORE_2.3
• het element kiezen dat je inhoud beschrijft in plaats van een div CORE_2.2
• je pagina's valideren en de meldingen van axe DevTools oplossen CORE_2.9 CORE_7.1
• een lokale git-repository aanmaken en koppelen aan een remote op GitLab CORE_9
• je werk vastleggen met git add, git commit en git push CORE_9

Naslagwerk

📖 cheat sheet 📖

De HTML cheat sheet bevat alle elementen die je vandaag nodig hebt, plus de werkwijze voor sectioning. Hou die open terwijl je werkt.

Deel 1: eerst op papier (± 15 min)

Open je project van vorige week en zet je editor opzij. Neem papier.

⚠️ We starten aan een echt portfolio!

De pagina's van vorige week hadden bijna geen inhoud.

Stop. Denk.
Wat hoort op elke pagina?

Je hebt na vandaag minstens

• Homepagina: een duidelijke introductie en navigatie naar de belangrijkste onderdelen.
• Projectenpagina: een overzicht van al je opdrachten en persoonlijke projecten. Deze pagina bevat links naar detailpagina’s over elk labo, of elke opdracht/project.

heading map

Schrijf voor elke pagina de heading map uit: welke h1, welke h2's eronder, welke h3's daar weer onder. Dus niet de code, wel de inhoudstafel.

Dit voorbeeld gaat over de "detailpagina's over elk labo, elke opdracht of elk project"

/projecten/labo01/index.html

h1  Labo 1: webserver en tools
    h2  Doelen van de oefening
    h2  Omschrijving
    h2  Gerelateerde links
    h2  Reflectie
        h3  Wat ging goed
        h3  Wat was moeilijk

Dit is dan weer hoe je 'projectenpagina' (/projecten/index.html) er best zou uitzien.
Maak ook voor deze pagina een 'heading map', op basis van wat je op de afbeelding ziet.

Eén h1 per pagina

De h1 beschrijft waar die pagina over gaat, niet waar je site over gaat. Op je startpagina is dat iets anders dan op je labopagina.

Controlepunt 1

Toon je drie heading maps aan je labodocent voordat je begint te typen. Dit telt mee voor je permanente evaluatie.

landmark regions

Duid daarna per pagina aan wat in de header hoort, wat in de main, en wat in de footer.

Deel 2: je pagina's herwerken (± 60 min)

Werk pagina per pagina. Volg de werkwijze voor sectioning uit de cheat sheet.
Je zal wellicht pagina's moeten bijmaken, dat moet lukken na vorige week!

Landmark regions

Zet op elke pagina header, main en footer in je body. De navigatie komt in een nav binnen de header.

Alles zit in een landmark

Geen enkel stuk zichtbare inhoud staat rechtstreeks in je body.

Navigatie als lijst

Je navigatie is een verzameling links, dus een lijst. Zet elke link in een li binnen een ul.

Ze staan dan onder elkaar met bolletjes ervoor. Dat is correct. Vanaf les 3 regel je met CSS hoe het eruit ziet.

Main onderverdelen

Deel je hoofdinhoud op in sections. Elke section begint met een kop.

Voor de pagina van labo 1 en labo 2 stellen we voor:

• de doelen van de oefening
• eventueel een link naar je oplossing
• een omschrijving van wat je gemaakt hebt
• gerelateerde links: welk bronmateriaal en welke hulpmiddelen heb je gebruikt
• een reflectie: wat ging goed, wat was moeilijk, waarover zit je nog met vragen

Kies het juiste element

Ga je hele pagina af en vraag je bij elk stuk af wat het is. Een div is je laatste keuze, niet je eerste.

Een paar dingen die je op je eigen pagina's zal tegenkomen:

• de opsomming van je labo's op projecten/index.html is een lijst
• 'gerelateerde links' in je detailpagina is een lijst
• een citaat uit de cursus of van MDN is een blockquote met een cite

Een pagina voor dit labo

Maak projecten/labo02/index.html met dezelfde opbouw, en voeg ze toe aan de lijst op je projectenpagina. De navigatie op die nieuwe pagina werkt met relatieve paden, net als vorige week.

Controlepunt 2

Toon je herwerkte pagina's aan je labodocent. Je wordt gevraagd om van één willekeurig element uit te leggen waarom je dat element gekozen hebt.

Deel 3: valideren en controleren (± 20 min)

Doe dit voor elke pagina, in deze volgorde:

1. W3C Markup Validation Service: nul errors.
2. axe DevTools: scan de pagina en los de meldingen op.
3. HeadingsMap: leest de outline als een inhoudstafel?

Publiceer daarna naar je hostingaccount (plesk) en valideer opnieuw, nu via je online adres.

Lokaal goed is niet online goed

Een pad dat lokaal werkt en op de server niet, zie je pas op de server. Meestal is het een hoofdletter of een absoluut pad.

Deel 4: git en GitLab (± 40 min)

Vanaf vandaag houdt git de geschiedenis van je project bij. Je ziet wat je wanneer veranderd hebt, en je kan terug naar een versie die wel werkte.

Volg de naslagpagina Git en GitLab, stap voor stap. Kort samengevat:

1. Git installeren en je naam en e-mailadres instellen.
2. Aanmelden bij GitLab via de SSO-link op die pagina. Niet rechtstreeks via gitlab.com.
3. Een leeg privéproject portfolio aanmaken, zonder README.
4. In je portfoliomap de commando's uit Push an existing folder uitvoeren.
5. Een .gitignore toevoegen, vóór je eerste git add.
6. Committen en pushen.

Push is niet publiceren

git push zet een kopie van je geschiedenis op GitLab. Je website komt online via Plesk, zoals vorige week. Dat zijn twee verschillende dingen.

💡 Wijzig je iets, dan doe je dus twee dingen:
commit en push naar GitLab, én publiceren naar je hostingaccount.

Controlepunt 3

Toon je labodocent je project op GitLab, met minstens één commit en een zinnige commit message.

Afronden (± 15 min)

Hou het laatste kwartier van het labo vrij. Er volgt een test.

Indienen

Je site staat online tegen zondag om 20u, op je eigen adres.

Zorg dat op dat moment:

• elke pagina header, main en footer heeft, en alle inhoud daarbinnen staat
• je navigatie een lijst is, met werkende relatieve paden
• elke pagina precies één h1 heeft en geen kopniveau overslaat
• er een pagina bestaat voor labo 1 én labo 2, met doelen, link, omschrijving, bronnen en reflectie
• alles valideert, en axe geen van de drie meldingen hierboven geeft
• je project op GitLab staat, met je werk van vandaag erin

Als er iets misgaat

De validator klaagt over section. Elke section heeft een kop nodig. Heb je die niet, dan was het geen section.

axe blijft zeggen dat inhoud buiten landmarks staat. Zoek naar tekst die rechtstreeks in je body hangt. Vaak is het een losse regel bovenaan of een copyright onderaan die nog geen footer heeft.

Mijn lijst valideert niet. In een ul of ol mag enkel een li staan. Wat je ín die li zet, mag je vrij kiezen.

Er loopt iets mis met git. Zie Git en GitLab.

Ik zie mijn wijziging niet online. Je hebt gepusht naar GitLab maar niet gepubliceerd naar je hostingaccount. Zie het rode blok hierboven.