av ·0 kommentarer

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 jag själv) att följa vid kodandet av HTML: http://www.w3.org/TR/xhtml1/#diffs – De bidrar med renare, striktare och professionellare HTML-kod! Detta är även varför jag kommer följa dessa vid egna kodexempel.

Små bokstäver för alla taggar

XHTML kräver att ALL HTML-kod skall vara med små bokstäver (gemener)!

<table> <- Korrekt
<TABLE> <- Fel
<TaBle> <- Fel

Avsluta taggar i korrekt ordning

Taggar skall avslutas i rätt ordning – t ex. om du startar en paragraf-tagg och inuti den har en span-tagg, så måste span-taggen avslutas först, och sist paragraf-taggen.

<p><b>fisk</b></p> <- Korrekt ordning
<b><p>fisk</b></p> <- Fel ordning - se byte av plats på </b> och </p> t ex.

Stäng alla taggar som öppnas

XHTML kräver även att alla taggar som öppnas, måste stängas! Vilket betyder att ensamstående taggar måste avslutas på följande vis: <br /> med ett mellanrum och ett snedstreck innan ”större-än”- tecknet. XHTML krävde även att ALLA attribut-värden skulle omslutas med citationstecken.

<hr /> <- Korrekt
<hr>   <- Fel
---------------------------------------------------------------------------------
<header>
    <img src="" width="" height="" alt="" />
    <nav></nav>
-------- <- Notera hur här saknas </header> avslutningstaggen för <header> t ex.
<article></article>
<footer></footer>

<header>
    <img src="" width="" height="" alt="" />
    <nav></nav>
</header> <- Notera hur FINNS avslutningstaggen för <header> jmft. med ovan exempel där den saknades.
<article></article>
<footer></footer>

Indentering för ökad läsbarhet och bättre kodningsstruktur

En personlig preferens som man sen kan avgöra om man vill använda sig av eller inte- är användandet av s.k. ”indentering”, som jag snappat upp från programmeringen. Indentering innebär att man skapar en ”hierarkisk frånskjutningsstruktur” från vänster i koddokumentet utefter hur element (eller kod i allmänhet) är nästlad och hör ihop, så man ser vilken kod som hör till var. Se exempel nedan:

<första-tagg>
     <första-tagg-sub-tagg>
          lite text…
     </första-tagg-sub-tagg>
 </första-tagg>

Med ovan exempel kan vi se att följande kodblock tillhör <första-tagg> taggblocket:

<första-tagg-sub-tagg>
     lite text...
</första-tagg-sub-tagg>

camelCase för bättre och lättläsligare namngivning i kod

En annan personlig preferens- även denne hämtad från programmeringen, är något som kallas för ”camelCase”, och för er som ännu inte stött på detta är det konsten att skriva lättlästa beskrivande/deskriptiva namn för t ex. variabler och annat genom att börja första ordet med liten bokstav, därefter följer varje nytt ord efter första med en stor första bokstav! Se nedan exempel på variabelnamn med camelCase:
enVariabelSomHeterDuga
secondVariableToUse
thirdVariableToUse

Väldigt användbart och proffsigt ;)

Kommentarer för dokumentation och information av vad ens kod gör

Kommentarer i HTML är ytterligare en väldigt viktig del som hjälper utvecklare att dokumentera sin kod, såväl som informera övriga utvecklare om vad specifika delar i koden fyller för funktion.

Där finns bara en typ av HTML-kommentar som gäller för både enskilda, såväl som flera rader med text, medan t ex. i vissa programmeringsspråk så finns där olika typer av kommentarer för utifall kommentaren sträcker sig över en, eller flera rader.

HTML-kommentaren ser ut som följer:
<!– Kommentarstexten här –>

Som ni då ser ovan så inleds en HTML-kommentar med <!–, och avslutas med –>.

Emellan starten av kommentaren och slutet av kommentaren så skrivs då kommentarstexten, och denne kan sträcka sig över enstaka rader, såväl som flertalet rader, så länge den är emellan starten och slutet av HTML-kommentaren.

Vad dessa start- och sluttecken i princip gör- är att meddela webbläsaren att ignorera vad som än som står mellan dessa tecken. Då kommentarer egentligen är innehåll som skall ignoreras av webbläsaren när den tolkar din webbsida och dess kod för att sen presentera för sidans besökare.

av ·0 kommentarer

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 och andra utvecklare, men även för indexeringsrobotar (kommer förklaras mer i detalj i inlägg om sökmotoroptimering som kommer att skrivas inom kort) – att informera om vad taggen har för syfte på hemsidan, och vilken typ av innehåll den har hand om. Detta då sökmotor-indexeringsrobotarna inte kan på samma sätt som oss människor läsa och förstå kontexten/sammanhanget av en text. Däremot kan de läsa taggarna och få sig en bättre uppfattning om vad taggen gör/har för typ av innehåll – om dess ”taggnamn” har betydelse!

Därav ”Semantisk markup” – taggnamnen har en betydelse för mer specifikt vilken typ av innehåll de ska ta hand om.

Praktiskt exempel varför Semantisk markup framför vanlig markup

Ett mer praktiskt exempel på detta är att man förut oftast använde <div> taggar för att skapa behållare på en webbsida, men den var ganska intetsägande om själva innehållet den skulle hantera då det enda taggnamnet informerade om, var i stort sett ”division-element”.. Men med HTML5 så hade tydligen de som utvecklade den nya standarden gjort undersökningar för att se vilka ID och Klass-attribut som var mest använda på webbsidor på nätet för att se vilka nya typer av element som hade underlättat HTML-kodandet, såväl som gett taggnamnen en smartare innebörd och betydelse för indexeringsrobotarna- såväl som utvecklare.

Semantiskt tagg-tillskott med HTML5

Några av dessa ”semantiska taggar” som blev nya tillskott med HTML5 för att ersätta DIV som behållare i olika lägen var som följer: <header> för sidhuvud, <footer> för sidfot, <section> för sektioner/avdelningar på sidan, <article> för artiklar på webbsidor, <nav> för navigeringsdelar på en webbsida, <aside> för sidospalter, samt <figure> & <figcaption> för bildbehållare med möjlighet till undertexter (figcaption-elementet).

av ·0 kommentarer

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 i ovan stycke.

Till varje HTML-tagg så finns det attribut, som nämndes ovan- som motsvarar egenskaper man kan tilldela sina taggar, olika taggar har olika egenskaper, men kan även ha vissa gemensamma attribut/egenskaper även trots att taggarna är olika!

Attributen erbjuder utvecklaren möjlighet att utöka HTML-taggarna på fördefinierade sätt som i sin tur möjliggör skapandet av unika webbupplevelser.

Där finns t ex. attribut som definierar ett elements bredd, respektive höjd, samt attribut som tilldelar identifierande värde (id), som sen kan hänvisas till från andra kodspråk för att hitta just det elementet!

Wrappers – vad är det, hur använder man det, och varför använda det?

Wrappers är ett koncept som ofta glöms att nämna vid utbildande inom området webbdesign och webbutveckling. Kanske då utbildare antar att alla förstår vad det är och hur man använder dessa, men jag tror att för många är detta inte så självklart.. För er som inte ännu är bekanta med wrappers kommer jag här gå igenom vad de är, hur ni kan använda de och varför.

Varför man ska använda wrappers är enkelt: för bättre design och uppbyggnad/struktur av webbsidor.

Vad: Wrappers är samma sak som om ni tänker er ramar som läggs omfamnande kring flera lösa byggklossar för att samla alla klossarna inom den ramen, då har ni i stort sett greppat vad de är och hur de fungerar.

De är tänkta att ”omfamna” lösa byggklossar som är relaterade till varandra – den vanligaste Wrappern är ”huvudwrappern” för en sida som är tänkt att omfamna alla elementen för en webbsida. Se exempel nedan:

<div id="mainContainer">
     <header>
          <img src="logo.png" width="" height="" alt="" />
          <nav>
               <ul>
                    <li></li>
                    <li></li>
               </ul>
          </nav>
     </header>
     
     <article>
          <p></p>
     </article>

     <footer></footer>
</div>

Vad är då poängen med detta? Jo, om ni har en behållare/wrapper som omfamnar alla elementen på er webbsida så är det bl. a. mycket enklare att ange stilar som är gemensamma för flera barn-element inuti den wrappern på ett och samma ställe – nämligen wrappern själv – då barn-elementen ärver egenskaper från wrappern!

Detta är speciellt användbart för att ange en gemensam bredd för samtliga element på webbsidan, såväl som att inte få innehåll att ”flyta över gränserna”, vilket tenderar att hända om man inte har någon form av wrapper som hindrar det från att hända.. Jag gillar att kalla det: ”spacial-confinement-restrictions”, vilket på svenska kan översättas till: rumsliga inneslutnings begränsningar.

Med detta menar jag att om vi antar att ni har en wrapper, och inuti denne har ni en artikeltext, då kommer artikeltexten endast fylla ut fram till kanten av wrappern, och inte längre, då den endast kan sträcka sig så långt som wrappern såvida inte ”speciell” positionering anges via CSS.

av ·0 kommentarer

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 hur slut-taggen stängdes genom att lägga till ett snedstreck (/) efter första tagg-tecknet (”mindre-än”-tecknet: <). Notera även för ensamstående tagg visad ovan, hur den avslutas i slutet av sin tagg innan sista tagg-tecknet (”större-än”-tecknet: >) med ett snedstreck även den (/), fast tillsammans med ett mellanrum innan snedstrecket!

Se exempel på ensamstående tagg:
<tagg />

Och exempel på tagg-par som utgör ett tagg-spann, se nedan:
<tagg> spann här emellan </tagg>

Vad HTML ansvarar för i webbutveckling

HTML är ett kodspråk kallat ”märkspråk” på svenska (markup language på engelska) som kortfattat nämndes ovan. Det kallas märkspråk då det används för att ”märka upp” själva strukturen och semantiken för webbsidor. Mer om vad markup betyder i HTML-sammanghang kan läsas här: motive.co.nz/glossary/markup.php#html

Om ni som mig när man var liten, byggde med Lego, så kan ni föreställa er HTML-taggarna som utgör hela HTML kodspråket- som alla tillgängliga byggblock man kunde använda för att bygga sina legobyggen, fast för webbsidor är HTML-taggarna bygglocken man kan använda för att bygga sina webbsidor!

Som ni kanske märkte ovan så består en ”tagg” i grunden av ett ”mindre-än”- tecken i början, följt av namnet på ”elementet” taggen representerar, avslutat med ett ”större-än”- tecken.

HTML ansvarar för skapandet av: listor, tabeller, formulär, texter, lägga in bilder, filmer, ljud, skapa behållare, menyer, länkar, s.k. iframes, m.m.

HTML skapar helt enkelt alla elementen som bygger upp en webbsida, såväl som binder samman meta-data för sökmotor-indexeringsrobotar, och stilmallar samt beteende-script som alla hjälper till att skapa helhets webbplats-upplevelsen.

Varje HTML-tagg fyller en speciell funktion och har också möjligheten att utökas med hjälp av s.k. ”attribut” (för mer om detta, se inlägget om populära termer inom HTML).

Arv inom HTML, samt barn och föräldrar-element

Inom HTML brukar man prata om att man har föräldrar-element, såväl som barn-element, vad som då menas med detta är att element som är placerade inuti ett annat element, är barn till det första elementet. Med detta följer även att barn-elementet ofta ärver egenskaper som föräldrar-elementet har (detta syftar mest till CSS-stilar).

Man säger helt enkelt att barn-element ärver egenskaper från föräldrar-elementen.

av ·0 kommentarer

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 ett brinnande intresse för både datorer såväl som webbdesign och webbutveckling ända sedan jag gick i grundskolan, och nu har jag äntligen lyckats uppnå en kunskapsnivå där jag känner mig tillräckligt säker på väldigt många av de områden som spelar in på att skapa en fullfjädrad hemsida med diverse tekniker och teknologier som finns till ens förfogande idag.

Min förhoppning är att, via denna sida, kunna dela med mig av min passion till andra som också har ett intresse för webbdesign och webbutveckling och allt vad området innefattar.

Samla allt för webbutveckling på ett centralt ställe

Jag kommer att förse läsare med material som främjar egen vidareutveckling inom ämnet. Detta då jag själv nuförtiden ibland tittar tillbaka och önskar att jag hade haft tillgång till en sida såsom den jag tänker skapa här – med allt det viktigaste samlat på en central plats.

Med tillgång till: resurser, vägledning och väl-förklarade inlägg om hur man lär sig mer inom området, och successivt kan ta sig från nybörjare till proffs. Såväl som länkar till resurser, referenser och användbara verktyg samt läsvärda artiklar!

Sidan är inte enbart avsedd att förse er läsare med bra material, utan kommer även att agera samlingssida för mina egna äventyr inom området- såväl som fortsatta studier och vidareutvecklingar inom webbdesign och webbutveckling :)

Allt jag tror kan vara av intresse för er, såväl som det har varit för mig, kommer att publiceras här!

Mitt syfte med sidan

Ett citat som känns väldigt träffsäkert för mitt syfte med denna sida är:

”Gör för andra, vad du önskar andra gjort för dig”

Det är detta jag kommer sträva mot att ständigt uppfylla med den här sidan.
Förse er med material som jag önskar att jag hade kunnat ta del av på ett samlat ställe i början av resa och min tid som webbutvecklare.

Sidans innehållsspråk

Då svenska är mitt modersmål kommer inläggen i förstahand att skrivas på svenska, men engelska motsvarigheter för de svenska inläggen kommer också att skrivas allteftersom för att göra innehållet tillgängligt för fler.

När det gäller undersidorna som t ex. ”Länkar” så kan det hända att beskrivningar för specifika länkar är skrivna på engelska, detta då det vid skrivande stund ansetts enklast.

Egen slang på sidan

Ordet ”Webbdev” kan förekomma en del på diverse ställen på sidan. Detta är min egen samlingsterm för att definiera de sammanslagna orden ”Webbdesign och webbutveckling”, då det är ganska långt och otympligt att skriva ut alla gångerna.

Smakprov på vad sidan kommer ha att erbjuda

Några område såhär på rak arm som redan är planerade att skrivas om är som följer:

  • Webbdev baskoncept
  • HTML5 [& Semantisk markup]
  • CSS
  • JavaScript [& jQuery]
  • PHP
  • Databaser
  • Responsiv webbdesign
  • Sökmotoroptimering (on-page främst)
  • CMS & WordPress
  • Versionshantering av kod med Git & GitHub
  • Utvecklingsmiljö och programvara
  • Programmerings grunder
  • Facklitteratur och böcker
  • Övrigt
  • Webbhotell & Hosting
  • IRC för supportnätverkande
  • Google Analytics
  • Google Web Fonts
  • Användbar webbutvecklings matematik
  • Användbara datorkunskaper för webbutvecklare
  • Användbara kunskaper för att studera på universitetsnivå

… för att nämna några :)

För mer detaljerad information kring vad jag planerar att ta upp och gå igenom på sidan, kan ni besöka undersidan: ”Framtidsplanering: inlägg”. Kommer att uppdatera denna allteftersom :)

Feedback från er läsare

Jag uppskattar konstruktiv kritik för att hjälpa mig bli bättre på skrivandet av inlägg, etc. Speciellt såhär i början av mitt ”bloggande”.

Och jag tar även gärna emot förslag och önskemål, så tveka inte att höra av er, antingen via kommentarsfältet som kommer att vara tillgängligt från diverse ställen på sidan, eller på contact[at]webbdev-essentials.net , ser fram emot att dela med mig av mina kunskaper till alla er läsare :)

Tills nästa inlägg,
Bästa hälsningar,
Trekka12