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

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

Käyttöliittymät ja työvälineet
Käyttöliittymävaihtoehdot
Alustariippumaton Web-sovellus
Natiivi vai alustariippumaton sovellus?

Heikki Raatikainen
heikki.raatikainen@sovelto.fi

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

© FC Sovelto Oyj 9.11.2012


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



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



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



Koska sovellus on suorituksessa
Käyttäjä käynnistää Käyttäjä valitsee foreground-
useita sovelluksia sovelluksen

Käyttäjä hallitsee System hallitsee
sovelluksen elinkaaren sovelluksen elinkaaren

Prosessin suoritustilat

App gets 5s to App is not
handle suspend notified before
termination
suspending
User Running Suspended Low Terminated
Launches App Memory App
App App
resuming

Apps are notified
when they have
been resumed

Splash No code
screen Code gets to run runs
App not running



Windows 8 touch language

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

Swipe from edge for
Pinch to zoom system and app UI Rotate to rotate

Semantic zoom



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



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"
App Cloud Service
• Päivittää Tile:ä vaikka sovellus ei
ole suorituksessa
HTTP
POST

Windows Push Notification
Service (WNS)

Notification
Delivered



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



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

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

19

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



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



Windows Phone 8 SDK vrs. WinRT
http://www.mobiletechworld.com/2012/07/26/windows-phone-8-application-platform-detailed/

23

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



.NET Framework ja WinRT

Rajapintojen laajuudet



Siirtyminen 7  8

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

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



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



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



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



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: <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"
media="only screen and (min-width: 321px)
and (max-width: 768px)" >
<link href="../../css/perustyylit.css"
media="only screen and (min-width: 769px)" >
36



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



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



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



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


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

More Related Content

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

More from Sovelto

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