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 - 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
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 Responsiv webbsida Desktop + Appar Endast desktop
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 CSS- brytpunkter JavaScript Enklare webbsidor > CSS Webbkartor > CSS & 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 Produkter smap v5 (hösten 2014): jquery, Bootstrap, OpenLayers 3
3. Smapevolu8onen smap- mobile/responsive Gamla smap (t ex: malmo.se, kris8anstad.se) Enskilda webbappar Responsiv webbdesign Desktop + Appar/Webbappar Endast desktop
- 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)
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