webbdev-essentials.net

Lär dig skillnaderna mellan att ladda upp media till WordPress via admin jämfört med via FTP.
Läs mer… »

Lär dig vad CMS är och vad Content Management System innebär samt vilka alternativ som finns.
Läs mer… »

Lär dig spara ned Screenshots med Microsoft Paint i Windows samt att rensa bort känslig information från skärmdumpar.
Läs mer… »

Splitta stora loggfiler till flera mindre filer för att lättare klara av att öppna dem. Användbart vid arbete med HTTP & säkerhet för hemsida!
Läs mer… »

Hur mycket vet vi egentligen om vad som sker bakom kulisserna på online gratis validator-sidor och övriga webbverktyg och webbtjänster?
Läs mer… »

Boosta effektiviteten i arbetsdagen genom att dela visuella urklipp och skärmdumpar snabbt och smidigt med de inbyggda Windows verktyget ”Skärmklippsverktyget” och ”Klipp & Skissa”.
Läs mer… »

Serveradministration är inte alltid helt lätt, detta var verkligen ett praktexempel på varför. Inte kanske så ofta man stöter på ett scenario med alla de rätta komponenterna för att lära sig vad som händer och hur det funkar när två filer snarlika i syfte med olika filändelser försöker samexistera.
Läs mer… »

Fixa länkbara knappar för dina inläggskategorier till dina WordPress-inlägg med WordPress temaredigering!
Läs mer… »

Visste du att det går att filtrera på specifika CSS-egenskaper och värden direkt i Google Inspector CSS-vy för effektivare realtids-kodning och testning?
Läs mer… »

Kraftfull Simpel Vanilla JS funktion som kollar om RegEx finns i Array eller Sträng. Användbart verktyg för diverse webbprojekt.
Läs mer… »

bit förklarad för lagring av information En bit är den minsta beståndsdelen för lagring av data/information på digitala medier (notera litet ”b”). Ordet bit kommer från ”binary digit”, där ett binärt värde kan ha antingen ett värde på 1 eller 0 (av eller på/aktiverad eller inaktiverad). En bit rymmer alltså 2 möjliga värden. Där en… Läs mer… »

I nedan innehållsförteckning kan ni se vad jag tänker gå igenom och ta upp i detta inlägg. Introduktion – Vad är Responsiv Webbdesign? Tillvägagångssätt – Mobile-First vs. Mobile-Last Tekniker och kodningsmetoder – ”Enhetsspecifikt” vs. ”Breaking-points” (för & nackdelar) Breaking-points kodningsmetoden Att tänka på Nackdelar? Fördelar jämfört med Enhetsspecifika kodningsmetoden Hur kodningsmässigt? Enhetsspecifika kodningsmetoden Nackdelar? Fördelar?… Läs mer… »

Step 1: Suggested File & Folder Structure MainFolder    -file:   index.php    -file:   index.html (base-template file)    -folder: incl/ (for includes)       -file:   incl/header.php       -file:   incl/footer.php       -file:   incl/config.php (PHP settings)       -file:   incl/functions.php (PHP functionality for all pages)    -folder: css/       -file: … Läs mer… »

Hej igen! :) I det här inlägget tänkte jag ta upp och gå igenom samtliga taggar som nämndes i detta inläggs rubriktext, både översiktligt och i detalj! Jag kommer börja med en tabell någorlunda liknande till den jag hade för tidigare inlägg om HTML behållare, där jag listade själva taggen, en översiktlig beskrivning (+ ev.… Läs mer… »

I detta inlägg tänkte jag gå igenom Block-level element behållare som vi har till vårt förfogande i HTML(5). Vi ska gå igenom följande element, hur man kan använda dem, såväl som vilken funktion de är tänkta att fylla: Element Beskrivning och funktion Länk <div> Division element för icke-semantisk behållare, se MDN citat nedan: The HTML… Läs mer… »

Detta inlägg har som syfte att gå igenom alla användbara och viktiga taggar att känna till för att strukturera upp själva innehållet för en webbsida. Därför kommer jag i det här inlägget gå igenom följande taggar: <hX> (för rubriktexter), <hgroup> (för rubriktexts gruppering), <p> (för paragrafer), <strong> & <b> (för fetstil), <em> & <i> (för… Läs mer… »

HTML tabeller kan vara användbart att känna till – speciellt när det gäller formatering av data på en webbsida. Det populäraste för tabeller tror jag är att bygga en tabell med tabellrader (<tr> – table rows) och tabellkolumn-celler (<td> – table cell), dock finns där även möjlighet att lägga till en s.k. caption (rubrik) för en… Läs mer… »

Bilder är något av det vanligaste typen av innehåll förutom text som man brukar placera på sina webbsidor, de kan ge webbsidan ett proffsigare och ”fullare” intryck om det är bilder av rätt typ, på rätt plats :) HTML’s bildtaggar känner ni säkert igen sedan tidigare: <img>, själv brukar jag använda 4 attribut (+ klass / ID)… Läs mer… »

iFrames element är en inbäddnings-bar ram som har möjlighet att ladda in andra webbsidor och innehåll till en annan webbsidas <body> tagg. Jag har endast använt iFrames själv i allra första början av min karriär som webbdesigner/webbutvecklare, och då använde jag den till att bl. a. ladda in aftonbladets webbplats på min egen webbsida inuti… Läs mer… »

Där finns två typer av listor jag tycker man bör lära känna för HTML-kodning, det är sorterade listor, samt o-sorterade listor. När vi pratar listor överhuvudtaget i HTML, så finns det inte längre direkt några aktuella HTML attribut som används – förutom då klass och ID för att kunna hänvisa till listorna från CSS stilmalls… Läs mer… »

Tjenare, tänkte nu skriva ett väl genomgående inlägg som på ett översiktligt och informativt sätt går igenom HTML specialtecken som är populära att använda sig utav i HTML-kodning. Varför specialtecken via HTML? Varför ska man då kunna detta/varför kan det vara bra att känna till detta? Jo, specialtecken kan användas till mycket, t ex. att komplettera vid… Läs mer… »

HTML länkar och länkning som ett koncept, är ett av de fundamentalaste koncepten för vad som är internet, utan våra länkar hade vi inte lika lätt kunnat hitta till webbplatser på ett lika effektivt sätt, eller sprida informationen så effektivt som vi kan nu. Våra webbplatser hade haft svårt att ha menyval som ledde till… Läs mer… »

Tänkta i denna del av Introduktion till On-page sökmotoroptimering (SEO) gå igenom ytterligare lite visdomsord innan val av domännamn, såväl som delge er läsare med några väldigt användbara och bra sökmotoroptimerings verktyg online, där ett av de kan användas för nyckelords analys, medan ett annat beräknar värdet av en publicerad webbsida baserat på sökmotoroptimerings betyg.… Läs mer… »

Denna del av Introduktion till On-page sökmotoroptimering (SEO) syftar till att informera er om vikten av att ha bra och kvalitativt innehåll på ens webbsida. Detta har blivit desto viktigare på senaste tiden då sökmotorerna lägger mer och mer fokus på indexering av en webbsidas själva innehåll. Så då kan det vara smart att skriva… Läs mer… »

I denna del av inlägget kommer jag att hänvisa till en mycket användbar och bra webb-referenssida hos learn.shayhowe.com som i detalj går igenom viktiga saker värda att ha koll på för HTML(5) semantik. När vi pratar blockelement och en webbsidas struktur så kom HTML5’s kod-standard med en del nya tillskott som ni redan fått se som hastigast i… Läs mer… »

HTML5-bildtaggen (<img>) har ett attribut som krävs för att få en sida validerad enligt HTML5-kodstandard, som är: ”alt”-attributet. Detta är bra att ha med för att dels få sidan validerad – men även för två andra syften, nämligen: talsyntes och sökmotoroptimering. Bilddata för indexeringsrobotar För bilder på webbsidor så gäller samma sak för indexeringsrobotar såväl… Läs mer… »

För några år sedan (i skrivande stund) så var det betydligt populärare än vad det är idag med taggar som meta-keyword. Idag fokuserar indexerings robotarna mer och mer på själva innehållet som finns skrivet på en webbsida – därav den stora vikt som kom med HTML5-semantiska uppmärkningen av innehållet så indexeringsrobotarna förstår innehållet betydligt bättre… Läs mer… »

Man lär sig av sina misstag brukar man ju säga, och i det här fallet lärde jag något nytt om WordPress… Tydligen så formateras inte rubriktexterna för inlägg som man publicerar (märkligt med tanke på att inläggets själva innehåll formateras), och jag hade tidsinställt publicering av mitt senaste sökmotoroptimeringsinlägg till kl: 10:00 idag, och när… Läs mer… »

<title> taggen är viktig av ett flertal anledningar, dels då den kan användas som stöd för dina besökare om de skulle tappa bort sig på din webbsida då <title>-taggen’s text placeras i webbläsarramen– eller för er som surfar med flikar i webbläsaren – så blir det en typ av ”titeltext” för fliken där webbsidan visas (Större… Läs mer… »

Jag har de senaste åren både läst på- och provat på i praktiken olika metoder när det kommer till sökmotoroptimering (on-page), och har fått hyfsad koll på vad som håller tyngst vikt och hur sökmotorer indexerar en sida och dess innehåll utefter meta taggar, innehållsformatering, ordval, rubriker, m.m. Jag tänkte här dela med mig av viktiga… Läs mer… »

Sökmotoroptimering även känt som SEO för Search Engine Optimization på engelska, är ett idag väldigt omtalat och populärt ämne att ha koll på när man jobbar med webbplatser och webbinnehåll. Därför tänkte jag gå igenom den del av sökmotoroptimering som är deklarerad: ”On-page”, då den äger rum på själva webbsidan, den resterande delen av sökmotoroptimering består… Läs mer… »

Ett litet snabbt ”nattinlägg” där jag tänkte ta upp lite tips och tankesätt för hur man kan strukturera upp sina webbprojekt i mån av filer och organisering med hjälp av mappar, såväl som hur man namnger respektive för att funka så bra som möjligt på nätet. Saker att undvika för namngivning av mappar och filer avsedda… Läs mer… »

I webbutveckling har vi en hel del typsnitt vi kan använda för att få just den typen av utseende vi är intresserade utav att ha på vår egna webbsida. Men det är mycket tankar som bör övervägas innan man bara klistrar på ett typsnitt på sin webbsidas texter och innehåll – detta då bl. a. läsning av… Läs mer… »

Hej igen alla webbutvecklings entusiaster och fantaster :) Jag ansåg att Mozilla Firebug och Google Developer tools behövde en ordentlig genomgång- och har därför beslutat mig för att skriva ett dedikerat inlägg till bara dessa. Men tanken med detta inlägg är att gå in på djupet i båda utvecklingsverktygen. Vi kommer gå igenom dess gemensamma funktioner… Läs mer… »

Jag var själv en person som brukade använda Pastebin.com väldigt mycket tidigare, p.g.a. dess enkelhet att kunna ladda upp kod med syntax highlightning för många språk… Detta var tills jag upptäckte en sida av pastebin.com som inte passade mig speciellt bra – när du t ex. behöver hjälp med studier eller affärsprojekt där det hade… Läs mer… »

Tjenare alla läsare! I detta inlägg hade jag tänkt gå igenom hur vi bygger upp en webbsida från grunden utifrån en framtagen skiss steg för steg, med förklaring av var steg på vägen :) Detta är en väldigt viktig kunskap att ha och känna till, speciellt om ni siktar på att jobba lite mer ”professionellt”… Läs mer… »

Hej igen alla läsare :) I detta inlägg hade jag tänkt gå igenom stegen för att skapa vår alldeles första, HTML5-mall (väldigt simplifierad med bara det väsentligaste ”for now” – mer avancerad kommer att gås igenom i ett annat inlägg framöver). Mallen vi kommer att skapa/visa här kommer ni sen kunna använda som den fundamentalaste grunden som kan… Läs mer… »

Detta inlägget skriver jag i syfte om att informera er läsare som sysslar med- och är intresserade utav webbdesign/webbutveckling eller kanske bara datorer och internet i allmänhet och någon gång stött på länkadresser i något sammanhang. För många som använder internet idag så känner de säkert igen länkar / URL:er som ser ut som t… Läs mer… »

Två attribut som gäller för i stort sett alla HTML-taggar är attributen: id och class. ID attributet: används för unik identifiering av ett element på en enstaka webbsida, vilket betyder att samma ID-värde får enbart finnas för 1 specifikt element på en hel webbsida! Medan class attributet kan finnas på flera element på samma webbsida. Båda attributen används för att identifiera, och… Läs mer… »

Var man skriver HTML-koden för sin egen webbsida Man kodar hemsidor i texteditorer, som t ex. Notepad, Notepad++, SublimeText, eller annat program, det finns även IDE’s (Integrated Development Environments), som stödjer HTML-kodning. Vissa har mer funktioner och finesser än andra, själv föredrar jag att koda i Notepad++, användarvänligt, enkelt, rent och praktiskt(!) Men vanliga Notepad… Läs mer… »

En webbsida i sin simplaste form består av tre taggar/områden (ev. fyra – se slutet av inlägget). DTD – Document Type Definition Denna indikerar vilken typ av kod-dokument/kod-standard webbläsaren skall tolka. Detta är nödvändigt då varje gång en besökare besöker en webbsida i webbläsaren så är det webbläsaren som läser igenom och ”översätter” källkoden till det… Läs mer… »

Att inspektera HTML-kod för webbsidor du besöker i webbläsaren, brukar inte vara svårare än att högerklicka på webbsidan, och välja ”inspektera-källkod”, eller granska källkod, eller liknande. Källkoden för en webbsida brukar oftast syfta till HTML-koden (kan även inkludera JavaScript och CSS-kod dock). I Google Chrome verkar alternativet heta ”Visa sidkälla” såvitt jag kan se just nu… Läs mer… »

När HTML-standarden XHTML (X:et står för eXtensible och XHTML var en kombinationsstandard mellan HTML & XML) kom så följde även strikta och bra kodningspraktiker med från XML. På följande länk kan mer i detalj ses vilka skillnader det blev mellan HTML 4.01 och tillkommandet av XHTML 1.0, och XHTML’s nya kodningsprinciper är betydligt bättre (tycker… Läs mer… »

Med HTML5 kom smarta och bra uppdateringar när det gäller s.k. ”semantisk markup” (läs mer om ordet semantik på: synonymer.se/semantik). Vad detta då är och innebär, är att istället för att definiera ganska så ”intetsägande” element för att bygga upp sin webbsida, så har man nu möjligheten att bättre – inte bara för sig själv… Läs mer… »

HTML-taggar som Element, med Attribut som Egenskaper HTML-taggarna utgör vad som kallas för s.k. ”element” på webbsidor (t ex. en <div> tagg motsvarar ett ”division”-element, eller på svenska: ”avdelnings element” (personligen föredrar jag att tänka mig <div> element som behållare)), sådana element skulle kunna vara bilder, paragrafer, formulär, tabeller, listor, behållare, m.m. som ni kan se… Läs mer… »

HTML-förkortningens betydelse förklarad HTML står för HyperText Markup Language, och kan på svenska översättas till ”märkspråk för webben”. HTML-taggar förklarade Webbsidors struktur byggs upp med hjälp av HTML-taggar. Dessa kan sen skrivas antingen som ensamstående (t ex: <taggnamn />), eller som tagg-par: där första taggen ”startar” ett tagg-spann (<tagg>), och den andre ”slutar” ett tagg-spann (</tagg>). Notera… Läs mer… »

Jag som kommer skriva inlägg på denna sidan är för tillfället anställd som Full-stack webbutvecklare för ett e-handelsföretag parallellt med att bedriva egen verksamhet som konsult inom data/IT och webbutveckling. Dessförinnan var jag universitetsstuderande på distans inom områdena datateknik, webbdesign och webbutveckling på diverse högskolor och universitet i olika delar av Sverige. Jag har haft… Läs mer… »

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/enheter så används ju bandbredden varje gång- och… Läs mer… »

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… Läs mer… »

Du har säkert blivit förbryllad av hur de hexadecimala färgkoderna inom webbdesign och 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… Läs mer… »