Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different

saturations of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your

colour 4. Click OK

Insert client logo 1.  Select placeholder 2.  Choose Insert from top menu 3.  Choose Picture from file 4.  Select client logo 5.  Click OK

To view drawing guides 1.  Right click on slide and select ’Grid and Guides...’

2.  Check ’Display drawing guides on screen’

3.  Select OK

Välkomna

Pär Fröberg – CTO / Systemarkitekt Mattias Uhlegård –Systemarkitekt

© Creuna

Välja rätt i teknikdjungeln

Choose among many Layouts Right-click on slide and select Layout

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different

saturations of the colours, but we still recommend these second to darkest ones

Change colour of numbering 1.  Select all text with numbering

2. Choose Format/Bullets and Numbering 3. Select colour from ‘Color’ dropdown.

4. Click OK

Change background colour 1. Right click outside slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Idag kommer vi prata om

© Creuna

1  Rätt teknologi för varje lösning 2  Hur väljer man rätt? 3  Är det en eller flera lösningar? 4  CMS vs. Ramverk 5  Open source vs. Kommersiellt 6  CMS vs. CMS 7  Case 8  Summering

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Rätt teknologi för varje lösning

Del 1 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images 1. Click on Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

Click Increase Indent button to get predefined ‘quote-name’ font

© Creuna

“Om det enda verktyg du hade var en hammare, skulle du behandla allt som en spik”

- abraham maslow

+ =

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Hur väljer man rätt?

Del 2 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

•  Funktioner och flexibilitet

•  Programmeringsspråk

•  Budget

•  Driftsmiljö

•  Tillgänglighet

•  Redaktörsgränssnitt

•  Administrationsgränssnitt

•  Beroende av andra parter

•  Licenser och andra juridiska aspekter

•  Skalbarhet

•  Prestanda

•  Support

•  Spårbarhet

•  Säkerhet

•  Språkstöd

•  Flersajtsstöd

•  Stöd för workflows

•  Integrationer

•  Vad är det för data som ska lagras

•  …

Det finns mycket man måste fråga sig

© Creuna

Choose among many Layouts Right-click on slide and select Layout

…men man måste ställa rätt frågor!

© Creuna

“CMS:et ska ha en sökfunktion”

“Sök kommer att vara en viktig del av den nya lösningen. Söken är viktig för att ge slutanvändarna en bra sökupplevelse men söken kommer dessutom användas för att visa kategoriserad information och relaterade produkter. Sökfunktionen måste ha möjlighet att crawla och indexera andra webblösningar och det behöver finnas ett API åtkomligt för utvecklare.”

Choose among many Layouts Right-click on slide and select Layout

…men man måste ställa rätt frågor!

© Creuna

“CMS:et ska ha ett redaktörsgränssnitt”

“Vi har många redaktörer (> 50) och många av dem har liten erfarenhet av CMS och ingen erfarenhet av HTML. CMS:et måste därför vara anpassat för att de enkelt ska kunna utföra sina uppgifter och det behöver finnas en godkännandeprocess för publicering. Redaktörerna arbetar med alla olika typer av information på webbplatsen.”

Choose among many Layouts Right-click on slide and select Layout

…och då måste man veta en del om vad man ska bygga

© Creuna

•  Vilka är de viktigaste målen för den nya webbplatsen? •  Hur länge ska den leva? •  Är det en lösning eller flera och ska den integreras med andra system? •  Vilken typ av data ska lagras och vilka är klienterna? •  Finns det saker som skapar oro, saker man vill undvika?

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

En lösning vs. Flera

© Creuna

Del 3 av 8

Choose among many Layouts Right-click on slide and select Layout

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different

saturations of the colours, but we still recommend these second to darkest ones

Change colour of numbering 1.  Select all text with numbering

2. Choose Format/Bullets and Numbering 3. Select colour from ‘Color’ dropdown.

4. Click OK

Change background colour 1. Right click outside slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Flera lösningar

© Creuna

Main web site(CMS)

Integration service(SQL Server)

WebServices

Service B(SQL Server) REST

Data source A

Data source B

Data source C

Applications

REST

Web site B(Database)

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

CMS vs. Ramverk Del 4 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

CMS vs. Webbramverk

© Creuna

CMS – Content Management System Webbramverk vs

Choose among many Layouts Right-click on slide and select Layout

CMS vs. Webbramverk

•  Applikation för innehållshantering •  Funktionsbas

•  Fungerande site från början •  Anpassning – Uppifrån ner

© Creuna

Webbramverk vs CMS – Content Management System

Choose among many Layouts Right-click on slide and select Layout

CMS vs. Webbramverk

© Creuna

Webbramverk vs

•  Verktyg för utvecklare •  Startar med blank sida •  Nerifrån upp

•  Skapar applikationer: •  Community •  E-handel •  CMS •  Komplexa flöden datamodeller

CMS – Content Management System

•  Applikation för innehållshantering •  Funktionsbas

•  Fungerande site från början •  Anpassning – Uppifrån ner

Choose among many Layouts Right-click on slide and select Layout

CMS vs. Webbramverk

© Creuna

Webbramverk vs

•  Verktyg för utvecklare •  Startar med blank sida •  Nerifrån upp

•  Skapar applikationer: •  Community •  E-handel •  CMS •  Komplexa flöden datamodeller

CMS – Content Management System

.NET MVC Flask Spring Play! Meteor Django Express

Lift Codeigniter Laravel Symfony Zend Ruby On Rails

Sinatra Flex Grails Nodejs Angular.js

•  Applikation för innehållshantering •  Funktionsbas

•  Fungerande site från början •  Anpassning – Uppifrån ner

Choose among many Layouts Right-click on slide and select Layout

CMS vs. Webbramverk

•  Applikation för innehållshantering •  Funktionsbas

•  Fungerande site från början •  Anpassning – Uppifrån ner

© Creuna

Webbramverk vs

•  Verktyg för utvecklare •  Startar med blank sida •  Nerifrån upp

•  Skapar applikationer: •  Community •  E-handel •  CMS •  Komplexa flöden datamodeller

.NET MVC Flask Spring Play! Meteor Django Express

Lift Codeigniter Laravel Symfony Zend Ruby On Rails

Sinatra Flex Grails Nodejs Angular.js

CMS – Content Management System

.NET MVC Django

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Anst

räng

ning

Anpassning

ramverk

cms

CMS vs. Webbramverk

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Open source vs. Kommersiellt

Del 5 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images 1. Click on Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

Click Increase Indent button to get predefined ‘quote-name’ font

“free software is a matter of liberty, not price. To

understand the concept, you should think of free as in free speech, not as in free

beer.” - richard stallman

© Creuna

Choose among many Layouts Right-click on slide and select Layout

© Creuna

1. Man måste ha koll på GNU GPL, AGPL, LGPL, MIT, BSD2, BSD3, Apache License v2 o.s.v.

2. Man behöver fundera lite över framtiden

3. Och till sist är det bra att tänka lite på det här med säkerhet

Frågeställningar - Open Source

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Open Source Licenser

Choose among many Layouts Right-click on slide and select Layout

© Creuna

GPL bsd & mit

Choose among many Layouts Right-click on slide and select Layout

© Creuna

GPL bsd & mit

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Och så var det här med framtiden

Choose among many Layouts Right-click on slide and select Layout

© Creuna

…till sist några ord om säkerhet

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

CMS vs. CMS Del 6 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundat 1994

•  Språk: .NET

•  Versionen 7.5

•  +20.000 webbplatser

•  690 partners i 30 länder

•  21.000 registrerade utvecklare

– Globalt sett fortfarande okänt – Ostrukturerad information – Inte så mycket färdig funktionalitet

Svensktillverkat CMS som är stort i norden och de växer

även globalt.

+ Bra CMS med bra basfunktionalitet + Bra nivå när det gäller flexibilitet för utvecklare + Bra tilläggsprodukter som t.ex. Community, Commerce och Find

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundare: Dries Buytaert

•  Grundat 2000

•  Licens: GPL

•  Språk: PHP

•  Versionen 7

•  + 30.000 Add-ons

•  ~800 Distributioner

•  ~1.900 Teman

•  31.000 utvecklare

– Hög inlärningströskel – Hitta rätt moduler – Krävs en del innan man får en “ok” sajt. – Admin är komplext – Långa releasecykler för Core.

en av de ledande globala open source webbplattformarna.

+ Open Source och ingen licenskostnad + Communityn: stor, aktiv, hjälpsam, kompetent + Populärt. Många stora sajter + Bra moduler + Mycket funktionalitet OOTB + Allt går att konfiguera i admin

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundare: Niels Hartvig

•  Grundat 2005

•  Språk: .NET

•  Licens: MIT

•  Version: 7

•  +200.000 installationer

•  +200 partners

•  Hundratals certifierade

utvecklare

– Mindre spelare i Sverige – Stöd för utvecklingsteam – Inte så mycket färdig funktionalitet

Globalt ledande .net-baserade open-source CmS’et

+ Öppen källkod + ”Plattform as a service” + Stark och kompetent utvecklar-community + Flexibelt API för skapande av moduler & funktioner + Låg tröskel för utvecklare

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Microsoft Inc.

•  Språk: .NET

•  Version: 2013

•  +60.000 kunder

•  Ca 100 partners i Sverige

•  700.000 utvecklare

– Hög tröskel för utvecklare – Anpassningsbarhet – Enterprise – Licensmodellen

Den Ledande globala samarbetsplattformen

+ Integration med Microsofts produktportfölj + Mycket funktionalitet OOB + Dokumenthantering + Väl utbyggda API’er för integration + Väldokumenterat

många utvecklare?

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundat 2001

•  Språk: .NET

•  Version: 7.2

•  +3.000 varumärken

•  +1000 partners i 50 länder

•  17.000 registrerade utvecklare

– Bristande närvaro i Sverige – Enterprise passar inte alla – Tröskel för redaktörer

Global leverantör av mjukvara för webbinnehåll

och kundengagemang

+ Stor flexibilitet och stöd för utvecklare + Enterprise OOTB + Bra och väl integrerad produktsvit (Customer- Engagement, CMS + Ecommerce, Marketing)

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundat 2001

•  Språk: Java

•  Version: 3

– Anpassningar – Liten spelare i och utanför Sverige

svensk plattform för portalintegration och

webbpublicering

+ Mycket färdiga moduler och funktioner + Plattformsoberoende + Molnlösning som val + Bra redaktörsgränssnitt

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Grundat 2003

•  Språk: PHP

•  Version: 3.9

•  + 60 Miljoner sajter

•  + 30.000 plugins

– Kvalitet på Plugins – Inte lika aktiv community som Drupal – Enterprise-stöd

Världens mest använda plattform

+ Lätt att använda + Lätt att utveckla för + Väldigt populärt + Snabbt igång. + Ren installation räcker långt. + Enkelt att host:a

Choose among many Layouts Right-click on slide and select Layout

Styrkor

Quick Facts

Svagheter

•  Första release: 2005

•  Språk: Python

•  Licens: BSD

•  Django

(+Mezzenine / Django CMS)

– Inte samma utbud av drift-leverantörer – Svårare att hitta kompetens – Spartanskt admin

The Web framework for perfectionists with deadlines

+ Produktivt + Utvecklarvänligt + Genererat admin + Python

ok, jämfört med varandra då?

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse

.NET MVC Drupal Sharepoint

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse

.NET MVC Drupal Sharepoint

EPiServer Umbraco Sitecore

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse

.NET MVC Drupal Sharepoint

EPiServer Umbraco Sitecore

Django Django + Django CMS

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse

.NET MVC Drupal Sharepoint

EPiServer Umbraco Sitecore

Django Django + Django CMS

Wordpress Sitevision

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse An

pass

ning

sbar

het

Låg

.NET MVC Drupal Sharepoint

EPiServer Umbraco Sitecore

Django Django + Django CMS

Wordpress Sitevision

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Anst

räng

ning

Anpassning

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse

.NET MVC

Drupal

EPiServer

Django

Django + Django CMS

Wordpress

Anpa

ssni

ngsb

arhe

t

Låg

Umbraco

Sharepoint

Sitecore

Sitevision

Choose among many Layouts Right-click on slide and select Layout

Funktionalitet

Jämförelse An

pass

ning

sbar

het

Låg

Drupal

EPiServer

Django

Django + Django CMS

Wordpress Umbraco

Sharepoint

Sitecore

Sitevision

.NET MVC

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Case Del 7 av 8

© Creuna

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Visit Stockholm

Choose among many Layouts Right-click on slide and select Layout

• Gamla sajten var utdaterad • Skaplig arkitektur men dåligt

genomförd • Dålig prestanda & mycket

problem

• Fungerar ej för mobila enheter

Bakgrund till projektet

© Creuna

Choose among many Layouts Right-click on slide and select Layout

• Modern webbplats med responsiv design och stort fokus på mobila användare • Stort fokus på prestanda och

sökmotoroptimering

• Framtidssäker arkitektur och lösning

• Möjlighet att dela information till andra sajter/applikationer (interna och externa)

Mål med nya lösningen

© Creuna

Choose among many Layouts Right-click on slide and select Layout

• Vi ville bygga en skräddarsydd lösning Anpassningsbart CMS

• Vi vill separera lagring av objekt från övrigt innehåll

• Vi behöver ett lättarbetat CMS för redaktörerna som hanterar många olika sajter (övriga sajter använder EPiServer) • Creunas team förvaltar alla sajter

Bakgrund till val av CMS

© Creuna

Choose among many Layouts Right-click on slide and select Layout

• Vi ville bygga en skräddarsydd lösning Anpassningsbart CMS

• Vi vill separera lagring av objekt från övrigt innehåll

• Vi behöver ett lättarbetat CMS för redaktörerna som hanterar många olika sajter (övriga sajter använder EPiServer) • Creunas team förvaltar alla sajter

Bakgrund till val av CMS

© Creuna

Flexibelt 6 anpassningsbart cms

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Ibland blir det fel …

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the

Increase/Decrease Indent buttons found in the

Top-PowerPoint menu

I vårt fall: q  Ville vi ha något applikationslikt q  Vi hade komplex datamodeller q  De moduler som vi hade tänkt använda

var inte tillräckligt bra q  Vi fick skriva mycket egen kod

© Creuna

Varför ? Ett vanligt misstag - vi gjorde valet av plattform för tidigt, innan vi visste tillräckligt om vad vi skulle bygga.

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the

Increase/Decrease Indent buttons found in the

Top-PowerPoint menu

I vårt fall: q  Ville vi ha något applikationslikt q  Vi hade komplex datamodeller q  De moduler som vi hade tänkt använda

var inte tillräckligt bra q  Vi fick skriva mycket egen kod

© Creuna

The Drupal Way

Varför ?

≠

Ett vanligt misstag - vi gjorde valet av plattform för tidigt, innan vi visste tillräckligt om vad vi skulle bygga.

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the

Increase/Decrease Indent buttons found in the

Top-PowerPoint menu

I vårt fall: q  Ville vi ha något applikationslikt q  Vi hade komplex datamodeller q  De moduler som vi hade tänkt använda

var inte tillräckligt bra q  Vi fick skriva mycket egen kod

© Creuna

The Drupal Way

Varför ?

≠

Ett vanligt misstag - vi gjorde valet av plattform för tidigt, innan vi visste tillräckligt om vad vi skulle bygga.

Men… Gör man rätt Blir det bra !

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Skolornas Webbplatser

Choose among many Layouts Right-click on slide and select Layout

• Över 160 webbplatser

• En gemensam plattform där alla skolor ska ingå.

• Gemensam kodbas och grafisk profil • En plattform - varje skola får egen

instans

Mål med lösningen

© Creuna

Uppdraget från Utbildningsförvaltningen var att bygga en gemensam lösning för Stockholms stads kommunala skolors hemsidor.

Choose among many Layouts Right-click on slide and select Layout

• Många webbplatser • Egna installationer

• Flexibel arkitektur • En pragmatisk inställning till

utformningen av enskilda funktioner

Bakgrund till val av CMS

© Creuna

Choose among many Layouts Right-click on slide and select Layout

Bakgrund till val av CMS

© Creuna

Många installationer & Pragmatiskt synsätt

• Många webbplatser • Egna installationer

• Flexibel arkitektur • En pragmatisk inställning till

utformningen av enskilda funktioner

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images 1. Click on Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

Arla

© Creuna

Arla.se är en av Sveriges främsta matinspiratörer med över en miljon unika besökare varje år. Creuna har tillsammans med Arla Sverige tagit fram ett nytt koncept och en ny digital plattform för arla.se. 

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Webbplatser kommer och går – recepten består

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the

Increase/Decrease Indent buttons found in the

Top-PowerPoint menu

Målbild

© Creuna

Receptverktyg

Receptsajter

Applikationer

Arla.se

Arla.fi

Android

IOS

WInPhone

Arla.dk

Koncernsajter

DEDK

SE

Export

XX

Kundwebb

Choose among many Layouts Right-click on slide and select Layout

• Webbplatsen ska vara skräddarsydd för Arlas kunders behov

•  Lättarbetat CMS för Arlas redaktörer • Enkelt att integrera med andra system

• Möjlighet till modulariserad arkitektur för att göra det möjligt att återanvända lösningen för fler länder

• Stort fokus på sökmotoroptimering

Bakgrund för produktval för webbplats

© Creuna

Choose among many Layouts Right-click on slide and select Layout

• Webbplatsen ska vara skräddarsydd för Arlas kunders behov

•  Lättarbetat CMS för Arlas redaktörer • Enkelt att integrera med andra system

• Möjlighet till modulariserad arkitektur för att göra det möjligt att återanvända lösningen för fler länder

• Stort fokus på sökmotoroptimering

Bakgrund för produktval för webbplats

© Creuna

Flexibelt 6 anpassningsbart cms

Choose among many Layouts Right-click on slide and select Layout

• Skräddarsytt gränssnitt, specialiserade arbetsflöden för Arlas kockar och matskribenter

• Produktifierad, enkel att rulla ut och återanvända för olika syften och olika marknader.

• Central receptkälla för många system

• Höga krav på livslängd, prestanda, kvalitet och tillförlitlighet

•  Innehållet består av tydligt definierade objekt. • Många relationer mellan objekten

Bakgrund för produktval för receptverktyget

© Creuna

Choose among many Layouts Right-click on slide and select Layout

• Skräddarsytt gränssnitt, specialiserade arbetsflöden för Arlas kockar och matskribenter

• Produktifierad, enkel att rulla ut och återanvända för olika syften och olika marknader.

• Central receptkälla för många system

• Höga krav på livslängd, prestanda, kvalitet och tillförlitlighet

•  Innehållet består av tydligt definierade objekt. • Många relationer mellan objekten

Bakgrund för produktval för receptverktyget

© Creuna

Maximalt Flexibelt Ramverk

Choose among many Layouts Right-click on slide and select Layout

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Summering Del 8 av… sista delen

© Creuna

Choose among many Layouts Right-click on slide and select Layout

Summering

© Creuna

Det finns ingen silver-bullet, ingen produkt som passar för allt.

Vänta lite med valet tills ni vet vad ni ska göra.

Genom att välja rätt får ni bättre lösningar till lägre kostnad.

Choose among many Layouts Right-click on slide and select Layout

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour and click OK

Make a new slide to add or change the icons by using graphics from www.iconmonstr.com

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

tack! Pär Fröberg Mattias Uhlegård

Creuna.se par.froberg@creuna.se

mattias.uhlegard@creuna.se

© Creuna

Make a new slide to add or change the icons by using graphics from www.iconmonstr.com