Upload
sovelto
View
166
Download
3
Embed Size (px)
DESCRIPTION
Sovelto Aamiaisseminaari 9.11.2012 Heikki Raatikainen
Citation preview
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
2 Käyttöliittymät ja työvälineet
© 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
3 Käyttöliittymät ja työvälineet
© 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
4 Käyttöliittymät ja työvälineet
© 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
5 Käyttöliittymät ja työvälineet
© 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
6 Käyttöliittymät ja työvälineet
© 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
7 Käyttöliittymät ja työvälineet
© 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
8 Käyttöliittymät ja työvälineet
© 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
9 Käyttöliittymät ja työvälineet
© 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
10 Käyttöliittymät ja työvälineet
© 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
11 Käyttöliittymät ja työvälineet
© 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
12 Käyttöliittymät ja työvälineet
© 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
13 Käyttöliittymät ja työvälineet
© FC Sovelto Oyj
.NET Framework ja WinRT
Rajapintojen laajuudet
9.11.2012
14 Käyttöliittymät ja työvälineet
© 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
15 Käyttöliittymät ja työvälineet
© 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
16 Käyttöliittymät ja työvälineet
© 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
17 Käyttöliittymät ja työvälineet
© 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
9.11.2012
18 Käyttöliittymät ja työvälineet
© 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
19 Käyttöliittymät ja työvälineet
© 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
20 Käyttöliittymät ja työvälineet
© 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
21 Käyttöliittymät ja työvälineet
© 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
22 Käyttöliittymät ja työvälineet
© 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