Inlämningsuppgift 1

Betyg

Uppgiften bedöms IG/G/VG.

Inledning

I denna in inlämningsuppgift ska vi fokusera på två saker: att skriva syntaxmässigt korrekt HTML, samt att börja estimera/uppskatta tidsåtgången med hjälp av story points och agila metoder.

I uppgiften kommer vi att ta fram ett tillgängligt HTML-dokument (utan CSS!), som vi sedan arbetar vidare med i CSS-inlämningsuppgiften.

Denna uppgift går ut på att kunna översätta en design till "ren HTML", och att tänka kring hur HTML-strukturen ska byggas upp. Det kan vara lite klurigt om man inte har kunskaper i CSS, men använd metoden för att rita "boxar" runt innehållet.

Detaljer

Syftet med inlämningsuppgiften

• Lära sig att skriva syntaxmässigt korrekt HTML
• Lära sig att använda story points för uppskattning av tid
• Lära sig att pusha kod till GitHub

Mål och utbildningsmoment från kursplanen

• HTML
• Agilt arbetssätt som programmerare
• Ladda upp på git
• AI och AI-verktyg för HTML
• Skapa tillgänglig och responsiv HTML

Att göra

Steg 0 - Starta inlämningsuppgiften via GitHub Classroom

Öppna/starta inlämningsuppgiften via GitHub Classroom, se sidan Länkar och klicka på Inlämningsuppgift 1: HTML.

När du har satt upp repot via GitHub Classroom så kan du ta ner det till din dator, antingen via Visual Studio Code, terminalen eller t.ex. med GitHub for Desktop. Se instruktionerna för git hur du gör det.

Öppna sedan mappen i din editor (t.ex. Visual Studio Code) och sätt igång med stegen nedan.

Steg 1 - Bryt ner uppgiften i mindre uppgifter (agila metoder)

• Börja med att bryta ner uppgiften i "todos" och estimera dessa med hjälp av story points.
• Skriv ner dina todos och deras respektive estimat i README:n, och gör en commit till GitHub. Se exempel nedan:

- [ ] Skriva HTML för navigationen - 0,5 SP
- [ ] Tillgänglighetsgranska koden - 1 SP

Steg 2 - Logga din tid

Hitta ett sätt att logga din tid på, så att du följer upp dina estimat.

Du kanske sätter en timer och jobbar i pomodoros (och räknar hur många pomodoros du har gjort), eller också skriver du ner start- och sluttid.

Vilken metod du använder spelar ingen roll, huvudsaken är att du blir bättre på att estimera tidsåtgången och planera ditt arbete.

Steg 3 - Börja koda

• Tänk igenom vilka semantiska taggar du ska använda i din kod utifrån den givna designen
• Tänk igenom hur dessa ska ligga utifrån en responsiv layout: mobil, tablet och desktop
• Koda upp strukturen i HTML

Steg 4 - AI-hjälp

Be AI om hjälp att tillgänglighetsgranska din kod. Blir det några skillnader när du använder webbläsarnas utvecklarverktyg vs. AI? Saknas något i endera av dessa?

Ger olika AI-verktyg olika resultat?

Skriv en kort sammanfattning i din README med dina fynd, och fixa till eventuella tillgänglighetsfel som finns.

Steg 5 - Jämförelse

När du är klar med uppgiften, jämför utfallet av dina estimat med verkligheten. OBS! Det viktiga är inte att estimaten var korrekta - det viktiga är att du gjort dessa och lärt dig någonting.

Att du uppskattade att det skulle ta 1/2 dag och att det sedan tog 1 dag ger inte automatiskt IG, och om det istället tagit just 1/2 dag så ger inte det automatiskt VG.

I din README, inkludera en tabell som jämför utfallet med estimatet samt en kortfattad lärdomsanalys:

## Resultat av estimat
| Uppgift   | Estimat | Utfall |
| --------- | ------- | ------ |
| Koda meny | 0,5 SP  | 3 SP   |

### Sammanfattning
Jag lärde mig … om mina tidsuppskattningar. Till nästa gång ska jag ….

Steg 6 - Validera HTML-koden

• Gå till W3C Validator och ladda upp HTML-filen eller klistra in koden
• Fixa eventuella fel (fråga om något är otydligt! Ibland förstår man inte meddelandena, och/eller det behöver inte fixas)
• Skriv ut en PDF eller bildfil av resultatet, och committa den till ditt repo
• Bonuspoäng om du inkluderar en skärmdump av resultatet i din markdown-fil (README.md)

Steg 7 - Inlämning

• Committa koden och pusha den till GitHub.
• Kopiera länken till ditt repo, och lämna in i inlämningsboxen på itslearning. (Du behöver inte lämna in koden, bara länken).

VIKTIGT - INGEN CSS/JS I DENNA UPPGIFT

Inga inlämningar som innehåller CSS och/eller JavaScript är godkända i denna uppgift. Det ska BARA vara HTML.

• Menyalternativen behöver inte gå att klicka på. Menyn behöver inte gå att öppna i "mobilläge".
• Sökrutan ska inte fungera.
• Designen ska inte vara "pixel perfect" (och det går ju inte ens då ni bara har tillgång till HTML i denna uppgift).

Design

Resurser

• Alla HTML-taggar

Exempeltexter

Huvudartikelns brödtext

Carrot cake muffin donut cotton candy sugar plum. Biscuit caramels chupa chups gummi bears fruitcake marzipan chocolate. Tootsie roll cake bonbon bonbon sweet roll. Gummies chocolate bar pastry tiramisu chocolate sesame snaps. Cupcake biscuit jelly marshmallow liquorice bear claw fruitcake. Jelly donut gummies jelly beans bonbon. Ice cream cake croissant gummies candy canes icing pastry pastry. Cookie ice cream chocolate bonbon cheesecake cookie sweet roll pudding carrot cake. Chocolate bear claw caramels wafer sweet topping sweet.

Citatet (huvudartikel):

Apple pie pie cupcake dessert lollipop icing toffee soufflé. Bonbon ice cream marshmallow sesame snaps chupa chups lemon drops.

Credit: Text från Cupcake Ipsum

Andra artikeln

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic.

Credit: Text från Samuel L Jackson ipsum

Tredje artikeln

Lorizzle ipsizzle phat shizzle my nizzle crocodizzle amizzle, yo mamma get down get down things. Nullam sapien velizzle, the bizzle shit, suscipit crackalackin, gravida cool, arcu. Pellentesque egizzle for sure. Sed erizzle.

Credit: Text från Gangsta ipsum

Våga Fråga

Bedömning

För G

• HTML-filen är skapad och innehåller samtliga element som finns med i design-filerna.
• Det finns ett "breakdown" av uppgifter och tidsestimat (story points) i README-filen och det är committat i först
• Det finns ett resultat av utfallet på uppgifterna (story points)

För VG

• Utöver kriterierna för G…
• HTML-koden är välskriven och välformaterad enligt gällande praxis
• Studenten visar på djup förståelse för vad som går att åstadkomma med hjälp av HTML enbart
• Semantiska taggar har använts
• Tillgänglighet har beaktats

Vanliga misstag

Du har lagt filerna under mappen .github

"Flytta ut" dina filer så de inte ligger under mappen .github, utan på "rot-nivå".

Alt-texter på bilder

Alt-texter på bilder: beskriv bilden för någon som inte ser den. T.ex. säger "Bild på mig" ingenting, jämfört med "Leende person med glasögon och guldfärgat hår som står på en klippa framför ett hav.". Läs mer här

Vidare läser en "skärmläsare" upp "Picture of" (eller motsvarande), så om din alt-text är "Profile picture of me" så blir uppläsningen "Picture of profile picture of me".

Om bilden är dekorativ och ingår i en länk som innehåller text så behöver bilden ingen text, exempelvis såhär:

<<a href="https://link.com" target="_blank" rel="noopener noreferrer">Läs mer <img src="arrow.svg" width="20" height="10" alt=""></a>

ID-attribut

Du ska aldrig sätta attributet id på ett HTML-element om du inte explicit kan motivera varför det ska finnas där.

<div id="section"></div> <!-- ❌ NEJ! -->

Mer information

ID är som ett personnummer; du kan endast använda den en gång per sida. Genom att använda ID minskar du "återanvändbarheten" i din kod. Om du istället använder klasser i CSS, så kan du återanvända och gruppera kod på ett mer flexibelt sätt.

Du får använda ID till att skapa ankarlänkar, eller om du ska använda JavaScript (som är out-of-scope för denna kurs).

Extra radbrytningar

Radbrytningar med <br> ska inte finnas med. Avstånd fixas sedan med CSS senare i kursen. Endast t.ex. om du behöver radbryta brödtext eller rubrik av någon specifik anledning. Men absolut aldrig två br: <br><br>! Överväg också att låta webbläsaren sköta radbrytningarna, så att texten flödar korrekt. Om du behöver begränsa textens bredd för läsbarhet, så görs detta också med CSS senare.

Om inputs och labels

Tips: om du lägger din input inuti en label, så behöver du inte ha med något id:

<label>
  <span>Ditt namn</span>
  <input type="text" placeholder="För- och efternamn">
</label>

Jämfört med for och id:

<label for="name">Namn</label>
<input id="name" type="text" placeholder="För- och efternamn">

Vilket sätt som är bäst beror på layouten/designen, men oftast funkar det bra med att ha <input> nästlad inuti <label>.

Tänk på att du har gjort din koppling rätt först när <label>-texten går att klicka på, och input-rutan fokuseras automatiskt!

<b> vs. <strong>

Fundera på när b-taggen ska ersättas med strong-taggen, liksom em med i: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b#usage_notes

Telefonnummer

Skriv alltid telefonnummer med landskod, så underlättar du uppringning via mobil: <a href="tel:+46701234567">070 123 45 67</a>

Gemener

Alla HTML-taggar ska skrivas med gemener. Jämför <Section> med <section>.

Öppna externa länkar i ny flik

Lägg gärna till attributet target="_blank" på länkar som leder till en extern sida (t.ex. LinkedIn), så behåller du besökaren på din sida och sidan öppnas i en ny flik, enligt konvention.

För ökar säkerhet och "minimerad tracking" kan du lägga till följande attribut:

<a href="https://link.com" target="_blank" rel="noopener noreferrer">Title</a>

Mer, mycket svårläst info här

Bildnamn för ökad sökmotoroptimering

Tips! Döp filnamnet till hela ditt namn, t.ex. fornamn_efternamn.jpg så ökar sökmotorsynligheten på såväl sidan som bilden. Om det är önskvärt. Obs - ej krav.

Förväxla inte <dl> med <li>

<dl>-taggen är mer lämpad att använda för t.ex. ett "index" (tänk dig ett receptregister i en kokbok) snarare än för att lista utbildningar/arbetslivserfarenhet. Läs mer här: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

Du saknar alla nödvändiga element på en bild

En bildfil ska alltid ha följande attribut:

<img
    src="bild.jpg"
    width="200"
    height="200"
    loading="lazy"
    alt="Beskrivande text på bildens innehåll för någon som inte ser">

• Bredd och höjd ska alltid sättas för att undvika att "sidan hoppar" vid inladdning. Exakt storlek kan styras med hjälp av CSS senare, så sätt bildens verkliga storlek. T.ex. om din bild är 640x480 px, så skriver du width="650" height="480". Observera att vi inte skriver med måttenheten px i attributets värde.
• Du ska alltid ha med en alt-text! ALLTID.
• Vill du optimera laddningen på sidan kan du lägga till loading="lazy" som gör att bilden laddas in först när den blir synlig i webbläsarens "viewport", dvs. när användaren har scrollat till bilden.
• Bilder ska aldrig innehålla specialtecekn (å, ä, ö, !, osv.) och aldrig blanksteg/space. Ersätt blanksteg med t.ex. _.

Läs mer om s.k. "Cumulative Layout Shift" (CLS) och dess inverkan på "performance" på web.dev

Om du har en länk med text, som också innehåller en bild, då behöver bilden inte en alt-text för då är bilden endast "dekorativ". Exempel:

<a href="somepage.html">Läs mer <img src="arrow.png" width="20" height="10" loading="lazy" alt=""></a>

Namngivning av CSS-klasser (out of scope för uppgiften)

Sätt CSS-klasser också med gemener, och helst engelska: Bild -> image. Det underlättar t.ex. i internationella teams för att skapa konsekvens i namngivningen i koden.

Submit-knapp

I formulär, överväg att byta ut <button> mot en <input type="submit" value="Send"> för att "skicka" formulär, och använd på motsvarande sätt <input type="reset"> för att nollställa formulär.

Gemener i texten

Skriv rubriker och annat med gemener (bortsett från stor begynnelsebokstav). Vi sätter versaler i CSS sedan. Det tenderar att bli "skrikigt" i texten med versaler, även om jag förstår syftet med att ha versaler redan i HTML, men det är inte praxis.

<h1>OM MIG OCH MITT LIV</h1> <!-- ❌ NEJ! -->
<h1>Om mig och mitt liv</h1> <!-- Ja! -->

Din huvudfil/"landningssida" ska heta index.html

Webbservern letar automatiskt efter en fil som heter index.html som förstasida att visa, så döp din "huvudfil" till just index.html och ingenting annat.

Fel typ på input-fält

Använd rätt typ på input-fält, ska du t.ex. skriva ett formulärfält för e-post:

<input type="text" placeholder="Email" name="email"> <!-- ❌ NEJ! -->
<input type="email" placeholder="Email" name="email"> <!-- Ja! -->

Referens

Hoppa rubriknivåer

Hoppa inte över rubriknivåer, dvs. du ska inte ha såhär exempelvis:

<h1>Mitt namn</h1>
<h3>Min titel</h3>

Utan prioriter att ha rubrikerna i nummerordning:

<h1>Mitt namn</h1>
<h2>Min titel</h2>

Storleken kan du fixa senare i CSS, om det är anledningen till att du valt en mindre rubriknivå än nästkommande siffra.

Oformaterat dokument

Indentera ditt dokument korrekt. I VSCode kan du t.ex. använda den automatiska inbyggda formateringen för att få till det. I Command Palette, skriv "Format Document" så får du ordning på tabbningen. Se instruktioner här

Filnamn

Undvik internationella tecken (å, ä, ö) i filnamn liksom specialtecken (exempelvis ! eller #). Ersätt med a, o och _ eller -.