Webbteknik 1

I denna laboration ska du komma igång med verktygen och börja lära dig hur de fungerar för att organisera, redigera och publicera webbsidor. Gå igenom följande punkter för att prova på de olika tjänsterna och programmen. Punkterna är förslag på hur du kommer igång. Experimentera sedan på egen hand.

Visual Studio Code (VSC)

Följande steg ger dig en snabb introduktion till programmet.

• Öppna mappen MyFirstWebSite i VSC.

  • MyFirstWebSite finns i mappen L1, som du laddade ner i laboration L1a.
  • Dra mappen till VSC-ikonen eller till VSC fönster. Alternativt öppnar du först VSC, väljer Open i File-menyn och pekar ut mappen.

• Klicka på Explorer (symbolen med två filer högst upp till vänster) och orientera dig i miljön genom att öppna och stänga filer och mappar.

  • Du kan klicka på en fil i Explorer eller dra en fil till raden med flikarna, för att öppna den i en ny flik.
  • Dela vyn och visa två filer samtidigt, genom att klicka på symbolen med två rutor högst upp till höger.

• Prova att visa/dölja Minimap och Breadcrumbs med kommandon i View-menyn.

• Välj Color Theme i menyn du får genom "kugghjulet" längst ner till höger. Prova några olika alternativ och behåll det du själv trivs bäst med.

• Öppna en fil i editorn:

  • Klicka på vaxjo.html, för att öppna filen.
  • Koden i denna fil är inte så väl formaterad (vilket är medvetet gjort för denna övning). Klicka någonstans i koden, så att markören hamnar där.
    Tryck sedan ner tangenterna shift + alt + F, för att formatera koden.

• Öppna en fil i webbläsaren samt redigera en fil:

  • Öppna filen index.html i VSC.
  • Öppna den sedan i webbläsaren med Live Server, genom att antingen klicka på Go live i statusraden längst ner till höger eller genom att högerklicka i vyn och välja Open with Live Server.
    • Då öppnas webbläsaren och visar filen. Arrangera fönstren, så att du kan se både webbläsarens fönster och Visual Studio Code samtidigt. Har du en stor skärm, lägger du dem intill varandra. Annars lägger du dem överlappande, så att du snabbt och enkelt kan klicka i fönstren och växla mellan programmen.
  • Ändra någon text i filen index.html i VSC och se att det uppdateras i webbläsaren.
    • Om du tidigare (i lab L1a) valt Auto Save i inställningarna, sker uppdateringen direkt (eller efter den tid du valt för Auto Save). Annars måste du själv spara filen, för att kunna se uppdateringen. Live Server uppdaterar automatiskt i webbläsaren, så du behöver inte klicka på reload-knappen.
  • Vill du stänga servern, klickar du på Port:5500 i statusraden.
    • Det kan också vara någon annan port, men vanligtvis är det 5500.

Fortsätt nu att experimentera på egen hand med programmet.

Git och GitHub (valfritt)

Du ska nu öva på hantering av s.k. repositories i ett antal steg.

Projekt som du har lokalt på din dator

• Logga in på GitHub

• Skapa en ny repository (repo) på GitHub på följande sätt:

  • Gå till en sida med dina repositories, genom att antingen klicka på GitHub-symbolen högst upp till vänster eller klicka på symbolen för ditt konto högst upp till höger och välj Your repositories i popup-menyn.
  • Klicka på den gröna knappen New.
  • Fyll i namnet MyFirstWebSite, klicka på Private
    • Vill du att projektet ska vara öppet för andra, ska du välja Public, men för uppgifterna i kursen måste du välja Private.
  • Klicka på den gröna knappen Create repository.

• Kopiera repons url, adressen som börjar med https.

• Öppna projektet i VSC, dvs öppna mappen MyFirstWebSite på din dator i VSC på samma sätt som du gjorde i övningen om VSC ovan.

• Klicka på symbolen för Source Control (de tre ringarna med streck mellan sig) och klicka på den första knappen, Initialize Repository

  • Då skapas en repository av projektet lokalt på din dator. Det är ännu inte sammankopplat med GitHub, utan det görs i ett senare steg.

• Koppla din lokala repo till den repo du har på GitHub

  • Klicka på "kugghjulet" längst ner till vänster och välj Command Palette. Skriv add remote och klicka på kommandot, då det dyker upp under sökrutan. Klistra in adressen (som du tidigare kopierade från GitHub), tryck på return och skriv ett namn, förslagsvis samma som tidigare, MyFirstWebSite, och tryck på return.

    • Om det dyker upp en ruta om "credentials", "authorization" eller något liknande och en fråga om tillgång till din nyckelring, får du skriva in lösenordet till ditt konto på datorn och trycka på Tillåt eller Tillåt alltid (så slipper du rutan i fortsättningen).
    • Det kan också dyka upp en ruta längst ner till höger med en fråga om du vill köra "Git fresch periodiskt". Klicka där på Ask me later.

• Första commit: Bekräfta ändringar med commit och ladda upp filerna till GitHub

  • Klicka i meddelanderutan ovanför den blå Commit-knappen och skriv in en text som beskriver din commit, t.ex. "Projektet initierat".

  • Klicka sedan på den blå knappen Commit.

  • Det dyker då upp en ruta med en fråga om att alla filer ska flyttas till Stage. Klicka på Yes.

    • Detta steg sker i din lokala repository på din dator.

  • Du får sedan en ny knapp Publish Branch, som du klickar på.

    • I detta steg skickas filerna över till den repository du har på GitHub.
    • Dyker det också upp en ruta längst ner till höger, kan du klicka på Ask Me Later.

  • Gå till GitHub och klicka på fliken Code i din repo. Du bör då se att filerna och mapparna i ditt projekt kommit upp dit.

• Andra och följande commit: Bekräfta och ladda upp ändringar med commit & push

  • Klicka på Explorer i VSC och öppna filen index.html, om du inte redan har den öppen.

  • Gör någon ändring i texten, t.ex. i rubriken (h1-taggen). Filen markeras som modifierad med ett M i Explorer.

  • Klicka på Source Control, för att bekräfta och ladda upp din ändring.

    • Klicka i meddelanderutan ovanför den blå Commit-knappen och skriv in någon lämplig beskrivning på din commit, t.ex. "Ändrat rubrik".
    • Klicka sedan på pilen intill Commit-knappen och välj Commit & Push i menyn.
    • Även nu bör det dyka upp en ruta om Stage, där du klickar på Yes.
    • Gå till GitHub och klicka på fliken Code, så ser du din nya commit där. Du kan klicka på filen index.html, så ser du innehållet och kan se din ändring.
    • Du ser också att du har två commits. Klicka på 2 commits så får du en sida med tidslinjen ("grenen") och dina två ändringar.

• I detta exempel gjorde du ju en ny commit endast efter en liten ändring, för att testa hur det fungerar. Normalt gör man lite fler ändringar, innan man gör en ny commit.

Ta bort en repository

Om du vill ta bort en repository kan du göra på följande sätt. Ta dock endast fram kommandona här för att titta på dem, men bekräfta dem inte, eftersom du behöver ha kvar ditt projekt och repository i nästa övning.

• Ta bort repon från mappen på din dator

  • För att avsluta kopplingen till GitHub i VSC klickar du på "kugghjulet" längst ner till vänster och väljer Command Palette. Sök efter git close. För att bekräfta kommandot, klickar du på det (men gör det, som sagt var, inte nu).

  • Öppna mappen för projektet och ta bort den dolda .git-mappen

    • MacOS
      • Tryck ned cmd+shift+punkt. Då visas alla dolda filer och mappar. För att ta bort .git-mappen, drar du den till papperskorgen (men det gör du, som sagt var, inte nu heller). Tryck sedan ner cmd+shift+punkt igen, för att dölja filerna och mapparna.
    • Windows
      • Välj Ändra mapp- och sökalternativ i Arkiv-menyn. Klicka på fliken Visning och markera Visa dolda filer, mappar och enheter samt klicka på knappen Verkställ. Släng sedan .git-mappen i papperskorgen (men gör det, som sagt var, inte nu). Därefter kan du markera Visa inte dolda filer, mappar och enheter igen och klicka på knappen Verkställ.

• Ta bort repon från GitHub

  • Ta fram repons sida och klicka på fliken Settings.
  • Scrolla ner till Danger Zone och klicka på knappen Delete this repository.
  • Där kopierar du texten ovanför textfältet, klistrar in det i textfältet och klickar sedan på knappen I understand .. (men, som sagt var, gör det inte nu).

Projekt som finns på GitHub

*Obs! Denna övning kan du hoppa över just nu. Men ifall du senare i kursen skulle ha behov av att ladda ner ditt projekt från GitHub, kan du gå tillbaks till denna övning, för att se hur man gör.*

Vi antar att du inte har ditt projekt på din dator, utan endast på GitHub. Du ska nu skapa en klon och flytta ner till din dator från GitHub.

• Öppna din repo på GitHub och kopiera url från webbläsarens adressfält.

• Öppna VSC genom att klicka på programsymbolen. Öppna alltså ingen mapp.

• Klicka på symbolen för Source Control och klicka på knappen Clone Repository. I rutan som då dyker upp klistrar du in url från GitHub, trycker på return och pekar sedan ut var du vill spara din mapp (t.ex. på skkrivbordet, så att du sedan lätt kan hitta den).

• Om det dyker upp en fråga ifall du vill öppna din nya mapp, klickar du på knappen Open. Annars får du i Source Control klicka på knappen Open Folder och peka ut din nya mapp, för att öppna den i VSC.

• Projektet är nu klonat och din mapp på din hårddisk och repon på GitHub är sammanlänkade.

• Gör en ändring i en fil, "committa" och "pusha", på samma sätt som ovan, för att testa att det funkar.

  • Då du "pushar" till GitHub, kallas nog projektet nu för origin.
  • Gå till GitHub och kontrollera att din commit kommit upp.

Netlify

Nu ska du också publicera filerna på webben, så att det går att titta på dem där.

• Gå till Netlify och logga in (med GitHub, eller epost)

• Klicka på fliken Sites, om du inte redan är där.

• Här ser det lite olika ut beroende på om det är den första webbplatsen du publicerar, eller om du redan har en eller flera webbplatser publicerade. Om det är första publiceringen visas inte knappen "Add new site", utan du får se alternativen för att publicera en ny webbplats direkt på sidan. Klicka 'Add new site' om den knappen syns.

• Alt 1. GitHub

  • Välj Import an existing project, klicka sedan Import from git, så ska du få en lista med dina repon på GitHub.

    • Om du inte ser din repo i den lista som visas, klickar du på texten Configure the Netlify app on GitHub längst ner och loggar in.
    • Scrolla ner på sidan och under rubriken Repository Access lägger du till din nya repository eller väljer alternativet All repositories och klickar på knappen Save.
      • Du kan också komma till denna sida genom att klicka på din egen symbol högst upp till höger och välja Settings. Där klickar du på Application och sedan Netlify.
    • Nu ska repon visas i listan på Netlify.

  • Klicka på den repo som ska användas, dvs MyFirstWebSite.

  • På nästa sida behöver du inte ändra något, utan klicka endast på knappen Deploy site.

  • Du kommer till en ny sida, där det kan ta en liten stund, men sedan visas en ny url för din webbplats. Klicka på den, så visas din publicerade webbplats. Alla som du ger url till, kan nu se din webbplats.

    • Tar det för lång tid (mer än 10 sek.), utan att du får någon url, får du klicka på webbläsarens reload-knapp. Då laddas sidan om och förhoppningsvis har du då fått url.

  • Prova att ändra något i HTML-dokumentet i VSC. Gör sedan en Commit & Push. Ladda om den publicerade webbsidan i webbläsaren och den nya sidan visas. Uppladdningen från GitHub till Netlify sköts alltså nu automatiskt, dvs det är en "continuous deployment, CD".

    • Om du inte ser den uppdaterade sidan, då du klickar på reload-knappen i webbläsaren, kan det bero på att du var för snabb med att klicka på den (eller rättare sagt att uppdateringen på GitHub och Netlify tog lite tid, så att de inte hunnit bli klara). Prova då att klicka på reload-knappen igen.

• Alt 2. Utan github

  • Välj deploy manually

  • Dra och släpp eller klicka browse to upload för att ladda upp katalogen som innehåller din webbplats.

  • Du kommer till en ny sida, du kan behöva stänga ner några dialogrutor, men sedan visas en ny url för din webbplats. Klicka på den, så visas din publicerade webbplats. Alla som du ger url till, kan nu se din webbplats.

  • Prova att ändra något i HTML-dokumentet i VSC. Spara.

  • Öppna netlify och välj din sajt.

  • Gå in under avdelningen Deploys

  • Drag och släpp eller klicka browse to upload och välj katalogen som innehåller dig webbplats igen. Nu laddas filerna upp igen, och ändringar du gjort blir publicerade.

  • Om du inte ser den uppdaterade sidan, då du klickar på reload-knappen i webbläsaren

• Prova att titta på webbplatsen i mobilen.

  • Skriv in url till webbsidan i din mobil och titta på webbsidan där.

• I Site settings i Netlify går det att ändra namnet i url, som du fått för din webbplats. Men då det gäller det som du publicerar i kursens uppgifter ska du inte göra det, utan behåll den kryptiska koden. Det är endast du och kursens lärare som ska se det du publicerar i uppgifterna, så då ska du ha kvar den url, som du får vid publiceringen, så ingen annan kan gissa den. Men använder du Netlify för att publicera andra webbplatser, som du vill ska vara öppna för alla, kan du gärna ändra namnet till något enklare i url.

Ta bort en publicerad webbplats

• Gå till sidan Sites och klicka på den webbplats som du vill ta bort.
• Klicka på knappen Site configuration och scrolla ner till rubriken Danger Zone.
• Klicka på knappen Delete this site, kopiera in namnet till textfältet och klicka på knappen Delete.
• Publicering av webbplatsen är nu borta. Men om du använder GitHub så finns den kvar där, ifall du skulle ångra dig och vill publicera den igen. Annars finns den bara på din lokala dator nu, så om du rensar bort den därifrån också är den förlorad för gott.

Klar

Du har nu gått igenom en introduktion till verktygen, men måste sedan fortsätta att öva på dem på egen hand.

I laborationerna och egna små exempel behöver du inte använda Git, GitHub och Netlify, utan där räcker det med att köra lokalt på din dator i VSC och testa i Live Server i VSC. Men i uppgifterna ska du publicera dina resultat och då använder du Netlify. Git och github är frivilligt.