Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webutvikling - teknologiske trender

Avatar for EVRY EVRY
February 07, 2014
58

Webutvikling - teknologiske trender

Avatar for EVRY

EVRY

February 07, 2014
Tweet

More Decks by EVRY

Transcript

  1. Trender innen webutvikling EVRY Winter Gathering 2014 6. feburar, Ilsetra

    I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 1 Ketil Flataker Nils Erik Asmundvaag EVRY Consulting
  2. Innhold • Fra web 1.0 til web 3.0 o Den

    mobile weben • Responsive web design o Mobile first • Single-page applications o Rike internett-applikasjoner • Smidig utviklingsmetodikk o Scrum Trender innen webutvikling 2 EVRY Winter Gathering 2014
  3. I n s p i r a t i o

    n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Fra web 1.0 til web 3.0 3
  4. Fra web 1.0 til web 3.0 Trender innen webutvikling 4

    EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn
  5. Fra web 1.0 til web 3.0 Trender innen webutvikling 5

    EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn Web 2.0 Interaksjon Sosiale medier Bruker-produsert
  6. Fra web 1.0 til web 3.0 Trender innen webutvikling 6

    EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn Web 2.0 Interaksjon Sosiale medier Bruker-produsert Web 3.0 Semantisk web Linked data
  7. I n s p i r a t i o

    n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Responsive web design 8
  8. Responsive web design • Lage sider som gir en optimal

    brukeropplevelse • Enkle å lese og navigere med et minimum av scrolling, panorering og zooming • På tvers av enheter (telefon, nettbrett, PC) • Layout tilpasses dynamisk til visningsmiljøet Trender innen webutvikling 9 EVRY Winter Gathering 2014
  9. Responsive web design • Mange begreper • Responsive web •

    Tilpasset web • Mobil web Trender innen webutvikling 10 EVRY Winter Gathering 2014
  10. Responsive web design • Fleksibel layout o Flytende og proporsjonal

    o Relative størrelser og måleenheter • Media queries o Identifisere type medium og fysiske karakteristikker o Kan finjustere og optimalisere CSS o Ny meta-tag: viewport • Fleksibelt media o Må sette begrensing for bredden o Moderne nettlesere vil skalere bilder proporsjonalt o Utfordringer med bakgrunner og sprites Trender innen webutvikling 11 EVRY Winter Gathering 2014
  11. Responsive web design • Kan også handle om kontekst o

    I hvilken setting brukeren besøker nettstedet o Kan ha forskjellig behov avhengig av tid og sted - Hjemme foran PCen eller via mobilen på farten • Ikke erstatning for mobil-nettsteder o Kan være gode grunner for å skille mobil og desktop Trender innen webutvikling 12 EVRY Winter Gathering 2014
  12. Mobile first • Designfilosofi • Utgangspunktet er nettsider tilpasset mobile

    enheter • Legger til funksjonalitet etter som skjermen blir større • Ta det viktigste først Trender innen webutvikling 14 EVRY Winter Gathering 2014
  13. I n s p i r a t i o

    n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Single-page applications 1 5
  14. Single-page applications • En web-applikasjon eller site som består av

    én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon/ Native app Trender innen webutvikling 16 EVRY Winter Gathering 2014
  15. Single-page applications • En web-applikasjon eller site som består av

    én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon • All kode (HTML, CSS, JavaScript) lastes samtidig, eller dynamisk ved behov o Siden lastes ikke på nytt, ei heller tar andre sider over kontrollen, men moderne web- teknologi kan gi brukeren opplevelsen av at applikasjonen består av flere sider o Innebærer ofte asynkron kommunikasjon med serveren bak kulissene Trender innen webutvikling 17 EVRY Winter Gathering 2014
  16. Single-page applications • En web-applikasjon eller site som består av

    én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon • All kode (HTML, CSS, JavaScript) lastes samtidig, eller dynamisk ved behov o Siden lastes ikke på nytt, ei heller tar andre sider over kontrollen, men moderne web- teknologi kan gi brukeren opplevelsen av at applikasjonen består av flere sider o Innebærer ofte asynkron kommunikasjon med serveren bak kulissene • Teknologi o AJAX – asynkron kommunikasjon med serveren o JSON/XML – dataoverføringsformater Trender innen webutvikling 18 EVRY Winter Gathering 2014
  17. Rike internett-applikasjoner • En web-applikasjon som ligner en tradisjonell applikasjon

    o Tidligere ofte implementert i Flash/Flex, Silverlight eller som Java applets o Nå brukes HTML og JavaScript eller rammeverk som genererer klient-kode (AngularJS – rammeverk – Knockout Library) • Gjør weben mer interaktiv • Enkel distribusjon og vedlikehold/oppdatering • Ren Arkitektur • Stiller få krav til klient - Eksponerer kode/sikkerhet - Nettleseravhengig/cache Trender innen webutvikling 20 EVRY Winter Gathering 2014
  18. I n s p i r a t i o

    n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Smidig utviklingsmetodikk 2 1
  19. Smidig utviklingsmetodikk • Engelsk: Agile • Karakterisert ved at få

    eller ingen detaljer om en løsning er avtalt før utvikling starter o Utseende og funksjonalitet utformes i samarbeid mellom bruker og utvikler i iterasjoner o Brukeren må hele tiden prioritere gjenstående oppgaver og er ikke garantert å få med alt o Det viktigste/det som gir størst forretningsverdi implementeres først • Fordeler o Kan raskt snu om på produktet hvis prioriteringer endres o Større sannsynlighet for et ‘brukbart’ produkt • Utfordringer o Uvant for brukere å være så involvert o Føles ofte som en usikker kontraktsform Trender innen webutvikling 22 EVRY Winter Gathering 2014
  20. Smidig utviklingsmetodikk • Personlig mening o Bra måte å jobbe

    på o Smidig utvikling har skiftet fokuset til å produsere noe som faktisk er brukbart o Gir større eierskap i organisasjonen o Tvinger brukere/prosjekteiere til å prioritere o Kan begynne å bruke løsningen tidligere enn ved tradisjonell utvikling Trender innen webutvikling 23 EVRY Winter Gathering 2014
  21. I n s p i r a t i o

    n a l p r e s e n t a t i o n , p a r t 1 2 5