Webbling - Användarbidrag [sv]

Att skapa interaktivitet med Leaflet

2024-09-18T07:14:44Z

PGJ:

Vi får ju redan i grunden en del automatisk interaktivitet när vi använder oss av Leaflet. Användaren kan panorera och zooma runt i kartan. Vi ska nu titta på hur man kan lägga till mer saker som gör att användaren kan interagera med kartan.

== Popups ==
Popups är ett bra sätt att visa upp extra information som gäller för intressepunkter på kartan. Det finns bra stöd i Leaflet för detta och det är mycket enkelt att koppla popups till objekt som lagts till på kartan. Popup triggas igång och visas när användaren klickar på det objekt till vilket popup:en är kopplad.

<div class="well well-meadow">
Man kan bara ha en popup framme samtidigt. Om en popup redan är öppen och användaren klickar på en ny popup, så kommer den första popup:en att stängas ned. Om vi klickar en gång till på samma objekt ifrån vilket det öppnades en popup, så kommer den kopplade popup:en att stängas ned. Likaså försvinner popup:er även om vi klickar utanför det kopplade objektet, oavsett om en ny popup triggas igång eller ej. Självklart kan användaren även klicka på det lilla krysset i popup:en för att stänga denna.
</div>

=== Exempel ===
Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:
<codepen pen="pgedqJ" tab="js,result" height="650">
</codepen>

==== <code>bindPopup</code> ====
Vi behöver ha en instansvariabel som pekar på det kartobjekt som vi vill koppla vår popup till. I vårt exempel har vi sparat undan vårt objekt i <code>polygon</code>. I detta objekt finns en metod som heter <code>bindPopup</code> med vilken vi kan koppla till popup-funktionalitet.

I den enklaste varianten tar <code>bindPopup</code> en sträng som input. Strängen innehåller det som ska visas när användaren klickar. Strängens innehåll kommer att tolkas som HTML-kod. Vi kan alltså använda så gott som alla HTML-taggar här och på så vis bygga upp en relativt snygg popup. Vi skulle även kunna skicka med ett redan existerande HTML-element som då skulle visas i popup:en.

Vanligtvis utgår popup:ens position från den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

<syntaxhighlight lang="JavaScript">
polygon.bindPopup("Hej", <latitud>, <longitud>);
</syntaxhighlight>

Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.

== Händelser ==
Vi kan även koppla så att kod körs när olika händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Vi kopplar en händelsehanterare till vald Leaflet komponent och den triggas igång när en händelse inträffar. Det finns flera olika händelsetyper. Några av dessa är unika för vissa typer av kartobjekt, medan andra är universiella och gäller för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

==== Klickhändelser ====
Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.
<codepen pen="gPmoYE" tab="js,result" height="875">
</codepen>

Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.

Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.

<div class="well well-meadow">
Lägg märke till att om du klickar flera gånger och råkar klicka för "fort", kommer dina klick inte att tas som en klickhändelse. Istället ses det som ett dubbelklick. Då körs förstås inte vår händelse-hanterare.

Så som exemplet ser ut nu, tar Leaflet ett dubbelklick som en zoom-gest.
</div>

== Nästa aktivitet ==
I nästa aktivitet ska vi gå igenom ett litet fylligare Leaflet-exempel.

[[En exempelapplikation i Leaflet]]

Att lägga till extra data med Leaflet

2024-09-18T07:09:29Z

PGJ:

Vi ska nu titta på några olika metoder för att lägga till markörer och liknande i våra kartor. Dessa kan användas för att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många olika metoder som kan användas för detta.

== Att lägga till en markör ==
Som första exempel ska vi lägga till en markör i kartan. Denna markör kan användas för att markera var en intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt efter eller för att markera var något intressant finns. När man skrollar runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man sökte efter och markören kan då hjälpa en att hitta tillbaka.

=== Exempel ===
Vi utgår från vårt tidigare exempel där vi visade upp var användaren befinner sig på en karta. Vi utökar det så att det läggs till en markör på den punkt där webbläsaren rapporterar att användaren finns. Kom ihåg att det finns en viss felmarginal som gör att den kanske inte placeras på den exakta positionen.

<codepen pen="PZpOGa" tab="js,result" height="1400">
</codepen>

=== <code>marker</code> ===
Den intressantaste kodraden ligger en bit ner i vår <code>VisaPosition</code>-funktion. Sist i denna har vi en ny rad som ser ut så här (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):

<syntaxhighlight lang="JavaScript">
let marker = L.marker(koordinater).addTo(map);
</syntaxhighlight>

Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.

För att markören ska visas i kartan gör vi en <code>addTo</code> på slutet. Som inparameter tar den ett objekt som representerar den kartvy i vilken vi vill visa markören. Vi kan självklart ha olika kartvyer igång samtidigt.

== Att lägga till en cirkel ==
När vi jobbar med kartor vill vi ofta markera en hel region. Här kan det vara bra att kunna lägga till cirklar. Dessa är mycket användbara för att indikera saker som utsträckning, felmarginal eller liknande. Även dessa är lätta att skapa i Leaflet

=== Exempel ===
Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-värdet läsa ut felmarginalen. Vi skulle kunna använda denna information för att utöka föregående exempel med en cirkel som visar felmarginallen som gäller för mätningen. Det kan vi göra så här:

<codepen pen="jWBGjQ" tab="js,result" height="1500">
</codepen>

=== <code>circle</code> ===
Vi skapar cirkeln med metoden <code>circle</code>. Som inparameterar tar den först den koordinat som ska gälla som centrum för cirkeln. I vårt fall vill vi använda de koordinater som vi fick ut från webbläsarens positioneringsangivelse. Därefter föjer den radie som vi vill att cirkeln ska ha. Radien anges i meter. Vilket ju var samma enhet som <code>accuracy</code> rapporterades i. Vi kan alltså använda den rakt av.

==== Utritningsinställningar ====
Den sista parametern till <code>circle</code>-metoden anger inställningar för hur cirkeln ska ritas ut. Man kan sätta många olika saker här. Läs mer på [http://leafletjs.com/reference.html#path-options Path Options] om du vill se allt som går att göra. I vårt fall anger vi fyra saker, nämligen:
;<code>color</code>: Vilken färg ska cirkeln ha? Alla de färgangivelserna som är tillgängliga för CSS går att använda här. Se "[[Färg]]"-aktiviteten för mer information om CSS och färger. Defaultvärdet är <code>#03f</code>.
;<code>opacity</code>: Hur genomskinlig ska cirkelkanten vara? Anges som ett flyttal mellan <code>0</code>, helt genomskinlig, och <code>1</code>, helt ogenomskinlig. Det är alltså ett [[alfavärde]] och kan ses som en procentsats. Defaultvärdet är <code>0.5</code>.
;<code>fillColor</code>: Här anges den färg som cirkeln ska fyllas med, även här fungerar alla CSS-färgangivelser. Defaultvärdet är samma färg som cirkelramen. (Om man inte vill fylla cirkeln, kan man använda <code>fill: false</code>).
;<code>fillOpacity</code>:Hur genomskinlig ska fyllningen vara. Fungerar såsom <code>opacity</code> ovan. Defaultvärdet är <code>0.2</code>.

== Att lägga till en Polygon ==
En polygon är ju en månghörning. Med hjälp av polygoner kan vi markera regioner rätt så fritt. Vi kan ange så få eller så många hörnpunkter som vi vill. Den faktiska form som polygongen får styrs såväl av antalet hörnpunkter som av hörnpunkternas placering.
=== Exempel ===
Den här gången utgår vi från vårt tidigare exempel där vi visade upp Soltorgsgymnasiet i Borlänge. Nu ska vi rita en fyrhörning polygon runt skolan. Det kanske inte blir absolut rätt placering av hörnpunkterna, men det får duga som ett exempel.

<codepen pen="MKpOpW" tab="js,result" height="600">
</codepen>

=== <code>polygon</code> ===
Som vi ser i exemplet så ritar vi ut polygoner med hjälp av metoden <code>polygon</code>.
==== Hörnkoordinater ====
Den viktigaste parametern för denna metod är den första. Detta är en array som anger på vilka koordinater som polygonens hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Mellan varje angiven hörnpunkt kommer det att ritas en linje. Från den första till den sista hörnpunkten ritas automatiskt en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.

==== Utritningsparametrar ====
Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!

Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. I exemplet har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.

== Många fler möjligheter ==
Det finns långt många fler metoder i Leaflet än vi kan täcka här. Du kan läsa deras [http://leafletjs.com/reference.html API-referens] för att få mer information.

== Nästa aktivitet ==
Vi ska gå vidare med Leaflet och titta på hur man kan ge användaren tillfälle att interagera med kartan på olika vis.

[[Att skapa interaktivitet med Leaflet]]

Att lägga till extra data med Leaflet

2024-09-18T06:51:26Z

PGJ:

Vi ska nu titta på några olika metoder för att lägga till markörer och liknande i våra kartor. Dessa kan användas för att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många olika metoder som kan användas för detta.

== Att lägga till en markör ==
Som första exempel ska vi lägga till en markör i kartan. Denna markör kan användas för att markera var en intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt efter eller för att markera var något intressant finns. När man skrollar runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man sökte efter och markören kan då hjälpa en att hitta tillbaka.

=== Exempel ===
Vi utgår från vårt tidigare exempel där vi visade upp var användaren befinner sig på en karta. Vi utökar det så att det läggs till en markör på den punkt där webbläsaren rapporterar att användaren finns. Kom ihåg att det finns en viss felmarginal som gör att den kanske inte placeras på den exakta positionen.

<codepen pen="PZpOGa" tab="js,result" height="1400">
</codepen>

=== <code>marker</code> ===
Den intressantaste kodraden ligger en bit ner i vår <code>VisaPosition</code>-funktion. Sist i denna har vi en ny rad som ser ut så här (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):

<syntaxhighlight lang="JavaScript">
let marker = L.marker(koordinater).addTo(map);
</syntaxhighlight>

Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.

För att markören ska visas i kartan gör vi en <code>addTo</code> på slutet. Som inparameter tar den ett objekt som representerar den kartvy i vilken vi vill visa markören. Vi kan självklart ha olika kartvyer igång samtidigt.

== Att lägga till en cirkel ==
När vi jobbar med kartor vill vi ofta markera en hel region. Här kan det vara bra att kunna lägga till cirklar. Dessa är mycket användbara för att indikera saker som utsträckning, felmarginal eller liknande. Även dessa är lätta att skapa i Leaflet

=== Exempel ===
Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-värdet läsa ut felmarginalen. Vi skulle kunna använda denna information för att utöka föregående exempel med en cirkel som visar felmarginallen som gäller för mätningen. Det kan vi göra så här:

<codepen pen="jWBGjQ" tab="js,result" height="1500">
</codepen>

=== <code>circle</code> ===
Vi skapar cirkeln med metoden <code>circle</code>. Som inparameterar tar den först den koordinat som ska gälla som centrum för cirkeln. I vårt fall vill vi använda de koordinater som vi fick ut från webbläsarens positioneringsangivelse. Därefter föjer den radie som vi vill att cirkeln ska ha. Radien anges i meter. Vilket ju var samma enhet som <code>accuracy</code> rapporterades i. Vi kan alltså använda den rakt av.

==== Utritningsinställningar ====
Den sista parametern till <code>circle</code>-metoden anger inställningar för hur cirkeln ska ritas ut. Man kan sätta många olika saker här. Läs mer på [http://leafletjs.com/reference.html#path-options Path Options] om du vill se allt som går att göra. I vårt fall anger vi fyra saker, nämligen:
;<code>color</code>: Vilken färg ska cirkeln ha? Alla de färgangivelserna som är tillgängliga för CSS går att använda här. Se "[[Färg]]"-aktiviteten för mer information om CSS och färger. Defaultvärdet är <code>#03f</code>.
;<code>opacity</code>: Hur genomskinlig ska cirkelkanten vara? Anges som ett flyttal mellan <code>0</code>, helt genomskinlig, och <code>1</code>, helt ogenomskinlig. Det är alltså ett [[alfavärde]] och kan ses som en procentsats. Defaultvärdet är <code>0.5</code>.
;<code>fillColor</code>: Här anges den färg som cirkeln ska fyllas med, även här fungerar alla CSS-färgangivelser. Defaultvärdet är samma färg som cirkelramen. (Om man inte vill fylla cirkeln, kan man använda <code>fill: false</code>).
;<code>fillOpacity</code>:Hur genomskinlig ska fyllningen vara. Fungerar såsom <code>opacity</code> ovan. Defaultvärdet är <code>0.2</code>.

== Att lägga till en Polygon ==
En polygon är ju en månghörning. Med hjälp av polygoner kan vi markera regioner rätt så fritt. Vi kan ange så få eller så många hörnpunkter som vi vill. Den faktiska form som polygongen får styrs såväl av antalet hörnpunkter som av hörnpunkternas placering.
=== Exempel ===
Den här gången utgår vi från vårt tidigare exempel där vi visade upp Soltorgsgymnasiet i Borlänge. Nu ska vi rita en fyrhörning polygon runt skolan. Det kanske inte blir absolut rätt placering av hörnpunkterna, men det får duga som ett exempel.

<codepen pen="MKpOpW" tab="js,result" height="600">
</codepen>

=== <code>polygon</code> ===
Polygoner ritas med hjälp av metoden <code>polygon</code>.
==== Hörnkoordinater ====
Den viktigaste parametern för denna metod är den första. Detta är en array som anger på vilka koordinater som polygonens hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Mellan varje angiven hörnpunkt kommer det att ritas en linje. Mellan den första och den sista hörnpunkten ritas en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.

==== Utritningsparametrar ====
Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!

Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. Här har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.

== Många fler möjligheter ==
Det finns långt många fler metoder i Leaflet än vi kan täcka här. Du kan läsa deras [http://leafletjs.com/reference.html API-referens] för att få mer information.

== Nästa aktivitet ==
Vi ska gå vidare med Leaflet och titta på hur man kan ge användaren tillfälle att interagera med kartan på olika vis.

[[Att skapa interaktivitet med Leaflet]]

Att komma igång med Leaflet

2024-09-18T06:48:47Z

PGJ:

Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.

== Att lägga till Leaflet ==
För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.

<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
</syntaxhighlight>

Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>. Var man än placerar den, så måste JavaScript-delen laddas in efter CSS-delen. Så det är bäst att lägga den i slutet av HTML-koden.

<syntaxhighlight lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>

</syntaxhighlight>

Med dessa två rader på plats kan vi skapa ett exempel.

== Leaflet-exempel ==
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

<codepen pen="adJmEj" tab="js,result" height="600">
</codepen>

(Som vanligt, kom ihåg att även titta på "Result"-fliken.)

Låt oss gå igenom exempelet och se vad de olika delarna gör för något.

=== HTML ===
I HTML-koden började vi med att lägga till CDN-hämtningarna som förser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

=== CSS ===
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att <code>div</code>:en är helt tom och därmed får sin höjd satt till <code>0</code>.

=== JavaScript ===
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.

==== Initiering av Leaflet ====
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet.

<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.

==== Inställningar för datakälla ====
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

==== Kart-tiles ====
Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles mer eller mindre betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa kombineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

Om vi redan laddat in en kartbit så kommer den att lagras i webbläsarens cache, vilket gör att den kommer att återanvändas nästa gång den kartbiten är aktuell. Det går med andra ord mycket snabbare att visa de kartbitar som redan är hämtade.

==== Att ange datakälla ====
Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla vår kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

<div class="well well-warning">
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
</div>

==== Koppla data till vy ====
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet <code>addTo</code>. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde <code>map</code>-metoden. Det vill säga det objekt som innehåller information om vår kartvy.

== Vår första karta ==
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!

== Kombination av våra geografiska exempel ==
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:
<codepen pen="pgeWKx" tab="js,result" height="1300">
</codepen>

Det finns väl inte så mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att använda fasta koordinatvärden så visar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

== Nästa aktivitet ==
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.

[[Att lägga till extra data med Leaflet]]

Ännu en SPA med Leaflet

2024-08-12T08:59:59Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket av koden kommer att påminna om den som vi skrev för vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

Ännu en SPA med Leaflet

2024-08-12T08:59:23Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket kommer att påminna om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

HTML5-taggar

2024-08-12T08:57:18Z

PGJ:

Här är en lista över alla [[tagg]]ar/[[HTML-element]] som är tillgängliga i [[HTML5]]. Om du är van med "uråldrig" [[HTML]], dvs före HTML5, finns det ett antal [[tagg]]ar som nu har annorlunda definition än tidigare.

När du ska använda en [[tagg]] måste den sitta inom "<code><</code>" och "<code>></code>". Så <code>[[a]]</code>-[[tagg]]en skrivs "<code><[[a]]></code>". För att avsluta behöver du oftast en [[sluttagg]]. Denna skrivs enligt samma mall som starttaggen, fast med ett <code>/</code> före taggnamnet. Så sluttaggen för vår exempeltagg skulle bli <code></a></code>. Se [[TLDR_Taggar|taggar-diagrammet]] för mer ingående information.

<div class="well well-warning">
Observera att [[HTML]] är en levande [[standard]], som utvecklas kontinuerligt. Det gör att det kan komma till [[tagg]]ar, det kan försvinna [[tagg]]ar och deras betydelse kan förändras med tiden. Följande taggar är dock tillgängliga i dagens HTML5.
</div>

== A ==
=== <code>[[a]]</code> ===
Används för att definiera länkar.
=== <code>[[abbr]]</code> ===
Definierar en förkortning och eventuellt en förklaring.
=== <code> [[address]] </code> ===
Kontaktinformation relaterad till den sektion som innehåller taggen.
=== <code> [[area]] </code> ===
Används i <code>[[map]]</code>-element för att definiera vilka regioner som är klickbara. Kan även koppla länkar till regionerna.
=== <code> [[article]] </code> ===
Markerar innehåll på sidan som är ett eget, självständig stycke.
=== <code> [[aside]] </code> ===
Markerar innehåll som är marginellt kopplat till huvudinnehållet.
=== <code> [[audio]] </code> ===
Används för att inkludera ljudinnehåll i en webbsida.

== B ==
=== <code> [[b]] </code> ===
Text som på något vis skiljer sig ifrån övrig text, t.ex. produktnamn eller något som ska stå ut ifrån annan text.
=== <code> [[base]] </code> ===
Definerar vilken grund-[[URL]] som ska användas för relativa länkar.
=== <code> [[bdi]] </code> ===
Används för att indikera text som kan skrivas i omvänd ordning, t.ex. Arabiska.
=== <code> [[bdo]] </code> ===
Används för att indikera text som ska skrivas i annan ordning, t.ex. för att växla mellan latinska språk och Arabiska och vice versa.
=== <code> [[blockquote]] </code> ===
Ett längre, blockcitat.
=== <code> [[body]] </code> ===
I denna finns själva innehållet på sidan.
=== <code> [[br]] </code> ===
Infogar en radbrytning.
=== <code> [[button]] </code> ===
En knapp i ett formulär.

== C ==
=== <code> [[canvas]] </code> ===
Definierar upp en region som skriptspråk kan använda för att rita figurer.
=== <code> [[caption]] </code> ===
Används för att ge en figurtext till en tabell.
=== <code> [[cite]] </code> ===
Används för att lägga till källhänvisning till ett citat.
=== <code> [[code]] </code> ===
Ett block med programkod.
=== <code> [[col]] </code> ===
En tabellkolumn.
=== <code> [[colgroup]] </code> ===
Används för att grupper ett antal kolumner i en tabell.

== D ==
=== <code> [[data]] </code> ===
Kopplar data till innehållet, som sedan kan användas av skript eller liknande.
=== <code> [[datalist]] </code> ===
Definierar en lista med alternativ för en [[input|<input>]]-kontroll.
=== <code> [[dd]] </code> ===
En förklaring till en term.
=== <code> [[del]] </code> ===
Markerar att text tagits bort ifrån ett dokument, t.ex. för att indikera att det redigerats. Ofta visas detta genom överstruken text.
=== <code> [[details]] </code> ===
Visar antingen mer information om någonting eller anger var man kan hitta mer information.
=== <code> [[dfn]] </code> ===
Definierar en term.
=== <code> [[div]] </code> ===
Används för att gruppera samman innehåll. Har ingen semantisk betydelse.
=== <code> [[dl]] </code> ===
En lista med termer och dess definition.
=== <code> [[dt]] </code> ===
En term som ska definieras.

== E ==
=== <code> [[em]] </code> ===
Innehållet innanför taggen ska betonas med emfas.
=== <code> [[embed]] </code> ===
Används för att infoga något slags extern komponent i webbsidan, t.ex. en plug-in.

== F ==
=== <code> [[fieldset]] </code> ===
Grupperar samman ett antal formulärkontroller.
=== <code> [[figcaption]] </code> ===
En förklarande text till en illustration/figur, ofta en bildtext.
=== <code> [[figure]] </code> ===
En egen sektion som på något vis illustrerar något i huvudsektionen, ofta en bild eller illustration.
=== <code> [[footer]] </code> ===
Material som ska vara med i sidfoten.
=== <code> [[form]] </code> ===
Påbörjar ett formulär.

== H ==
=== <code> [[hx|h1]] </code> ===
Översta rubriknivån. Denna ska enbart användas en gång per sektionselement.

=== <code> [[hx|h2]] </code> ===
Andra rubriknivån.
=== <code> [[hx|h3]] </code> ===
Tredje rubriknivån.

=== <code> [[hx|h4]] </code> ===
Fjärde rubriknivån.
=== <code> [[hx|h5]] </code> ===
Femte rubriknivån.
=== <code> [[hx|h6]] </code> ===
Sjätte rubriknivån.
=== <code> [[head]] </code> ===
Metadata om sidan, t.ex. sidonamn.
=== <code> [[header]] </code> ===
Material som ska vara med i sidhuvudet.
=== <code> [[hr]] </code> ===
Indikerar en brytning mellan två paragrafer.
=== <code> [[html-tagg|html]] </code> ===
Roten till HTML-dokumentet. Alla HTML-taggar måste ligga inuti denna.

== I ==
=== <code> [[i]] </code> ===
Text som på något vis skiljer sig ifrån övrig text, t.ex. tankar eller utländska ord.
=== <code> [[iframe]] </code> ===
Används för att infoga en webbsida i en annan webbsida.
=== <code> [[img]] </code> ===
Används för att lägga till en bild i en webbsida.
=== <code> [[input]] </code> ===
Används för olika typer av användarinmatning i formulär.
=== <code> [[ins]] </code> ===
Markerar att text lagts till i ett dokument, t.ex. för att indikera att det redigerats.

== K ==
=== <code> [[kbd]] </code> ===
Exempel på indata som en användare kan skriva in.
=== <code> [[keygen]] </code> ===
Används för att skicka med en publik nyckel för ett certifikat.

== L ==
=== <code> [[label]] </code> ===
Anger en rubrik för formulärkontroller.
=== <code> [[legend]] </code> ===
Anger en rubrik för formulärkontroller.
=== <code> [[li]] </code> ===
En post i en lista.
=== <code> [[link]] </code> ===
Definerar förhållanden mellan detta dokument och externa resurser. Används bl.a. för att länka till CSS-filer.

== M ==
=== <code> [[main]] </code> ===
Markerar vad som är sidans huvudinnehåll.
=== <code> [[map]] </code> ===
Definierar klickbara regioner i en grafisk bild.
=== <code> [[mark]] </code> ===
Markerar text på något vis, t.ex. för att markera upp sökta ord i en text.
=== <code> [[math]] </code> ===
Indikerar en region av mathml.
=== <code> [[menu]] </code> ===
Visar en lista över kommandon som kan genomföras.
=== <code> [[menuitem]] </code> ===
Ett kommando i en [[menu|<menu>]]-lista.

=== <code> [[meta]] </code> ===
Olika typer av metadata som inte det finns specifika taggar för.
=== <code> [[meter]] </code> ===
En mätare som visar och kan sätta ett valt värde mellan ett minimun och maximum.

== N ==
=== <code> [[nav]] </code> ===
Markerar innehåll som används för navigation.
=== <code> [[noscript]] </code> ===
Innehållet visas enbart om webbläsaren inte kan köra JavaScript.

== O ==
=== <code> [[object]] </code> ===
Indikerar en extern resurs som hanteras av en plug-in.
=== <code> [[ol]] </code> ===
En ordnad lista.
=== <code> [[optgroup]] </code> ===
Grupperar [[option]]-element i ett [[select]]-element.
=== <code> [[option]] </code> ===
Valbara element i ett [[select]]-element.
=== <code> [[output]] </code> ===
Används för att markera var i formuläret resultatet ifrån något slags beräkning/körning ska hamna.

== P ==
=== <code> [[p]] </code> ===
Ett textstycke.
=== <code> [[param]] </code> ===
Definierar parametrar till [[object]]-taggen.
=== <code> [[pre]] </code> ===
Förformaterad text, som inte ska formateras om av webbläsaren.
=== <code> [[progress]] </code> ===
Indikerar på något vis hur mycket som är genomfört.

== Q ==
=== <code> [[q]] </code> ===
Ett kortare citat i löpande text.

== R ==
=== <code> [[rp]] </code> ===
Används för att definiera hur ett tecken ska visas om det inte finns i teckensnittet, t.ex. för asiatiska språk. Används inuti [[rt]]-taggar.
=== <code> [[rt]] </code> ===
Används för att definiera det korrekta uttalet på asiatiska tecken, t.ex. kanji.
=== <code> [[ruby]] </code> ===
Används för att definiera det korrekta uttalet på asiatiska tecken, t.ex. kanji. Används inuti [[rt]]-taggar.

== S ==
=== <code> [[s]] </code> ===
Överstruken text, indikerar att innehållet inte längre är relevant.
=== <code> [[samp]] </code> ===
Exempel på utdata ifrån ett datorprogram.
=== <code> [[script-tagg|script]] </code> ===
Används för att lägga in eller ladda in ett [[skript]].
=== <code> [[section]] </code> ===
Grupperar samman en del av dokumentet.
=== <code> [[select]] </code> ===
Påbörjar en meny i ett formulär.
=== <code> [[small]] </code> ===
Finstilt innehåll, t.ex. copyright-information.
=== <code> [[source]] </code> ===
Används inuti [[video]]- och [[audio]]-taggar för att ange vilket material som ska spelas upp.
=== <code> [[span]] </code> ===
Markerar ett löptext som på något vis hör samman. Har ingen semantisk betydelse.
=== <code> [[strong]] </code> ===
Innehållet i taggen har stark betydelse.
=== <code> [[style]] </code> ===
Används för att inkludera [[CSS]]-kod i HTML-dokument.
=== <code> [[sub]] </code> ===
Nedsänkt text.
=== <code> [[summary]] </code> ===
Visar en kort beskrivning om datan i en [[details]]-tagg.
=== <code> [[sup]] </code> ===
Upphöjd text.
=== <code> [[svg]] </code> ===
Används för att infoga vektorgrafik av typen svg.

== T ==
=== <code> [[table]] </code> ===
Används för att skapa en tabell.
=== <code> [[tbody]] </code> ===
Används för att definiera huvudinnehållet i en tabell.
=== <code> [[td]] </code> ===
Markerar en tabellcell.
=== <code> [[textarea]] </code> ===
Ett redigerbart textfält.
=== <code> [[tfoot]] </code> ===
Används för att definiera tabellfoten i en tabell.
=== <code> [[th]] </code> ===
En tabellcell som är en rubrik.
=== <code> [[thead]] </code> ===
Används för att definiera tabellhuvudet i en tabell.
=== <code> [[time]] </code> ===
En tidsangivelse, tid eller datum.
=== <code> [[title]] </code> ===
Titeln på webbsidan.
=== <code> [[tr]] </code> ===
Markerar en tabellrad.
=== <code> [[track]] </code> ===
Används av [[video]] och [[audio]] för att lägga till olika typer av extra data, t.ex. för textning av en film.

== U ==
=== <code> [[u]] </code> ===
Text som på något vis kommenterar annan text, t.ex. för att indikera att något är felstavat.
=== <code> [[ul]] </code> ===
En oordnad lista.

== V ==
=== <code> [[var]] </code> ===
Ett variabelnamn, t.ex. för matematik eller programmering.
=== <code> [[video]] </code> ===
Används för att inkludera videoinnehåll i en webbsida.

== W ==
=== <code> [[wbr]] </code> ===
Markerar en plats i en text där det är ett bra tillfälle att göra en radbrytning om en sådan behövs.

Huvudsida

2024-08-09T16:31:04Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="card bg-light p-3">
<div class="card-title>
==Innehåll ==
</div>
<div class="card-text mb-0">
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>
</div>
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Huvudsida

2024-08-09T16:24:47Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="card well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

En webbsidas anatomi

2024-08-06T14:34:42Z

PGJ:

Nu har vi gått igenom grundkoncepten bakom [[HTML]]. Men innan vi kan skapa vår första [[HTML]]-dokument, måste vi lära oss ett antal grundtaggar som ingår i alla [[HTML]]-dokument.

== Ett första webbdokument ==
Exemplet nedan är grunden för en minimal webbsida. Vi kommer att gå igenom vad varje kodrad i exemplet betyder. Var lugn, det är inte så krångligt som det kan se ut vid första anblicken...
<codepen pen="OVQPRz" height="300" tab="html,result">
</codepen>

Kan en sida bli tråkigare? Förhoppningsvis inte!

Nu tar vi och går igenom koden och undersöker vad de olika taggarna gör.

== [[doctype|<!doctype html>]] ==
Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig från [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

<syntaxhighlight lang="html5">
<!DOCTYPE html>
</syntaxhighlight>

Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält i HTML5.)

<div class="well well-meadow">
Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som en förfader till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
</div>

<div class="well well-danger">
Du bör inte utelämna <code>doctype</code>, för då kommer inte alla webbläsare att fatta att ditt dokument är ett [[HTML5]]-dokument. Istället finns chansen att webbläsaren kommer att försöka tolka det enligt någon gammal standard eller gå in i så kallad ”[[quirks mode]]” – vilket antagligen kommer att göra att din sida visas på något konstigt sätt och den kanske inte alls får den funktionalitet som du förväntade dig.
</div>

== <code><[[html-tagg|html]]></code> ==
Den första, riktiga [[tagg]]en vi måste ha med är <code><[[html-tagg|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>. Sluttaggen <code></[[html-tagg|html]]></code> ska ska vara den sista [[sluttagg]]en i dokumentet, eftersom den "talar om" att det är slut på [[HTML]]-koden.
<div class="well well-danger">
Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

Det finns några fler taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.
</div>

<div class="well well-meadow">
=== <code><[[HTML]]></code> är roten till hela sidan ===
När webbläsaren ska tolka ditt webbsida, kommer den att bygga upp en datatyp som kallas för ett träd. Detta träd representerar ditt webbdokuments struktur. De olika [[element]]en kommer att bli grenar på trädet. Roten på trädet är <code>[[HTML-tagg|HTML]]</code>-elementet, utifrån detta sprids underliggande [[element]] som grenar. Därför kallas ibland <code>[[html]]</code>-elementet även för rot-elementet.

Vi återkommer till träd-konceptet när vi tittar närmare på [[DOM]] – eller ”[[Document Object Model]]”.
</div>

== <code><[[head]]></code> ==
Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.

Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas.

Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna som kan förekomma i <code>head</code>.
<div class="well well-danger">
Det får bara finnas ett [[head]]-element i varje dokument.
</div>

== <code><[[title]]></code> ==
<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”. Vilket alltså är sidans namn/titel. Titeln på sidan kommer att visas antingen som namnet på ett webbläsarfönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till sidan. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

Det är alltså viktigt att välja sidnamn på ett bra sätt.

<div class="well well-meadow">
=== Att välja sidtitel ===
När man ska välja ett sidnamn bör man försöka få med de absolut viktigaste orden redan i början av namnet. Det finns flera anledningar till detta, bland annat:

* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.

* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Om titeln är för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.

Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.

I många fall kan det även vara dumt att skriva saker som ens firmanamn som första delen i titeln. Återigen kan det bli massa flikar/bokmärken där bara ”Murres webbshop” eller liknande syns. Försök därför att inleda titeln med ett eller två ord som verkligen beskriver sidans innehåll. Det är iofs inget fel att ha sitt firmanamn som sidtitel, men se i så fall till att det är den ”första” sidan på din sajt som har den titeln och att du har specialiserade namn på undersidorna.

Ovanstående problem var tidigare mycket vanligt förekommande på tidningarnas webbsidor. Men det har alltmer förändrats. Nu för tiden är t.ex. Aftonbladet förstasida benämnd ”Aftonbladet: Sveriges nyhetskälla och mötesplats”, medan de olika undersidornas titlar är uppbyggda efter mallen ”Nyhetsnamn | Kategori | Aftonbladet”. Det vill säga, man bygger upp titeln genom att sätta det mest specifika först och därefter blir titeln allt mer generell. Detta är ett mycket bra sätt att namnge sina sidor på.

Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.

Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för redan i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!
</div>

== <code><[[meta]]></code> ==
<code>[[Meta]]</code>-element används inuti <code>[[head]]</code>-elementet. Dessa är till för att beskriva dokumentets innehåll. Det finns en mängd olika saker som kan anges i <code>[[meta]]</code>-elementen, vi ska dock enbart titta på ett just nu.

Man bör alltid ange vilken [[teckenkodning]] som används i ett dokument. Om man inte gör det kan webbläsaren få problem med att tolka innehållet i dokumentet på ett korrekt vis. [[Teckenkodning]] är ett komplext område och det förtjänar sin egen sektion. För tillfället väljer vi att ange att vårt dokument är kodat med [[UTF-8]]. Detta är den idag vanligaste [[teckenkodning]]sstandarden och det används i de flesta webbverktygen (skulle t.ex. dina svenska ”åäö” bli att se konstiga ut, beror det säkerligen på att någonting i utvecklingskedjan använder sig av ”fel” [[teckenkodning]]).

För att ange [[UTF-8]] i vårt webbdokument, skriver vi:

<syntaxhighlight lang="html5">
<meta charset=”utf-8”>
</syntaxhighlight>

Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.

<div class="well well-warning">
<code>[[Meta]]</code>-elementen brukar man ''inte'' stänga med en avslutande sluttagg. En del använder sig av [[självstängande-tagg]]ar i detta fall. Men det är varken nödvändigt eller rekommenderat för HTML5.
</div>

== <code><[[body]]></code> ==
Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-elementets innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.

<div class="well well-danger">
Det får enbart förekomma ett <code>[[body]]</code>-element i varje dokument. Om du vill dela upp dokumentet i underdokument, får du antingen göra olika webbsidor eller använda dig av någon av de olika [[tagg]]ar som finns för att sektionera upp innehållet på en sida.
</div>

== <code><[[hx|h1]]></code> ==
Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx|h1]]></code>, <code><[[hx|h2]]></code>, <code><[[hx|h3]]></code>, <code><[[hx|h4]]></code>, <code><[[hx|h5]]></code> och <code><[[hx|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx|h2]]></code> utan att ha en <code><[[hx|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx|h2]]></code> direkt till <code><[[hx|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

<code>[[hx|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.

<div class="well well-danger">
Det är väldigt viktigt att komma ihåg att man inte ska använda sig av <code>[[hx]]</code>-elementen (eller något annat [[element]]) enbart för att ge ett specifik utseende till något. [[Tagg]]arna är till för strukturen och inte för utseendet. Om du vill ha stor text ska du inte använda en <code>[[hx]]</code>-tagg, utan istället använder du dig av t.ex. <code><[[span]]></code> och skapar en [[CSS]]-regel som anger att innehållet i <code>[[span]]</code>-elementet ska ha större text. Om du ska jobba inom webbranschen bör du veta att det anses som en dödssynd att använda [[tagg]]ar för utseendets skull!
</div>

== Sammanfattning ==
[[Fil:tldr1.png]]

== Övningar ==
[[En webbsidas anatomi övningar]]

== Nästa aktivitet ==
[[Våra första webbsidor]]

[[Category:Webbutveckling]]

En webbsidas anatomi

2024-08-06T14:28:21Z

PGJ:

Nu har vi gått igenom grundkoncepten bakom [[HTML]]. Men innan vi kan skapa vår första [[HTML]]-dokument, måste vi lära oss ett antal grundtaggar som ingår i alla [[HTML]]-dokument.

== Ett första webbdokument ==
Exemplet nedan är grunden för en minimal webbsida. Vi kommer att gå igenom vad varje kodrad i exemplet betyder. Var lugn, det är inte så krångligt som det kan se ut vid första anblicken...
<codepen pen="OVQPRz" height="300" tab="html,result">
</codepen>

Kan en sida bli tråkigare? Förhoppningsvis inte!

Nu tar vi och går igenom koden och undersöker vad de olika taggarna gör.

== [[doctype|<!doctype html>]] ==
Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

<syntaxhighlight lang="html5">
<!DOCTYPE html>
</syntaxhighlight>

Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält inför HTML5.)

<div class="well well-meadow">
Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som rötterna till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
</div>

<div class="well well-danger">
Du bör inte utelämna <code>doctype</code>, för då kommer inte alla webbläsare att fatta att ditt dokument är ett [[HTML5]]-dokument. Istället finns chansen att webbläsaren kommer att försöka tolka det enligt någon gammal standard eller gå in i så kallad ”[[quirks mode]]” – vilket antagligen kommer att göra att din sida visas på något konstigt sätt och den kanske inte alls får den funktionalitet som du förväntade dig.
</div>

== <code><[[html-tagg|html]]></code> ==
Den första, riktiga [[tagg]]en vi måste lära oss är <code><[[html-tagg|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>, och dess motsvarande [[sluttagg]] ska ska sitta som den sista [[sluttagg]]en i dokumentet.
<div class="well well-danger">
Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

Det finns några fler taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.
</div>

<div class="well well-meadow">
=== <code><[[HTML]]></code> är roten till hela sidan ===
När webbläsaren ska tolka ditt webbsida, kommer den att bygga upp en datatyp som kallas för ett träd. Detta träd representerar ditt webbdokuments struktur. De olika [[element]]en kommer att bli grenar på trädet. Roten på trädet är <code>[[HTML-tagg|HTML]]</code>-elementet, utifrån detta sprids underliggande [[element]] som grenar. Därför kallas ibland <code>[[html]]</code>-elementet även för rot-elementet.

Vi återkommer till träd-konceptet när vi tittar närmare på [[DOM]] – eller ”[[Document Object Model]]”.
</div>

== <code><[[head]]></code> ==
Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.

Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas.

Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna som kan förekomma i <code>head</code>.
<div class="well well-danger">
Det får bara finnas ett [[head]]-element i varje dokument.
</div>

== <code><[[title]]></code> ==
<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”. Vilket alltså är sidans namn/titel. Titeln på sidan kommer att visas antingen som namnet på ett webbläsarfönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till sidan. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

Det är alltså viktigt att välja sidnamn på ett bra sätt.

<div class="well well-meadow">
=== Att välja sidtitel ===
När man ska välja ett sidnamn bör man försöka få med de absolut viktigaste orden redan i början av namnet. Det finns flera anledningar till detta, bland annat:

* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.

* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Om titeln är för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.

Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.

I många fall kan det även vara dumt att skriva saker som ens firmanamn som första delen i titeln. Återigen kan det bli massa flikar/bokmärken där bara ”Murres webbshop” eller liknande syns. Försök därför att inleda titeln med ett eller två ord som verkligen beskriver sidans innehåll. Det är iofs inget fel att ha sitt firmanamn som sidtitel, men se i så fall till att det är den ”första” sidan på din sajt som har den titeln och att du har specialiserade namn på undersidorna.

Ovanstående problem var tidigare mycket vanligt förekommande på tidningarnas webbsidor. Men det har alltmer förändrats. Nu för tiden är t.ex. Aftonbladet förstasida benämnd ”Aftonbladet: Sveriges nyhetskälla och mötesplats”, medan de olika undersidornas titlar är uppbyggda efter mallen ”Nyhetsnamn | Kategori | Aftonbladet”. Det vill säga, man bygger upp titeln genom att sätta det mest specifika först och därefter blir titeln allt mer generell. Detta är ett mycket bra sätt att namnge sina sidor på.

Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.

Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för redan i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!
</div>

== <code><[[meta]]></code> ==
<code>[[Meta]]</code>-element används inuti <code>[[head]]</code>-elementet. Dessa är till för att beskriva dokumentets innehåll. Det finns en mängd olika saker som kan anges i <code>[[meta]]</code>-elementen, vi ska dock enbart titta på ett just nu.

Man bör alltid ange vilken [[teckenkodning]] som används i ett dokument. Om man inte gör det kan webbläsaren få problem med att tolka innehållet i dokumentet på ett korrekt vis. [[Teckenkodning]] är ett komplext område och det förtjänar sin egen sektion. För tillfället väljer vi att ange att vårt dokument är kodat med [[UTF-8]]. Detta är den idag vanligaste [[teckenkodning]]sstandarden och det används i de flesta webbverktygen (skulle t.ex. dina svenska ”åäö” bli att se konstiga ut, beror det säkerligen på att någonting i utvecklingskedjan använder sig av ”fel” [[teckenkodning]]).

För att ange [[UTF-8]] i vårt webbdokument, skriver vi:

<syntaxhighlight lang="html5">
<meta charset=”utf-8”>
</syntaxhighlight>

Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.

<div class="well well-warning">
<code>[[Meta]]</code>-elementen brukar man ''inte'' stänga med en avslutande sluttagg. En del använder sig av [[självstängande-tagg]]ar i detta fall. Men det är varken nödvändigt eller rekommenderat för HTML5.
</div>

== <code><[[body]]></code> ==
Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-elementets innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.

<div class="well well-danger">
Det får enbart förekomma ett <code>[[body]]</code>-element i varje dokument. Om du vill dela upp dokumentet i underdokument, får du antingen göra olika webbsidor eller använda dig av någon av de olika [[tagg]]ar som finns för att sektionera upp innehållet på en sida.
</div>

== <code><[[hx|h1]]></code> ==
Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx|h1]]></code>, <code><[[hx|h2]]></code>, <code><[[hx|h3]]></code>, <code><[[hx|h4]]></code>, <code><[[hx|h5]]></code> och <code><[[hx|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx|h2]]></code> utan att ha en <code><[[hx|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx|h2]]></code> direkt till <code><[[hx|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

<code>[[hx|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.

<div class="well well-danger">
Det är väldigt viktigt att komma ihåg att man inte ska använda sig av <code>[[hx]]</code>-elementen (eller något annat [[element]]) enbart för att ge ett specifik utseende till något. [[Tagg]]arna är till för strukturen och inte för utseendet. Om du vill ha stor text ska du inte använda en <code>[[hx]]</code>-tagg, utan istället använder du dig av t.ex. <code><[[span]]></code> och skapar en [[CSS]]-regel som anger att innehållet i <code>[[span]]</code>-elementet ska ha större text. Om du ska jobba inom webbranschen bör du veta att det anses som en dödssynd att använda [[tagg]]ar för utseendets skull!
</div>

== Sammanfattning ==
[[Fil:tldr1.png]]

== Övningar ==
[[En webbsidas anatomi övningar]]

== Nästa aktivitet ==
[[Våra första webbsidor]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:27:13Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. Webbläsaren kan alltså förstå och hantera att man nästlar samma typ av element inuti varandra. Den kommer även att kunna hantera hur de olika start- och sluttaggarna hänger samman.

När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed svår att jobba med.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg för många olika ändamål.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan följa strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt om det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att sätta [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på "rätt" plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att den typ av fel som en webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:25:23Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. Webbläsaren kan alltså förstå och hantera att man nästlar samma typ av element inuti varandra. Den kommer även att kunna hantera hur de olika start- och sluttaggarna hänger samman.

När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed svår att jobba med.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg för många olika ändamål.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan följa strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt om det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att sätta [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på "rätt" plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:18:04Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg till många olika saker.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt omkring det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:17:08Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den att fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg till många olika saker.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt omkring det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Tagg-grunder

2024-08-06T14:10:35Z

PGJ:

Som vi konstaterade tidigare så bygger [[HTML]] på [[tagg]]ar och [[element]]. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda.

I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar, man har en [[starttagg]] och en [[sluttagg]]. Innehållet som finns mellan [[tagg]]-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av [[tagg]]arna, att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll.

== Taggarnas uppbyggnad ==
Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code><</code>” och ”<code>></code>”. Så en [[tagg]] kan se ut så här ”<code><[[hx|h1]]></code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code><</code>”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”<code>></code>”-tecken.

HTML:s hantering av ”<code><</code>”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<code><</code>” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod. Vi återkommer till denna typ av specialkoder.

== HTML5:s tagguppsättning ==
Man kan inte uppfinna nya [[tagg]]ar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem.

I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella [[tagg]]ar är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.

== Starttaggar ==
Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <code><''taggnamn''></code>, där <code>''taggnamn''</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad man menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är bäst att skriva taggnamn med små bokstäver (gemena).

<div class="well">
För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett specifikt syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på [[HTML5-taggar|listan över taggar]].
</div>

== Sluttaggar ==
För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter det samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”<code>/</code>”-tecken före taggnamnet. Den [[tagg]] som vi hade som exempel tidigare; ”<code><[[hx|h1]]></code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code></h1></code>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "<code>/</code>"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).

== Utelämna sluttaggar ==
I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.

Dock finns det ett fåtal [[tagg]]ar till vilka man ''aldrig'' använder en [[sluttagg]]. Ett exempel på det är <code><img></code> som används för att lägga in bilder. Vi kommer att se några till exempel på denna typ av taggar längre fram.

== Hur skriver man ett "<"-tecken? ==
Som vi konstaterat så indikerar <code><</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika [[teckenkod]]er, men för de flesta tecken behöver man inte använda sig av en kod.

== Sammanfattning av taggar ==
[[Fil:tldr2.png|center|En taggs uppbyggnad]]

== Övningar ==
[[Tagg-grunder övningar]]

== Nästa sektion ==
[[Element-grunder]]

[[Category:Webbutveckling]]

Tagg-grunder

2024-08-06T14:08:49Z

PGJ:

Som vi konstaterade tidigare så bygger [[HTML]] på [[tagg]]ar och [[element]]. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda.

I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar, man har en [[starttagg]] och en [[sluttagg]]. Innehållet som finns mellan [[tagg]]-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av [[tagg]]arna, att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll.

== Taggarnas uppbyggnad ==
Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code><</code>” och ”<code>></code>”. Så en [[tagg]] kan se ut så här ”<code><[[hx|h1]]></code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code><</code>”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”<code>></code>”-tecken.

HTML:s hantering av ”<code><</code>”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<code><</code>” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod. Vi återkommer till denna typ av specialkoder.

== HTML5:s tagguppsättning ==
Man kan inte uppfinna nya [[tagg]]ar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem.

I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella [[tagg]]ar är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.

== Starttaggar ==
Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <code><''taggnamn''></code>, där <code>''taggnamn''</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad man menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är bäst att skriva taggnamn med små bokstäver (gemena).

<div class="well well-warning">
För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett specifikt syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på [[html5-taggar|listan över taggar]].
</div>

== Sluttaggar ==
För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter det samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”<code>/</code>”-tecken före taggnamnet. Den [[tagg]] som vi hade som exempel tidigare; ”<code><[[hx|h1]]></code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code></h1></code>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "<code>/</code>"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).

== Utelämna sluttaggar ==
I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.

Dock finns det ett fåtal [[tagg]]ar till vilka man ''aldrig'' använder en [[sluttagg]]. Ett exempel på det är <code><img></code> som används för att lägga in bilder. Vi kommer att se några till exempel på denna typ av taggar längre fram.

== Hur skriver man ett "<"-tecken? ==
Som vi konstaterat så indikerar <code><</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika [[teckenkod]]er, men för de flesta tecken behöver man inte använda sig av en kod.

== Sammanfattning av taggar ==
[[Fil:tldr2.png|center|En taggs uppbyggnad]]

== Övningar ==
[[Tagg-grunder övningar]]

== Nästa sektion ==
[[Element-grunder]]

[[Category:Webbutveckling]]

HTML-grunder

2024-08-06T13:58:59Z

PGJ:

[[HTML]] är den grund på vilken all [[webbutveckling]] vilar. Alla andra [[webbteknik]]er går det att klara sig utan, men man kan inte bygga upp en webbsida utan [[HTML]].

Det går visserligen att skapa webbsidor utan att lära sig [[HTML]]. Det kan man göra genom att använda sig av så kallade [[WYSIWYG]]-verktyg. I dessa skapar man sidorna visuellt, snarare än genom att skriva koder – exempel på sådana verktyg är [http://www.adobe.com/se/products/dreamweaver.html Adobe Dreamweaver] och [http://www.aptana.com/ Aptana] (den senare är helt gratis). Även om du kan skapa riktigt avancerade sidor i dylika verktyg, kommer du inte att komma långt med [[webbutveckling]] om du inte lär dig grunderna inom [[HTML]]. Detta gäller inte minst om du ska skapa [[webbplats|webbplatser]] med dynamiskt innehåll. Turligt nog är inte [[HTML]] så jättesvårt att lära sig.
== Vad betyder HTML? ==
[[HTML]] är en förkortning av "HyperText Markup Language". Vi jobbar oss igenom termerna baklänges för att förstå vad de handlar om.

=== Language ===
”Language” gör att vi kan förstå att detta är ett slags språk. I grund och botten består HTML-språket av engelska ord, eller förkortningen av engelska ord. Liksom för det mesta när man jobbar med datorer har de olika orden en väldigt specifik mening och när vi lär oss [[HTML]] så lär vi oss hur webbklienter, oftast webbläsare, kommer att tolka dessa ord. Det är vi som måste anpassa oss till att använda språket på ett sätt som webbläsaren kan förstå. Vi kan inte använda vilka uttryck som helst, utan vi måste använda oss av de fåtal ord som webbläsaren förstår och vi måste använda dem på ett vis som klienten klarar av att begripa. Man talar ofta om [[syntax]] och [[semantik]] i dessa sammanhang, vi återkommer till vad dessa begrepp betyder lite senare.

=== Markup ===
Vad betyder då resten av förkortningen? ”Markup” kommer från att vi markerar information i vårt dokument med hjälp av olika [[tagg]]ar. Dessa är ungefär samma sak som etiketter och de markerar vad innehållet innanför dem har för funktionalitet. På så vis beskriver vi strukturen i ett dokument, där vi noggrant talar om vad varje bit av dokumentet har för funktion. Markeringarna är instruktioner till de [[webbklient]]er som ska tolka och visa upp sidan. För att åstadkomma dessa markeringar använder vi oss av [[HTML]]-[[tagg]]ar.

[[Tagg]]ar är alltså små, korta ”etiketter” som anger hur efterföljande data ska tolkas. De flesta taggar består av ett taggpar, en [[starttagg]] och en [[sluttagg]]. Allt som befinner sig innanför dessa taggpar bildar ett [[element]]. Sammantaget är det dessa [[element]] som bygger upp en komplett webbsida. När vi nu börjar att lära oss [[HTML]], är det just de olika [[tagg]]arna vi kommer att lära oss. Vi kommer att gå in på vad de heter, vad de gör och hur de ska användas.

<div class="well">
[[HTML5-taggar|Här]] hittar du en lista över de taggar som är tillgängliga i [[HTML5]].
</div>

=== HyperText ===
Sen har vi då det sista, mer kryptiska ordet i förkortningen – nämligen, [[hypertext]]. Detta är en teknik som gör att man kan länka samman olika typer av information. Även om ”text” verkar ange att det enbart är text som kan länkas, så stämmer det inte längre. I stort sett kan vad som helst vara en länk som leder vidare till annan information. Det handlar alltså om webblänkar, såna som används i alla webbsidor. Informationen man länkar till kan i princip vara vad som helst, kanske en annan webbsida eller någon annan typ av media som ska visas upp.

I [[HTML]]s grundkoncept ingår alltså tanken att man ska kunna länka samman olika typer av information. Länkarna kan ses som trådar som leder kors och tvärs mellan olika typer av information. Trådar som i sin tur bildar ett nät – vilket är det som gett namnet åt webben (”web” betyder ju nät eller spindelnät på engelska). Idén med hyperlänkat material är långt ifrån ny och du kan läsa mer om historiken i ett [[Webbhistorik|annat avsnitt]] .

== Vad används [[HTML]] till? ==
[[HTML]] är alltså en teknik som används för att skapa dokument, ge dem en struktur samt att det ger möjligheten att länka dokumentets innehåll så att det leder till annat innehåll. Inom datavärlden brukar vi kalla detta för ett dokumentformat eller ett dataformat. [[HTML]] är relativt strikt, man kan inte skapa nya [[tagg]]ar eller använda taggar hipp som happ, utan man måste följa den angivna mallen – eller [[standard]]en.

Den version av [[HTML]] som vi kommer att lära oss här på Webbling är [[HTML5]]. Vilket är, i skrivandes stund, den senaste [[HTML]]-versionen.

== Övningar ==
[[HTML-grunder övningar]]

== Nästa aktivtet ==
[[Tagg-grunder]]

[[Category:Webbutveckling]]

Introduktion till webbteknik

2024-08-06T13:35:13Z

PGJ:

Om du lyckats ta dig till den här sidan, vet du nog ganska bra hur man använder en webbläsare för att navigera på webben. Men du kanske inte känner till de tekniker som används för att skicka, tolka och visa en webbsida. Det händer en hel del ”bakom kulisserna”, från det du begär att du vill hämta en specifik sida, tills att den visas upp i din webbläsare.
== Webbutveckling ==
Webbutveckling är termen som man använder för arbetet kring att skapa webbsidor, webbplatser och webbapplikationer. Allt som har med webbens funktionalitet att göra kallas för webbteknik. Dessa begrepp kan dock innefatta en hel del olika saker, eftersom det är så breda fält. I webbutveckling kan det ingå allt möjligt; design av sidans utseende (kanske i Photoshop eller som en skiss på papper), framtagandet av prototyper, kodningen av själva sidan, testning av sidan, optimering av sidan, publicering av sidan och mycket, mycket mer. Webbteknik handlar mer om de rent tekniska aspekterna och inte så mycket om design och utseende.

== Webbtekniker ==
Vi kommer att börja med att titta på en webbsidas anatomi. Hur är den uppbyggd? Vilka tekniker, protokoll och standarder är det som samarbetar för att visa en sida? Vad betyder alla koder som syns om man tittar på källkoden till en webbsida?

Det finns några tekniker som är absolut nödvändiga för att skapa sidor. En del av dessa tekniker är nyare än andra. När webben skapades 1989, var den främst tänkt att användas till att distribuera vetenskapliga rapporter. Till att börja med kunde man inte ens lägga in grafik i en webbsida! Idag har vi dock webbsidor som kan innehålla det mest spektakulära multimediala innehållet.

== Webbsidans grundstenar ==
En modern webbsida byggs upp med hjälp av flertalet olika webbtekniker. I grunden handlar det om följande komponenter:

=== [[HTML]] ===
[[HTML]] beskriver sidans struktur och informationens logiska uppdelning. Även om en webbsida kan vara fylld av allt möjligt multimedialt innehåll, så är HTML-kod helt och hållet ren text. Detta gäller även för CSS och JavaScript.

=== [[CSS]] ===
[[CSS]] används för att skapa utseende och layout för en webbsida. [[CSS]] kan även användas för att skapa diverse effekter, animationer och viss interaktivitet.

=== [[JavaScript]] ===
[[JavaScript]] används för att skapa interaktivitet på sidan och för att programmera sådant som inte ovanstående grundtekniker klarar av. Detta är grunden för de flesta webbapplikationer, såsom t.ex. Facebook, Gmail, osv.

<div class="well-danger">
(Obs: programmeringsspråken [[JavaScript]] och [[Java]] har inget med varandra att göra, det är två helt olika språk!)
</div>

=== Andra tekniker ===
Förutom de ovannämnda teknikerna, finns det olika typer av grafik-, ljud- och video-format samt allt möjligt annat som kan ingå i en modern webbsida.

== Nästa aktivtet ==
Vi kommer gå in på vardera teknik i mer detalj följande avsnitt, till att börja med ska vi koncentrera oss på [[HTML]].

[[HTML-grunder]]

[[Category:Webbutveckling]]

Webbutveckling

2024-08-06T13:28:11Z

PGJ:

Webben har kommit att bli den naturliga plattformen för så gott som allt som publiceras idag. Användningen av webben som informationskälla har vuxit lavinartat, samtidigt som webben även har blivit en stark plattform för att köra alla möjliga typer av applikationer.

Webbutveckling är egentligen ett ganska brett område som täcker in många olika tekniker. Man brukar dock ofta dela in webbutveckling i två underområden:
==== Klientsidan ====
En klient är något hämtar en webbsida från en server. Oftast är klienten en webbläsare. Dock kan det även vara andra saker, t.ex. en sökmotor som läser in materialet på sidan.

Om det är en webbläsare som hämtar och visar sidan, så har finns troligen en _användare_ som vill titta på sidan. Oftast så anpassar vi våra sidor så att användaren får en så bra upplevelse som möjligt.

Utveckling för klientsidan, ofta kallat "front-end" eller "client-side" på engelska, omfattar allt som kommer att köras och synas på användaren sida. Det kan alltså vara design, informationsinnehåll, [[skript]], o.s.v. Huvudteknikerna som används är [[HTML]], [[CSS]] och [[JavaScript]].

==== Serversidan ====
Utveckling för serversidan, ofta kallat "back-end" på engelska, handlar om allt som körs på webbservern. Detta omfattar olika typer av applikationer som skapar webbmaterial som kan hämtas hem av en webbklient.

Applikationerna kan skapas på en mängd olika vis, ofta är de programmerade i [[PHP]] eller [[JavaScript]]. Det kan även handla om olika typer av tjänster som inte är avsedda för en användare, t.ex. sådana tjänster som tillhandahåller andra webbapplikationer med data eller funktionalitet.

Typografi - diverse egenskaper

2022-09-08T07:12:47Z

PGJ:

Lite gott och blandat med olika CSS-egenskaper som påverkar text.

== <code>[[line-height]]</code> ==
Denna egenskap anger hur långt avståndet ska vara mellan två textrader. Detta går att ange på en rad olika vis. Följande värden kan sättas:
:<code>normal</code>: Sätter normal radhöjd. Detta är defaultvärdet.

;<code>''siffra''</code>: En siffra utan efterföljande enhet anger en multiplikationsfaktor. Webbläsaren kommer att sätta linjeavståndet till faktorn multiplicerad med fontstorleken.

;<code>''höjd''</code>: Höjdvärdet ska efterföljas av en CSS-enhet, t.ex. <code>px</code>.

;<code>''procent''</code>: Anger linjehöjden som en procent av nuvarande fontstorlek.

Exempel på hur man kan använda radhöjd:
<codepen pen="mPWmpj" height="940" tab="css,result">
</codepen>



__FORCETOC__

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T07:03:10Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Övning 1 ===
Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

=== Övning 2 ===
Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs flexaxeln

2022-09-08T07:02:42Z

PGJ:

Vi vill självklart kunna styra hur layouten sker i förhållande till flexaxeln också. Det görs med egenskapen <code>[[justify-content]]</code>

== <code>justify-content</code> ==

Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln.

Följande värden kan anges:

=== <code>flex-start</code> ===
[[Fil:FlexboxJustifyStart.png]]

Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" <code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten.
<codepen pen="LVKxLz" height="300" tab="css,result">
</codepen>

=== <code>flex-end</code> ===

[[Fil:FlexboxJustifiedEnd.png]]

Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" <code>[[rtl]]</code>/<code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten.
<codepen pen="KpjavK" height="300" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:FlexboxJustifyCenter.png]]

Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med <code>align-items: center;</code> kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt. Vilket vi gör i följande exempel.
<codepen pen="eNqVNr" height="300" tab="css,result">
</codepen>

=== <code>space-between</code> ===

[[Fil:FlexboxJustifySpaceBetween.png]]

Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna.

<codepen pen="waLgqO" height="300" tab="css,result">
</codepen>

=== <code>space-around</code> ===
[[Fil:FlexboxJustifySpaceAround.png]]

Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren.

<codepen pen="doBNZd" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Övning 1 ===
Flytta alla flexelement så de ligger jämt fördelade mot på raden. De ska börja ifrån kanten på flexlådan.
<codepen pen="dZbeeo" height="300" tab="result">
</codepen>

=== Övning 2 ===
Alla boxar ska centreras horisontellt. Första boxen ska ligga längst upp, tvåan i mitten, trean längst ned och fyran i mitten.
<codepen pen="wPwjxr" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - flexbehållare med flera rader]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T07:01:58Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Flexövning 1 ===
Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

=== Flexövning 2 ===
Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T06:59:14Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

* Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T06:58:50Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

[http://exempel.webbling.se/flexbox11.html Exempel].
<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

* Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - sätta storlek

2022-09-08T06:50:44Z

PGJ:

Det finns ett antal CSS-egenskaper som kan användas för att styra flexboxars layout och flöde. Vi börjar att titta på hur flexbox hanterar flexelementens storlek. Det är rätt så komplext hur den slutgiltiga storleken beräknas, men man behöver inte förstå detta i in i minsta detalj.

<div class="well well-warning">
Lägg märke till att de CSS-egenskaper vi diskuterar i detta avsnitt sätts på de individuella flexelementen, inte på flexbehållaren!
</div>

<div class="well well-danger">
Här nedan presenteras storleksegenskaperna för flexelement var för sig. Det bästa är dock att sätta dem med [[samlingsegenskap]]en <code>flex</code>. Då får man vettigare defaultvärden som grund. Det är nämligen som så att de indviduella elementen har andra defaultvärden då de sätt individuellt än om man sätter dem med samlingsegenskapen. Vilket är rätt märkligt, men något som vi får leva med. Efter presentationen av de individuella egenskaperna, följer en presentation av samlingsegenskapen.
</div>

== <code>[[flex-basis]]</code> ==
För att sätta grundstorleken på ett flexelement används <code>flex-basis</code>. Den slutliga storleken kan bli något helt annat då det finns andra egenskaper som tas med i beräkningen.

I stort sett fungerar denna egenskap som vanliga <code>[[width]]</code> eller <code>[[height]]</code> (beroende på <code>[[flex-direction]]</code>). Du anger samma typ av värden här som för de egenskaperna. Värdet kan anges med hjälp av alla [[Måttenheter_i_CSS|CSS-måttenheter]].

I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.
<codepen pen="PPZYGa" tab="css,result" height="200">
</codepen>

Det går även att ange ett av de två kodorden <code>auto</code> eller <code>content</code> som värde till <code>flex-basis</code>.

=== <code>auto</code> ===
Om man anger <code>auto</code> kommer webbläsaren att ta bredden ifrån eventuell <code>[[width]]</code> (eller <code>[[height]]</code>, beroende på <code>flex-direction</code>). Om även denna är satt till <code>auto</code>, kommer det bli samma resultat som om man angav <code>content</code>.

=== <code>content</code> ===
Storleken på flexelementet kommer att sättas utifrån storleken på dess innehåll. Webbläsaren kommer att sätta ett grundvärde på <code>flex-basis</code> så att allt i elementet får plats.

== <code>[[flex-grow]]</code> ==
[[Fil:Flexgrow.png]]

Lite förenklat kan man säga att <code>flex-grow</code> anger hur flexboxarna ska "växa till sig" och fylla upp tillgängligt, fritt utrymme. Som parameter tar denna egenskap ett enhetslöst tal som anger hur stor proportion av det fria utrymmet i flexbehållaren som flexelementet ska använda sig av. Det fria utrymmet är alltså det utrymme i flexbehållaren som inte fylls upp av flexelementens när man tar deras grundstorlek i beräkning .

Vad räknas som fritt utrymme? Här är ett exmpel:
<codepen pen="EKWZjo" tab="css,result" height="200">
</codepen>
I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du tittar på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.

I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.
<codepen pen="YywKQY" tab="css,result" height="400">
</codepen>
Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:
<codepen pen="meVbwL" tab="css,result" height="450">
</codepen>
Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.

Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.
<codepen pen="WQreOW" height="450" tab="css,result">
</codepen>

I vissa fall vill man att flexelementen ska sättas så att de tar upp allt tillgängligt utrymme och man bryr sig inte om några grundstorlekar. Det gör man genom att först sätta <code>flex-basis</code> till <code>0</code> och därefter ange vettiga värden till <code>flex-grow</code>. Då vet man att det "enda" som spelar in är proportionerna som anges i <code>flex-grow</code> och innehållets storlek tas ej med i beaktande.

Om man använder sig av samlingsegenskapen <code>flex</code>, så sätts <code>flex-basis</code>-värdet automatiskt till <code>0</code>. Vilket är ett bra defaultvärde.

== <code>[[flex-shrink]]</code> ==
Det finns även en egenskap som anger hur elementet ska omformas om det finns för lite plats i flexbehållaren. I fallet med <code>[[flex-grow]]</code> angavs hur webbläsaren skulle fördela eventuellt tomrum och använda detta till att göra flexinnehållet större. I fallet med <code>[[flex-shrink]]</code> anges hur material som skulle hamnat utanför flexbehållaren ska hanteras. I detta fall kommer flexelement att krympas så att det får plats i flexbehållaren.

Låt säga att vi har en flexbehållare vars innehåll sammanlagt går utanför behållaren med 20 %, då anger <code>[[flex-shrink]]</code> hur mycket de olika flexelement ska förminskas för att få plats med dessa 20 %. Egenskapens värde talar om hur stor andel av den överskjutande bredden, som ska dras ifrån varje element. Här följer ett exempel:
<codepen pen="QjyLme" height="550" tab="result">
</codepen>
I exemplet ovan har alla tre lådorna <code>flex-basis: 40%;</code>. De två först lådorna har <code>flex-shrink: 0</code> och påverkas alltså inte av eventuell krympning. Den sista lådan har <code>flex-shrink: 1;</code> och följdaktligen kommer den att krympas lika mycket som innehållet flödar över. Vilket i det här fallet är 20 % av flexbehållarens bredd.

Hade vi haft samma situation, med skillnaden att de två sista lådorna bägge två hade <code>flex-shrink: 1;</code>, så skulle den överskjutande bredden fördelas på bägge lådorna. Det vill säga, de skulle bägge krympas med 10 % av bredden på flexbehållaren.
<codepen pen="ZbQzqW" height="550" tab="result">
</codepen>

== <code>[[flex]]</code> ==

<div class="well well-warning">
Det rekommenderade sättet att ange värden för ovanstående egenskaper är att sätta dem med [[samlingsegenskap]]en <code>[[flex]]</code>. Om något av de tre möjliga egenskaperna utelämnas, kommer de utelämnade egenskaperna att ges bättre defaultvärden än de "normala" defaultvärdena. Ett något konstigt beteende kan tyckas!
</div>

[[Samlingsegenskap]]en <code>flex</code> kan användas för att sätta en, två eller tre av ovanstående egenskaper samtidigt. Defaultvärdena för de olika egenskaperna nollställs till följande om inget annat anges: <code>flex-grow: 1</code>, <code>flex-shrink: 1</code> och <code>flex-basis: 0</code>.

Hur egenskaperna sätts, beror på hur många och vilka värden som anges. Dessa varianter finns
(obs, som måttenhet kan även värdena <code>auto</code> eller <code>content</code> anges):
=== Ett värde ===
; Måttenhet: Om värdet har en måttenhet, antas man ange <code>flex-basis</code>. Det vill säga grundstorleken på flexelementet. De två övriga egenskaperna får sina defaultvärden.

; Andel:Om ett enhetslöst tal anges, tas detta som en andel för <code>flex-grow</code>. De två övriga egenskaperna får sina defaultvärden.

=== Två värden ===
; En måttenhet och en andel : Måttenheten anger <code>flex-basis</code>, medan andelen anger <code>flex-grow</code>. <code>flex-shrink</code> får defaultvärdet.

;Två andelar: Den första andelen kommer att tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>.

=== Tre värden ===
Den första andel som påträffas tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>. Måttenheten anger <code>flex-basis</code>.

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs korsaxeln]]

[[Category:Webbutveckling]]

Flexbox - grunder

2022-09-08T06:30:52Z

PGJ:

Flexbox är ett modernare sätt att skapa layout på webbsidor. Vi kommer även att titta på andra moderna sätt på vilket man kan skapa layout, men flexbox är den enklaste metoden som ger bra resultat.

Flexbox löser många problem och förenklar mycket. Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som ska ha samma höjd, centrering av element (såväl horisontellt som vertikalt) samt att flexbox ger oss layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva en hel del extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.

== Flexbox ==
Som man hör på namnet är flexbox till för att på ett flexibelt sätt hantera boxar, såväl deras position som deras storlek - vilket ju är likvärdigt med layout. Det är mycket enklare att få till en bra layout med denna teknik än om man använder sig av <code>float</code> eller liknande äldre metoder.

Flexboxar är dynamiska och webbläsaren sköter automatiskt det mesta som har att göra med placering av underelement. När man kör på olika enheter eller när man förändrar storlek på webbläsarfönstret så kommer flexbox att förändra layouten så att den passar den aktuella skärmlayouten.

== Terminologi ==
Vi behöver fastställa betydelsen för ett antal begrepp som används för att beskriva hur flexbox fungerar.
=== Flexbehållare ===
Allt som ska hanteras av flexbox, placeras i en flexbehållare. Denna kommer att vara föräldraelementet som alla flexelement placeras i.

Flexbehållare skapas genom att sätta deras <code>display</code>-typ enligt följande; <code>display: flex;</code>. Detta kommer att skapa ett blockelement vars innehåll lyder under flexboxs formateringsregler.

Det finns även en variant för att ange att själva flexbehållaren inte ska vara ett normalt blockelement, utan att den ska placeras i flödet. Denna variant skapas genom genom att sätta CSS-egenskapen så här; <code>display: inline-flex;</code>.

=== Flexelement ===
Flexelement/flexinnehåll är de underelement som placeras inuti flexbehållaren.

Det är främst block-element som påverkas av att ligga inuti en flexbehållare. I vissa fall omvandlas dock "vanliga" element automatiskt till att fungera som block-element när de hamnar inuti en flexbehållare. Detta gäller t.ex. om du lägger "ren" text inuti en flexbehållare, då kommer texten att automatiskt placeras i ett "osynligt" flexelement. Du behöver med andra ord inte skapa alla flexelement själv, en del skapas åt dig.

=== Flexaxel ===
Flexaxeln bestämmer i vilken riktning flexelementen ska placeras ut. Det går att sätta denna så att den antingen är rad eller kolumn - det vill säga horisontell eller vertikal. Riktningen på flexaxeln anges med egenskapen <code>flex-direction</code>. Ett exempel på hur den används; <code>flex-direction: column;</code>.

Om inget annat anges, placeras flexelementen ut efter varandra på en och samma rad. Det vill säga, defaultinställningen är en horisontell flexaxel. Vanligtvis placeras ju blockelement under föregående element, så att ha "motsatsen" som defaultbeteende för flexboxar är förstås vettigt.

Man kan även ange att man vill ha en vertikal flexaxel. Då läggs elementen ut under varandra i en kolumn. Detta påminner om det normala beteendet för blockelement. Dock så har det fördelar att lägga elementen i en flexbehållare. Bland annat kan man styra formateringen av elementen långt bättre.

==== <code>direction</code>s inverkan ====
Om man har en horisontell flexaxel så kan den antingen starta på höger eller vänster sida. Detta styrs av värdet på den <code>[[direction]]</code>-egenskap som gäller för flexbehållaren. Flexelementen kommer att placeras ut i samma ordning som angetts med <code>direction</code>. Är den <code>[[ltr]]</code>, dvs vänster till höger, vilket är default-riktningen så kommer även flexaxeln att gå ifrån vänster till höger. Om däremot det är <code>[[rtl]]</code> som gäller, dvs höger till vänster, placeras även flexelementen ut ifrån höger till vänster.

För "vanliga" västerländska språk, som ju är <code>[[ltr]]</code>, börjar elementen att placeras ut längst till vänster. Därefter placeras varje nytt element på föregående elements högra sida. Vi bygger alltså upp flexraden ifrån vänster till höger. Det påminner alltså om det beteende som gällde när man gjorde <code>float: left</code> För språk som läses ifrån höger till vänster, <code>[[rtl]]</code>, gäller omvända riktningarna.

Om vi designar en sida, kan alltså dess utseende förändras beroende på vilket språk som kommer att användas för den. En sida på arabiska kommer att ha <code>direction</code> satt till <code>rtl</code>, medan en sida på svenska kommer att ha <code>ltr</code>. Troligen vill vi att sidans layout ska förändras utifrån textens riktning. Vi skapar ju oftast sidolayout som är beroende på textlayouten ser ut. Om textutsättningen "spegelvänds" vill vi säkerligen att sidolayouten ska förändras för att återspegla detta.

==== Omvända flexaxlar ====
Det går även ange att flexaxeln ska vara omvänd. I normalfallet så växer flexaxeln ifrån vänster till höger, men ibland vill vi ange att den ska göra tvärtom, dvs att den startar på höger sida och växer mot vänster. Nu kanske man tror att <code>[[ltr]]</code> skulle vara en bra lösning på detta. Problemet är dock att även andra layoutmekanismer påverkas av detta, såsom textlayouten. Lösningen är att använda en omvänd flexaxel, detta anges som vanligt, men med ett efterföljande <code>-reverse</code>. Ett exempel på detta är; <code>flex-direction: row-reverse;</code>. När man sätter <code>flex-direction</code> på detta vis, kommer raden att byggas upp ifrån motsatt sida mot vad den normalt skulle göra.

En vertikal flexaxel börjar normalt i toppen och varje nytt element läggs under föregående. Det vill säga som en kolumn. Dock kan man även här sätta att flexaxeln ska vara omvänd. Då börjar flexaxeln längst ner och varje nytt flexelement placeras ovanför föregående.

=== Korsaxel ===
Det finns även något som kallas för korsaxel. Det är en axel som är förskjuten 90 grader mot flexaxeln. Det vill säga, om flexaxeln är horisontell, så är korsaxeln vertikal och vice versa. Många layoutegenskaper som har med flexbox att göra anger hur saker ska placeras längsmed korsaxeln.

=== Samband mellan axlarna ===
Axlarna är det som styr hur element placeras ut i en flexbox. I bilden ser du hur axlarna skulle se ut om man hade en flexbox vars innehåll placeras ut på en rad (och om <code>ltr</code> gäller).

[[Fil:Flextermer.png]]

== Demokod ==
För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
<codepen pen="WvqbWZ" height="250" tab="html,result">
</codepen>

== Att skapa en flexbehållare ==
För att visa att vi vill använda flexbox och skapa en flexbehållare sätter vi ett elements <code>display</code>-egenskap till antingen <code>flex</code> eller <code>inline-flex</code>, t.ex. så här:
<syntaxhighlight lang="css">
.flexlåda {
display: flex;
}
</syntaxhighlight>

Elementet som har <code>flexlåda</code>-klassen kommer nu att bli en flexbehållare och alla dess underelement kommer att bli flex-element.

Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:
<codepen pen="OVePYW" height="480" tab="css,result">
</codepen>
Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.

== Övningar ==
Här finns [[grundövningar för flex]].

Välj "Edit on CodePen", för att kunna redigera och genomföra följande övning.
<codepen pen="amvvWd" height="400" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - sätta riktning]]

[[Category:Webbutveckling]]

Lär dig mer om JavaScript

2022-09-08T06:26:13Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
[[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</div>

== Föråldrade tekniker ==

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi använde tidigare jQuery i exemplen på Webbling, men har gjort om alla exempel till [https://plainjs.com/ plainJS]. Vi har dock kvar en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.

<div class="well">
[[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]
</div>
__NOTOC__

Lär dig mer om JavaScript

2022-09-08T06:25:29Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
[[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</div>

== Föråldrade tekniker ==

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi använde tidigare jQuery i exemplen på Webbling, men har gjort om alla exempel till [https://plainjs.com/ plainJS]. Vi har dock kvar en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.
[[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]

__NOTOC__

Elementens-grunder övningar

2022-08-31T19:47:47Z

PGJ:

<quiz display="simple">

{Element skapas med <code>element</code>-taggen.
|type="()"}
- Ja
+ Nej

{Man kan nästla taggar av samma typ inuti varandra.
|type="()"}
+ Ja
- Nej

{Elementens utseende kan skilja sig ifrån webbläsare till webbläsare.
|type="()"}
+ Sant
- Felaktigt

{Med CSS kan man styra utseendet till 100 %
|type="()"}
- Sant
+ Felaktigt

{Indentering betyder att man skriver allt med stora bokstäver, så det syns bättre.
|type="()"}
- Sant
+ Felaktigt

{<code>em</code> används för att det är något speciellt med elementinnehållet.
|type="()"}
+ Sant
- Felaktigt

</quiz>

Tillbaka till [[Element-grunder]]

Huvudsida

2021-10-23T12:02:13Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="well well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Huvudsida

2021-10-23T12:01:48Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="well well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använd jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Studiematerial

2021-10-23T12:00:47Z

PGJ:

<div class="well well-cocktail">
I den här sektionen av Webbling finns ett antal aktiviter indelade i olika ämnesavsnitt. Dessa kommer förhoppningsvis att lära dig mycket om webbteknik, webbutveckling och programmering.
</div>

<div class="well well-meadow">
== [[Lär dig mer om webbutveckling]] ==
En introduktion till hur man skapar webbsidor och webbplatser.
</div>

<div class="well well-meadow">
== [[Webbutveckling TL;DR]] ==
En snabb introduktion/repetition av webbutveckling.
</div>

<div class="well well-meadow">
== [[Lär dig mer om JavaScript]] ==
En introduktion till hur man programmerar i språket JavaScript.
</div>

<div class="well well-meadow">
== [[Att bygga webbapplikationer och -tjänster]] ==
Här går vi igenom mer om hur man skapar webbapplikationer och -tjänster. Detta är tänkt för de mer avancerade och du bör först gå igenom "[[Lär dig mer om JavaScript]]" innan du går in på denna sektion
</div>

<div class="well well-meadow">
== [[Jag vill...]] ==
En FAQ med lösningar på vanliga problem och frågeställningar.
</div>

__NOTOC__

Huvudsida

2021-10-23T11:59:51Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="well well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använd jQuery är nu omskrivna till plainJS.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Ännu en SPA med Leaflet

2021-10-23T11:58:34Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket påminner om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

Ännu en SPA med Leaflet

2021-10-23T11:58:13Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket påminner om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

En exempelapplikation i Leaflet

2021-10-23T11:42:55Z

PGJ:

Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

<div class="well well-warning">
Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.
</div>

== En grund att stå på ==
Vi börjar med att skapa en grundstruktur för vår sida.

=== HTML ===
Det viktigaste vi behöver göra i HTML:en är att lägga till [[Leaflet]], då vi kommer att behöva denna för vår app. HTML:en kan då bli att se ut så här:
<codepen pen="xZqpXz" tab="html" height="500">
</codepen>

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

I följande exempel kommer vi att minimera HTML-koden på Codepen, så all kod kommer inte att vara med i HTML-editorn. Allt i föregående exempel behövs dock om du ska skapa applikationen som en fristående webbsajt.

=== CSS ===
Vi lägger även till basal CSS:
<codepen pen="xZqpXz" tab="css,result" height="500">
</codepen>

I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx | h1]]</code> ska vara centrerad.

Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

== Lägga till en karta på prov ==
För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör samma kod som i vårt tidigare exempel där vi visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock koordinaterna så att kartan kommer att centreras kring Örebro.

Koden blir att se ut så här:
<codepen pen="Qypaxd" tab="js,result" height="500">
</codepen>

Resultatet ser ju helt acceptabelt ut och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

== Första försök med att läsa in data ==
För att gå vidare behöver vi koppla data till vår karta.

<div class="well well-meadow">
Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
</div>

=== Experimentdata ===
Vi hämtade ned lite experimentdata ifrån <code>https://karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

<syntaxhighlight lang="javascript">
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.253840371567572,
59.277180434995095
]
},
"properties":{
"title":"Alnängsbadet",
"description":"",
"url":"http://www.orebro.se/3089.html",
"rel":"http://karta2.orebro.se/api/v1/information/1"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.74236626384993,
59.1363775662748
]
},
"properties":{
"title":"Dimbobaden",
"description":"",
"url":"http://www.orebro.se/3090.html",
"rel":"http://karta2.orebro.se/api/v1/information/2"
}
}
]
}
</syntaxhighlight>

Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

=== Leaflet och GeoJSON ===
Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
<codepen pen="LGWrjY" tab="js,result" height="1500">
</codepen>

==== <code>geoJson()</code> ====
Den nya koden är alltså den där vi skapar ett <code>geoLayer</code>. Detta kommer att bli ett lager som ligger ovanpå vår karta och som visar information som läses utifrån vår GeoJSON-data. Lagret skapas av metoden <code>L.geoJson()</code>. Vi ska titta närmare på hur denna fungerar.

Som första inparameter tar <code>geoJson</code>-metoden antingen en enda post formaterad i GeoJSON eller en array med flera poster. I vårt fall har vi en array med GeoJSON-data, så vi skickar med den, dvs <code>geoData.features</code>.

Som andra parameter skickar man med en lista som innehåller de stilparametrar som ska gälla för vår GeoJSON-data. Detta kan vara en lista med egenskaper som används för all data. Det kan även vara ett objekt som innehåller metoder som körs för att sätta specifik data för varje GeoJSON-objekt. I vårt fall har vi valt att skicka med metoder. Vi skulle även kunna lägga till stildata i objektet om vi ville det. Vi har valt att koppla en funktion till <code>onEachFeature</code>. Denna funktion kommer att köras en gång för varje punkt som ingår i vår data.

==== <code>onEachFeature</code> ====
Den funktion vi skickar till <code>onEachFeature</code> tar två inparametrar. Den första är nuvarande geografiska data som behandlas. I vårt fall är det en intressepunkt. Den andra parametern anger vilket lager som denna "feature" ska läggas till i. I vårt fall binder vi en popup till varje datapunkt, popup-texten kommer att vara namnet på intressepunkten.

Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

== Att läsa in data från en datakälla ==
Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
<codepen pen="qbrxBw" tab="js,result" height="1050">
</codepen>

Det som är nytt är främst <code>hämtaIPLista</code>. Denna kommer att läsa ut en lista som innehåller Örebros badplatser. När datan är hämtad kommer funktionen <code>AjaxKlar</code> att köras. Som inparameter får denna den data som lästs in. Denna data kan vi skicka in direkt i <code>geoJson</code>, då den är precis lik den testdata som vi använde tidigare. Det är inget nytt i hur denna bit hanteras, koden är bara flyttad till en annan plats i programfilen.

== Appen på riktigt ==
Om du vill se hur man skulle lagt upp appen på riktigt, det vill säga som fristående webbapplikation och inte som demo i Codepen, kan du gå till [http://exempel.webbling.se/Leaflet http://exempel.webbling.se/Leaflet].

Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

== Avslutning ==
Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

== Nästa aktivitet ==
Vi ska gå igenom hur man skapar en till liten SPA.

[[Ännu en SPA med Leaflet]]

[[Category: jQuery]]
[[Category: JavaScript]]

En exempelapplikation i Leaflet

2021-10-23T11:15:06Z

PGJ:

Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

<div class="well well-warning">
Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.
</div>

== En grund att stå på ==
Vi börjar med att skapa en grundstruktur för vår sida.

=== HTML ===
Det viktigaste vi behöver göra i HTML:en är att lägga till [[Leaflet]], då vi kommer att behöva denna för vår app. HTML:en kan då bli att se ut så här:
<codepen pen="xZqpXz" tab="html" height="500">
</codepen>

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

I följande exempel kommer vi att minimera HTML-koden på Codepen, så all kod kommer inte att vara med i HTML-editorn. Allt i föregående exempel behövs dock om du ska skapa applikationen som en fristående webbsajt.

=== CSS ===
Vi lägger även till basal CSS:
<codepen pen="xZqpXz" tab="css,result" height="500">
</codepen>

I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx | h1]]</code> ska vara centrerad.

Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

== Lägga till en karta på prov ==
För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör samma kod som i vårt tidigare exempel där vi visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock koordinaterna så att kartan kommer att centreras kring Örebro.

Koden blir att se ut så här:
<codepen pen="Qypaxd" tab="js,result" height="500">
</codepen>

Resultatet ser ju helt acceptabelt ut och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

== Första försök med att läsa in data ==
För att gå vidare behöver vi koppla data till vår karta.

<div class="well well-meadow">
Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
</div>

=== Experimentdata ===
Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

<syntaxhighlight lang="javascript">
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.253840371567572,
59.277180434995095
]
},
"properties":{
"title":"Alnängsbadet",
"description":"",
"url":"http://www.orebro.se/3089.html",
"rel":"http://karta2.orebro.se/api/v1/information/1"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.74236626384993,
59.1363775662748
]
},
"properties":{
"title":"Dimbobaden",
"description":"",
"url":"http://www.orebro.se/3090.html",
"rel":"http://karta2.orebro.se/api/v1/information/2"
}
}
]
}
</syntaxhighlight>

Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

=== Leaflet och GeoJSON ===
Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
<codepen pen="LGWrjY" tab="js,result" height="1500">
</codepen>

==== <code>geoJson()</code> ====
Den nya koden är alltså den där vi skapar ett <code>geoLayer</code>. Detta kommer att bli ett lager som ligger ovanpå vår karta och som visar information som läses utifrån vår GeoJSON-data. Lagret skapas av metoden <code>L.geoJson()</code>. Vi ska titta närmare på hur denna fungerar.

Som första inparameter tar <code>geoJson</code>-metoden antingen en enda post formaterad i GeoJSON eller en array med flera poster. I vårt fall har vi en array med GeoJSON-data, så vi skickar med den, dvs <code>geoData.features</code>.

Som andra parameter skickar man med en lista som innehåller de stilparametrar som ska gälla för vår GeoJSON-data. Detta kan vara en lista med egenskaper som används för all data. Det kan även vara ett objekt som innehåller metoder som körs för att sätta specifik data för varje GeoJSON-objekt. I vårt fall har vi valt att skicka med metoder. Vi skulle även kunna lägga till stildata i objektet om vi ville det. Vi har valt att koppla en funktion till <code>onEachFeature</code>. Denna funktion kommer att köras en gång för varje punkt som ingår i vår data.

==== <code>onEachFeature</code> ====
Den funktion vi skickar till <code>onEachFeature</code> tar två inparametrar. Den första är nuvarande geografiska data som behandlas. I vårt fall är det en intressepunkt. Den andra parametern anger vilket lager som denna "feature" ska läggas till i. I vårt fall binder vi en popup till varje datapunkt, popup-texten kommer att vara namnet på intressepunkten.

Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

== Att läsa in data från en datakälla ==
Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
<codepen pen="qbrxBw" tab="js,result" height="1050">
</codepen>

Det som är nytt är främst <code>hämtaIPLista</code>. Denna kommer att läsa ut en lista som innehåller Örebros badplatser. När datan är hämtad kommer funktionen <code>AjaxKlar</code> att köras. Som inparameter får denna den data som lästs in. Denna data kan vi skicka in direkt i <code>geoJson</code>, då den är precis lik den testdata som vi använde tidigare. Det är inget nytt i hur denna bit hanteras, koden är bara flyttad till en annan plats i programfilen.

== Appen på riktigt ==
Om du vill se hur man skulle lagt upp appen på riktigt, det vill säga som fristående webbapplikation och inte som demo i Codepen, kan du gå till [http://exempel.webbling.se/Leaflet http://exempel.webbling.se/Leaflet].

Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

== Avslutning ==
Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

== Nästa aktivitet ==
Vi ska gå igenom hur man skapar en till liten SPA.

[[Ännu en SPA med Leaflet]]

[[Category: jQuery]]
[[Category: JavaScript]]

En exempelapplikation i Leaflet

2021-10-23T11:14:03Z

PGJ:

Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

<div class="well well-warning">
Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.
</div>

== En grund att stå på ==
Vi börjar med att skapa en grundstruktur för vår sida.

=== HTML ===
Det viktigaste vi behöver göra i HTML:en är att lägga till [[Leaflet]], då vi kommer att behöva denna för vår app. HTML:en kan då bli att se ut så här:
<codepen pen="xZqpXz" tab="html" height="500">
</codepen>

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

I följande exempel kommer vi att minimera HTML-koden på Codepen, så all kod kommer inte att vara med i HTML-editorn. Allt i föregående exempel behövs dock om du ska skapa applikationen som en fristående webbsajt.

=== CSS ===
Vi lägger även till basal CSS:
<codepen pen="xZqpXz" tab="css,result" height="500">
</codepen>

I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx | h1]]</code> ska vara centrerad.

Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av den skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

== Lägga till en karta på prov ==
För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör samma kod som i vårt tidigare exempel där vi visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock koordinaterna så att kartan kommer att centreras kring Örebro.

Koden blir att se ut så här:
<codepen pen="Qypaxd" tab="js,result" height="500">
</codepen>

Resultatet ser ju helt acceptabelt ut och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

== Första försök med att läsa in data ==
För att gå vidare behöver vi koppla data till vår karta.

<div class="well well-meadow">
Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
</div>

=== Experimentdata ===
Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

<syntaxhighlight lang="javascript">
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.253840371567572,
59.277180434995095
]
},
"properties":{
"title":"Alnängsbadet",
"description":"",
"url":"http://www.orebro.se/3089.html",
"rel":"http://karta2.orebro.se/api/v1/information/1"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.74236626384993,
59.1363775662748
]
},
"properties":{
"title":"Dimbobaden",
"description":"",
"url":"http://www.orebro.se/3090.html",
"rel":"http://karta2.orebro.se/api/v1/information/2"
}
}
]
}
</syntaxhighlight>

Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

=== Leaflet och GeoJSON ===
Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
<codepen pen="LGWrjY" tab="js,result" height="1500">
</codepen>

==== <code>geoJson()</code> ====
Den nya koden är alltså den där vi skapar ett <code>geoLayer</code>. Detta kommer att bli ett lager som ligger ovanpå vår karta och som visar information som läses utifrån vår GeoJSON-data. Lagret skapas av metoden <code>L.geoJson()</code>. Vi ska titta närmare på hur denna fungerar.

Som första inparameter tar <code>geoJson</code>-metoden antingen en enda post formaterad i GeoJSON eller en array med flera poster. I vårt fall har vi en array med GeoJSON-data, så vi skickar med den, dvs <code>geoData.features</code>.

Som andra parameter skickar man med en lista som innehåller de stilparametrar som ska gälla för vår GeoJSON-data. Detta kan vara en lista med egenskaper som används för all data. Det kan även vara ett objekt som innehåller metoder som körs för att sätta specifik data för varje GeoJSON-objekt. I vårt fall har vi valt att skicka med metoder. Vi skulle även kunna lägga till stildata i objektet om vi ville det. Vi har valt att koppla en funktion till <code>onEachFeature</code>. Denna funktion kommer att köras en gång för varje punkt som ingår i vår data.

==== <code>onEachFeature</code> ====
Den funktion vi skickar till <code>onEachFeature</code> tar två inparametrar. Den första är nuvarande geografiska data som behandlas. I vårt fall är det en intressepunkt. Den andra parametern anger vilket lager som denna "feature" ska läggas till i. I vårt fall binder vi en popup till varje datapunkt, popup-texten kommer att vara namnet på intressepunkten.

Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

== Att läsa in data från en datakälla ==
Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
<codepen pen="qbrxBw" tab="js,result" height="1050">
</codepen>

Det som är nytt är främst <code>hämtaIPLista</code>. Denna kommer att läsa ut en lista som innehåller Örebros badplatser. När datan är hämtad kommer funktionen <code>AjaxKlar</code> att köras. Som inparameter får denna den data som lästs in. Denna data kan vi skicka in direkt i <code>geoJson</code>, då den är precis lik den testdata som vi använde tidigare. Det är inget nytt i hur denna bit hanteras, koden är bara flyttad till en annan plats i programfilen.

== Appen på riktigt ==
Om du vill se hur man skulle lagt upp appen på riktigt, det vill säga som fristående webbapplikation och inte som demo i Codepen, kan du gå till [http://exempel.webbling.se/Leaflet http://exempel.webbling.se/Leaflet].

Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

== Avslutning ==
Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

== Nästa aktivitet ==
Vi ska gå igenom hur man skapar en till liten SPA.

[[Ännu en SPA med Leaflet]]

[[Category: jQuery]]
[[Category: JavaScript]]

Lär dig mer om JavaScript

2021-10-23T11:13:15Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
# [[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</div>

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi har dock en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.
# [[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]

__NOTOC__

Lär dig mer om JavaScript

2021-10-23T11:12:57Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
# [[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</well>

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi har dock en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.
# [[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]

__NOTOC__

En exempelapplikation i Leaflet

2021-10-23T11:07:11Z

PGJ:

Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

<div class="well well-warning">
Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.
</div>

== En grund att stå på ==
Vi börjar med att skapa en grundstruktur för vår sida.

=== HTML ===
Det viktigaste vi behöver göra i HTML:en är att lägga till [[jQuery]] och [[Leaflet]], då vi kommer att behöva dessa för vår app. HTML:en kan då bli att se ut så här:
<codepen pen="xZqpXz" tab="html" height="500">
</codepen>

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

I följande exempel kommer vi att minimera HTML-koden på Codepen, så all kod kommer inte att vara med i HTML-editorn. Allt i föregående exempel behövs dock om du ska skapa applikationen som en fristående webbsajt.

=== CSS ===
Vi lägger även till basal CSS:
<codepen pen="xZqpXz" tab="css,result" height="500">
</codepen>

I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx | h1]]</code> ska vara centrerad.

Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av den skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

== Lägga till en karta på prov ==
För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör samma kod som i vårt tidigare exempel där vi visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock koordinaterna så att kartan kommer att centreras kring Örebro.

Koden blir att se ut så här:
<codepen pen="Qypaxd" tab="js,result" height="500">
</codepen>

Resultatet ser ju helt acceptabelt ut och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

== Första försök med att läsa in data ==
För att gå vidare behöver vi koppla data till vår karta.

<div class="well well-meadow">
Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
</div>

=== Experimentdata ===
Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

<syntaxhighlight lang="javascript">
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.253840371567572,
59.277180434995095
]
},
"properties":{
"title":"Alnängsbadet",
"description":"",
"url":"http://www.orebro.se/3089.html",
"rel":"http://karta2.orebro.se/api/v1/information/1"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.74236626384993,
59.1363775662748
]
},
"properties":{
"title":"Dimbobaden",
"description":"",
"url":"http://www.orebro.se/3090.html",
"rel":"http://karta2.orebro.se/api/v1/information/2"
}
}
]
}
</syntaxhighlight>

Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

=== Leaflet och GeoJSON ===
Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
<codepen pen="LGWrjY" tab="js,result" height="1500">
</codepen>

==== <code>geoJson()</code> ====
Den nya koden är alltså den där vi skapar ett <code>geoLayer</code>. Detta kommer att bli ett lager som ligger ovanpå vår karta och som visar information som läses utifrån vår GeoJSON-data. Lagret skapas av metoden <code>L.geoJson()</code>. Vi ska titta närmare på hur denna fungerar.

Som första inparameter tar <code>geoJson</code>-metoden antingen en enda post formaterad i GeoJSON eller en array med flera poster. I vårt fall har vi en array med GeoJSON-data, så vi skickar med den, dvs <code>geoData.features</code>.

Som andra parameter skickar man med en lista som innehåller de stilparametrar som ska gälla för vår GeoJSON-data. Detta kan vara en lista med egenskaper som används för all data. Det kan även vara ett objekt som innehåller metoder som körs för att sätta specifik data för varje GeoJSON-objekt. I vårt fall har vi valt att skicka med metoder. Vi skulle även kunna lägga till stildata i objektet om vi ville det. Vi har valt att koppla en funktion till <code>onEachFeature</code>. Denna funktion kommer att köras en gång för varje punkt som ingår i vår data.

==== <code>onEachFeature</code> ====
Den funktion vi skickar till <code>onEachFeature</code> tar två inparametrar. Den första är nuvarande geografiska data som behandlas. I vårt fall är det en intressepunkt. Den andra parametern anger vilket lager som denna "feature" ska läggas till i. I vårt fall binder vi en popup till varje datapunkt, popup-texten kommer att vara namnet på intressepunkten.

Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

== Att läsa in data från en datakälla ==
Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
<codepen pen="qbrxBw" tab="js,result" height="1050">
</codepen>

Det som är nytt är främst <code>hämtaIPLista</code>. Denna kommer att läsa ut en lista som innehåller Örebros badplatser. När datan är hämtad kommer funktionen <code>AjaxKlar</code> att köras. Som inparameter får denna den data som lästs in. Denna data kan vi skicka in direkt i <code>geoJson</code>, då den är precis lik den testdata som vi använde tidigare. Det är inget nytt i hur denna bit hanteras, koden är bara flyttad till en annan plats i programfilen.

== Appen på riktigt ==
Om du vill se hur man skulle lagt upp appen på riktigt, det vill säga som fristående webbapplikation och inte som demo i Codepen, kan du gå till [http://exempel.webbling.se/Leaflet http://exempel.webbling.se/Leaflet].

Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

== Avslutning ==
Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

== Nästa aktivitet ==
Vi ska gå igenom hur man skapar en till liten SPA.

[[Ännu en SPA med Leaflet]]

[[Category: jQuery]]
[[Category: JavaScript]]

Att komma igång med Leaflet

2021-10-23T10:53:50Z

PGJ:

Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.

== Att lägga till Leaflet ==
Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.

<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</syntaxhighlight>

Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.

<syntaxhighlight lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</syntaxhighlight>

Med dessa två rader på plats kan vi skapa ett exempel.

== Leaflet-exempel ==
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

<codepen pen="adJmEj" tab="js,result" height="600">
</codepen>

(Som vanligt, kom ihåg att även titta på "Result"-fliken.)

Låt oss gå igenom exempelet och se vad de olika delarna gör för något.

=== HTML ===
I HTML-koden började vi med att lägga till CDN-hämtningarna som föreser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

=== CSS ===
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att <code>div</code>:en är helt tom och därmed får sin höjd satt till <code>0</code>.

=== JavaScript ===
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.

==== Initiering av Leaflet ====
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet (detta går att jämföra med hur jQuery registrerar sig i <code>$</code>).

<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.

==== Inställningar för datakälla ====
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

<div class="well well-warning">

==== HTTPS eller ej ====
Det är diskutabelt huruvida kartdatan verkligen kan vara integritetskränkande och behövs hålla hemlig, men vi kommer ändå att hämta materialet via HTTPS. Främst för att detta kommer att undvika att vi får de "mixed content"-varningar som uppstår när man blandar HTTP- och HTTPS-objekt i en och samma sida. Att inte kryptera kartdatat skulle vara marginellt snabbare, men det är nog ingenting man behöver bry sig i, speciellt inte på klientsidan. På servern kommer det självklart att bli något högre last när alla kartsegment måste krypteras innan de skickas ut.
</div>

==== Kart-tiles ====
Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa komibineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

==== Att ange datakälla ====
Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla den behövlig kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

<div class="well well-warning">
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
</div>

==== Koppla data till vy ====
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet <code>addTo</code>. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde <code>map</code>-metoden. Det vill säga det objekt som innehåller information om vår kartvy.

== Vår första karta ==
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!

== Kombination av våra geografiska exempel ==
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:
<codepen pen="pgeWKx" tab="js,result" height="1300">
</codepen>

Det finns väl inte mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att visa upp koordinatvärdena så drar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

== Nästa aktivitet ==
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.

[[Att lägga till extra data med Leaflet]]

Att skapa interaktivitet med Leaflet

2021-10-23T10:51:16Z

PGJ:

Vi får ju redan i grunden en del automatisk interaktivitet när vi använder oss av Leaflet. Användaren kan panorera och zooma runt i kartan. Vi ska nu titta på hur man kan lägga till mer saker som gör att användaren kan interagera med kartan.

== Popups ==
Popups är ett bra sätt att visa upp extra information som gäller för intressepunkter på kartan. Det finns bra stöd i Leaflet för detta och det är mycket enkelt att koppla popups till objekt som lagts till på kartan. Popup triggas igång och visas när användaren klickar på det objekt till vilket popup:en är kopplad.

<div class="well well-meadow">
Man kan bara ha en popup framme samtidigt. Om en popup redan är öppen och användaren klickar på en ny popup, så kommer den första popup:en att stängas ned. Om vi klickar en gång till på samma objekt ifrån vilket det öppnades en popup, så kommer den kopplade popup:en att stängas ned. Likaså försvinner popup:er även om vi klickar utanför det kopplade objektet, oavsett om en ny popup triggas igång eller ej. Självklart kan användaren även klicka på det lilla krysset i popup:en för att stänga denna.
</div>

=== Exempel ===
Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:
<codepen pen="pgedqJ" tab="js,result" height="650">
</codepen>

==== <code>bindPopup</code> ====
Vi behöver ha en instansvariabel som pekar på det kartobjekt som vi vill koppla vår popup till. I vårt exempel har vi sparat undan vårt objekt i <code>polygon</code>. I detta objekt finns en metod som heter <code>bindPopup</code> med vilken vi kan koppla till popup-funktionalitet.

I den enklaste varianten tar <code>bindPopup</code> en sträng som input. Strängen innehåller det som ska visas när användaren klickar. Strängens innehåll kommer att tolkas som HTML-kod. Vi kan alltså använda så gott som alla HTML-taggar här och på så vis bygga upp en relativt snygg popup. Vi skulle även kunna skicka med ett redan existerande HTML-element och då skulle detta visas i popup:en.

Vanligtvis utgår popup:ens position ifrån den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

<syntaxhighlight lang="JavaScript">
polygon.bindPopup("Hej", <latitud>, <longitud>);
</syntaxhighlight>

Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.

== Händelser ==
Vi kan även koppla så att kod körs när diverse händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Händelsehanterare fungerar på liknande vis som i [[jQuery]] och man använder en <code>on</code>-metod för att koppla ihop dem. Det finns flera olika händelsetyper. Några av dessa är unika för för vissa typer av kartobjekt, medan andra är universiella för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

==== Klickhändelser ====
Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.
<codepen pen="gPmoYE" tab="js,result" height="875">
</codepen>

Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion, dvs <code>on</code>. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.

Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.

<div class="well well-meadow">
Lägg märke till att om du klickar flera gånger och råkar klicka för "fort", kommer dina klick inte att tas som en klickhändelse. Istället ses det som ett dubbelklick. Då körs förstås inte vår händelse-hanterare.

Så som exemplet ser ut nu, tar Leaflet ett dubbelklick som en zoom-gest.
</div>

== Nästa aktivitet ==
I nästa aktivitet ska vi gå igenom ett litet fylligare Leaflet-exempel.

[[En exempelapplikation i Leaflet]]

Att komma igång med Leaflet

2021-10-23T10:36:24Z

PGJ:

Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.

== Att lägga till Leaflet ==
Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.

<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</syntaxhighlight>

Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.

<syntaxhighlight lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</syntaxhighlight>

Med dessa två rader på plats kan vi skapa ett exempel.

== Leaflet-exempel ==
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

<codepen pen="adJmEj" tab="js,result" height="600">
</codepen>

(Som vanligt, kom ihåg att även titta på "Result"-fliken.)

Låt oss gå igenom exempelet och se vad de olika delarna gör för något.

=== HTML ===
I HTML-koden började vi med att lägga till CDN-hämtningarna som föreser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

=== CSS ===
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att <code>div</code>:en är helt tom och därmed får sin höjd satt till <code>0</code>.

=== JavaScript ===
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.

==== Initiering av Leaflet ====
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet (detta går att jämföra med hur jQuery registrerar sig i <code>$</code>).

<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.

==== Inställningar för datakälla ====
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

<div class="well well-warning">

==== HTTPS eller ej ====
Det är diskutabelt huruvida kartdatan verkligen kan vara integritetskränkande och behövs hålla hemlig, men vi kommer ändå att hämta materialet via HTTPS. Främst för att detta kommer att undvika att vi får de "mixed content"-varningar som uppstår när man blandar HTTP- och HTTPS-objekt i en och samma sida. Att inte kryptera kartdatat skulle vara marginellt snabbare, men det är nog ingenting man behöver bry sig i, speciellt inte på klientsidan. På servern kommer det självklart att bli något högre last när alla kartsegment måste krypteras innan de skickas ut.
</div>

==== Kart-tiles ====
Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa komibineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

==== Att ange datakälla ====
Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla den behövlig kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

<div class="well well-warning">
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
</div>

==== Koppla data till vy ====
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet <code>addTo</code>. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde <code>map</code>-metoden. Det vill säga det objekt som innehåller information om vår kartvy.

== Vår första karta ==
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!

== Kombination av våra geografiska exempel ==
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:
<codepen pen="pgeWKx" tab="js,result" height="1300">
</codepen>

Det finns väl inte mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att visa upp koordinatvärdena så drar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

== Nästa aktivitet ==
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.

[[Att lägga till extra data med Leaflet]]

Att komma igång med Leaflet

2021-10-23T10:30:31Z

PGJ:

Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.

== Att lägga till Leaflet ==
Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.

<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</syntaxhighlight>

Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.

<syntaxhighlight lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</syntaxhighlight>

Med dessa två rader på plats kan vi skapa ett exempel.

== Leaflet-exempel ==
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

<codepen pen="adJmEj" tab="js,result" height="600">
</codepen>

(Som vanligt, kom ihåg att även titta på "Result"-fliken.)

Låt oss gå igenom exempelet och se vad de olika delarna gör för något.

=== HTML ===
I HTML-koden började vi med att lägga till CDN-hämtningarna som föreser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

=== CSS ===
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att <code>div</code>:en är helt tom och därmed får sin höjd satt till <code>0</code>.

=== JavaScript ===
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.

==== Initiering av Leaflet ====
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet (detta går att jämföra med hur jQuery registrerar sig i <code>$</code>).

<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.

==== Inställningar för datakälla ====
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

<div class="well well-warning">

==== HTTPS eller ej ====
Det är diskutabelt huruvida kartdatan verkligen kan vara integritetskränkande och behövs hålla hemlig, men vi kommer ändå att hämta materialet via HTTPS. Främst för att detta kommer att undvika att vi får de "mixed content"-varningar som uppstår när man blandar HTTP- och HTTPS-objekt i en och samma sida. Att inte kryptera kartdatat skulle vara marginellt snabbare, men det är nog ingenting man behöver bry sig i, speciellt inte på klientsidan. På servern kommer det självklart att bli något högre last när alla kartsegment måste krypteras innan de skickas ut.
</div>

==== Kart-tiles ====
Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa komibineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

==== Att ange datakälla ====
Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla den behövlig kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

<div class="well well-warning">
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
</div>

==== Koppla data till vy ====
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet <code>addTo</code>. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde <code>map</code>-metoden. Det vill säga det objekt som innehåller information om vår kartvy.

== Vår första karta ==
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!

== Kombination av våra geografiska exempel ==
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:

<codepen pen="pgeWKx" tab="js,result" height="1300">
</codepen>

Det finns väl inte mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att visa upp koordinatvärdena så drar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

== Nästa aktivitet ==
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.

[[Att lägga till extra data med Leaflet]]

Att ta reda på var någon befinner sig

2021-10-23T10:28:46Z

PGJ:

Innan vi tar oss an att visa upp saker på en karta, ska vi börja med att se hur man kan läsa ut var användaren befinner sig. I HTML5 finns ett geolokations-API som gör så man kan läsa ut positionsdata. Noggrannheten kan skilja sig lite åt, beroende på om applikationen körs på en enhet som har GPS eller ej.
== Begränsningar ==
<div class="well well-warning">
Eftersom det kan vara integritetskränkande att spåra människor, kommer webbläsaren att be om användarens godkännande innan den levererar positionskoordinater till en applikation. Tackar användaren nej, kommer funktionsanropet att misslyckas. Det finns en speciell felkod som används när detta inträffar.

De flesta webbläsare tillåter inte positionsspårning via [[HTTP]]. I dessa fall är denna funktionalitet enbart tillgänglig för script som hämtats via [[HTTPS]]. Försök att alltid använda dig av HTTPS för applikationer som behöver ta del av platsinformation. Överföringsmetoden kan alltså förorsaka att funktionsanrop till geolokations-API:et fallerar.

När man använder platsinformation, kan det även spela roll var scriptet ligger. I de flesta fall tillåter inte webbläsarna att man anropar script som ligger på en annan domän. Exemplen här på Webbling går oftast inte att köra utan att följa länken till CodePen. Det beror på att webbläsarna inte tillåter att scriptet och webbsidan ligger på olika domänen.

Det kan alltså vara en bra idé att ha kod som hanterar situationer där tillgång till positionsinformationen nekas. Överhuvudtaget ska man förstås ''alltid'' ha robust felhantering i sina applikationer.
</div>

== Exempel ==
För att komma igång, så kör vi ett exempel på en enkel platsförfrågan (det kan vara som så att du måste följa länken "Edit on CodePen" för att exemplet ska fungera fullt ut):
<codepen pen="vLxLZw" tab="js,result" height="1050">
</codepen>

=== Genomgång av kodexemplet ===
==== Finns API:et? ====
Koden börjar med att det kolla om API:et är tillgängligt i användarens webbläsare. Om så inte är fallet så visar vi ett felmeddelande. Det kan alltid vara en bra idé att kolla så att de API:er vi tänker använda oss av är tillgängliga.

<div class="well well-warning">
Det finns många orsaker till att ett API skulle kunna saknas. Användaren kanske har en gammal webbläsare eller kanske kör denne en specialanpassad webbläsare – t.ex. någon typ av [[screenreader]]. Försök att hantera avsaknaden av API:er och eventuella fel så smidigt som möjligt. Om du fortfarande kan erbjuda användaren vettig information och viss funktionalitet, se till att göra det.
</div>

==== Begär positionsangivelse ====
Om API:et är tillgängligt så kallar vi på en av dess metoder; <code>geolocation.getCurrentPosition</code>. Om denna hittar positionen, körs <code>VisaPosition</code>. I annat fall har något gått fel och den kör istället <code>Felhanterare</code>.

Det finns några till API-anrop som går att göra med <code>geolocation</code>. Dessa används när man vill ha kontinuerlig uppdatering av användarens position. Vi återkommer till dem i slutet av aktiviteten.

<div class="well well-meadow">
Det kan vara intressant att veta att <code>getCurrentPosition</code> är en asynkron funktion. Vår kod kommer alltså att fortsätta ”direkt”, utan att vänta på ett resultat. På grund av detta skickar man med så kallade [[callback]]-funktioner. Dessa utförs när <code>getCurrentPosition</code> har något att rapportera. Se [[Introduktion till asynkron programmering]] för mer information.
</div>

==== <code>VisaPosition</code> ====
Funktionen <code>VisaPosition</code> hanterar avklarade positionsförfrågningar. Som inparameter får vi ett objekt som innehåller resultatet ifrån positionsförfrågningen.

===== Positionsobjekt =====
Objektet innehåller följande data:

{| class="wikitable"
! Variabelnamn
! Förklaring
|-
|<code>latitude</code>
|Latitud
|-
|<code>longitude</code>
|Longitud
|-
|<code>altitude</code>
|Höjd över havet eller <code>null</code>
|-
|<code>accuracy</code>
|Mätningens noggranhet i meter
|-
|<code>altitudeAccuracy</code>
|Höjdmätningens noggranhet i meter eller <code>null</code>
|-
|<code>heading</code>
|Färdriktning
|-
|<code>speed</code>
|Hastighet
|}

Om höjden inte kan bestämmas så sätts både <code>altitude</code> och <code>altitudeAccuracy</code> till <code>null</code>. Det samma gäller för <code>heading</code> och <code>speed</code>. Dessa värden är oftast bara tillgängliga om applikationen körs på en enhet som har en GPS-mottagare – som en telefon eller surfplatta.

Om ovanstående data är tillgängliga så kan man alltså läsa ut i vilken riktning som användaren förflyttar sig med hjälp av <code>heading</code>. Detta värde anges i antal grader motsols räknat från norr. Det innebär att <code>0</code> är rakt mot norr och <code>180</code> är rakt söder ut. Om vi kan läsa ut <code>speed</code> så är detta användarens hastighet mätt i m/s. Om enheten inte är i rörelse så är detta värde satt till <code>0</code>.

==== <code>Felhantering</code> ====
Felhanteringen är rätt så enkel och basal. Det finns ett antal fördefinierade felkoder som vi jämför med och kollar om någon matchar det fel vi fick. Om ingen matchar körs <code>default</code>.

I en verklig app, hade vi antagligen gjort mycket mer om saker gått åt pipan. Men här räcker det med detta lilla.

== Kontinuerlig uppdatering av positionen ==
Förutom <code>getCurrentPosition</code> finns det ett par andra metoder att tillgå i <code>geolocation</code>. Dessa används när man vill ha kontinuerliga uppdateringar av användarens position.
=== <code>watchPosition</code> ===
<code>watchPosition</code> fungerar i stort sett som <code>getCurrentPosition</code>, med den skillnaden att den fortsätter att uppdatera positionen kontinuerligt.

<syntaxhighlight lang="JavaScript">
let id = geolocation.watchPosition( <lyckad>, <fel> );
</syntaxhighlight>

Varje gång en position läses in körs callback-funktionerna. Om allt går väl och en position erhålles, körs funktionen <code>''lyckad''</code>. Vid eventuellt fel så körs <code>''fel''</code>. Båda funktionerna kan alltså anropas upprepade gånger.

<code>id</code> används för att kunna slå av positionskontrollen.

=== <code>clearWatch</code> ===
När man inte längre vill att positionen ska uppdateras automatiskt slår man av den med <code>clearWatch</code>. Denna används enligt följande mall:

<syntaxhighlight lang="JavaScript">
geolocation.clearWatch( id );
</syntaxhighlight>

Detta slår av den positionskontroll som identifieras av <code>id</code>.

== Nästa aktivitet ==
Nu har vi lite kunskap om hur man kan hantera GPS-liknande funktionalitet i webbläsaren. Nu ska vi se om vi kan få ut dessa data på en karta.

[[Att visa upp en karta]]

Screenreader

2021-10-23T10:19:48Z

PGJ: Skapade sidan med 'En screenreader är en typ av webbläsare som främst används av synskadade. Den läser upp webbsidan, så att det går att surfa även om man inte kan se innehållet på sid...'

En screenreader är en typ av webbläsare som främst används av synskadade. Den läser upp webbsidan, så att det går att surfa även om man inte kan se innehållet på sidan.

Screenreaders läser inte upp hela sidan rakt av. Istället försöker den läsa de relevanta bitarna och låter därefter användaren bestämma vilka delar av sidan som ska läsas upp härnäst. Det gör det snabbare och effektivare att komma åt det innehåll som lockar.

Det är viktigt att sidan har en korrekt struktur och att alla taggar används på ett korrekt semantiskt vis. Alla bilder ska ha <code>alt</code>-taggar så att inte viktig information går förlorad. Att göra sina sidor tillgängliga för alla är ett viktigt jobb. I olika typer av verksamhet, kommunala och statliga, krävs att sidorna ska vara tillgängliga.

Installera gärna en screenreader på din dator så att du kan testa dina sidor med denna. Här är en vanligt förekommande screenreader du kan testa: [https://www.freedomscientific.com/products/software/jaws/ Jaws - Job Access With Speech]

Här är några exempel på hur en screenreader används:
* [https://www.youtube.com/watch?v=dEbl5jvLKGQ Screen Reader Demo for Digital Accessibility]
* [https://www.youtube.com/watch?v=7Rs3YpsnfoILink Using a Screen Reader]
* [https://www.youtube.com/watch?v=q_ATY9gimOM Screen Reader Demo]

En exempelapplikation i Leaflet

2021-10-23T09:59:18Z

PGJ:

Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

<div class="well well-warning">
Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.
</div>

== En grund att stå på ==
Vi börjar med att skapa en grundstruktur för vår sida.

=== HTML ===
Det viktigaste vi behöver göra i HTML:en är att lägga till [[jQuery]] och [[Leaflet]], då vi kommer att behöva dessa för vår app. HTML:en kan då bli att se ut så här:
<codepen pen="xZqpXz" tab="html" height="500">
</codepen>

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

=== CSS ===
Vi lägger även till basal CSS:
<codepen pen="xZqpXz" tab="css,result" height="500">
</codepen>

I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx | h1]]</code> ska vara centrerad.

Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av den skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

== Lägga till en karta på prov ==
För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör samma kod som i vårt tidigare exempel där vi visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock koordinaterna så att kartan kommer att centreras kring Örebro.

Koden blir att se ut så här:
<codepen pen="Qypaxd" tab="js,result" height="500">
</codepen>

Resultatet ser ju helt acceptabelt ut och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

== Första försök med att läsa in data ==
För att gå vidare behöver vi koppla data till vår karta.

<div class="well well-meadow">
Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
</div>

=== Experimentdata ===
Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

<syntaxhighlight lang="javascript">
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.253840371567572,
59.277180434995095
]
},
"properties":{
"title":"Alnängsbadet",
"description":"",
"url":"http://www.orebro.se/3089.html",
"rel":"http://karta2.orebro.se/api/v1/information/1"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
15.74236626384993,
59.1363775662748
]
},
"properties":{
"title":"Dimbobaden",
"description":"",
"url":"http://www.orebro.se/3090.html",
"rel":"http://karta2.orebro.se/api/v1/information/2"
}
}
]
}
</syntaxhighlight>

Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

=== Leaflet och GeoJSON ===
Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
<codepen pen="LGWrjY" tab="js,result" height="1500">
</codepen>

==== <code>geoJson()</code> ====
Den nya koden är alltså den där vi skapar ett <code>geoLayer</code>. Detta kommer att bli ett lager som ligger ovanpå vår karta och som visar information som läses utifrån vår GeoJSON-data. Lagret skapas av metoden <code>L.geoJson()</code>. Vi ska titta närmare på hur denna fungerar.

Som första inparameter tar <code>geoJson</code>-metoden antingen en enda post formaterad i GeoJSON eller en array med flera poster. I vårt fall har vi en array med GeoJSON-data, så vi skickar med den, dvs <code>geoData.features</code>.

Som andra parameter skickar man med en lista som innehåller de stilparametrar som ska gälla för vår GeoJSON-data. Detta kan vara en lista med egenskaper som används för all data. Det kan även vara ett objekt som innehåller metoder som körs för att sätta specifik data för varje GeoJSON-objekt. I vårt fall har vi valt att skicka med metoder. Vi skulle även kunna lägga till stildata i objektet om vi ville det. Vi har valt att koppla en funktion till <code>onEachFeature</code>. Denna funktion kommer att köras en gång för varje punkt som ingår i vår data.

==== <code>onEachFeature</code> ====
Den funktion vi skickar till <code>onEachFeature</code> tar två inparametrar. Den första är nuvarande geografiska data som behandlas. I vårt fall är det en intressepunkt. Den andra parametern anger vilket lager som denna "feature" ska läggas till i. I vårt fall binder vi en popup till varje datapunkt, popup-texten kommer att vara namnet på intressepunkten.

Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

== Att läsa in data från en datakälla ==
Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
<codepen pen="qbrxBw" tab="js,result" height="1050">
</codepen>

Det som är nytt är främst <code>hämtaIPLista</code>. Denna kommer att läsa ut en lista som innehåller Örebros badplatser. När datan är hämtad kommer funktionen <code>AjaxKlar</code> att köras. Som inparameter får denna den data som lästs in. Denna data kan vi skicka in direkt i <code>geoJson</code>, då den är precis lik den testdata som vi använde tidigare. Det är inget nytt i hur denna bit hanteras, koden är bara flyttad till en annan plats i programfilen.

== Appen på riktigt ==
Om du vill se hur man skulle lagt upp appen på riktigt, det vill säga som fristående webbapplikation och inte som demo i Codepen, kan du gå till [http://exempel.webbling.se/Leaflet http://exempel.webbling.se/Leaflet].

Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

== Avslutning ==
Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

== Nästa aktivitet ==
Vi ska gå igenom hur man skapar en till liten SPA.

[[Ännu en SPA med Leaflet]]

[[Category: jQuery]]
[[Category: JavaScript]]