Inlägg om Webbdesign

Publicerat Tips
Image Credit
This work, "AngularJS Superman", is a derivative of ".:`Business superman`:. 4" by Piotr Bizior. "AngularJS Superman" is licensed under CC BY by Spinit

Så fungerar AngularJS – en introduktion för både nybörjare och proffs

Har du hört talas om AngularJS? Om inte är det dags att få koll på vad det är och hur det gynnar både dig som beställare, utvecklare och slut­användare av webb. Vi har intervjuat vår system­utvecklare Sebastian Appler Olsson som förklarar vad AngularJS går ut på och hur han ser på verktygets många fördelar.

AngularJS är en mycket kraftfull upp­sättning verktyg som utökar möjligheterna med HTML eftersom du får hjälp att både enkelt och effektivt på ett nästan magiskt sätt kan generera dynamisk data till en webb­sida (t.ex. när man ska ändra en text som uppdateras på sidan i realtid) eller andra avancerade komponenter.

Sebastian Appler Olsson

– AngularJS är första steget mot nästa generations webb och det är här för att stanna. Det växer i otroligt hög takt och allt fler börja inse dess värde. AngularJS är det moderna sättet att bygga en webbsida på och jag tror att det kommer bli det självklara valet inom en snar framtid

Men låt oss backa bandet lite för dig som inte är så insatt i systemutveckling. Som du kanske vet skrivs de flesta webbsidor i allmänhet som HTML (Hypertext Markup Language) vilket är ett sid­beskrivnings­språk (även kallat taggspråk eller märkspråk). Detta språk bestämmer ett dokuments struktur och ger formaterings­anvisningar för t.ex. rubriker, stycken och kursiverad text samt hur detta skall visas för användaren på webben. Dilemmat är att HTML i grunden är statiskt och sviktar när du försöker använda det för att skapa spännande layouter eller dynamiska vyer i webbapplikationer.

För att skapa dynamik finns som bekant JavaScript vilket precis som namnet antyder är ett script-språk. Det fungerar som ett manus inbyggt i HTML-koden och ger, med sina instruktioner skrivna i klartext, möjlighet att skapa roligare grafik och snygga funktioner som t.ex. knappar, formulär, bilder och fönster.

AngularJS är i sin tur, förenklat uttryckt, ett JavaScript-bibliotek, d.v.s. en uppsättning verktyg för att bygga den ram som passar just din applikations­utveckling bäst. Med hjälp av AngularJS kan du utöka HTML:s ordförråd för din applikation och skapa flexibla och dynamiska webbsidor – en miljö som är uttrycks­full, givande för användaren och går snabbt att utveckla. Resultatet är dessutom fullt utbyggbart och möjligt att anpassa efterhand och fungerar bra ihop med många andra bibliotek. Varje funktion kan modifieras eller bytas ut för att passa utvecklarens unika behov av funktioner eller arbetsflöde.

Publicerat Uppdrag
Check-in-services Webbplats

Ny boendeuthyrningstjänst lanserad

Check-in-services är namnet på en nystartat företag vars uppgift är att under­lätta för privat­personer som vill hyra ut sin bostad. Med senior arbets­kraft från Veteranpoolen ser Check-in-services till att nyckel­överlämning, tvätt, städ och tillsyn utförs. I dags­läget finns tjänsten till­gänglig i Stock­holm och Göteborg.

Spinit utvecklar front-end / webbdesign

Check-in-services anlitade oss på Spinit för att utveckla en attraktiv och affärs­stärkande design för den nya webb­platsen.

Besök checkinservices.se

Publicerat Uppdrag
Kulturella Hjärnan webbplats

Webbplats för Den kulturella hjärnan

Den kulturella hjärnan är ett projekt initierat av Karolinska Institutet och med stöd av Stockholms läns landsting och Statens musikverk, som samlar forskning om hjärna och kultur med bäring på hälsovård, rehabilitering och utbildning. Vi fick uppdraget att leverera en ny webbplats och grafisk design.

Hjärnforskning ur perspektivet hälsovård, rehab och undervisning

Målet är att samla och förmedla internationell spetsforskning inom området riktat mot såväl andra forskare, beslutsfattare och andra intresserade. Delar av innehållet är därför mer populär­vetenskapligt, men sakgranskat och korrekt och delar är referenser till forskningsrapporter och framsteg.

Innehålls­hantering med automatiserade referensfiler

För projektet behövdes en väl fungerande sajt. Det innebar ett innehålls­hanterings­system där det dels skulle vara enkelt att publicera material och dels på ett lätt sätt och med viss automatik skulle kunna lägga in referenser.

Det handlade om referenser till vetenskapliga rapporter och artiklar. Den information man ville automatisera motsvarar vad som används av forskare i så kallat endnote-format. Till varje rapport och artikel som publiceras, så publiceras även en liten referensfil. Den innehåller information om författare, publiceringsår, publikation, synopsis och liknande. Den används som ett enkelt sätt att få en slags konsekvens i hur sådana saker dokumenteras och för att se till att den som publicerar får med all information de vill ha med.

kulturella-filter2

WordPress med tilläggs­funktionalitet

I samråd med redaktörerna för Den kulturella hjärnan så valde vi att bygga sajten i WordPress. Till WordPress skrevs ett tema och ett par plugin.

Temat är modernt och inte överlastat med 3d-knappar, skuggor och andra grafiska effekter, samtidigt är det inte helt platt utan använder ett grafiskt sidhuvud med en minimal parallax-effekt.  Temat skrevs naturligtvis responsivt, så att sajten skall fungera på mobila enheter likväl som på datorer.

Det mest väsentliga pluginet är ett tillägg till WordPress för endnote. Det skapar en specifik inläggstyp för vetenskapliga referenser. Det tillåter att man importerar informationen från referensfilerna i endnote-format. Resultatet är referenser som är lätta att filtrera, lätta att följa och använda och konsekventa.

Se resultatet på kulturellahjarnan.se

Publicerat Tips

Hur vi använder WordPress för funktionella webbplatser

När det gäller publik webb väljer vi idag i nio fall av tio open-source-systemet WordPress. Inte för att det på något vis är vår standardplattform, utan för att de förstudier vi gör oftast resulterar i slutsatsen att WordPress är bäst för både kund och utvecklare.

Anledningen är att det är utbyggbart med många färdiga tilläggsanpassningar och väldigt enkelt att hantera för både utvecklare och användare. Med WordPress som grund kan WordPress användas till nästan vilket syfte du än önskar.

Det cirkulerar fortfarande många myter och förutfattade meningar om att WordPress bara är bra för bloggar. Men faktum är att begränsningarna på vad som kan göras i WordPress snarare handlar om utvecklarens kompetens än om systemets.

WordPress med språkhantering

Med tillägget WPML (The WordPress MultiLingual Plugin) får WordPress en språkhantering som är lika enkel att använda om du ska översätta några enstaka sidor till ett språk, som om du vill ha en massiv sajt på flera olika språk. Det finns även möjlighet att ge användare roller som översättare och lägga ut uppgifter till dessa.

WPML användes t.ex. i produktionen av EHC Tekniks webbplats.

En WordPressinstallation – flera sajter

Inbyggt i WordPress finns en funktion som kallas Multisite. Om man aktiverar den kan man skapa ett nätverk av flera sajter på samma installation. Fördelarna är många jämfört med att skapa flera olika installationer.

  • En inloggning för alla sajter
  • Plugin och teman kan delas mellan sajterna.
  • Användare kan begränsas till en sajt eller flera.

WordPress Multisite användes t.ex. i produktionen av Arcams webbplats.

Publicerat Uppdrag
Gillblads.se på Ipad

Mobilanpassad e-handel för Gillblads

Vi har nyligen avslutat ett projekt med att lansera ett nytt utseende för Gillblads e-handelsplats med responsiv design. Som tidigare har e-handeln Klarna som leverantör av fakturabetalning och DIBS för kreditkortsköp.

E-handeln har också fått en modernare plattform i nopCommerce 3 och har sedan tidigare integration mot DETA 3000, det butiksdatasystem som körs i den fysiska butiken,  med bland annat uppdaterade lagersaldon och prisuppgifter.

Gillblads viktigaste varumärkena är bl a ArmaniArmani Jeans, Burberry, Ralph Lauren, By Malene BirgerMonclerMichael KorsTurnoverSand och Hope. Avdelningen för kappor och jackor är en av landets mest välsorterade. Hos Gillblads finns också accessoarerna: väskor, plånböcker, scarves, halsdukar, mössor och hattar.
www.gillblads.se