Grundläggande kunskap kring uppbyggnad av en hemsida.

Permalänk
Medlem

Grundläggande kunskap kring uppbyggnad av en hemsida.

Hej!

Jag håller just nu på att lära mig lite webbutveckling, väldigt grundläggande än så länge. Har lärt mig lite HTML, CSS och lite JavaScript. Ska så småningom försöka lära mig lite mer kring serverhantering (heter det ens så?), några ramverk till JavaScript (React, Node) och annat som kan bli relevant.

Just nu vill jag försöka gå händelserna lite i förväg och skulle gärna vilja höra med er om ni har en guide eller youtube-klipp som går igenom hur en hemsidas funktioner och backend fungerar. Till exempel, vad händer när man klickar på en länk på en hemsida. Eller vad händer när man är inne på pricerunner och den visar massa olika produkter och deras priser (hur jämför den från alla sidor samtidigt?) Eller vad händer när man är inne på amazon och trycker på en produkt man vill köpa så den länken öppnas upp? Vilka processer är det som pågår? När hämtas info från databaser? När är API:er relevanta?

Förstår att frågan är konstig, och då jag inte har kunskapen själv så kanske vissa saker jag säger är helt tokiga då det kanske inte ens är sammankopplat så som jag beskriver. Men skulle som sagt gärna höra om någon har en guide eller pedagogiskt klipp över hur det funkar

Stort tack på förhand.

Permalänk
Medlem

Vad för typ av hemsida är det du är ute efter i jämförelsen?

Väldigt många mindre hemsidor (för företag, organisationer etc) är idag baserade på WordPress. Det är inget krav, men om det finns ett behov av dynamiskt uppdaterat innehåll är det oftast en bra grund att bygga vidare på. Det är sällsynt att man kodar egna sidor från scratch utan WP som bas. Vanligare är i så fall att man kör WordPress med olika ramverk, t.ex. Genesis, som ger en lite annan inriktning.

Om vi talar pricerunner och liknande så är det ju lite mer avancerade sidor. Jämförelsen sker genom att butikerna listar sina varor och synkar prisinfo m.m. via pricerunners API. Samma sak för prisjakt och liknande tjänster. Det finns även ett annat sätt att lista information från externa sidor, som enkelt uttryckt kan kallas crawling eller scraping. Men det är inte lika vanligt av flera orsaker: det belastar sidorna som informationen hämtas från och kan ofta leda till problem med copyright etc.

Info från databaser kan hämtas vid flera tillfällen, förutsatt att innehållet som visas på sidan du öppnat inte är helt statiskt utan består av (i varje fall delvis) dynamiskt innehåll. Om vi tar exemplet med Amazon så hämtas innehållet om produkten när du klickar på länken. Sedan finns det en koppling till databasen i alla alternativ och val du kan göra på produktsidan. En databas växer sig snabbt stor och är inte sällan ganska komplex, framförallt på en så pass stor webbplats som Amazon där det listas oerhört många produkter. Då talar vi om flera databaser som är sammanlänkade med varandra.

Permalänk
Medlem

Kan rekommendera Pluralsight, kostar pengar men om du gillar video tutorials framför text så har de bra kurser.
Annars kan du köpa en bok, beror väl på vilken stack du vill lära dig om. Du har t.ex. C# .NET MVC böcker för Microsoft, Java böcker, NodeJS böcker, Php böcker osv.

Kortfattat så skickar clienten en request till en server då du trycker på en länk.
Vi kan kika på blocket som ett exempel, klickar du på Stockholm så får du en URL som denna: /stockholm?ca=11

Då skickas det en GET request till servern med urlen /stockholm där det läggs på en query-string för ca som ska vara 11, detta vet jag dock inte exakt vad det betyder i detta fall, kan vara alla "catogeries all" eller någon liknande förkortning och 11 är förmodligen ett ID som mappas mot annonser i en databas.

Servern har då en metod som mappar till /stockholm och tar emot query parametern.
Denna query körs sedan mot en databas och skickar tillbaka datan till clienten, som sedan visar datan på hemsidan.
Detta är då en sk. databasdriven hemsida, här jobbar man oftast med templates vilket gör att samma adress för olika personer kan se olika ut.
Loggar du t.ex. in på dina sidor så är den sidan datamässigt unik för dig, men själva overall designen ser likadan ut för alla.

Som ovan nämner så står Wordpress för ca 24% av alla hemsidor. Detta fungerar jätte bra för mindre företag och organisationer, men har du mer krav på prestanda och logik så håller det inte med Wordpress. Ibland behöver man göra interna system eller specifika applikationer, då fungerar det inte med Wordpress och kanske inte äns finns ett behov av CMS i det fallet.

Ett API brukar vara en tjänst som returera JSON eller XML data. APIer används ofta då du har flera applikationer som behöver komma åt samma data.
En mobilapplikation, desktopapplikation och hemsida fungerar inte likadant, men alla kan använda sig av samma API för att logga in användare eller hämta data. APIer används också främst till SPA då du arbetar med React / Vue eller Angular. I detta fall returerar din server data i form av JSON-objekt och du har dina templates (mallar) på clienten istället (virtual dom) för att servern skickar ett helt block med HTML markup.