Projekt: Gutenberg

Uppdraget: från text till webbplats

Välj en bok eller berättelse från Project Gutenberg och bygg en läsvänlig webbplats med två sidor. Det här är ett nytt, fristående projekt, inte din övningssida. Nu gör du allt själv, från tom mapp till färdig sajt. Du använder bara det du redan kan, inget nytt att lära sig. Behöver du hjälp att komma ihåg? Gå tillbaka till de tidigare delarna i det här temat.

Arkivet är uppkallat efter Johannes Gutenberg. Det här uppslaget kommer från hans verkstad i Mainz, tryckt av Johann Fust och Peter Schöffer två år efter Gutenbergs bibel.

Uppslag ur Mainzpsaltaren från 1457. Tät svart text i en spalt per sida, med noter på notlinjer. Överst på högersidan står en rubrik i rött, och nedanför den en stor dekorerad initial i rött och blått som markerar att ett nytt avsnitt börjar. Mindre initialer i rött återkommer genom texten. — Strukturen syns innan du kan läsa ett ord: rubrik, brödtext, och en stor bokstav där ett nytt avsnitt tar vid. Mainzpsaltaren av Johann Fust och Peter Schöffer, 1457 Public domain

Titta på uppslaget innan du läser det. Du ser en rubrik, du ser var ett nytt avsnitt börjar, du ser vad som är brödtext. Det är strukturen som talar, inte orden, och det var tryckpressens egentliga uppfinning: inte att skriva en bok, utan att göra en boks struktur möjlig att massproducera.

Det ovanliga med just den här sidan är att den röda rubriken och de färgade initialerna är tryckta, inte handmålade i efterhand som de var i bibeln två år tidigare. Både strukturen och utseendet kom alltså ur pressen. Det är samma uppdelning du arbetar med: HTML bär strukturen, CSS bär utseendet, och båda produceras maskinellt.

Det du gör i det här projektet är samma sak i ett annat medium. Du tar en råtext utan struktur och lägger tillbaka den, fast med taggar i stället för blyet.

Processen

Välj källmaterial: Gå till Project Gutenberg och välj en valfri bok. Hämta Plain Text UTF-8-versionen, inte HTML. Det ger dig ren text att strukturera själv. Du kan behöva rensa bort en del metadata i början av filen och välj ut de första 2-3 kapitlen för att hålla det hanterbart.
Skissa på papper: Rita upp de två sidorna index.html och om.html på var sin pappersbit.
- Markera var <header>, <nav>, <main> och <footer> ska sitta.
- Bestäm rubriktrappan: vilken text är <h1>, vilka är <h2>?
- Rita innehållsförteckningen som en lista.
Bygg HTML-skelettet: Skapa index.html och om.html med korrekt boilerplate (Emmet: ! + Tab).
- Båda sidorna måste ha <header>, <nav>, <main> och <footer>.
- lang-attributet på <html> ska matcha bokens språk.
Fyll i innehållet:
- <h1> för bokens titel, en per sida.
- <h2> för kapitelrubriker. Lägg till ett id-attribut på varje kapitelrubrik, t.ex. <h2 id="kapitel-1">Kapitel 1</h2>. Det gör att innehållsförteckningen kan länka dit.
- <p> för all brödtext, undvik <br> för att skapa avstånd mellan stycken.
- En <ol> med <li>-element under titeln som innehållsförteckning. Länka varje <li> till rätt kapitel med en ankarlänk, t.ex. <li><a href="#kapitel-1">Kapitel 1</a></li> (se Länkar & ankarlänkar om du behöver fräscha upp minnet på id och #).
Skapa style.css och koppla den i <head> på båda sidorna med <link rel="stylesheet" href="style.css">.

Bygg Innehållscontainern:

main {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

Texten ska inte rinna ut över hela skärmen. Testa genom att dra i webbläsarfönstret.

Välj färger och typsnitt: Sätt en background-color på body och en color på texten som ger en trevlig läsupplevelse. Kontrollera kontrasten med WAVE. Välj också ett typsnitt, använd systemtypsnitt så att sidan laddar snabbt utan externa förfrågningar:
```
body {
    font-family: Georgia, serif;
}

nav,
footer {
    font-family: system-ui, sans-serif;
}
```
Vill du testa ett annat systemtypsnitt? serif, sans-serif, monospace och cursive är alltid tillgängliga utan att behöva ladda ned något.
Styla navigeringen: Använd CSS-receptet från Navigationsstruktur, display: flex på nav ul, list-style: none, padding: 0 och gap för mellanrum. Styla också nav a med text-decoration: none och tillräcklig padding för en klickyta på minst 44px.

Tekniska krav

Filer: index.html, om.html och style.css i samma mapp.
Landmärken: <header>, <nav>, <main>, <footer> på båda sidorna.
Rubriktrappa: Exakt en <h1> per sida. <h2> för kapitel. Inga hopp i trappan.
Brödtext: <p> för alla stycken. Inga <br> för avstånd.
Innehållsförteckning: <ol><li><a href="#kapitel-x"> med ankarlänkar till <h2 id="kapitel-x">-element.
Navigering: <nav><ul><li><a>, länkarna leder till rätt sida.
CSS: Extern style.css länkad i <head> på båda sidor.
Wrapper: max-width + margin-left: auto; margin-right: auto på <main> eller en inre behållare.
Flexbox-nav: display: flex på nav ul, inte på <a>-elementen.

Kvalitetssäkring

Kör dessa tester innan du lämnar in och notera resultaten:

W3C Validator: validator.nu, inga röda fel. Gör detta innan WAVE, annars validerar du strukturfel ovanpå strukturfel.
WAVE: Kör WAVE-tillägget på båda sidorna. Inga röda “Errors”. Kontrollera att landmärkena syns i panelen.

Vanliga fel

<br> istället för <p>: Radbrytningar med <br><br> skapar visuellt avstånd men ingen semantisk struktur. Skapa ett nytt <p>-element istället.
Fel display: flex-mål: Flexbox ska ligga på nav ul (föräldern), inte på <a>-elementen (barnen).
width istället för max-width: Fixed width skapar horisontell scrollning på smal skärm. Alltid max-width.
CSS länkad till bara en sida: Kom ihåg <link>-taggen i <head> på båda HTML-filerna. Använd samma css-fil för båda sidorna.

Uppgift: Inlämning: Gutenberg-projektet

Detta ska lämnas in

Dina skisser: Foto på dina papperslappar med landmärken utmärkta.
Alla filer (index.html, om.html, style.css) i en mapp eller ett GitHub-repo.
Notera resultaten från W3C Validator och WAVE för båda sidorna.

Kvalitetsstämpel

Godkänd leverans är validerad, har korrekt rubriktrappa, fungerar utan horisontell scroll och har godkänd kontrast i WAVE.

Motivera & reflektera

Avsluta med en kort utvärdering i din readme.md. Det här är din chans att visa att du inte bara byggde sidan, utan förstår varför:

Motivera två val du gjorde (t.ex. färg, typsnitt eller struktur) och koppla dem till läsbarhet eller tillgänglighet.
Vad fick du rätta efter Validator eller WAVE, och vad lärde du dig av det?
Om du hade en vecka till, vad skulle du förbättra först och varför?

Nästa nivå

Du har en godkänd sida. Nu gör du den proffsig:

Kör en riktig skärmläsare genom boken. Kan du hoppa mellan kapitlen med bara innehållsförteckningens ankarlänkar?
Sikta på 0 Errors och 0 Alerts i WAVE på båda sidorna.
Lägg till en “hoppa till innehåll”-länk (skip-link) högst upp som tar en tangentbordsanvändare direkt till <main>.