Lektioner

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.