Etikettarkiv: webbutveckling

IVT Center i BorÄs

En responsiv webbplats till IVT Center 7h

IVT Center SjuhÀrad efterfrÄgade ett ansiktslyft för sin webbplats med kravet att den Àven skulle fungera i mobiltelefoner. Efter en inledande workshop stod det klart att en responsiv webbplats i WordPress var det alternativ som skulle fungera allra bÀst för Morgan pÄ IVT 7h.

Webbplatsen pÄ mobil

Webbplatsen pÄ mobil

United States of Tikka tog fram en designskiss och byggde dÀrefter upp mallar. I bakgrunden ligger de senaste responsiva mallarna frÄn WordPress (twentytwelve) vilket innebÀr att siten tryggt kan uppdateras utan risk att design och funktion förÀndras avsevÀrt vid uppdateringen.

Tanken har varit att hÄlla webbplatsen ren i sin design och enkel att navigera samtidigt som den förmedlar en mjukare sida med stora bilder centralt i designen. Sidan uppdateras enkelt med nyheter som presenteras pÄ startsidan utifrÄn kategori. Det har varit viktigt frÄn början att underlÀtta för sÄvÀl besökare som för Morgan som ska uppdatera sidan. Erbjudanden, produkter och kundberÀttelser lÀggs upp som inlÀgg och ligger kvar i webbplatsens arkiv för framtida referens. För Morgan innebÀr det att han kan fokusera pÄ att uppdatera nyheterna istÀllet för att hÄlla koll pÄ vilka sidor som behöver redigeras.

  • Workshop för att fĂ„ fram syftet
  • Webbdesign
  • Webbutveckling i WordPress

HTML5 – sĂ„ hĂ€r börjar du

För en tid sedan började jag lĂ€sa igenom Mark Pilgrims bok om HTML5 för att sĂ€tta mig in i vilka skillnader det rent konkret innebĂ€r vid webbutveckling. Som jag tidigare konstaterat sĂ„ finns det anledning att grotta ner sig i HTML5 ifall man Ă€r intresserad av webbutveckling – och det behöver inte vara sĂ„ svĂ„rt. Första steget för att konvertera till 5:an Ă€r nĂ€mligen bara att byta doctype. Med denna enkla handling Ă€r du igĂ„ng. Oroa dig inte för komplikationer, resten av sidan kommer fortfarande att renderas korrekt eftersom HTML5 Ă€r en förlĂ„tande uppdatering som Ă€r bakĂ„tkompatibel (hoppas Pilgrim har rĂ€tt). SĂ„ hĂ€r ser doctypen för HTML5 ut:

<!doctype html>

Borta Àr de lÄnga doctypes som var omöjliga att minnas och stÀndigt copy/pastades in pÄ sidorna. Et voíla! Du Àr nu igÄng med HTML5 och har tillgÄng till nya element som:

<nav>, <section>, <header>, och <footer>

För dig som har kodat blockdesign med hjÀlp av CSS Àr det hÀr egentligen inget nytt. IstÀllet för att anvÀnda span class eller id sÄ har du fÀrdiga element att anvÀnda dig av. Du sparar in nÄgra tecken och förbÀttrar samtidigt webben. Hur kan anvÀndandet av fÀrdiga element göra ansprÄk pÄ att förbÀttra webben? Jo, genom tydligare struktur pÄ vÄra sidor blir det lÀttare för olika webblÀsare att hantera innehÄllet. Framförallt kan det underlÀtta tillgÀngligheten för grupper som av olika skÀl vill kunna hoppa över delar eller lÀtt kunna hoppa mellan rubriker, som exempelvis anvÀndare av talsyntes.

Behovet av de nya elementen hÀnger samman med att vi idag ofta bygger sidor med hjÀlp av mallar. Ett blogginlÀgg kan utgöra en fullvÀrdig sida i ett sammanhang för att i nÀsta utgöra en sidkomponent. Det Àr dÀrför viktigt att vÄr markup kan anpassa sig efter detta. Alla webbutvecklare med aktning vet t.ex. att man bara fÄr anvÀnda en gÄng per sida, men detta Àr numera inte lÀngre helt sant. Genom att lÀgga under en egen sektion som t.ex. sÄ kommer den tolkas som en del av en sidkomponent och automatiskt skapa en korrekt outline/hierarki för lÀsaren. Borta Àr en stor del av det komplicerade nÀstlandet med -, dÀr man var tvungen att försöka hÄlla koll pÄ vilken nivÄ en rubrik skulle sÀttas.

Men hur Àr det med alla kreativa möjligheter som man har hört talas om? Jo HTML5 erbjuder ocksÄ element som:

, och nya formulĂ€relement som <input type=”search”>

Dessutom finns en rad nya funktioner som möjliggör geolocation, offline funktion och HTML5 lagring hos anvÀndaren. Funktioner som jag ser fram emot att bekanta mig med. Framförallt ser jag fram emot att sÀtta mig in i hur detta kan anvÀndas för att förhöja upplevelsen för anvÀndaren och pÄ sÄ vis underlÀtta vardagen för oss alla.

Vilka Àr dina favoritfunktioner med HTML5? Vad bör jag fördjupa mig i?

En första bekantskap med HTML5

Det Àr vÀldigt lÀtt att stagnera trots att man lovat sig sjÀlv dyrt och heligt att man ska följa med i alla svÀngar. IgÄr lÀste jag tre kapitel ur boken HTML5: Up & Running av Mark Pilgrim. Det var helt enkelt dags att konkret sÀtta sig in i vad HTML5 Àr för nÄgot istÀllet för att slÀnga sig med luddiga termer.

Första gĂ„ngen jag provade pĂ„ HTML-kodning var pĂ„ gymnasiet Ă„r 2000, vi fick skriva Hello World, göra en tabell och byta fĂ€rg pĂ„ bakgrunden. Jag förstod ingenting. Vad ska jag med det hĂ€r till? 2003 lĂ€ste jag Webbredaktör, design och publicering pĂ„ Högskolan i BorĂ„s. Jag tror att jag sökte utbildningen för ordet design stod i kursnamnet. Vi fick lĂ€ra oss att tabelldesign var pĂ„ vĂ€g ut, frames var praktiskt taget olagligt och det nya var CSS och block/lager-design. Vi jobbade i notepad med ren kod. Jacob Nilsen var vĂ„r webbguru och vi gjorde vĂ„rt bĂ€sta för att undvika onödiga bilder och grafiska element. Jag flyttade dĂ€refter till Örebro 2005 för att lĂ€sa Digital mediedesign. Nu var det XHTML som gĂ€llde. SmĂ„ förĂ€ndringar men Ă€ndĂ„ en kĂ€nsla av att börja om. Alla pratade om Flash och vi drömde alla om att bli duktiga animatörer men fick mest sitta med Dreamweaver och bygga strukturer.

Idag Àr jag glad att vi fick lÀra oss strukturer och grunderna i kodning men jag inser ocksÄ att jag sedan 2007 inte riktigt har tagit mig tid att lÀra mig nytt. Det har pratats om Web2.0, den sociala revolutionen och HTML5 och visst har jag hÀngt med pÄ principerna. Men vad innebÀr dÄ HTML5 rent konkret?

Boken jag har börjat lĂ€sa ges ut av O’Reilly, som Ă€r nĂ€rmast legendariskt nĂ€r det gĂ€ller böcker om informationsteknologi. Det fina Ă€r att boken gĂ„r att finna i sin helhet online som Dive into HTML5 . Den har ett par Ă„r pĂ„ nacken nu men för nĂ„gon som Ă€r ny spelar det knappt nĂ„gon roll. Jag tycker att Pilgrim gör ett fantastiskt jobb med att göra historien om Internet mer levande. Han förklarar helt enkelt varför koden vi knackar ser ut som den gör och hur HTML5 har kommit att förĂ€ndrat detta. Det hĂ€r Ă€r perfekt för mĂ€nniskor som mig som inte Ă€r tillrĂ€ckligt inbitna utvecklare för att hoppa rakt pĂ„ godsakerna utan helst vill förstĂ„ varför vi gör nĂ„got först.

Den korta varianten för trötta lÀsare Àr att ingen egentligen behöver bry sig om HTML5. Det Àr ingen fara pÄ taket om du inte har hÀngt med. Alla vÄra gamla sidor kommer att fortsÀtta fungera som de ska eftersom 5:an Àr av det förlÄtande slaget. 5:ans markup har förenklats för att underlÀtta och minimera risken för misstag men för den som Àr bekvÀm i sina gamla spÄr gÄr det bra att fortsÀtta som förut. Naturligtvis tillkommer pÄ det en del nya finesser som vi webbutvecklare kan och bör anvÀnda oss av. Enda parentesen Àr att alla funktioner Ànnu inte stöds av alla webblÀsare. Det gÀller med andra ord att som vanligt inte förlita sig pÄ att den valda funktionen alltid fungerar.

Vilka Ă€r dĂ„ finesserna? Jo, med HTML5 kommer en rad nya element som möjliggör en tydligare struktur pĂ„ vĂ„ra webbsidor. Borta Ă€r nĂ€stlandet med – för att skapa sidhierarkier. IstĂ€llet arbetar vi med olika sektioner som , , , och dĂ€r kan anvĂ€ndas inom sektionen trots att den redan förekommer pĂ„ andra hĂ„ll pĂ„ sidan. Detta innebĂ€r en klar förbĂ€ttring för de anvĂ€ndare som har behov av tillgĂ€nglighetsdesign och för webbutvecklaren sjĂ€lv. Sen finns elementen

Visst finns det anledning att lÀra kÀnna HTML5 nÄgot mer. Jag kommer hÀrnÀst lÀsa klart boken och fördjupa mig i det jag finner intressant. Vilka Àr dina favoritfunktioner med HTML5?

K

4 frÄgor vid uppdatering av hemsida för smÄföretagaren

Förra veckan hade jag ett möte med Morgan Larsson pÄ IVT center 7h (SjuhÀrad) om företagets webbplats. Det Àr nu sex Är sedan jag designade deras hemsida med hjÀlp av XHTML, CSS och PHP. DÄ var företaget ett sidoprojekt till en större satsning inom energieffektivisering. Idag stÄr företaget helt pÄ egna ben med fokus pÄ vÀrmepumpsteknik och service.

NÀr hemsidan byggdes var syftet att ha en nÀrvaro pÄ webben. Viktigast var att informera om adress, öppettider och hur man kunde komma i kontakt med Morgan. Idag har hemsidan en betydligt större betydelse för verksamheten och det Àr dÀrför dags att ta sig en titt pÄ hur vi pÄ bÀsta sÀtt kan fÄ den att leverera utifrÄn de nya förutsÀttningarna.

NÀr det kommer till att utveckla en hemsida för ett mindre företag eller en enskild nÀringsidkare sÄ finns det ett antal punkter som jag anser vara viktiga att tÀnka pÄ.

Hur ofta Àr det troligt att företaget uppdaterar sin hemsida?

Om svaret Àr minst en gÄng i mÄnaden sÄ kan det vara vÀrt att integrera en blogg i webbplatsen. En blogg med regelbundna uppdateringar kan förbÀttra sökmotorsoptimeringen och erbjuda besökare vÀrdefull information. Det Àr vÀrt sin investering i tid. Om svaret Àr ett par gÄnger om Äret kan det ÀndÄ vara vÀrt att övervÀga en bloggintegrering men att minska förvÀntningarna pÄ uppdateringar genom att döpa om sidan till Resurser, Tips & RÄd, Erfarenheter eller RÄdgivning. Om det Àr mer sÀllan sÄ kan det vara bÀst att utelÀmna bloggen tills vidare för att minska den totala kostnaden.

Vilken nÀrvaro har företaget i sociala medier?

För en del företag faller det sig naturligt att dela med sig av hÀndelser i sociala medier. Facebook, Twitter, Instagram eller Pinterest Àr med i den dagliga verksamheten och det finns en naturlig dialog med sÄvÀl kunder som branschexperter. I de fallen kan det vara en god idé att integrera innehÄllet frÄn sociala medier Àven pÄ webbplatsen. Webbplatsen blir levande och besökare kan lÀra kÀnna företaget genom uppdateringarna. De allra flesta smÄföretagare har inte den typen av nÀrvaro dock och dÄ Àr det viktigt som webbutvecklare att kunna hÄlla igen sin egen entusiasm över vad man kan göra. Om det finns en företagssida pÄ Facebook sÄ kanske det rÀcker med en ikon som lÀnkar till sidan hellre Àn statusflöden som uppdateras sÀllan.

Vilken webberfarenhet har företaget?

Idag kan man med enkla och billiga medel, till och med gratis, föra över en hemsida till en bloggplatform eller content management system (CMS). Dessa system gör det möjligt för nÄgon som saknar webbkompetens att uppdatera sina sidor med nytt innehÄll. Det kan handla om regelbundna blogginlÀgg men ocksÄ om att exempelvis byta ut erbjudandet pÄ erbjudandesidan. För en egenföretagare Àr det guld vÀrt att kunna göra detta utan fördröjning och extra kostnader. Ibland möter du dock nÄgon som sjÀlv har grundlÀggande kunskaper i HTML och i de fallen Àr de verkligen viktigt att tÀnka över hur ofta webbplatsen kommer att uppdateras. Om uppdateringar sker mer sÀllan och personen enkelt sjÀlv kan Àndra text och bild, kan det vara helt överflödigt att förflytta webbplatsen till en plattform.

Vad vill företaget uppnÄ med webbuppdateringen?

Den allra viktigaste frÄgan Àr vad de vill uppnÄ med förÀndringen? MÄnga gÄnger vet företagarna inte sjÀlva, de har bara en kÀnsla av att det Àr dags för en modernisering. Det Àr vÀldigt lÀtt att dras med i kÀnslan av att man mÄste förnya sig, sÀrskilt nÀr webbutvecklare ringer och poÀngterar nödvÀndigheten av detta. I dessa fall Àr det viktigt att gÄ tillbaka till kÀrnan och frÄga vilka behov som finns. Ett ansiktslyft Àr relativt enkelt och kostnadseffektivt att göra. Nya bilder, nya fÀrger och ny grafik ordnas enkelt med CSS och bildredigering. En bloggintegrering tar lite mer tid. Att bygga en helt ny webbplats frÄn grunden kan vara nödvÀndigt dÄ den befintliga har stora brister i struktur och innehÄll men Àr mÄnga gÄnger helt överflödig. Ibland har den befintliga sidan en hög sökmotorsrankning och dÄ kan det vara vÀrt att behÄlla grunden för att inte gÄ miste om den indexering som sökrobotarna redan har gjort.

IVT center 7h

Efter onsdagens möte med Morgan stod det klart att det inte nödvÀndigtvis Àr funktionaliteten som behöver en uppdatering utan snarare kÀnslan. Det Àr med andra ord dags för ett ansiktslyft.

Precis som för mÄnga andra smÄföretagare sÄ handlar den stora utmaningen för Morgan om att fÄ tiden att rÀcka till. MÄnga moderna hemsidor inkluderar idag en blogg och uppdateringar frÄn de största sociala medierna. Det börjar nÀrma sig praxis att en modern hemsida ska erbjuda dessa funktioner. TyvÀrr kan denna typ av integrering stjÀlpa mer Àn hjÀlpa i de fall dÄ företagets facebook-sida uppdateras en gÄng i halvÄret och senaste blogginlÀgget Àr tvÄ Är gammalt. Det Àr dÀrför av största vikt att tÀnka igenom de förutsÀttningar som rÄder och anpassa dÀrefter. Vad som dÀrtill Àr viktigt att tÀnka igenom Àr vilka framtida behov som kan komma att finnas. DÀribland kan den senaste tidens explosion av smart-phones och surfplattor rÀknas in. En investering i en webbplats som fungerar i olika format kan dÀrför vara vÀl vÀrt pengarna pÄ lÀngre sikt nÀr allt fler anvÀnder andra verktyg Àn datorer för att söka upp information.

Vilka Àr dina bÀsta tips för mindre företag som funderar pÄ en webbplats-uppdatering?