Om ni är av åsikt att bandbredd inte har med webbutveckling att göra så har ni inte granskat de finstilta bakomliggande delarna av webbutveckling tillräckligt nära ännu 😉 Det kommer märkas av ju mer ni sysslar med webbdev 🙂

Eftersom varje webbsida laddas ned till dina besökares datorer så används ju bandbredden varje gång- såvida webbläsaren inte laddar in webbsidan från undanlagrad s.k. ”cache” som den har möjlighet att använda för uppfattad ”snabbare laddningstid” och för att spara tid/resurser.

Cache hör inte till vad jag tänkt diskutera i detta inlägget, men för snabb introduktion till vad det är så kan ni tänka er ett ”minne av senaste gången man besökte något på nätet” som webbläsaren sen kan hämta från om av någon anledning det inte skulle vara optimalt att ladda om hela sidan p.g.a. resursbrist eller annan orsak.

Vad är bandbredd?

Bandbredd är en synonym för data transfer rate eller på svenska: dataöverföringshastighet, vilket syftar till mängden data som kan överföras från punkt A -> punkt B under en viss tid.

För en bra sida som går igenom detta mer i detalj se: http://searchenterprisewan.techtarget.com/definition/bandwidth

Missledande marknadsföring av bandbredd och nätverkshastigheter

Jag ansåg mig lurad varenda gång TV-reklamen nämnde deras fantastiskt snabba bredband som hade 8Mbit/s och liknande, innan jag visste bättre.. När jag väl började studera datateknik och kommunikation på universitetsnivå fick jag äntligen förståelse för hur det verkligen låg till.

Vi är ju vana vid att dataöverföring sker i enheten MB/s – t ex. om vi tänker oss Hårddisks överföringshastigheter, Flash-diskar, m.m.

Däremot när det gäller dataöverföring över internet så är så inte fallet, här använder man istället enheten: Mbit/s som utgår från miljoner bitar per sekund istället för miljoner bytes per sekund som annars brukar vara standardenheten för dataöverföring.

Skillnaden mellan Mbit/s och MB/s

Då kanske ni undrar vad skillnaden mellan de båda är? Jo, MB/s syftar till enheten MegaByte ser sekund, medan enheten Mbit/s syftar till Megabits per sekund.

Det är ju knappt så man märker någon skillnad på de båda nu, men faktum är att Byte och bit skiljer sig ganska betydligt! Det är nämligen som så att 1 enstaka bit = 1/8 Byte. Vilket då innebär att man egentligen får 1/8 dataöverföringshastighet på internet än vad man är van vid när man talar hårddiskar och övrig dataöverföring.

– 8 bitar utgör alltså 1 Byte.

Räkna ut vad er bandbredd är i MByte/s istället för Mbit/s

Om ni har en bandbredd på 24Mbit/s och dividerar denne med 8 så får ni ut vad ni egentligen har för dataöverföringshastighet såsom ni är vana vid från andra datorsammanhang, vilket då ger: 24/8 = 3MB/s – vilket egentligen inte är  jättemycket.

Flash-diskar idag kan ha en läshastighet på 550MB/s, och en skrivhastighet på typ 450-520 MB/s (se exempel: ADATA SSD hos Inet.se)

Varför kan det då vara användbart och bra att känna till vad ovan verkligen betyder, hur saker verkligen ligger till? Jo, dels för att kunna avgöra hur lång tid det bör ta att ladda ned filer från nätet om man har en ”ned-hastighet” på t ex. 24Mbit/s – exempel: En fil på 200MB bör teoretiskt då ta 200/3 sekunder (66.67 sekunder) att ladda ned om lovad max-hastighet uppnås för en 24Mbit/s hastighet.

Plus(!) att ni även lär er ett sätt att se själva vad som är rimligt, och se om era Internet Service Providers (ISP) blåser er och ni betalar för mycket för hur mycket hastighet ni verkligen kan få ut. Ovan metod att räkna ut och förstå er bandbredd är även bra för att felsöka och se om ert nätverk är långsammare än vad det egentligen ska vara, läs mer om detta i stycket nedan.

Störningar på länken kan påverka hastigheten

Notera att ovan demonstrerade hastighetsmått är en teoretisk Max-hastighet, oftast så uppnås inte denne helt och hållet.. Oftast är detta p.g.a. störningar antingen på nätverkslänken/mediet (ethernet-kabel/WiFi).

Ett roligt test ni kan göra via bredbandskollen.se är att mäta er nedladdnings resp. uppladdningshastighet för att se hur ni ligger till och om er hastighet någorlunda lever upp till vad ni betalar för.

Skillnad mellan Upp- och Nedladdnings hastighet

Det finns många bandbredds erbjudande tillgängliga att välja mellan, alla är ute efter olika specifika modeller, vissa (som streamar mycket t ex.) kanske vill ha jättehög uppladdnings hastighet, och kanske inte behöver lika hög nedladdnings hastighet. Medan andra kanske vill ha jämn ned/uppladdnings hastighet (t ex. Online Gamers för League of Legends eller annat spel som kräver jämn ned och uppladdning av information för att kunna på bästa möjliga sätt leverera en bra spelupplevelse).

Personer som endast har ett vardagsbehov av att ha tillgång till internet för att kolla banken, uppdatera sociala medier och annat är hastigheten inte lika viktig, speciellt inte uppladdnings delen, många familjer och hemnätverk har därför aningen högre nedladdningshastighet för att snabbt kunna ladda ned filer från nätet (typ gratisprogram etc.) och en låg uppladdningshastighet då den ”inte används lika ofta” (med detta menar jag att den används, fast kanske inte i lika stort krav på hastigheten) för de flesta.

Slutklämmen

Hoppas detta inlägg hjälpte till att belysa hur saker och ting ligger till och vad det verkligen innebär med bandbredd och nätverkshastigheter.

Tills nästa inlägg- 🙂

En viktig del inom webbutveckling som många glömmer eller inte ens känner till är bilder och presentation av bilder i korrekta proportioner för att inte ”skrynklas” och bli förvrängda och tappa kvalitet.

Jag kallar detta område för bildproportioner förklarat då jag syftar till att informera om enkla matematiska formler som praktiskt taget kan göras via huvudräkning för att ta reda på vad en bild skall ha för ny bredd respektive höjd vid förminskning för att behålla originalbildens proportioner (förstoring brukar bli kasst oavsett om man behåller proportioner eller ej, fast såklart- mindre kasst om man behåller proportionerna).

Formlerna kan liknas vid det som automatiskt görs i t ex. Photoshop bildredigerings programmet när man har ikryssat rutan för att behålla bildproportionerna. Det är dock inte alltid man har Photoshop tillgängligt, därför tänker jag att det kan vara användbart att känna till en bakomliggande formel för hur man själv kan göra samma sak på egen hand vart man än befinner sig/vad man än har att jobba med 🙂

Vårt Exempel

Vi kommer utgå från att vi har en bild vars bredd är 430 medan höjden är 275, alltså: 430 x 275 som originella dimensioner. Detta för att visa att det går att applicera vår formel på alla bilder, oavsett dimensioner.

Vi kommer i exemplet välja att förminska vår originalbild till ett proportionellt nedskalat alternativ.

Nya dimensioner

Vår formel går ut på att vi väljer antingen en förutbestämd höjd, eller bredd för den delen, och sedan utifrån vår nya valda dimensionsvärde (höjden/bredden), räknar vi ut det andra dimensionsvärdet.

Detta är speciellt användbart och praktiskt i webbutveckling då man t ex. sitter med en originalbild som är väldigt stor och man bara vill se hur den skulle se ut med mindre proportionella dimensioner som bättre passar in i ens egna sidlayout. Då kan det vara användbart och bra att kunna på direkten räkna ut motsvarande bredd, eller höjd – utifrån det andra värdet man valt.

T ex. om ni tänker er att ni har en sidlayout där bilderna måste vara 200 pixlar höga, så behöver ni då räkna ut en proportionell motsvarighet i bredd.

Eller om ni ska göra ett galleri och ni vet att varje bild måste vara en fast bestämd bredd, t ex. 325 pixlar, medan höjden är tillåten att flexibelt variera (detta hjälper att hålla bilderna proportionella).

Stega igenom formeln och processen

Välja vårt ena dimensionsvärde

För detta exemplet tänker jag bygga på ovan praktiska exempel där vi hade en höjdbegränsning på 200 pixlar för bilderna till vår sidlayout.

Räkna ut vårt ”förhållande-värde” för nya bilden till originalbilden

Om vår originalbild nu var 430 pixlar bred, och 275 pixlar hög, och vi nu måste minska bilden till 200 pixlar i höjd, så kan vi få 2 olika förhållande-värde mellan originalbilden och den nya bildens dimensioner: antingen originalbild -> nybild, eller nybild -> originalbild.

Vad detta då menas är att man dividerar t ex. originalbildens höjd med nya bildens höjd, eller tvärt om, i vissa fall blir det ena enklare än det andra.. Det märker man med tiden allteftersom man gör det mer och mer. Jag kommer visa detta varför längre ned, se nedan exempel för förhållandet vi väljer i det här fallet:

höjdförhållande för proportionell bildförminskning

Höjdförhållande för proportionell bildförminskning

Det fanns en baktanke också varför vi valde att göra det just i den här ordningen – med Nya bildens höjd som täljare, och originalbildens höjd som nämnare, nämligen av anledning att när vi sen skall räkna ut breddförhållandet så blir det enklare att lösa ut den okända nya bredden (x) om den står i täljaren, än om den stod i nämnaren – simpel algebraisk bråkräkning 🙂

Värdet vi fick ut av ovan uträkning är vårt förhållande-värde, och vad som är speciellt med detta, är att det måste vara exakt samma för både bredd-förhållandet- såväl som höjd-förhållandet, om vi vill behålla proportionerna till vår originalbild för de nya dimensionerna av bilden.

Algebraisk ekvationslösning för att få ut resterande nya dimensionsvärdet

Vad som nu återstår är att med hjälp av algebraisk ekvationslösning lösa ut den nya bilddimensionens proportionella bredd-värde genom att utför följande uträkning:

uträkning för bredd-förhållandet via algebraisk ekvationslösning

Uträkning för bredd-förhållandet via algebraisk ekvationslösning

Som ni då sen ser ovan så ger detta oss alltså en proportionell ny bildbredd på 313 pixlar avrundat uppåt.

Vilket innebär att vår nya förminskade bilds dimensioner ska vara: 313×200 för att vara så nära proportionell mot originalbilden som möjligt (säger ”så nära proportionell som möjligt” då som ni ser ovan så hade vi 312.73 och inte 313 pixlar som ny bredd – dock är det bäst att man anger bredd i HTML för bilder med heltal, + att det inte är ”så mycket skillnad” egentligen).

Distorsion och förvrängning

Varje gång en bild skalas om till nya dimensioner (framförallt vid förminskning) – speciellt om de nya dimensionerna inte proportionellt matchar originalbildens dimensioner, så tappar bilden kvalitet, vilket är väldigt tråkigt!

För att undvika detta kan man i vissa fall använda sig av SVG (Scalable Vector Graphic / Vektorgrafik) istället, som alltid behåller exakt samma kvalitet oavsett hur mycket eller litet man än skalar om bilden. Annars får man helt enkelt vara uppmärksam på hur man skalar om sina bilder och försöka behålla proportionerna till originalbilden så gott det går 🙂

Slutkläm

Såja, då vet ni hur ni kan göra det Photoshop annars gör åt er på egen hand + att ni fick repeterat gymnasiala matematik-kunskaperna ^^

Hoppas ni fann detta inlägg lärorikt och intressant, och att ni kanske får nytta av det någon gång framöver 🙂 Enjoy ^^

Tjenare alla läsare!

Många av er har säkert blivit förbryllade av hur de hexadecimala färgkoderna inom webbutveckling fungerar och det tänkte jag förklara i detta inlägget.

Hexadecimala färger är egentligen ganska enkla när man väl förstått grundkoncepten som bygger upp dem. Ett av dessa grundkonceptet är att de hexadecimala färgerna bygger på färgprincipen RGB vilket innebär att man anger ett typ av ”del-värde” som kan liknas vid en procentuell intensitet för varje färgpott som är R = Röd, G = Grön, och B för Blå.

Mer i detalj så står ”hexa” för ett talsystem där basen är 16 och eftersom vi kan ange varje s.k. ”färgpott” med 2 bitar så (se #RRGGBB <- två färgvärde för var färgpott) innebär detta att vi använder oss av ett fullt färgpotts-värde på 16^2 (256), och eftersom man i datatekniken alltid räknar man 0:an såvida inget annat specificerats så kommer vi att kunna ange värden från 0-255 – då detta inkluderar nollan och resulterar i 256 värden.

Så nu när vi har det konceptet klart för oss är det dags att gå vidare.

Alla möjliga hexadecimala färgpotts-värden presenterade

Varje färgpott består alltså av 2 bitar i hexadecimala värden/2 hexadecimala värden, och då bör vi kolla på hur hexadecimala värden av olika typer skrivs och vad dessa representationer motsvarar och innebär, se nedan:

Hexadecimala värde Decimala värde
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9

Sen kommer vi till den intressanta delen – eftersom vi bara kan representera värden med ett värde/1 bit, så kommer talet och värdet 10 att orsaka problem för oss, då detta i det decimala talsystemet tar upp 2 värden/2 tal/2 bitar. Som det då funkar i hexadecimalt då vi måste fortsätta upp till 16 värden per bit/per värde, så kommer talen från 10-15 att representeras av bokstäver istället! (Notera att jag säger upp till 15 som maxvärde då man alltid räknar med nollan! kan ses ovan) Se nedan lista av resterande hexadecimala värde från 10 upp till och med 15:

Hexadecimala värde Decimala värde
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

Som ni nu säkert kan förstå om ni experimenterat lite själv med hexadecimala färger så kan ni se att bokstaven F är samma sak som ”fullvärde” – det högsta värdet varje bit kan ha i en färgpott, har vi då 2 st. F så borde detta då alltså innebära absolut fullt värde för hela färgpotten (alltså 255 i decimala talsystemet då vi hade 16^2 för våra 2 värden/bitar med vardera hexadecimalt tal). Och då förstår ni säkert också att 2 st. 0:or motsvarar en ”tom” färgpott som då borde leda till ”avsaknad av färg för den färgpotten”.

Bra liknelser för att hjälpa med förståelsen hämtat från fysiken och vardagen

Ljus i fysiken hjälper förståelse för vit färg i webbutveckling

En grymt bra liknelse från fysiken som förklarar väldigt bra hur RGB fungerar, är liknelsen av hur Ljus är uppbyggt och hänger ihop om man studerar det närmare.

Ett bra praktiskt exempel som visar på liknelsen är när man tar den ”vita” färgen från vilken lampa som helst, och belyser denne genom ett spektrum, så kommer man kunna se på andra sidan av spektrumet hur ljuset har delats upp i dess olika våglängder. Vilket klockrent visar hur alla färgerna (i webbdev sammanhang färgpotterna) bidrar till att skapa vitt ljus (vit färg i webbdev sammanhang).

För webbutveckling innebär ju detta då att fulla färgpotterna för alla färgpotter som finns – Röd, grön såväl som blå, krävs för att skapa vit färg – t ex. om man vill ha vit textfärg blir hexadecimala färgkoden: #FFFFFF.

Svarta kläder’s ljusabsorption – vardagsexempel som hjälper förklaring av svart färg i webbutveckling

På samma fysiklektion som jag fick ovan förståelse för det vita ljuset, så nämnde även vår fysiklärare att det vi upplever som ”svart färg” egentligen är avsaknad av färg, och att detta är orsaken till att svarta kläder blir varma på sommaren när solen är framme – då den svarta färgen egentligen är avsaknad av färg/våglängder (för ljus), så absorberar denne alla färger (våglängder) som solen förser den med för att försöka kompensera för dess avsaknad av färg. Vilket bildar värme då solens energi är just det: energi. Detta är också varför man är som svalast i vita kläder på sommaren, då dessa redan innehåller fulla spektrumet av färger så stöter den vita färgen bort alla våglängder istället för den är redan ”mättad” (skulle man kunna säga) av våglängder.

Sammanfattat så kan man se att vit färg reflekterar/stöter bort allt ljus, då det redan är mättat, och tar därmed inte heller upp någon värmeenergi i solen. Medan det svarta tyget saknar färg och därför gärna suger åt sig solljusets våglängder och därmed absorberar värmeenergi.

Ett annat exempel är att ni säkert också vet att avsaknaden av ljus resulterar i mörker, med andra ord svarthet/svart färg.

Primära färgerna i hexadecimala färgkoder

När det gäller våra primära färger Rött, Grönt och Blått som RGB metoden representerar så kan vi då säkert också förstå att #FF0000 resulterar i en Röd färg då vi fyller Enbart* den röda färgpotten. Medan istället #00FF00 resulterar i en Grön färg då vi fyller den färgpotten till fullo och slutligen borde ju då #0000FF ge oss en Blå färg då denna färgpott är fylld till fullo.

Alternativa färggivningsmetoder i webbutveckling

Det var ju ganska enkelt, dock så blir det lite mer komplicerat när vi ska försöka skapa t ex. ”hälften så full färgpott” i hexadecimala tal, etc. då man måste räkna på detta – såvida man inte använder den lite mer raka formen för färggivning i CSS: rgb(0,0,0) eller rgba(0,0,0,0);

rgb(0,0,0) är en färggivningsmetod i CSS som låter dig ange de decimala talen för färgpotterna istället för hexadecimalt – alltså från 0-255 färgvärde för varje färgpott.

rgba(0,0,0,0) är en annan färggivningsmetod i CSS som låter dig ange även en alpha-kanal för transparens/genomskinlighet.

Förstå hur ”fulla” respektive färgpotter som utgör en färg, verkligen är genom hexdec-dec värdes-konvertering

Sådär ja, då vet vi vad alla möjliga bokstavs- och sifferkombinationer motsvarar, vi har även lite ”lättsmälta” liknelser för att komma ihåg hur och varför svart, vitt såväl som de primära (röd,grön,blå) färgerna skapas/genereras/byggs upp. Men vi vet fortfarande inte vad dessa betyder i vårt vardagliga (vanliga) räknesystem (decimala talsystemet – 10 som bas), det ska vi gå igenom härnäst.

Börja smått – dela upp hexadecimala färgkoden i dess 3 beståndsdelar Röd-färgpott, Grön-färgpott och Blå-färgpott

För detta exemplets skull ska vi använda oss utav färgkoden #2D9FF0 (notera att hexadecimala färgkoder kan skrivas både med stora såväl som små bokstäver (versaler/gemener) väl i koden – själv föredrar jag att skriva med små bokstäver, men valt att skriva med stora bokstäver för tydlighetens skull i detta inlägget).

Om vi ska dela upp #2D9FF0 i dess tre beståndsdelar får vi som följer:

Nästa steg – räkna ut färgpotterna var för sig från hexadecimalt till decimala värden

Vi börjar med den första färgpotten (röd):
2 är första biten i färgpotten, och D är den andra och sista biten i färgpotten.

Den första biten (längst till vänster) i en färgpott multipliceras med 16 när man ska räkna ut det decimala värdet, och då kanske ni undrar varför detta är? Se bild nedan som visar varför:

Hexadecimal till decimal bitvärdes konvertering

Hexadecimal till decimal bitvärdes konvertering

Som ni då kan se ovan så är hexadecimal -> decimal värdes-konvertering ganska straight-forward 🙂

Talsystem förklarat ytterligare för ökad förståelse

Undrar ni nu fortfarande kanske varför den ena fick 16^1 medan den andra fick 16^0, så är det som så för alla talsystem (även vårt egna decimala) att basen i talsystemet – hexadecimalt = basen 16, decimala = basen 10, binära = basen 2, oktala = basen 8, osv.  – upphöjs med ett steg för varje bit som representerar vårt tal från vänster till höger.

Detta kan vi visa med ett enkelt binärt exempel  (då detta är lätt att räkna med) på 4 bitar som ser ut som följer:
0    0    0    0 <- Där värdena för vardera bit är som följer:
23 22   21   20

Som då motsvarar från vänster: 8   4   2   1    <- uträknat.

I det decimala så fick vi i grundskolan lära oss att första talet längst till höger var s.k. ”ental” men de gav oss aldrig den bakomliggande (lite mer avancerade) matematiska anledningen – detta var helt enkelt för att vårt talsystem har basen 10 och talet längst till höger alltid får upphöjt med 0, medan efterföljande tal åt vänster ökas exponenten med 1 alltså blir nästa tal 100+1

osv. 🙂

Visst är matematik roligt när man väl förstår det och får förklaringar bakom saker man använt hela sitt liv utan att ha en ”riktig” vetenskaplig bakomliggande förklaring för varför det var så? 😛

Hursomhelst, nu borde ni förstå hexadecimala färgvärden bättre, testa gärna själva och återkom gärna om ni skulle ha frågor.

Hexadecimal kortform förklarad

Men innan detta inlägget är över ska jag också bara som hastigast nämna att hexadecimala färgkoder kan skrivas på en s.k. ”kortform” där man bara använder 1 bit per färgpott istället för 2, detta går dock Endast* att göra om båda färgpottens värden är Identiska* t ex:
Har vi den full-röda färgen: #FF0000 <- så är färgpottens värden identiska och kan därför även skrivas som #F00 <- som ni säkert noterar är även Gröna och Blåa färgpotternas värden identiska* och kan även dessa därför förminskas/förkortas till 1 bits hexadecimalt färgvärde 😉 Som jag gjorde direkt i ovan exempel.

Såja, då tror jag att jag var klar 🙂 Hoppas ni fick bättre förståelse för hur saker och ting ligger till och fungerar, samt varför.

Enjoy, hoppas ni har nytta av kunskapen ni nyss fått 😉

Until next time 🙂