Käyttöliittymät ja työvälineet

9.11.2012

1 Käyttöliittymät ja työvälineet

© FC Sovelto Oyj

Käyttöliittymät ja työvälineet

Käyttöliittymävaihtoehdot Alustariippumaton Web-sovellus Natiivi vai alustariippumaton sovellus? Heikki Raatikainen [email protected]

Käyttöliittymämurros

• Käyttöliittymät ovat murrosvaiheessa aina, muutossykli kuitenkin kiihtyy joka asettaa lisävaatimuksia designereille, koodaajille ja myös liiketoiminnoista vastaaville. • merkkipohjaiset järjestelmät • graafinen (ikkunoituva) käyttöliittymä • Web-sovellukset • javascript ja Ajax • mobiilisovellukset (ja pienet selaimet) • mobiili ja kosketusnäytöt • kosketusnäytöt (tablet/slate)

• Millä tekniikalla sovellukset kannattaa tehdä? • Client-sovellus, ilmaisuvoimaisin mutta vain rajoitettu laite/KJ-valikoima • Web-sovellus, toimii kaikkialla (jos selain tukee) mutta perinteisesti

rajoitetummat ominaisuudet • Edellisten yhdistelmä?

2

9.11.2012


© FC Sovelto Oyj

Käyttöliittymä- ja sovellustyyppejä

• Client/Mobile/Web

• Online/Offline • client-sovellus voi olla käytettävissä vain online ja jatkossa aivan varmasti osa

web-sovelluksista tulee toimimaan myös offline

• Enterprise/User

• Reader/Data input • haku/selaustoimintoja vai paljon tiedon syöttämistä

• Kosketusnäyttö/perinteinen

• Alusta (client-sovellus) • Windows, Windows 8 RT, Android, iOS, Windows Phone 8 (tai 7/7.5), Linux

3

Windows 8

Windows 8 Windows 8 WinRT

4

9.11.2012


© FC Sovelto Oyj

Kaksi käyttöjärjestelmää samassa paketissa

Sininen puoli • Käytetään nimeä: Desktop • Perinteinen Windows • Kaikki nykyiset Windows 7 –sovellukset toimivat • Osassa tablet-koneita (ARM-prosessoriset tabletit) sinistä puolta ei ole

Vihreä puoli • Käytetään nimiä: Modern UI Style, WinRT • Uusi, sormilla käytettävä maailma • Toki näppäimistö ja hiiri toimii, mutta ..

• Mikään nykyinen sovellus ei täällä toimi, kaikki on tehtävä uudelleen

Mitä uutta Win 8 Clientissa: Vihreä puoli

• Kaikki sovellukset ovat uusia

• Sovellukset käyttävät WinRT (Run Time) APIa

• Käyttöliittymämalli ja –ohjeisto on Modern UI Style (aikaisemmin tunnettiin nimellä Metro UI) • Sovellusta voi ajaa vain full screenillä • Toinen sovellus voi olla ankkuroitu "tiileksi" • Käyttöliittymän moniajoa ei ole, mutta korvaavia tekniikoita kyllä

• Ei kehyksiä, ei valikoita – eikä varsinkaan Ribbonia

• Sovelluksia voi asentaa (vain) Win 8 Store:n kautta • WinRT-sovellus ei voi tehdä pahaa • Sama fiilis kuin puhelinsovelluksilla – helppo ja turvallinen asentaa, helppo

ottaa pois

• IE 10 (eri versio kuin sinisellä puolella) • Plug-In:ejä ei ole eikä tule; ei siis Flash:iä tai Silverlight:ia

9.11.2012


© FC Sovelto Oyj

Mikä on Windows 8

• Windows 8 • Intel-prosessorit, desktopit ja tabletit. Tableteissa akun kesto ~5 h • Kaksi käyttistä samassa paketissa

1. Desktop 2. Modern UI

• Windows RT • ARM-prosessorit, tableteissa akun kesto ~10 h • Minimalistinen Desktop, vain Microsoftin tekemiä sovelluksia • Varusohjelmia ja Office 2013 RT • En voida asentaa desktop-sovelluksia, ne kaikki tulevat laitteen mukana

• Modern UI

• Windows Phone 8

7

ModernUI uusia tekniikoita

Sovelluksen elinkaari, käyttöliittymän moniajoa ei ole Tiles Notifications Toast Share Search Zoom, Semantic Zoom

9.11.2012


© FC Sovelto Oyj

Koska sovellus on suorituksessa

Käyttäjä valitsee foreground-sovelluksen

System hallitsee sovelluksen elinkaaren

Käyttäjä käynnistää useita sovelluksia

Käyttäjä hallitsee sovelluksen elinkaaren

Prosessin suoritustilat

Running App

Suspended App

suspending Terminated

App Low

Memory

Code gets to run No code

runs App not running

resuming

App gets 5s to handle suspend

App is not notified before

termination

Apps are notified when they have been resumed

User Launches

App

Splash screen

9.11.2012


© FC Sovelto Oyj

Windows 8 touch language

Press and hold to learn Swipe to select Slide to drag Tap for primary action

Pinch to zoom Rotate to rotate

Swipe from edge for

system and app UI

Semantic zoom

9.11.2012


© FC Sovelto Oyj

Käyttöliittymän laajennuksia

Tiles

Sharing

Searching in context

Live Tiles, sovellus on suorituksessa 'aina'

• Sovellus voi esittää informaatiota, vaikka ei ole foreground:ssa

• Sovellus voi "hälyttää" käyttäjän

• Kaksi mekanismia päivittämiseen • Local • Push Notifications

9.11.2012


© FC Sovelto Oyj

Local Updates

• Foreground-sovellus päivittää Tile:ä

• Esim: • Kohdalla oleva sivu, kuva jne. • Viimeksi downloadattua dataa

Running App Call Local Notification

API

Push Notifications

• "elävä Start screen"

• Päivittää Tile:ä vaikka sovellus ei ole suorituksessa

App Cloud Service

Windows Push Notification Service (WNS)

HTTP POST

Notification Delivered

9.11.2012


© FC Sovelto Oyj

Toast Notifications

• Välitön huomautus käyttäjälle

• Käyttäjä voi kieltää sovelluksen Toastit

• Käyttäjä voi siirtyä välittömästi sovelluksen haluttuun kohtaan

• Toastit voivat olla lähtöisin sovelluksen lokaalista tilasta tai notifikaatiosta

Share ja Search

• Share • Clipboard++ • Helppo, käyttäjän ohjaama tapa jakaa dataa sovellusten välillä

• Search • Käyttöjärjestelmän palvelu • Sovelluksen julkaisevat, millaista dataa ne kykenevät etsimään

9.11.2012


© FC Sovelto Oyj

Windows 8 sähköisenä työpöytänä

19

http://www.sulava.com/wp-content/uploads/2012/09/Windows8.jpg

Esimerkkejä Desktop vrs. Modern UI –sovelluksista

• Email reader vrs. Outlook 2013 (Office 2013) • Desktop-sovelluksestakin saadaan sormikäyttöinen, joskus se ei vaadi paljoa

käyttöliittymämuutoksia

• OneNote MX vrs. OneNote 2013 • Kuinka valikko tehdään "lähelle" • Kosketusnäppäimistö "osaa poistua" jos sitä ei tarvita

• Office 2013: laaja desktop-sovellus kosketus-tuella • Erityisesti Word

• IE 10 desktop vrs. Modern UI

• Voidaanko operatiivisia sovelluksia edes satunnaisesti käyttää sormella • Ehdottomasti kyllä, mutta vaatii käyttöliittymältä paljon

20

9.11.2012


© FC Sovelto Oyj

Millaisia sovelluksia voidaan 8-maailmaan tehdä

• Desktop – toimivat vain Windows 8:ssa

• Modern UI, toimivat "kaikialla" • Windows 8 • Windows RT • Windows Phone 8 – koodi vaatii modifiointia

21

Windows Phone 8 vrs. Windows Modern UI

• Pitkällä tähtäimellä Modern UI-sovellukset toimivat sellaisenaan Windows Phone-ympäristössä – tai ainakin se on julkistettu tavoite • Toki pieni näyttö huomioiden • Tänä vuonna näin ei vielä ole.

• Modern UI –sovellus on kohtuullisen helppo konvertoida myös WP8 –sovellukseksi.

• WP7.5 sovellukset (jotka kaikki ovat Windows Marketplace:ssa) käännetään MS:n toimesta WP8-sovelluksiksi. Näin myös jatkossa • Toisinpäin yhteensopivuutta ei ole, siis WP8:lle tehty sovellus ei toimi

WP7:ssa (7.0, 7,5 eikä 7.8:ssa)

22

9.11.2012


© FC Sovelto Oyj

Windows Phone 8 SDK vrs. WinRT

23

http://www.mobiletechworld.com/2012/07/26/windows-phone-8-application-platform-detailed/

WinRT –sovellusten koodaaminen

• Käytettävissä kaksi teknologiaa • HTML5, CSS3 ja kielenä JavaScript • Valtaosa MS:n tekemistä Modern UI-sovelluksista on tehty tällä tekniikalla

• XAML ja kielenä C#/VB/C++

• Ei ole lainkaan synkronista IO:ta • Jotta sovellukset ovat varmasti sormiUI –kelpoisia (responsive) • Onneksi C#5:ssa on helppo tapa tehdä async-kutsuja

• Mikään olemassa oleva sovellus ei toimi täällä • Windows Phone 7 SL-sovellukset on helpointa siirtää • Silverlight-sovellukset seuraavaksi helpointa • WPF-koodarille XAML ja C# on tuttua, joten osaamista voi siirtää • .NET-koodarille WinRT tuntuu .NET-osajoukolta, joten osaamista voi siirtää • WEB-ohjelmoija (joka osaa HTML5/CSS3/JS) voi käyttää osaamistaan, mutta

vain vähän olemassa olevasta koodista

9.11.2012


© FC Sovelto Oyj

.NET Framework ja WinRT

Rajapintojen laajuudet

9.11.2012


© FC Sovelto Oyj

Sovellus toimii sellaisenaan Koodia voi hyödyntää jossain määrin Osaaminen siirtyy – koodi ei Osaamista voi hyödyntää – koodia ei

Siirtyminen 7 8

Modern UI edut ja haitat operatiivisissa sovelluksissa

+ Data luku ja selailu toimii todella nätisti

+ Esittäminen ja vaikuttaminen • Dashboard

+ Mobiilisuus ja kosketuskäyttö • Satunnaiseen ja tilapäiseen käyttöön myös data-entry -sovelluksissa

- Datan syöttäminen

- Window, ei Windows • toki on telakointi, mutta sekin on vain "isompi tile" • Multimonitor-tuen rajoitukset

- Työvälineistön käyttö sormella • Toolbar ja ribbon –kontrollien puute, keksittävä omia ratkaisuja

28

9.11.2012


© FC Sovelto Oyj

Modern UI haaste

• Kuinka saada monimutkainen, laaja käyttöliittymä yksinkertaistettua sormikäyttöiseksi? • Jolla kuitenkin voi tehdä "kaikki mitä aikaisemminkin" • Joka sopii aloittelijan lisäksi myös tehokäyttäjälle

• Vaatii huimasti käyttöliittymän suunnittelua • Sovellus ohjaa käyttäjää • Eikä niin, että käyttäjälle tarjotaan kaikki työkalut

• Näyttää minimalistisen valikoiman toimintoja

• Kallista – ja paljon pettymyksiä • Toisaalta: voi olla vain kyse vain pienistä viilauksista, esim. Outlook 2013

sormikäyttö

29

Windows 8

• Jos pelaat Microsoft-peliä, niin Windows 8 on välttämätön

• Windows 8 muuttaa kaiken • Laitteet • Sovellusten käyttö • Sovellusten jakelu • Sovellusten arkkitehtuuri • Sovellusten koodaus

• Myös operatiivisissa sovelluksissa

30

9.11.2012


© FC Sovelto Oyj

Alustariippumattomuus

31

Alustariippumattomuus == HTML(5) ja JavaScript

• JavaScript on nykyään se alustariippumaton sovelluskehitysalusta • Ottanut Javan aseman

• Onko ihan oikeasti operatiivisten sovellusten alusta? • Toki asiakkaille tarjotuissa sovelluksissa tärkeä, mutta yrityksen sisällä? • Hejlsberg: You can write a large JavaScript program – but you cannot

maintain it! typescript

• HTML:n haasteita sähköisessä työpöydässä (porttaali, UI integrointi) • IFrame:n avulla monista järjestelmistä voidaan tuoda data tai HTML-UI • Mutta niiden integrointi keskenään haastavaa • HTTP ja HTTPS:n sekoittaminen haastavaa • Sovelluksissa oltava Deep Links, jotta toimintaa voidaan ohjata työpöydältä • Ei pääsyä alla olevan käyttöjärjestelmän ominaisuuksiin • Porttaalisivun on oltava näkyvissä – sinne on pakotettava menemään

32

9.11.2012


© FC Sovelto Oyj

BYOD on haaste

• Käyttäjien autentikointi ja auktorisointi alustariippumattomasti • Jo VPN voi olla rajoittava

• Dokumenttien jakaminen ja käsittely alustariippumattomasti • Alustariippuva "tosi-softa" ja WEB-tekniikalla toteutettu karvalakkimalli

• Operatiivisten sovellusten kyseessä ollen • Työaseman virtualisointi • HTML(5) + JavaScript • Tai mahdollisimman kevyt UI-kerros, joka voidaan tehdä usealle alustalle

33

HTML5

• Hyvin vahva veikkaus päätelaiteriippumattomien sovellusten tekotekniikaksi

• Jo nyt vahva tuki myös mobiililaitteissa • http://html5test.com/results/mobile.html

• Mitä HTML5 on? • HTML-elementit • CSS3 • JavaScript API:t

• Antaa paremmat mahdollisuudet tehdä oikeita sovelluksia päätelaitteeseen • Local Storage, Offline-sovellukset, Geolocation, Web Sockets, Canvas, Video,

SVG, FileAPI, Web Worker, IndexedDB...

34

http://html5test.com/results/mobile.html

9.11.2012


© FC Sovelto Oyj

Responsive Web Design

• Määritelmä: Toteutustapa, jolla sama HTML-sisältö esitetään eri päätelaitteissa tai selaimen ikkunan koon mukautuen siten, että käyttäjä saa aina parhaan mahdollisen käyttökokemuksen.

• Paras käyttökokemus tarkoittaa • Sisällön asemoinnin mukautumista optimaaliseksi • Tekstin koon mukautumista näkymän kokoon • Kuvien skaalautumista muun sisällön mukana

• Käyttäjä saa siis käyttöönsä omaan näyttöönsä optimoidun käyttöliittymän

• Toteutustekniikoina CSS3 Media Query, JavaScript

35

CSS3: Media queryt

• CSS3 tarjoaa mahdollisuuden valita sivun tyylitiedostojen linkityksen yhteydessä omat tyylitiedostot eri näyttöresoluutioita varten • Tarkemmin: Tyyli vaihdetaan myös selainikkunan kokoa muutettaessa

• Tätä ominaisuutta kannattaa hyödyntää, sillä nykyään yhä suurempi osa nettiselailusta tehdään puhelimilla, tableteilla, minikannettavilla jne.

• Esimerkki:

36

<link href="../../css/puhelin.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" > <link href="../../css/tabletti.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" > <link href="../../css/perustyylit.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

9.11.2012


© FC Sovelto Oyj

Mobile First

• Suunnitteluperiaatteena kannattaa käyttää "Mobile First" -tekniikkaa, jossa sivuston ulkoasu suunnitellaan pienimmän näkymän mahdollisuuksiin perustuen • Pakottaa ratkaisemaan mikä sivuston käytössä on tärkeintä • Samaa tietoa voidaan käyttää myös sivuston desktop-version toteutuksessa

• Edelleen toteutus kannattaa tehdä "Progressive Enhancement" -tekniikan avulla • Toteutus on silloin helpompi varmistaa toimivaksi kaikilla selaimilla

37

ASP.NET MVC

• Toinen .NETin web-tekniikoista (ASP.NET Web Forms on se toinen)

• Tukee täysin HTML5:sta

• Valmiit CSS-tiedostot mobiililaitteille

• Pystyy huomioimaan erilaiset päätelaitteet

• SPA (Single Page Application) –tekniikalla ohjelmointi lähestyy Client-ohjelmointia • WebAPI ja knockout.js –kirjasto, MVVM-rakenne

38

9.11.2012


© FC Sovelto Oyj

ASP.NET MVC perusrakenne

Perustoiminta

Controller Käsittelee HTTP-pyynnön Instantioi ja alustaa Model-olion

View Muodostaa Model-oliosta Näytettävän sivun

9.11.2012


© FC Sovelto Oyj

MVC tavoitteet

• Testattavuus • Myös ilman ASP.NET ympäristöä (MOC luokat) • Model / Controller on testattavissa myös "karvalakki" -view:n avulla

• Tulostettava HTML on omissa käsissä • Ei ole ASP.NET Server Controlleja • Päästään "html:n iholle", JavaScriptiä on helpompi kirjoittaa

• Selväkieliset URL:t • Mahdollistaa "Url Addressable Forms" / Deep Links • Rest-fiilis

• On ASP.NET ohjelmointia • Vaihtoehto Web Forms –ohjelmoinnille

• Laajennettavuus • Sovellus koostuu komponenteista • Joilla on hyvin määritelty rajapinta • Komponentit ovat vaihdettavissa/muutettavissa ilman koko järjestelmän

testaamista

Yhteenvetoa

42

9.11.2012


© FC Sovelto Oyj

Mitä ohjelmoijan on opeteltava/osattava?

• UX suunnittelu

• HTML5

• javascript

• XAML

• Asynkronisuus

Natiivi vai alustariippumaton?

• Tällä hetkellä tähän ei ole yksiselitteistä vastausta

• Paras ratkaisu on tarjota sekä natiivit että alustariippumaton ratkaisu, mutta onko se kustannus/kehitys/ylläpitomielessä järkevää?

• Natiivisovellus on enemmän 'ajan hermolla' ja osoittaa että yritys on mukana tietotekniikan kehityksen kärjessä tai ainakin huomioi alustan jota asiakkaat käyttävät

• Windows 8 aiheuttaa varmasti tablet/mobiili –markkinoiden uusjakoa

Documents

Käyttöliittymät ja työvälineet