Käyttöliittymät ja työvälineet
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 391 views

Sovelto Aamiaisseminaari 9.11.2012

Sovelto Aamiaisseminaari 9.11.2012
Heikki Raatikainen

Statistics

Views

Total Views
391
Views on SlideShare
391
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. 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
  • 2. Käyttöliittymät ja työvälineet 2 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© FC Sovelto Oyj 9.11.2012
  • 3. Käyttöliittymät ja työvälineet 3 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© FC Sovelto Oyj 9.11.2012
  • 4. Käyttöliittymät ja työvälineet 4 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© FC Sovelto Oyj 9.11.2012
  • 5. Käyttöliittymät ja työvälineet 5 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© FC Sovelto Oyj 9.11.2012
  • 6. Käyttöliittymät ja työvälineet 6 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© FC Sovelto Oyj 9.11.2012
  • 7. Käyttöliittymät ja työvälineet 7 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© FC Sovelto Oyj 9.11.2012
  • 8. Käyttöliittymät ja työvälineet 8 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© FC Sovelto Oyj 9.11.2012
  • 9. Käyttöliittymät ja työvälineet 9 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© FC Sovelto Oyj 9.11.2012
  • 10. Käyttöliittymät ja työvälineet 10 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© FC Sovelto Oyj 9.11.2012
  • 11. Käyttöliittymät ja työvälineet 11 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© FC Sovelto Oyj 9.11.2012
  • 12. Käyttöliittymät ja työvälineet 12 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© FC Sovelto Oyj 9.11.2012
  • 13. Käyttöliittymät ja työvälineet 13 .NET Framework ja WinRT Rajapintojen laajuudet© FC Sovelto Oyj 9.11.2012
  • 14. Käyttöliittymät ja työvälineet 14 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© FC Sovelto Oyj 9.11.2012
  • 15. Käyttöliittymät ja työvälineet 15 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© FC Sovelto Oyj 9.11.2012
  • 16. Käyttöliittymät ja työvälineet 16 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© FC Sovelto Oyj 9.11.2012
  • 17. Käyttöliittymät ja työvälineet 17 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© FC Sovelto Oyj 9.11.2012
  • 18. Käyttöliittymät ja työvälineet 18 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" 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)" > 36© FC Sovelto Oyj 9.11.2012
  • 19. Käyttöliittymät ja työvälineet 19 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© FC Sovelto Oyj 9.11.2012
  • 20. Käyttöliittymät ja työvälineet 20 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© FC Sovelto Oyj 9.11.2012
  • 21. Käyttöliittymät ja työvälineet 21 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© FC Sovelto Oyj 9.11.2012
  • 22. Käyttöliittymät ja työvälineet 22 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© FC Sovelto Oyj 9.11.2012