Blog Flöde

1. Validera HTML och CSS
2. Följ HTML-5 och använd semantiska element + beskrivande namn på element.
3. Kontrollera din hemsida i en annan webläsare och kontrollera mobilvänlighet.
4. Kontrollera Prestanda: PageSpeed Insights, Pingdom.
   Ändra t.ex. bildstorlek och bildformat.
5. Kontrollera tillgänglighet med WAVE (hemsida eller tillägg)
6. Gå i genom en checklista med din hemsida för att se om den håller sig till din vlada standard.

Efter att ha testat original versionen och den senaste versionen av Skogssidan uppstod samme problem därför finns endast bild på ett av resultaten som du kan hitta nedanför:

De tre felen jag fick var dålig kontrast skillnad på text och bakgrund. Jag åtgärdade det genom att ändra två färger som användes av text och headers så att de hade större konstrast mot den vita bakgrunden. Resultatet blev följande:

Ändringen förbättrar tillgängligheten eftersom konstrastet blir större mellan text och bakgrund och det vill lättare att urskilja och läsa innehållet. Det nya resultatet hade inga kontrast fel längre, som kan avläsas i bilden ovan.

Det här är resultat jag fick innan jag tagit några åtgärder, då tar bilderna upp väldigt mycket mer plats än nödvändigt. Som feedback ska jag använda ett modernare bildformat (WebP istället för JPEG) och minska bildstorleken eftersom den är alldeles för stor och måste skalas ner vilket minskar prestanda.

Jag började med att ändra storleken från 6000×4000 till den efterfrågade 875×583 på samtliga bilder, det gav följande resultat:

Som man ser så minskade bildernas samanlagda storlek drastiskt från över 10 000 KiB till 1 000 KiB, “largest contentful draw” gick även från 55.3 sekunder ner till 5.9 sekunders, dock så gick prestanda värdet från ~70 till ~60 (på PageSpeed Insights).

Slutligen så ändrade jag även bildformat till WebP. Resultatet blev följande:

Filstorleken på bilderna minskade igen, om än 25%. Däremot så gick prestanda värdet upp till 89, alltså precis innan grönmarkering vilket fortfarnade är bra.

Jag tänkte först även komprimera Webp filerna eftersom jag fortfarande kan “Öka bildkomprimeringsfaktorn” men jag hittade inget smidigt sätt att göra det så jag nöjer mig. Resultat blev fortfarande större än jag förväntade och om det är något man ska åtgärda så är det själva bildstorleken: undvik att ha bilder med högre upplösning än vad ska skall användas.

Jag fick lite olika resultat på hemsidorna men PageSpeed Insights verkar ha gett mig sämst resultat. Det största problemet är definitivt bilderna – deras bildstorlek och formatet på en bild är inte optimerat. När jag komprimerade HTML filen (som också innehåller CSS) reducerades storleken från 4.62kB till 2.87kB men förvånansvärt så blev prestanda resultatet sämre, där bilderna igen var största problemet.

Före komprimering:

Efter komprimering: (En av hemsidorna hade endast 1 gratis använding)

Det är inte så förvånande att mitt resultat inte är så bra med tanke på att jag inte har försökt anpassa min Landing Page alls till mobilen. Däremot så har jag lite ideer som kommer förbättra det. Jag kan ändra flex-direction till column istället för row, jag kan göra att text blir större och att marginal och padding blir mindre, och lite annat.

På bilderna så valde jag iPhone 12 Pro och iPad Air i Chrome och FireFox som webbläsare. Man ser såklart att hemsidan inte är anpassad till mindre enheter, speciellt på smartphone. Men skillnaden mellan Firefox och Chrome var däremot inte stor.

Jag körde filen i W3s html kodvalidator och åtgärdade alla fixbara felen. Det var bland annat några stavfel, element som saknades, element som var inkorrekt stängda eller placerade och bilder som saknade “alt” attributer. Det var inte särskilt svårt men jag var lite ringrostig och jämförde lite med mina egna projekt som jag vet är grön-validerade. Det enda felet jag inte kunde fixa var att HTML5 kräver headers i <section> element, så jag lät det vara, annars är allt grönt.

Internet – något som vi tar för givet idag – fanns såklart inte för så många år sedan. Nu är det flera decennier gammalt och har mycket historia bakom sig, allt från Bitcoin till Twitters uppköpande och namnbyte. Här är några av de händelser som intresserar mig lite extra i internets historia.

Millenniebuggen

Datorprogram är något som har skapats genom hela internets historia, det är vad som är grunden till att vi kan integrera internet så mycket som vi gör i dagens samhälle. Det fanns bara ett litet problem som den första generationen av programmerare översåg. När de första datorprogram skapades så trodde man inte att koden skulle vara kvar vid millennieskiftet därför så byggdes koden på ett datumsystem där år skrevs med två siffror. Detta ledde till lite oväntade konsekvenser.

Oron om att årskiftet 99/00 skulle desintegrera de nuvarande programmen och orsaka kalabalik var enorm, det gick så långt som att folk trodde att flygplan skulle falla ner från skyn. För att förhoppningsvis motverka denna katastrof så investerades miljarder av kronor för att fixa alla viktiga datorprogram som användes i samhället. När den fruktade dagen tillslut anlände så fanns miljontals med arbetare redo att svepa in om samhället helt kollapsar, men som tur är orsakade millenniebuggen endast några mindre missöden – så om man inte ville köpa årskort i simhallen i Täby så påverkades man inte så värst mycket.

Den idag lite komiska händelsen som millenniebuggen är fick även inverkan på framtiden. En stor mängd jobb inom IT-branschen blev tillgängliga som bidragit till att internet fortsatt att växa till den storlek den är idag, även om många arbetare inte längre behövdes efter årskiftet.

Källa: https://internetmuseum.se/tidslinjen/varldens-forsta-webbkamera/

Kaffe leder till världens första Webbkamera

Vem kunde tro att världens första webbkamera skulle skapas på grund av människans lathet och sug för kaffe? På datorlaboratoriet vid Cambridge univeristy så hade personalen ett problem, den gemensamma kaffebryggaren var ofta slut och att behöva ta sig till den från en annan våning bara för att upptäcka att det inte ens fanns något kaffe var fruktansvärt. Deras lösning? – installera en kamera som tar bilder på kaffebryggaren varje tredje minut och laddar upp det på ett specialskrivet program “XCoffee”.

Bilderna läggs även ut på internet två år senare, något som blir ett av de första internetfenomenen. Miljontals tittare spanar under åren in direktsändningen av kaffebryggaren – ofta för att se den tom. Bilderna fortsatte att sändas enda fram till 2001 då laboratoriet skulle flytta. Bryggaren såldes då på eBay för 3350 pund och blev då världens dyraste. Den roliga händelsen visar hur vi som människor kan skapa lösningar till små problem och använda tekniken till vår fördel, även om det “bara” gäller en tom kaffebryggare.

Källor: https://internetmuseum.se/tidslinjen/varldens-forsta-webbkamera/ https://www.bbc.com/news/technology-20439301

TikTok

Tiktok har under de senaste åren växt fram till en av de mest använda tjänsterna i världen, hur kommer det sig? TikTok hade från början ett annat namn – Musical.ly – en app för folk som ville posta 15 sekunders klipp där majoriteten dansade till musik eller mimade. Efter att Tiktok köpts upp av det kinesiska företaget ByteDance byter appen namn och logga till TikTok. Appen exploderar i popularitet och får hundratals miljoner användare världen över. Det är inte längre bara en dansapp – det är här trender skapas – och med hjälp av deras algoritm så kan vem som helst bli känd över en natt.

Men allt är inte solsken och regnbågar. Flera länder tar åtgärder för att begränsa appens användning, speciellt hos unga. Anklagelser som att TikTok orsakar psyiskisk ohäsla, leder ungdomar till att begå självmord och att användardata säljs i Kina kastas runt. Det ryktas om att det ompratade Tiktok-förbudet i USA bara var ett stort PR-stunt för att Trump skulle kunna svepa in och “rädda” appen efter den 12-timmar långa apprestriktionen, men det är något vi inte kan svara på konkret.

TikTok har en extremt stor påverkan på samhället och specifikt på generation Z och Alpha. Det är på TikTok som de flesta trenderna skapas – en video, ett internskämt eller ett nytt ord som börjar användas. Det sprider sig som en eld under en natt och helt plötsligt vet alla ungdomar i landet vad “grisch” eller “rizz” är. De senaste åren så har Oxford University’s “Word of the year” varit ord som vuxit fram genom Tiktok och tsgit sig in i våra vardagliga ordförråd, något som bevisar hur inflytelserikt Tiktok är.

Även om TikTok kan bidra med mycket underhållning och gemenskap, så ökar bara tiden som användare spenderar på appen. Våra dopaminreceptorer blir utbrända av allt konstant skrollande och vi får sämre tålamod, blir lätt trötta & irriterade och slösar bort timmar som kunde gått åt till annat. Barn som inte vet bättre sitter nu timmar framför sin iPad och tar in massa hjärnröta istället för att leka ut med kompisar. Föräldrar har ett större ansvar än någonsin att övervaka sina barns skrollande i tidiga åldrar. Vi vet inte hur små barn som växt upp med Tiktok kommer bli när de är vuxna, men jag tror inte det kommer vara något fantastiskt. Om inte Tiktok och skrollande regleras i framtiden kommer de negativa effekterna bara att bli värre.

Så vad kommer ske i framtiden? Det är såklart svårt att säga exakt men jag tror personligen att appen kommer restrikteras mer när de negativa effekterna fövärras simultant. Jag tror också att unga kommer bli ännu mer introverta och bygga upp sina liv online vilket kan förhindra utvecklingen av nödvändiga sociala förmågor som används livet ut. Många ungdomar kämpar redan med psykisk ohäsla och i ett samhälle som ständigt blir mer digitalt kan det öka. Jag hoppas däremot att jag har fel, situationen kanske inte är så allvarlig som jag tror. De negativa effekterna ökar kanske inte ofantligt och vi anpassar oss istället till denna nya värld av hjärnröta och doomskrollande, vi får väl bara vänta och se.

Källor: https://nypost.com/2025/01/19/business/tiktoks-brief-shutdown-blasted-as-likely-deliberate-pr-stunt-to-create-sense-of-panic/ https://internetmuseum.se/tidslinjen/tiktok-framjar-kreativitet-och-skapar-nya-kulturella-uttryck/

Jag tycker att uppgiften var rolig och ett bra sätt att öva på att bygga mer fullständiga hemsidor men jag skulle inte säga att jag lärde mig jättemycket nytt från just detta projekt. Jag tyckte att den var ganska lätt att göra men jag har även lärt mig lite på fritiden, speciellt CSS.

Jag skulle inte kunna säga att jag stött på några större svårigheter men det tog lite trixande att få bilderna på “Projekt” fliken att växa i storlek på det sättet jag ville. Tyvärr så lyckades jag inte få animationen att gå tillbaka smooth då “position: aboslute” försvinner direkt när man slutar hover:a vilket trycker bilden åt sidan.

Här är validering av HTML och CSS (tog endast bild på Index.html men alla var felfria) Här kommer du till Paolos Webb!

I denna uppgiften så följde vi en tutorial och gjorde exakt som i videon.

Jag tyckte uppgiften var ganska tråkig då man bara följde en tutorial och man gjorde inte ens CSS själv vilket jag tycker kan vara det som är mest användbart och roligt (även om det inte var syftet med uppgiften). Men jag förstår nog bättre hur semantiska element som “section” och “article” etc. kan användas nu.

Validering av kod: HTML har några få error men de beror på att man borde använda en header (h2-h6) i en section, vilket han i videon inte gör – så då tänker jag att jag inte fixar det – eftersom jag känner till felen och de är små.

m03u01 – Skapa en hemsida på beställning. I momentet byggde vi en sida utrifrån en referens bild så lik som möjligt. Jag tycker moment gick bra. Jag gjorde uppgiften i god tid och tycker att resultatet blev väldigt bra och lik referens bilden.

Uppgiften var inte särskilt svår men det var roligt och att tvingas göra en sida på ett speciellt sätt som kan följaktligen resultera i att man lär sig nya metoder och lösningar man annars inte tänkt på.

All kod är validerad — Länk till m03u01

Jag gjorde även extra uppgiften eftersom jag hade tid över men gjorde inget särskilt. I ett rent design perspektiv så är det nog lite överdriven och kladdig, men jag tyckte den var kul och jag lärde mig något nytt – vilket jag skulle säga är bra för en extra uppgift.

Länk till extrauppgiften