A" utveckla kartor med responsiv design
Johan Lah8
Geografisk IT-‐utvecklare
Stadsbyggnadskontoret, Malmö stad
Innehåll
1. Vad och varför responsiv design?
2. Hur kan det genomföras?
3. Exempel (sMap) 4. Slutsats
Innehåll
1. Vad och varför responsiv design?
2. Hur kan det genomföras?
3. Exempel (sMap) 4. Slutsats
1. Bakgrund
+ smarta mobiler + läspla"or Internet (desktop)
Tid (logaritmisk skala)
1. Appar
1. Bakgrund
Desktop + Mobiler + Läspla"or Desktop
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)
1. Alterna8v 8ll appar – webbappar
Desktop + Appar
Endast desktop
Webbappar
-‐ En fristående version av en webbsida anpassad för mobiler i sy^e a" e^erlikna en na8v app
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)
1. Alterna8v 8ll appar – responsiv design
Desktop + Appar
Endast desktop
Responsiv webbsida
1. Vad är en responsiv webbsida?
1. Exempel på responsiva webbsidor
• Exempel svt.se – jämför t ex dn.se (icke-‐resp.)
• HTML-‐element ändrar:
– Storlek – Posi8on
1. Vad är en responsiv webbapplika8on?
• En webbapplika8on för alla* placormar
* De största webbläsarna
APPLIKATION
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
1. ”Flat design”
• I samband med responsiv webbdesign kom e"
annat paradigmski^e – ”Flat design”
(sv: ”Pla" uZormning”?)
Innehåll
1. Vad och varför responsiv design?
2. Hur kan det genomföras?
– Tekniskt
– Design (kartor)
3. Exempel 4. Slutsats
2. Responsiv design – teknik
Enklare webbsidor –> CSS
Webbkartor –> CSS & JavaScript
CSS-‐brytpunkter JavaScript
2. Responsiv design – CSS-‐brytpunkter
Desktop
Läspla"a
Mobil
2. Responsiv design – JavaScript
Bredden på fönstret Pekskärm eller ej
Vit bakgrund endast
för pekskärmar mindre än 600px
2. Responsiv design för kartor
• Lagermeny
• Verktygsknappar
• Sökfunk8on
• Stöd för både desktop-‐ och
”pek”-‐events
Innehåll
1. Vad och varför responsiv design?
2. Hur kan det genomföras?
– Tekniskt
– Design (kartor)
3. Exempel (smap) 4. Slutsats
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
• sMap v5 (hösten 2014):
– jQuery, Bootstrap, OpenLayers 3
Produkter
3. Smapevolu8onen
Desktop +
Appar/Webbappar Endast desktop
Gamla smap (t ex: malmo.se,
kris8anstad.se) Responsiv webbdesign
smap-‐mobile/responsive Enskilda webbappar
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)
-‐responsive
3. Exempel smap-‐mobile
• Lagermeny
• Verktygsknappar
• Sökfunk8on
• Stöd för pekskärmar (touch events)
3. Exempel smap-‐mobile
Mobil Desktop
3. Exempel smap-‐mobile
• Live-‐exempel:
– Selektera flera objekt – Guidade turer i Malmö – SharePosi8on
• ”Proof of concept” (WFS-‐T)
Innehåll
1. Varför responsiv design?
2. Hur kan det genomföras?
3. Exempel (sMap) 4. Slutsats
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)
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)
4. sMap-‐mobile
• Laddar ner koden gra8s:
– h"p://github.com/getsmap/smap-‐mobile
• Bidra gärna 8ll projektet!
Frågor
Johan Lah8
GIT-‐utvecklare
E: johan.lah8@malmo.se T: 070-‐934 22 64
