Webbteknik 1

Laboration 1A

Installera och initiera verktygen

I kursens laborationer och uppgifter ska du använda en del tjänster på webben och en del program. Du ska i denna laboration skapa konton på tjänsterna och ladda ner de program som behövs. Detta beskrivs i följande två filmer och tas upp mer i de detaljerade instruktionerna nedan.

Webbläsare

Den webbläsare som används i kursens filmer är Firefox. Den har bra stöd för de standards som tas upp i kursen och har även en del bra verktyg för utvecklare. Du rekommenderas därför att använda denna webbläsare, då du arbetar med kursens material.

Ladda ner och installera senaste versionen av Firefox

Då du installerat programmet, bör du göra följande, för att sedan lätt komma åt det.

  • MacOS
    • Öppna programmappen och dra Firefox till dockan.
  • Windows
    • Klicka på Start-ikonen, högerklicka på Firefox och välj Fäst på aktivitetsfältet.

Inställningar

Du rekommenderas göra följande inställningar i Firefox:

  • Öppna länkar i flikar istället för fönster.
  • När du öppnar en länk i en ny flik, växla till den direkt.
  • Filhämtningar: Fråga alltid var jag vill spara filerna.

Du bör också se till att Firefox är din standardwebbläsare. Det gör du på följande sätt:

  • MacOS

    • Mac OS 13 (Ventura)

      • Ta fram Systeminställningar och välj Skrivbord och Dock.
      • I menyn för Förvald webbläsare väljer du Firefox.

    • Tidigare versioner av Mac OS

      • Ta fram Systeminställningar och välj Allmänt.
      • I menyn för Förvald webbläsare väljer du Firefox.

  • Windows

    • Klicka på Start-menyn och välj Inställningar.
    • Välj Appar och sedan Standardappar (Default apps).
    • Om inte Firefox är vald under Web browser, klickar du på symbolen och väljer Firefox.

Visual Studio Code (VSC)

För att skriva HTML- och CSS-kod behöver du en editor med bra stöd för språken, så att du får hjälp då du lär dig språken, men sedan också för att kunna arbeta effektivt.

Ladda ner och installera Visual Studio Code för ditt operativsystem

Då du installerat programmet, bör du lägga det i dockan / aktivitetsfältet på samma sätt som det beskrevs för Firefox ovan.

Inställningar (Settings)

Du rekommenderas att göra följande inställningar. Öppna Visual Studio Code och ta fram inställningarna (klicka på symbolen med "kugghjulet" längst ner till vänster och välj Settings):

  • Sätt Files: Auto Save till afterDelay samt Files: Auto Save Delay till 1000.
    • Då kommer filer som du arbetar med sparas automatiskt varje sekund, då du ändrar i dem. Det är smidigt, då du skriver kod och samtidigt vill titta på resultatet i t.ex. Live Server, som tas upp nedan.
  • Andra inställningar som du kanske vill justera kan vara Editor: Font Size och Editor: Tab Size.
    • Välj de storlekar du vill ha.
  • Du bör sätta Editor:Word Wrap till on, så kommer långa rader delas upp på flera rader. Då slipper du scrolla i sidled.
  • I Hover: Delay bör du öka tiden till 2000 (eller vad du själv tycker är lämpligt).
    • I annat fall poppar hjälprutorna upp för snabbt, vilket dels kan vara irriterande, då du för musen över koden och dels i vägen, då du ska klicka och markera en del av koden. Samtidigt är det bra att inte helt ta bort "hover-rutorna", eftersom dessa också inkluderar färgpaletten som behövs för att välja färger i CSS-koden.
  • Under Extensions och Git ska Git: Enabled vara förbockad.
  • Kontrollera också att HTML > Format: Enable och CSS > Format: Enable är förbockade.
  • I HTML > Format: Wrap Line Length skriver du 0.

Tillägg (Extensions)

Gå till Extensions (klicka på symbolen med "fyrkanterna") och installera följande:

  • Live Server

    • Detta tillägg är användbart, då du vill testa och se resultatet i webbläsaren, samtidigt som du redigerar dokumenten i VSC.
    • Skriv Live Server i sökfältet och klicka sedan på det funna alternativet, så att du får fram sidan för Live Server.
    • Klicka på den gröna knappen Install.
    • Ta sedan fram Inställningar (Settings) igen och gå till Extensions > Live Server Config
      • I Settings: Custom Browser väljer du Firefox.

Git

För att enkelt kunna koppla samman det du skapar i VSC med publicering på webbtjänsten Netlify, behövs git och GitHub. Egentligen är git ett verktyg för versionshantering, men vi använder det främst här för att kunna göra denna koppling mellan editorn och publicering på webben, så att filerna laddas upp på webben automatiskt, då du gjort en ändring i dem.

Ladda ner Git till din dator, genom att klicka på länken för ditt operativsystem och gå igenom följande:

  • MacOS

    • Enklast är att använda installeraren under rubriken Binary installer. Klicka på länken efter texten "The latest version is" (2.33.0, då detta skrivs, men kanske ett annat nummer då du läser det).
    • Ladda ner och kör git-osx-installer.
      • Då du kör igång installationsprogrammet får du troligen ett fönster som säger att programmet inte kan köras, eftersom det kommer från en oidentifierad utvecklare. Ta då fram Systeminställningar i MacOS, klicka på Säkerhet och integritet. I fliken Allmänt klickar du på knappen Öppna ändå. Kör sedan igenom installationsprogrammet.

  • Windows

    • Klicka på länken för att ladda ner Git och kör sedan installationsprogrammet.
      • Svara Ja på frågan om att tillåta att appen får göra ändringar.

Inställningar

Då du installerat git ska du öppna en terminal och skriva in några kommandon. Öppna Visual Studio Code och välj New terminal i menyn Terminal:

  • För att kontrollera att git installerats skriver du följande kommando och trycker på return-tangenten: git --version Det ska då skrivas ut vilken version du har av git.

  • Då du sedan använder git och loggar ändringar, behöver systemet info om vem du är, så skriv in följande två kommandon:

    git config --global user.name "Förnamn Efternamn"

    git config --global user.email "name@email.com"

    där du ersätter namn och e-postadress med dina egna uppgifter inom citattecken. E-postadressen måste vara densamma som du sedan använder på GitHub. Förslagsvis använder du den e-postadress du fått från universitetet.

    • Ditt namn och e-postadress måste skrivas inom citattecken i ovanstående kommandon.

  • För att kontrollera att uppgifterna kommit in i konfigurationen skriver du följande kommando: git config --global --list

GitHub

För att lagra dina uppgifter på nätet ska du använda git tillsammans med GitHub.

Skapa ett konto på GitHub. Fyll i önskat användarnamn och lösenord samt din e-postadress (samma som du la in i git) och klicka på knappen Sign up for GitHub.

Inställningar

Gå till din profilsida och fyll i det du vill om dig själv. I fliken Emails lägger du till adressen för din studentmail, ifall du inte använde den, då du skapade kontot.

Studentpaket

Följande är inte nödvändigt för labbar och uppgifter i kursen, men är du student, kan du få tillgång till ännu fler verktyg på GitHub. Gå till GitHub Student Developer Pack och klicka på knappen Get the Pack, för att ansöka om studentpaketet.

  • Tyvärr kan det ibland ta ganska lång tid att få svar på ansökan och därmed tillgång till paketet. Men detta är ju något extra, som inte behövs i kursen, så du klarar dig ändå. Paket innehåller en hel del verktyg som ändå kan vara roliga att ha tillgång till sedan.

Netlify

För att publicera dina webbsidor på webben, behöver du ett webbhotell. Vi använder tjänsten Netlify som kan integreras med GitHub och därmed även Visual Studio Code.

Gå till netlify och klicka på Sign up. Klicka där på att logga in med GitHub.

Du behöver inte göra några fler inställningar nu, utan det tar vi i nästa lab, då du ska publicera en webbsida.

Pixlr

För att redigera bilder använder vi Pixlr E, som är ett gratisprogram som liknar Photoshop, men körs via webbläsaren. Du behöver det inte förrän lite längre fram i kursen, men det kan vara bra att skapa ett konto redan nu.

Gå till Pixlr och klicka på knappen Registrera / Logga in. Fyll i e-postadress (använd din studentmail på lnu) och önskat lösenord och klicka på länken Bli medlem.

  • Genom att använda studentmailen som slutar på lnu.se ska ditt konto automatiskt uppdateras till ett Pixlr Edu-konto, som ger dig tillgång till en bildbank och du ska även slippa reklamrutorna i programmet. Du behöver inte själv verifiera att du är student, utan det ska ske automatiskt, om du använder din studentmail vid registrering av ett konto.
  • Du kan också använda editorerna gratis utan att skapa något konto, men då finns en del begränsingar, t.ex. går det endast redigera ett fåtal bilder per dag. Om du registrerar dig, finns ingen sådan begränsning.

Klicka sedan på rutan för Pixlr E, för att starta programmet. Titta lite kort på det nu. Sedan är det i laboration L8 som det används.

Klar

Grattis!. Nu har du alla de verktyg som behövs för att arbeta med laborationer och uppgifter i kursen. Gå nu vidare med nästa laboration där du ska prova på att använda verktygen.