WEBWEU01

Måndagen den 19/5 2025

Fredagen den 23/5 måste slutarbetet vara klart för dig som går i T22b! Se till att du har en ifylld changelog och kodkommentarer där det behövs.

Fredagen den 25/4 2025

Idag (fredag) är jag tyvärr inte med på lektionen, men jag vill att du läser http://webbem.se/internet/tillganglighet/ och tittar på det jag länkat i slutet av sidan. Fundera kring vad de olika principerna innebär för ditt arbete och hur förmågan att interagera med en webbsida kan variera.

Hur påverkas interaktionen med en webbsida av:

Färgblindhet ?
Uppmärksamhetsstörningar ?
Dyslexi ?
Nedsatt rörelseförmåga?

Kan du komma på andra förutsättningar som kan påverka hur en person interagerar med en webbsida?

T22b, fredagen den 28/3 2025

Hej på dig!

Nu borde alla vara klara med sina API-uppgifter. Jag kommer att ge feedback på resultatet, förhoppningsvis innan nästa vecka börjar. Jag är fortfarande hemma med sjukt barn (eller igen, jag var på skolan igår), och kan inte hjälpa idag.

Nästa stora grej är ju att alla ska göra var sitt större projekt, med planering, testning, och så vidare. Vi kommer att kolla lite på olika tekniker som kan vara till hjälp.

Idag vill jag att alla kollar lite på Php och andra serverscript. På vår server är det huvudsakligen php som gäller, asp.net funkar inte alls.

En sak som har förändrats sedan artikeln skrevs är att Ruby har gått om ASP.net som det näst mest populära serverskriptspråket. Php dominerar dock fortfarande.

Så kolla lite på hur php (med flera språk) funkar. Följ lite länkar och testa vad som går att göra. Varför inte testa att använda includes, eller att lägga till datum.

Tänk på att alla filer som skall behandlas av php måste ha filändelsen .php och att de bara funkar om de körs på en server med php installerat.

Hur borde det se ut på din sajt just nu? /Sammanfattning av vad vi gjort (vecka 8)

Startsida

På din sajt (webbem.se/elever/2024-25/dittanvändarnamn) ska det finnas en sida som talar om för besökaren var den är, en startsida, eller som det kallas på engelska, en "landing page".

Minimikrav på startsidan

Den ska öppnas när man klickar på ditt namn på http://webbem.se/elever/
Den ska vara byggd med korrekt HTML och CSS
Den ska innehålla en meny med länkar till dina andra uppgifter, gärna i form av en lista.
Den ska innehålla minst en bild

Detta behöver du kunna vid den här tiden i kursen

Du behöver kunna skriva ett HTML-dokument med rätt dokumentstruktur och i huvudsak korrekt syntax
Du behöver kunna skriva CSS-regler och tillämpa dessa i dina HTML-dokument, både som länkade CSS-dokument och inbäddade med <style>-taggar
Du behöver kunna ladda upp och tillgängliggöra material på webbem.se
Du behöver kunna göra material som anpassar sig till olika sorters skärmar
Du behöver känna till de stora dragen i internet och webbens historia
Du har dokumenterat ditt arbete i changelog.md

Vilka uppgifter har vi gjort hittills (vecka 8)?

Jag har sammanfattat alla uppgifter vi har gjort på http://webbem.se/uppgifter/

Extralektion torsdagen den 6/2

För dig som behöver kommer det torsdagen den 6 februari finnas möjlighet att jobba med det du behöver i sal M105, mellan klockan 11:30 och 13:00.

Välkommen!

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.

Språket Markdown

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 😉!