A" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad

Storlek: px

Starta visningen från sidan:

Download "A" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad"

Joakim Ström
för 8 år sedan
Visningar:

1 A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad

2 Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap) 4. Slutsats

3 Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap) 4. Slutsats

4 1. Bakgrund + smarta mobiler + läspla"or Internet (desktop) Tid (logaritmisk skala)

5 1. Appar

6 1. Bakgrund Desktop + Mobiler + Läspla"or Desktop

7 1. Vad är problemet med appar? - Flera kanaler 8ll samma informa8on (malmo.se) - Överflöd av appar - Inte enhetligt - UZormning (design), innehåll, funk8onalitet - Utveckling och underhåll (kostar 8d och pengar) - Nya versioner, buggfixar - Uppdatera data (olika servrar, format o s v)

8 1. Alterna8v 8ll appar webbappar - En fristående version av en webbsida anpassad för mobiler i sy^e a" e^erlikna en na8v app Webbappar Desktop + Appar Endast desktop

9 1. Alterna8v 8ll appar webbappar Fördelar: En webbapp fungerar på alla sorters telefoner Billigare a" utveckla Nackdelar: Två system a" underhålla Två ingångar Ej enhetligt (två versioner utvecklas parallellt)

10 1. Alterna8v 8ll appar responsiv design Responsiv webbsida Desktop + Appar Endast desktop

11 1. Vad är en responsiv webbsida?

12 1. Exempel på responsiva webbsidor Exempel svt.se jämför t ex dn.se (icke- resp.) HTML- element ändrar: Storlek Posi8on

13 1. Vad är en responsiv webbapplika8on? En webbapplika8on för alla* placormar * De största webbläsarna APPLIKATION

14 1. Varför responsiv webbdesign? E. system a" utveckla och underhålla E. ställe a" uppdatera data (t ex: kartdata) En kanal för all informa8on Argument mot: Kompromiss mellan mobilt och desktop resultatet blir något halvdant h"ps://managewp.com/5- reasons- why- responsive- design- is- not- worth- it - > Utmaning a" göra en webbapplika8on som fungerar överallt - > Ibland måste man reducera funk8onaliteten

15 1. Flat design I samband med responsiv webbdesign kom e" annat paradigmski^e Flat design (sv: Pla" uzormning?)

16 Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? Tekniskt Design (kartor) 3. Exempel 4. Slutsats

17 2. Responsiv design teknik CSS- brytpunkter JavaScript Enklare webbsidor > CSS Webbkartor > CSS & JavaScript

18 2. Responsiv design CSS- brytpunkter Desktop Läspla"a Mobil

19 2. Responsiv design JavaScript Bredden på fönstret Pekskärm eller ej Vit bakgrund endast för pekskärmar mindre än 600px

20 2. Responsiv design för kartor Lagermeny Verktygsknappar Sökfunk8on Stöd för både desktop- och pek - events

21 Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? Tekniskt Design (kartor) 3. Exempel (smap) 4. Slutsats

22 3. smap Samarbete: Malmö, Helsingborg, Kris8anstad, Lund Publicering av geodata Utveckling av kartapplika8oner (verksamhet och medborgare) smap v1-4: jquery, jquery UI, OpenLayers 2 Webbappar smap- mobile: jquery, Bootstrap, Leaflet Produkter smap v5 (hösten 2014): jquery, Bootstrap, OpenLayers 3

23 3. Smapevolu8onen smap- mobile/responsive Gamla smap (t ex: malmo.se, kris8anstad.se) Enskilda webbappar Responsiv webbdesign Desktop + Appar/Webbappar Endast desktop

24 - responsive 3. Vision för smap- mobile En enkel webbkarta som fungerar på alla* placormar * De största webbläsarna i desktop/mobil miljö Pekskärmar iphone & ipad (Safari) Android (Chrome) Window Phone (IE) Desktop Chrome (Win, Mac) Firefox (Win, Mac) Safari (Mac) IE 8,9,10,11 (Win)

25 3. Exempel smap- mobile Lagermeny Verktygsknappar Sökfunk8on Stöd för pekskärmar (touch events)

26 3. Exempel smap- mobile Mobil Desktop

27 3. Exempel smap- mobile Live- exempel: Selektera flera objekt Guidade turer i Malmö SharePosi8on Proof of concept (WFS- T)

28 Innehåll 1. Varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap) 4. Slutsats

29 4. Slutsats Det går a" göra webbapplika8oner som fungerar både mobilt och i desktopmiljö Responsiv webbdesign är mer komplicerat Men enklare än a" utveckla appar/webbappar Fördelar: E" system a" utveckla E" ställe a" uppdatera data En väg 8ll informa8onen (istället för flera)

30 4. När ska man ändå göra en app? När man behöver komma åt funk8oner i telefonen som inte stöds i HTML5: Skriva/läsa stora mängder data Krav på snabbhet Följande stöds redan av HTML5: Kamera (bild och film) Geolokalisering (GPS, triangulering) Accelerometer (telefonens lutning) Klientlagring (5-50MB) Offline- läge (cache manifest)

31 4. smap- mobile Laddar ner koden gra8s: h"p://github.com/getsmap/smap- mobile Bidra gärna 8ll projektet!

32 Frågor Johan Lah8 GIT- utvecklare E: T:

Relevanta dokument

Webbappar med OpenLayers och jquery

Webbappar med OpenLayers och jquery Johan Lahti GIT-utvecklare Malmö stad ULI Uppsala, 3 oktober 2011 smap (www.smap.se) Samarbete sedan maj 2009 Kartramverk byggt på OpenLayers och jquery Gemensam server