# Første fase - Orientering **Publisert:** 29. April 2025 **Sist endret:** 30. April 2025 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sprout-icon lucide-sprout"><path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z"/></svg> #spire ## Hva er dette? Jeg ønsker å utvikle meg innenfor egen webkompetanse og har utarbeidet en læresti sammen med ChatGPT og som er tilpasset egne behov, mål og hva jeg allerede kan. Dette er første fase. ## Hva skal jeg lære? I denne første fasen hvor jeg ønsker å utvikle egen webkompetanse skal jeg fokusere på orientering. Her er målet å forstå "terrenget" før jeg skal begynne å bygge noe som helst. Her skal jeg lære hva internettet egentlig er, forstå servere, klienter, hosting, hva et domene er og DNS, HTTP/S er. Jeg skal også lære meg forskjellen på statiske og dynamiske nettsider. ## Læresti ### Steg 1 **Hvordan funker egentlig internettet?** Her skal jeg se en video som er tilpasset mine lærebehov og den lærestien jeg er på. Den er konkret og tydelig. <iframe width="560" height="315" src="https://www.youtube.com/embed/7_LPdttKXPc?si=McPK9IR-5rNqaljA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> Målet er ikke å memorere, men å forstå flyten av informasjon på nett. - Hvem er det som *spør* om informasjon? (Klienten, nettleser) - Hvem *responderer* på forespørselen? (Serveren, den som hoster siden) - Hvilke systemer er involvert i midten? (DNS, IP adresser) - Hva er HTTP? (Språket for forespørsler og svar) Når jeg har sett videoen så skal jeg lage mitt første artefakt på denne lærestien, et flyt diagram for nettforespørsler. ![[Pasted image 20250429112648.png]] Her er resultatet. Jeg var usikker på HTTP siden dette ikke var nevnt i videoen, men HTTP er i hovedsak språket som brukes når nettleseren spør serveren etter informasjon, og det språket serveren leverer informasjon på. Dette vil jeg prøve å forstå dypere. Jeg var også usikker på hvor jeg skulle plassere DNS request, men det er det første som skjer under en nettforespørsel, DNS lurer på "Hva er adressen?" som da føres videre med HTTP request. Tror jeg. Her er en forenklet versjon: 1. Nettleser ønsker å besøke eksempel.no 2. Nettleser spør: "Hva er IP adressen til eksempel.no?" (DNS lookup) 3. DNS responderer: "Det er 11.22.33.4" 4. Nettleser sender en HTTP request til 11.22.33.4 5. Forespørselen reiser igjennom ISP (Internet Service Provider, usikker hva dette er på norsk) og rutere. 6. Server mottar HTTP request og sender HTTP response tilbake. 7. Nettleser viser deg hjemmesiden. ### Steg 2 **Hva er forskjellen på en statisk vs. dynamisk nettside?** Når jeg ser på denne videoen så skal jeg legge merke til: - Hvordan leverer de to ulike nettsidene informasjonen til brukerne sine? - I hvilke scenarioer bør man bruke statisk, og hvor bør man bruke dynamiske hjemmesider? - Hvordan påvirkes vedlikehold og evnen til å skalere avhengig av de to ulike typene? <iframe width="560" height="315" src="https://www.youtube.com/embed/qSz7SDCR9e4?si=bFgvK2Q2HstmIYE1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> #### Notater fra videoen: **Statisk:** - Ren HTML og CSS, flat page - Ingen interactivity annet enn linker og grafiske bilder - Det som er på siden, vil vises til alle brukere som besøker - Blog - forum - newsletters - landing pages? - Kan lages veldig raskt - lav kost - mindre sjanse for å feile - vanskeligere å oppdatere - mange sider - ingen admin - lite innhold **Dynamisk:** - Spesifikk informasjon til hver bruker. - Siden lages når det blir sendt en forespørsel til serveren - Nettbutikker, sosiale medier - Her brukes det mer script. - Bruker både scripting på server siden og klientens sider, nettleser - Fordeler: laget med høykvalitets koding - Enkel å opprettholde og vedlikeholde - Gir brukeren interaktivitet på siden. - Tar lengre tid å lage og koster mer å hoste. - Vanskelig å lage #### Artefakt Statiske nettsider og dynamiske nettsider har begge sine fordeler og ulemper. En statisk side er enkel å sette opp siden den kun bruker HTML og CSS, og evt. enkel scripting. Dette gjør også at den er både enklere å billigere å hoste siden den samme siden leveres til alle brukerne. Siden alt kodes direkte på siden er det mindre sjanse for at siden plutselig feiler. Ulempene med statiske nettsider er at det tar lengre tid med vedlikehold og oppdatering av innhold siden alt skrives inn for hånd. Dette gjør at det kan være mer krevende å skalere en slik side. Det er også lite til ingen interaktivitet for brukeren. Det som er på siden er der. Dynamiske derimot har sin styrke i nettopp dette med interaktivitet. Her lages sidene på forespørsel fra bruker og leverer derfor en versjon av siden som er spesialdesignet til dem. Nettbutikker og sosiale medier er gode eksempler på dynamiske nettsider. Det tar lengre tid å sette opp en dynamisk nettside da det krever mye spesialisert koding og script som ikke bare skal være på serverens side, men også hos brukerens nettleser. Dette gjør også at det er dyrere å hoste disse sidene. Men når alt arbeidet derimot er gjort så er dette sider som er enklere å skalere og enklere å vedlikeholde siden grunnarbeidet allerede er gjort. ### Steg 3 **Hva er Git og Github?** For å få et overblikk over Git og Github skal jeg se denne videoen fra freeCodeCamp.org Her skal jeg se den aller første delen, frem til ca. *06:50* Når jeg ser denne videoen skal jeg fokusere på: - Hva er Git, og hvilket problem er det det løser? - Hva er det GitHub bringer til Git? - Hvordan vil det hjelpe meg å bruke Git, i forhold til dette med digital hage og andre statiske nettside prosjekter? - Hva er standard begrepene jeg må kjenne til? (repository, commit, push, etc.) Målet er å få en forståelse for hva Git egentlig *er.* <iframe width="560" height="315" src="https://www.youtube.com/embed/RGOj5yH7evk?si=q8TInHZv4q5MVdPW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> #### Notater Versjon kontroll system? Free and open source Dette er en slags loggbok for koding vi har gjort tidligere. Hver gang noe endres så lagres det som en Git? Som da lagres lag på lag. På denne måten kan vi gå tilbake for å finne tidligere versjoner, eller tidligere bugs. Directory = Mappe Terminal, command line = Hvor man skriver inn tekst kommandoer for å lagre filer, lage mapper, installere og kjøre programmer etc. CLI = Command Line Interface (Minecraft) Repository = Prosjekt, eller mappa hvor prosjektet hører hjemme. Github = En online lagringsplass for Git som også gjør det enklere å dele egne Git's og samarbeide med andre. Git kommandoer: Clone = Laste ned et repository som er hosted et annet sted, (som Github) til egen lokal maskin. add = Du ber Git om å følge filene og de endringene du gjør i Git commit = lagre endringene du har gjort i Git push = Laste opp Git commits til remote repo, som Github. pull = Istedenfor å laste opp, så laster du ned endringer fra remote repo, ned på din lokale maskin. Det motsatte av push. #### Artefakt Git er en slags loggbok som logger når du gjør endringer ved koding og filer. Hver gang noe endres så lagres det som en Git, som da lagres lag på lag. På denne måten kan vi gå tilbake for å finne tidligere versjoner om noe skulle gå galt i mellomtiden, eller prøve å finne tidligere bugs. Github er et slags hjem for Git. Det er en online lagringsplass, noe som gjør det enkelt å dele prosjekter med andre, eller samarbeide om ulike prosjekter. Dette kan også være en fin plass å lage en portefølje av egne prosjekter til fremtidig jobbsøking. Jeg vet at Github er noe som ofte brukes sammen med digitale hager, spesielt når det er snakk om open source løsninger som [[Quartz]] og Digitalgarden plug-in til Obsidian. Så jeg tenker at det er der min side kan passe inn med Github. ### Steg 4 **Selvhoste, self-hosting. Hva betyr det?** Her skal jeg se en kort video, mens jeg har disse spørsmålene med i tankene. - Hva er self-hosting når det kommer til webtjenester? - Hva er fordelene med self-hosting for mitt eget bruk, enten egne apper eller tjenester. - Hvilket ansvar og potensielle utfordringer kan jeg støte på med self-hosting? - Og hva er noen eksempler på typiske apper og servicer som mange velger å self-hoste? <iframe width="560" height="315" src="https://www.youtube.com/embed/4tiNUaeAM1w?si=WrpnSR3FazyAgWBv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> Umiddelbare tanker før jeg har sett videoen er at denne videoen er laget av NordVPN. Dette er en bedrift med et produkt som jeg tidligere har prøvd ut og ikke er veldig imponert over. Jeg ser også at de få kommentarene som er på denne videoen ikke er av de mest positive og videoen har like engasjement i forhold til likes. Dette gjør meg litt mer skeptisk til videoen, men jeg skal se den og se om jeg får svar på spørsmålene over. Bakgrunnsmusikken er veldig høy, dette kan være hvorfor folk ikke ser selve videoen ferdig. Hva er self-hosting? All data er i dine hender, og du er ansvarlig for alt. Home assistant. Jellyfin for media. Nextcloud Penpot Hva er self-hosting? Du hoster