Välkommen till kursen WEBWEU01, webbutveckling 1

I kursen kommer vi arbeta med att skapa webbplatser från grunden, på en så vanlig webbserver som möjligt, för att förstå hur webben fungerar. Du kommer alltså inte arbeta i något färdigt publiceringssysten (CMS), utan skriva filer som du själv laddar upp på webbservern. Du kommer också få lära dig om internet och webbens historia och utveckling och hur de är organiserade, viktig juridik och en del annat.

Så här beskrivs kursen av Skolverket (centralt innehåll):

Undervisningen i kursen ska behandla följande centrala innehåll

• Webben som plattform, dess historia och samhällspåverkan.
• Teknisk orientering om webbens protokoll, adresser, säkerhet och samspelet mellan klient och server.
• Publikation av webbplatser med och utan webbpubliceringssystem.
• Processen för ett webbutvecklingsprojekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
• Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM). Teckenkodning, begrepp, standarder och handhavande.
• Bilder och media med alternativa format, optimering och tillgänglighet.
• Riktlinjer för god praxis inom webbutveckling.
• Interoperabilitet genom att följa standarder och testa på olika användaragenter.
• Applikationer som fungerar oberoende av val av användaragent, operativsystem eller hårdvaruplattform och hur tillgänglighet uppnås även för användare med funktionsnedsättning.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet. Säkerhet och sätt att identifiera hot och sårbarheter samt hur attacker kan motverkas genom effektiva åtgärder.
• Lagar och andra bestämmelser som styr digital information, till exempel personuppgiftslagen och lagen om elektronisk kommunikation.
• Terminologi inom området webbutveckling.

Miljön

Du kommer att arbeta mot en webbserver som är konfigurerad på det kanske vanligaste sättet, vad man brukar kalla en LEMP-server (Linux, NGINX, MySQL, PHP)

• Operativsystem: Ubuntu (Linux). Det absoluta flertalet webbservrar är linuxservrar, av dessa är Ubuntu överlägset vanligast.
• Webbserverprogram: NGINX. Samma sak här, NGINX är den vanligaste webbservern, även om Apache, som tidigare helt dominerade, är fortfarande tvåa.
• Databasmjukvara: MySQL (egentligen MariaDB). Även detta är den vanligaste lösningen. MariaDB är en modernare och bättre variant av MySQL.
• Serverskriptspråk: PHP. PHP är det ojämförligen mest använda serverskriptspråket, installerat på ungefär tio gånger fler servrar än närmaste konkurrenten, Microsofts ASP.net (2021).

Språk

Du kommer arbeta med flera olika kodspråk, framför allt HTML och CSS som är de språken som alla webbsidor är skrivna i, men också Javascript/Ecmascript som du ska kunna använda och redigera.

De viktigaste språken

• HTML
  • HyperText Markup Language. Märkspråket som allt webbinnehåll är skrivet i.
• CSS
  • Cascading StyleSheets. Stilmallar som styr utseendet på och utformningen av webbsidor.
• Javascript/Ecmascript (olika namn på i praktiken samma språk)
  • Skriptspråk för att skapa programfunktioner på webbsidor

Hjälpspråk

• Markdown, MD
  • Ett radikalt förenklat märkspråk, som kan omtolkas till HTML med script, men framför allt språket du ska använda för att skriva din dokumentation. Används mycket på GitHub och GitLab.
• PHP
  • PHP: Hypertext Preprocessor. Ett skriptspråk som körs på webbservern. PHP är en preprocessor som skapar HTML, CSS och JS från andra källor, det kan vara databaser, textfiler, webformulär eller något annat. Vi kommer inte fördjupa oss mycket i PHP, men eftersom det kan förenkla arbetet rejält är det naturligt att nosa på språket.

Vi kommer eventuellt få anledning att kika lite på en del andra hjälpspråk och tekniker också, som SASS eller LESS (CSS-preprocessorer), alternativa skriptspråk och annat. Genom åren har det skapats många hjälpmedel för att effektivisera komplexa arbetsuppgifter. Ibland framgångsrikt, ibland inte.

Den första uppgiften

1. Logga in på servern

Du ansluter till servern via kommunikationsprotokollet SFTP (FTP över SSH). På Windows, MacOS eller Chrome OS behöver du installera någon form av klientprogram (det finns en massor). För Windows är det antagligen enklast att använda WinSCP eller Filezilla. Dessa beter sig ungefär likadant, men WinSCP är mer modernt och har högre säkerhet (krypterade lösenord, t.ex.), Filezilla har dessutom börjat skicka med en massa irriterande tredjepartsprogram i sina installationsfiler. Utöver dessa finns vill jag också nämna Cyberduck, som vissa tycks föredra. Kanske för att det stöder väldigt många kommunikationsprotokoll, kanske för att det har en anka som symbol. Av dessa finns Cyberduck och Filezilla till MacOS också. WinSCP är bara för Windows. Till Chrome OS finns det ett par olika instick som fungerar.

Om du kör någon av de vanligare Linuxdistributionerna (som inte är Chrome OS) behöver du inte installera någonting, du kan ansluta SFTP-platser som nätverksenheter direkt i filhanteraren.

2. Ändra ditt lösenord

Om du klickar på "Administrera ditt konto" i menyraden kan du logga in till ett administrationsgränssnitt (Usermin) där du kan ändra ditt lösenord och andra uppgifter.

3. Skapa ditt första HTML-dokument

• Öppna ett program som kan skriva ren text (.txt-filer). I Windows kan du använda "Anteckningar". Om du redan är van vid någon mer avancerad kodeditor kan du öppna den. Men det spelar egentligen ingen roll just nu.
• Skapa ett dokument som heter "index.html"
  • Använd den här mallen (om du inte orkar kopiera kan du ladda ned den):

<!DOCTYPE html>
<html>
  <head>
    <title><!--Sidtitel här--></title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
  </head>
  <body>
    <h1><!--huvudrubrik här--></h1>
    <h2><!--underrubrik här--></h2>
    <p><!--Ett stycke text, kopiera gärna för fler stycken--></p>
  </body>
</html>

Ladda upp dokumentet i mappen som heter "www" på ditt konto på webbservern. Kolla så att det fungerar.

Dokumentera ditt arbete

Todo och changelog

För att dokumentera ditt arbete ska du upprätthålla två filer skrivna i språket Markdown, todo.md och changelog.md.

Todo.md och changelog.md ska placeras i rotmappen (rotkatalogen) för projektet, i praktiken innebär det att de ska ligga i översta nivån i din www-mapp.

todo.md

Todo.md är en helt enkelt en att-göra-lista. Du kan göra den som en lista med kryssrutor (som jag brukar föredra) eller bara som en vanlig punktlista där du stryker saker allt efersom de blir klara.

En punktlista i MD (Markdown) gör du helt enkelt genom att sätta ett bindestreck (-) eller en asterisk (*) plus ett mellanslag framför raden i listan. Genomstruken text i MD gör du genom att sätta tecknet tilde (~) före och efter texten som ska vara genomstruken (exempel på genomstruken text ).

En kryssruta gör du genom att skriva hakparenteser, med ett mellanslag mellan efter "punkten" i listan ([ ]). En markerad kryssruta skriver du ett "x" i: [x].

changelog.md

Changelog.md är projektets loggbok. Här antecknar du allt arbete du gör med sajten. Använd datum som rubrik, datumet ska vara skrivet enligt ISO-standard, det vill säga precis som vi brukar skriva datum i Sverige: år-månad-dag (åå-mm-dd eller åååå-mm-dd).

Varför?

Systemet med changelog och todo är, med variationer, mycket vanligt i alla typer av kodprojekt. Fördelar som kan nämnas är att det blir enkelt för människor att samarbeta om alla kan se vad som behöver göras och vad som är gjort. Att på ett enkelt sätt ha koll på detta med hjälp av enkla textfiler är naturligtvis en stor fördel även om du är ensam i projektet.

I kursen använder jag din changelog och todo för att kunna följa ditt arbete.

Det är enkelt att skriva dina egna filer från scratch, men om du vill har jag också förberett en mall för todo och en mall för changelog som du kan använda.

Vad är Markdown?

Markdown är ett mycket förenklat markupspråk. Idén är att det ska vara ett mycket lättskrivet språk som dessutom kan översättas till HTML. Samtidigt med språket skapades det första programmet för att producera HTML från Markdown.

Språket (och programmet) hittades på 2004 av John Gruber, mannen bakom bloggen Daring Fireball, och Aaron Swartz.

Idéen var att hitta på ett textformat som är så lätt som möjligt för människor att läsa, samtidigt som det enkelt skulle kunna omvandlas till HTML för publicering på webben. Formatet påminner alltså om hur människor tidigare markerat text i enkla textdokument där man inte kan ändra bokstävernas utseende, men mer standardiserat.

Var används Markdown?

Överallt! Men framförallt är en stor del av allt innehåll på GitHub och GitLab skrivet i MD. Eftersom framför allt GitHub, men på senare tid också GitLab, har blivit de främsta platserna för utveckling av mindre och medelstora kodprojekt har det blivit en de facto-standard att skriva dokumentation i MD.

Hur skrivs Markdown?

Markdown har en mycket enkel syntax. Enkelt kan det beskrivas som ett enkelt textdokument (kodat som utf-8) där rubriker och annat märks ut med ett eller flera tecken innan raden. En rubrik motsvarande HTML:s <h1>Rubrik</h1> skrivs helt enkelt: # Rubrik. Ett nummertecken först i raden helt enkelt. Syns tydligt, är begripligt för ett datorprogram och hindrar inte läsning av människor.

Det som markerar att det är ett markdown-dokument och inte ett .txt-dokument vilket som helst är att det ges filändelsen .md i stället för .txt. Ingen <!DOCTYPE> eller liknande behövs, det är bara att skriva.

Det finns ett flertal olika sajter med instruktioner för hur man skriver, jag tycker att den här är bra: Markdown-Cheatsheet.

Som du kan se, kan du ofta skriva på lite olika sätt utan att det blir fel. Det är också väldigt enkelt och du kan snabbt hävda att du behärskar ytterligare ett kodspråk 😉!