Webb1 - Presentation
+Webbutveckling 1
Presentation
@@ -44,7 +52,7 @@
+ 
Arbetsprocessen
-
-
- Arbetade i GNU/Linux, Debian 12 - Bookworm. -
- Började skriva i emacs. -
- Utgick från exempel i på w3schools.com. -
- Installerade eclipse med webbtillägg för att skriva koden med syntax highlighting. -
- Skapade favikoner i gimp och inkscape. -
- Skapade porträtt i gimp, plockade bakgrundfärgen med den digitala pupletten. -
- Öppnade min Forgejo server och skapade git projektet, sedan skickade jag upp projektet här. -
- Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid. +
- Arbetade i GNU/Linux, Debian 12 - Bookworm. +
- Började skriva i emacs. +
- Utgick från exempel i på w3schools.com. +
- Installerade eclipse med webbtillägg för att skriva koden med syntax highlighting. +
- Skapade favikoner i gimp och inkscape. +
- Skapade porträtt i gimp, plockade bakgrundfärgen med den digitala pupletten. +
- Öppnade min Forgejo server och skapade git projektet, sedan skickade jag upp projektet här. +
- Arbetade hårt med layouten, provade gammal tabell, float, flexbox och landade på css grid.
- Stajlade texterna med fonter, färger och effekter.
Webbutveckling 1
+Internets historia & samhällspåverkan
+Från röksignaler högt över träden, till telegrafkablar längs med järnvägen och genom havet atlanten, det första telefonsamtalet, radiosändningar genom fredstider, landar vi nu i tumultet och oron kring krigstiderna i mitten av 1900-talet. Mekaniska miniräknare ersätts av elektronrör och sedan transistorer. Det är här vi finner datorer så pass små att det kan finnas mer än en handfull i världen. Kommunikationsprotokoll och system utvecklas för interkommunikation mellan datorcentralerna, däribland Arpanet vår föregångare till vad vi idag kallar internet.
+Värt att nämna är att det fanns en arbetsroll som kallades computer, det var duktiga matematiker som arbetade i stora kontorslokaler som fick in information och genomförde beräkningar som de skickade tillbaka till beställarna. Detta användes bl.a av NASA innan digitala varianter ersatte dem.
+
Vi snabbspolar fram ett par decennier och datorer blev miniatyrer av sina föregångare. De blev så smarta, billiga och lättanvända att gemene man kunde ta ett lån på banken och införskaffa ett paket med en mikrodator med tillbehör såsom manualer, mjukvara och joystick. Vi är nu i 80-talet och musen var inte standardiserad än. Vilket var rimligt då många möttes av en terminal när datorn startat upp, inte ett attraherande grafiskt gränssnitt. Kasettband byttes på skolgårdar, affärsmän bar runt på plastiga disketter i kavajen, personsökare i skärpet och i vissa fall en mobil telefon i bilen. Notera särskrivningen.
Under denna tid blev datorn någonting folk kände till och många hade en i hemmet. Marknadsförd som läxhjälp för unga, receptbok för hemmafruar och mannen i huset kunde hämta hem dagens börssiffror eller skriva sin nästa bok. Här började det bli vanligt att de familjer som hade båda dator och telefonabonnemang även införskaffade en liten skrikande låda, vars uppgift var att ringa upp andra datorer eller datorcentraler för att utbyta information. Detta skedde genom telefonlinan via signalmodulering, en samling klick, tjut och brus som datorerna tolkade som ettor och nollor enligt diverse protokoll.
+Internet under denna tid var utformat som en “hämta-hem”-modell. Om du körde ett program som visade dig de senaste börssiffrorna, så öppnade datorn ett samtal, ofta direkt till en serverdator i andra änden, som i sin tur besvarade förfrågan med blippande och bloppande. Sedan läggs samtalet automatiskt på och siffrorna visas på skärmen. Det fanns även BBS:er, Bulletin Board System. System som påminner om dagens chatsystem eller forum. Där användare kan koppla upp sig och hänga kvar. Detta orsakade enorma telefonräkningar.
+Många arbeten förändrades. Böcker och nyheter skrevs inte längre i huvudsak på plignande skrivmaskiner, utan nu använder datorterminaler som i vissa fall gav användarna solbränna från strålningen. Ett exempel kan ses i 90-talets Lois and Clark, Stålmannen. Fiktivt, men inspirerat av verkligheten några år tidigare. Information spreds nu även genom datorsystem över hela världen.
+Genom 90-talet såg vi många innovationer, så som laptops, mobiltelefoner, handdatorer och framförallt relevant för oss, Windows 95 och Internet Explorer. Ja det fanns såklart andra system såsom Netscape, föregångare till Mozilla Firefox, men vi håller och till det allmänna.
+Nu kunde vanligt folk förstå datorerna, knuffa runt en plastklump innehållande en kula för att förflytta en ikon på skärmen, tryck ner knappen på klumpen för att klicka. Internet gick i folkmun, och Internet Explorer följde med Windows 95. Många som köpte dator med Microsoft Windows 95, köpte även till ett Internet abonnemang med modem. Abonnemaget och modemet var nu anpassat för att minska telefonräkningarna lite grann, då telefonbolaget nu hade en mellanhandsserver för att komma åt resten av världen. Barn och vuxna världen över vande sig vid att läsa nyheter eller söka på bilder efter kl.19 på kvällen, då det var billigare. Internet var inte längre specialanpassade gränssnitt för specifika datorer, nu fanns det HTML, Hypertext Markup Language, ett språk som webbläsaren Internet Explorer, med flera, tolkar om till en layout med text och bild på din skärm. En del element var klickbara och länkade vidare till andra platser på cyberspace, såkallade hyperlänkar.
+I början av 2000-talet pratar gubbar på TV om det nya webben 2.0, där det inte längre är du som måste anstränga dig för att hitta informationen. Rollerna är ombytta och informationen letar efter dig. Detta handlar till stor del om marknadsföring såklart, men även och hur sökmotorer visar dig relevanta resultat baserat för så många kriterier som möjligt. Cookies, som bl.a kan användas till spårning är nu standard och sökmotorerna älskar att läsa dem och luska ut vad du har för intressen.
+Den vida ethern används nu för att vara social med sina vänner, lämna in läxor och film börjar spridas. Epost, något som funnits med i flera former sedan internets begynnelse är nu standardsättet vi kommunicerar digitalt i världen. Gränsen mellan handdatorer och telefoner försvinner och de är nu såpass smarta att de kan skicka text, bild och ringa videosamtal.
+
En speciell typ av webben utvecklades för dessa smarta telefoner kallas för WAP, Wireless Application Protocol. Det går nu utan problem att läsa optimerad variant av Expressen.se på bussen med en 3 tum stor färgskärm.
+ Smarta telefoners skärmar blev större, lagringskapacitet ökade, touch system gick från resistiv (nagel/penna) till capacitiv (finger). Tillverkare provade olika nischar för sina telefoner. Nokia gick samman med kamera-tillverkare och skapade bra kameratelefoner samt en speltelefon. Eriksson och Sony gick samman och skapade media-orienterade telefoner. Diverse lösningar för tangentbord provades. En gemensam standard växte fram. En gemensam uppsättning funktioner och egenskaper till grund för kommande telefoner. Program för dessa maskiner kallas nu för appar.
+ Apple låg inte och sov, de såg var marknaden var påväg och skyndade sig att släppa en Ipod touch med modem, telefoni och SMS-funktion. Många funktioner saknades. Enorma belopp spenderades på marknadsföring under flera år, och efter att de kommit ikapp resten av marknaden i funktioner, så blev Apple Iphone 4 en folktelefon och standarden för smarta telefoner.
Webben för personen på språng, eller lounge’ande på soffan har för länge sedan glömt WAP och kör nu internet i sin fulla glory. Många hemsidor bråttas med interoperabiliteten mellan olika skärmstorlekar och orienteringar samt inputsystem mellan mobil och desktop. Hipsters försöker använda typsnitt som “ser bra ut på min dator”, men då de fattas i många andra maskiner, ser kontiga ut.
+Telefonoperatörer säljer tilläggstjänster såsom 30-dagar fria meddelanden i Microsoft’s chatt program, [MSN, Windows Live, Live!] Messenger, inte Meta/Facebook Messenger.
+
+ Skolor förbjuder telefoner i klassrummen. Internet, telefoner och den digitala världen blir problem för unga. Nätmobbning blir ett nytt område för oss att hantera.
+Mot slutet av 2000-talet så ser vi standardiseringen av ett nytt format för att konsumera internet och media, surfplattan. En produkt som långsamt utvecklats i bakgrunden med ånga namn, UMPC, ultra portabel PC, tablet, slate osv. I många fall bantade datorer som kör Unix, Dos, Windows eller liknande för specifika ändamål, en del av dem utan tangentbord.
+Utvecklingen av denna enhet mellan en desktop/laptop och en smart telefon har landat på en standard. En stor touch-skärm, som imiterar den smarta telefonen’s gränssnitt. Nu släpper Apple sin variant, Apple Ipad och många andra tillverkare har sina varianter som kör ett linux 2.6-baserat system från google som blir allt mer populärt, Android. Inte GNU/Linux, det finns inget eller ytterst lite GNU-mjukvara, Android använder Linux kernel.
+Webbutvecklare har skäggstubb, pappamage och går med solglasögon inomhus för att dölja sina röda ögon, i kavajen har de burken med magsårspiller och en halvfull fickplunta med vuxensaft. När vi byter decennium så standardiseras nya HTML5. Adobe Flash, tidigare shockwave osv, förklaras som döende och animationer kan nu skrivas direkt i webbkoden. Video skall standardiseras med bara ett fåtal webbläsare stödjer de nya funktionerna. Allt är i luften, skrivbord välts, folk flyr, nu har vi för många hårdvarukrav-, skärm- och input-system (alltså plattformar) att hantera. Responsiv webbdesign växer fram. Vi kan nu i vår CSS-kod skriva olika snuttar för olika plattformar. Utvecklarna får tid att sova, klättra ner från tagreglarna och komma tillbaka från intensivvården.
+Nu är det 2014. HTML5 är normen. Det är nu vanligare att man har en Iphone 4 eller bättre i i fickan än en egen dator världen över, jag inkluderar såklart Afrika, phone 4 är gammal för västvärlden. Webbutvecklare får fortfarande bråttas med en del undantag i äldre webbläsare, såsom Internet Explorer från 2003, men det är nu hanterbart. Kodramverk såsom Laravel, Bootstrap och diverse javascript system såsom Ajax var nu standard. Webben var multitrådad som standard, om programmerarna tillät det, synkron vs. asynkron programmering i Javascript. Detta gjorde det möjligt att optimera för de nu vanliga multi-kärninga processorerna vars arkitektur nu funnit mobila hem.
+Sociala medier driver internet. Facebook finns förinstallerat i telefoner, Windows har en inbyggt tangentborsgenväg för LinkedIn. Youtube finns i din smarta TV.
+Under åren fram till nutid kom det nya webbtekniker som ersatt de gamla, främst uppdateringar och optimeringar inga riktiga vidspridda paradigm-skiften förrän nu, 2024.
+Det är något nytt på gång. Mänskligheten övervakas konstant av alla system runt oss. Folk köper avlyssningsmaskiner som marknadsförs som enheter som förenklar din vardag. Du ber din digitala röstassistens snällt att släcka ljuset i garaget, din villadörr känner igen ditt ansikte och låser upp. AI tränas på all tillgänglig data, laglig som olaglig. Webbredaktioner använder allt med AI-assistans i sin utveckling och skrivande.
+Virtual Reality, VR, AR och samlingsnamnet XR finns idag i sladdlösa mobila headset. De är fortfarande lite klumpiga. Många använder dessa dagligen för att logga in i t.ex VR Chat för att besöka sina favoritmiljöer och umgås med vänner. Det finns många initiativ kring XR, det kommer i vågor med några års mellanrum.
+Bakom kulisserna så växer nya webbtekniker fram, det har tagit många år och kommer att ta många till, men snart landar vi på Web 3.0. Där krypto och blockchain är dagens buzzwords.
+För att skapa en hemsida på Webben 3.0 så behöver du precis som vanligt, domännamn och hosting.
+För domännamn har du handshake, HNS. Ett decentraliserat namn och certifikatsystem. Alltså du kan köpa domännamn från dem, verifiera ditt ägarskap av domänen, skapa TLS-certifikat samt använda deras DNS system. Se https://www.hdns.io/ och https://handshake.org/ för mer info.
+Du behöver såklart ha lagring, där har du IPFS/Filecoin FIL, Skynet SIA samt AIOZ.
+Filecoin och IPFS är system för decentraliserad lagring av filer av alla storlekar. Många NFT:er och smartkontrakt sparas på IPFS.
+Skynet är bra för backup, förutsatt att servrarna finns uppe när du behöver hämta backuppen.
+AIOZ är från början utformat för att verka som ett decentraliserat content-delivery-system, dCDN. Bra för en del filer i webbsidor, vilka filer man lägger på ett CDN borde jag lära mig under kursens gång. Jag har förstått det som bilder, ljud och video, men också i vissa fall javascript och css. I nyare versioner pratar de mycket om AI, men det är bara ett sidospår. Det kommunicerar på liknande sätt som Bittorrent, alla servrar har chinks av filer, och alla hjälps åt att dela. Det finns en youtube-liknande demo, där tittare delar med sig av chunks de redan hämtat hem och ligger kvar i cachen.
+Redan nu har vi alltså ett system för att öppna filer i Web 3.0, men nu kommer det intressanta. Compute.
+Akash är en teknik för att använda GPU-resurser och Holo är en decentraliserad teknik för att använda CPU-resurser från flera noder samtidigt. Akash är inte helt anonymt mellan de som säljer och köper resurserna, pga content lagar. En GPU-ägare behöver veta vad som processas enligt någon lag någonstans. Men Holo är anonymt och är ett bra sätt att generera hemsidan som skickas till användaren t.ex.
+När det kommer till databassystem så blir det aningen knepigare. En del tycker att blockchain-tekniken kan användas som databas, en del tycker att man borde köra en SQL-databasmotor decentraliserat över flera anonyma noder med krypterad data. Här är en artikel som nämner några tekniker: https://www.0xscope.com/blog-posts/web3-data-industry-spotlight-web3-database-companies och https://medium.com/@gelembjuk/oursql-tool-to-replicate-mysql-databases-using-blockchain-5ae509636435.
+Web 3.0 är den decentraliserade webben. Där datan inte bor på en specifik server, och användaren betalar alla i hela kedjan. Det är moget nog att användas idag, men det krävs en del installation och inställning. T.ex så måste du lägga till handshake’s DNS server i din lista på DNS servrar, i din router eller relevant maskin.
+Avslutande så vill jag även nämna att vi i vissa fall kallar internet för World Wide Web, WWW.
+Webbutveckling 1
+Installation av Wordpress
+Jag ville sätta upp en Wordpress server så korrekt som möjligt. Med TLS-kryptering från Let’s encrypt och automatiska systemuppdateringar, inte automatiska Wordpress-uppdateringar. Linux skulle vara i grunden och MariaDB istället för MySQL för att den är mera öppen och fri.
+Ett av mina extraknäck är serverunderhåll, så jag har snubblat in på flera områden tidigare och snappat upp lite här och var. Dessutom så går jag Linux Steg 2 på Valla parallelt med denna webbkurs.
+Efter att ha lagt mycket tid och följt många guider samt fyllt en wiki med anteckningar, så fick jag fram följande arbetsflöde:
+ +Steg 1, en server
+-
+
- Installerade Proxmox som är baserat på Debian. Det är en hypervisor för virtuella maskiner med KVM/QEMU och containers med LXC. +
- Configurerade automatiska säkerhetsuppdateringar och säkrade brandväggen. +
- Skapade en Debian 12 mall i en LXC. +
- Klonade mallen och skapade en MariaDB server med åtkomst endast från LAN. +
- Klonade mallen och skapade en webbserver med Apache2.
+
-
+
- Installerade och konfigurerade PHP 8.3 med FPM istället för den gamla modulen för PHP i Apache. FPM är bättre för multitrådade maskiner, alltså alla moderna maskiner. +
+ - Klonade Debian 12 mallen en tredje gång för att skapa en maskin som hanterar TLS certifikaten.
+
-
+
- Installerade Certbot och Let’s Encrypt certifikat med automatisk förnyelse. +
+ - Automatiserade backuper enligt veckoshema mot mitt NAS.
+
-
+
- Alla tre LXC:er har varsin backup av både hela containern och filerna samt databasen. Gamla backupper rensas automatiskt genom schemalagda bash-script. +
+
Steg 2, domännamn
+-
+
- Köpte en domän på Loopia. +
- Pekade om namnservrarna till Cloudflare. +
- Konfigurerade domänen med DNS i Cloudflare. +
- Ställde in dynamisk DNS i min router för domännamnet och Cloudflare. DNS får nu automatisk den aktuella IP-adressen enligt schemalagd rutin. +
- Dagdrömmande om egen SMTP server för att skicka mejl från mina egna system... +
Steg 3, eget webbhotell
+-
+
- Pekade om portarna 80 och 443 till min webbserver LXC. +
- Skapade en Virtual Host i Apache för hemsidan, för både port 80 och 443. Port 80 omdirigerar trafiken till 443 med HTTPS via rewrite. +
- Körde certbot kommando för att skapa certifikat för domänen. Ett kommando som går via Cloudflare API istället för att använda apache-metoden som annars är vanlig. Det går då att använda certifikatet till mer än bara hemsidan. +
Steg 4, installera wordpress
+-
+
- Föjde denna guide och diverseforumposter för att installera Wordpress, https://developer.wordpress.org/advanced-administration/before-install/. Den officiella dokumentationen för att installera Wordpress på egen server. +
- Skapade databasen med charset utf8mb4 och collation utbmb4_unicode_ci, för att få korrekt sortering på alla språk mot en minimal hit mot prestandan. Om man väljer en collation med sitt språk eller general så kan sortering gå fortare, men jag anser att det är bättre att optimera andra aspekter av applikationen, databasarkitekturen samt konfigurationen av databassystemet. +
- Skapade en användare med fulla rättigheter för wordpress, men planerar att minsta rättigheterna i framtiden för att bättre på säkerheten. Denna artikel pratar om hur man kan bättra på säkerheten i Wordpress-installationer: https://wordpress.stackexchange.com/a/129489. +
- Hämtade tar-filen till webbsidans mapp, packade upp. +
- Kopierade konfigurationsmallen och matade in databasuppgifterna samt secrets avsnittet. +
- Öppnade wordpress sidan i min webbläsare och följde guiden för att ställa in sidans namn och användaruppgiter. +
Nu är jag redo att komma vidare. Jag hade helt missat att vi skulle skriva uppsats och inte bara installera Wordpress. ...Mycket att tänka på som småbarnspappa till flera barn och ekonom på ett åkeri.
+