SlideShare a Scribd company logo
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ä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
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
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
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
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
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
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
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
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
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
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
Käyttöliittymät ja työvälineet   13




          .NET Framework ja WinRT




          Rajapintojen laajuudet




© FC Sovelto Oyj                                               9.11.2012
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
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
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
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
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
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
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
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
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

More Related Content

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

Microsoft Windows 8 sovelluskehitys käytännössä
Microsoft Windows 8  sovelluskehitys käytännössäMicrosoft Windows 8  sovelluskehitys käytännössä
Microsoft Windows 8 sovelluskehitys käytännössä
Perttu Monthan
 
Windows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmastaWindows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmasta
Sovelto
 
Windows 7 Työn tuottavuus
Windows 7 Työn tuottavuusWindows 7 Työn tuottavuus
Windows 7 Työn tuottavuus
Vaihde 7
 
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
Mediconsult
 
Windows 7 - uudet ominaisuudet
Windows 7 - uudet ominaisuudetWindows 7 - uudet ominaisuudet
Windows 7 - uudet ominaisuudet
Vaihde 7
 
Windows 10 yrityskäyttöön - ominaisuudet
Windows 10 yrityskäyttöön - ominaisuudetWindows 10 yrityskäyttöön - ominaisuudet
Windows 10 yrityskäyttöön - ominaisuudet
3 Step IT Suomi
 
Miksi siirtyä Windows 10:een
Miksi siirtyä Windows 10:eenMiksi siirtyä Windows 10:een
Miksi siirtyä Windows 10:een
3 Step IT Suomi
 
Windows Phone 7
Windows Phone 7Windows Phone 7
Windows Phone 7
Sakari Castrén
 
Windows 7 Yhteisollisyys
Windows 7 YhteisollisyysWindows 7 Yhteisollisyys
Windows 7 Yhteisollisyys
Vaihde 7
 
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletilleAamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
Nemein
 
Bisnesdata - Tietojärjestelmien kätköistä tableteille
Bisnesdata - Tietojärjestelmien kätköistä tableteilleBisnesdata - Tietojärjestelmien kätköistä tableteille
Bisnesdata - Tietojärjestelmien kätköistä tableteille
Henri Bergius
 
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & HuhtalaTechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
Tieturi Oy
 
Pulpetista tabletille tilannekatsaus
Pulpetista tabletille tilannekatsausPulpetista tabletille tilannekatsaus
Pulpetista tabletille tilannekatsaus
Henry Paananen
 
Luento TKK:ssa esteettömyydestä 1.2.2011
Luento TKK:ssa esteettömyydestä 1.2.2011Luento TKK:ssa esteettömyydestä 1.2.2011
Luento TKK:ssa esteettömyydestä 1.2.2011
reijoju
 
Vilkaisu Windows 8 -tabletteihin
Vilkaisu Windows 8  -tabletteihinVilkaisu Windows 8  -tabletteihin
Vilkaisu Windows 8 -tabletteihin
Raisa Valtaoja
 
XP:n tuki loppuu: Sami Laihon viime hetken vinkit
XP:n tuki loppuu: Sami Laihon viime hetken vinkitXP:n tuki loppuu: Sami Laihon viime hetken vinkit
XP:n tuki loppuu: Sami Laihon viime hetken vinkit
Sovelto
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Jani Kykyri
 
Windows Phone -sovelluskehitys
Windows Phone -sovelluskehitysWindows Phone -sovelluskehitys
Windows Phone -sovelluskehitys
Docendo
 
Windows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmastaWindows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmasta
Sovelto
 
Microsoft Windows Intune - työasemien hallinta pilvestä
Microsoft Windows Intune - työasemien hallinta pilvestäMicrosoft Windows Intune - työasemien hallinta pilvestä
Microsoft Windows Intune - työasemien hallinta pilvestä
Jarno Mäki
 

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

Microsoft Windows 8 sovelluskehitys käytännössä
Microsoft Windows 8  sovelluskehitys käytännössäMicrosoft Windows 8  sovelluskehitys käytännössä
Microsoft Windows 8 sovelluskehitys käytännössä
 
Windows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmastaWindows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmasta
 
Windows 7 Työn tuottavuus
Windows 7 Työn tuottavuusWindows 7 Työn tuottavuus
Windows 7 Työn tuottavuus
 
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
Mobiilipalvelut ja kotihoito_Mediatri-päivä Kimmo Eklund & Aune Mujunen
 
Windows 7 - uudet ominaisuudet
Windows 7 - uudet ominaisuudetWindows 7 - uudet ominaisuudet
Windows 7 - uudet ominaisuudet
 
Windows 10 yrityskäyttöön - ominaisuudet
Windows 10 yrityskäyttöön - ominaisuudetWindows 10 yrityskäyttöön - ominaisuudet
Windows 10 yrityskäyttöön - ominaisuudet
 
Miksi siirtyä Windows 10:een
Miksi siirtyä Windows 10:eenMiksi siirtyä Windows 10:een
Miksi siirtyä Windows 10:een
 
Windows Phone 7
Windows Phone 7Windows Phone 7
Windows Phone 7
 
Windows 7 Yhteisollisyys
Windows 7 YhteisollisyysWindows 7 Yhteisollisyys
Windows 7 Yhteisollisyys
 
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletilleAamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
Aamiaisseminaari 5.4.2012: Bisnesdata - tietojärjestelmien kätköistä tabletille
 
Bisnesdata - Tietojärjestelmien kätköistä tableteille
Bisnesdata - Tietojärjestelmien kätköistä tableteilleBisnesdata - Tietojärjestelmien kätköistä tableteille
Bisnesdata - Tietojärjestelmien kätköistä tableteille
 
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & HuhtalaTechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
TechDays2011 Web-kokoukset Lyncillä Tieturi/Kuosmanen & Huhtala
 
Pulpetista tabletille tilannekatsaus
Pulpetista tabletille tilannekatsausPulpetista tabletille tilannekatsaus
Pulpetista tabletille tilannekatsaus
 
Luento TKK:ssa esteettömyydestä 1.2.2011
Luento TKK:ssa esteettömyydestä 1.2.2011Luento TKK:ssa esteettömyydestä 1.2.2011
Luento TKK:ssa esteettömyydestä 1.2.2011
 
Vilkaisu Windows 8 -tabletteihin
Vilkaisu Windows 8  -tabletteihinVilkaisu Windows 8  -tabletteihin
Vilkaisu Windows 8 -tabletteihin
 
XP:n tuki loppuu: Sami Laihon viime hetken vinkit
XP:n tuki loppuu: Sami Laihon viime hetken vinkitXP:n tuki loppuu: Sami Laihon viime hetken vinkit
XP:n tuki loppuu: Sami Laihon viime hetken vinkit
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
 
Windows Phone -sovelluskehitys
Windows Phone -sovelluskehitysWindows Phone -sovelluskehitys
Windows Phone -sovelluskehitys
 
Windows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmastaWindows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmasta
 
Microsoft Windows Intune - työasemien hallinta pilvestä
Microsoft Windows Intune - työasemien hallinta pilvestäMicrosoft Windows Intune - työasemien hallinta pilvestä
Microsoft Windows Intune - työasemien hallinta pilvestä
 

More from Sovelto

LOISTO-palvelu
LOISTO-palveluLOISTO-palvelu
LOISTO-palvelu
Sovelto
 
Sovelto Channel -esittely
Sovelto Channel -esittelySovelto Channel -esittely
Sovelto Channel -esittely
Sovelto
 
Tilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuuTilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuu
Sovelto
 
Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen
Sovelto
 
Ajankohtaista tutkimustietoa
Ajankohtaista tutkimustietoaAjankohtaista tutkimustietoa
Ajankohtaista tutkimustietoa
Sovelto
 
Yhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukenaYhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukena
Sovelto
 
Hyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuusHyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuus
Sovelto
 
Tietotyön uusi kulttuuri
Tietotyön uusi kulttuuriTietotyön uusi kulttuuri
Tietotyön uusi kulttuuri
Sovelto
 
Intune ja Azure RMS
Intune ja Azure RMSIntune ja Azure RMS
Intune ja Azure RMS
Sovelto
 
Azure Active Directory
Azure Active DirectoryAzure Active Directory
Azure Active Directory
Sovelto
 
3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä
Sovelto
 
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen ​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
Sovelto
 
Seminaarin avaussanat
Seminaarin avaussanatSeminaarin avaussanat
Seminaarin avaussanat
Sovelto
 
Esimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, TilannejohtaminenEsimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, Tilannejohtaminen
Sovelto
 
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 Miten yritysarkkitehtuurilla kehitetään strategista johtamista Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Sovelto
 
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Sovelto
 
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Sovelto
 
Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?
Sovelto
 
Päivän avaus
Päivän avaus Päivän avaus
Päivän avaus
Sovelto
 
Työntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessäTyöntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessä
Sovelto
 

More from Sovelto (20)

LOISTO-palvelu
LOISTO-palveluLOISTO-palvelu
LOISTO-palvelu
 
Sovelto Channel -esittely
Sovelto Channel -esittelySovelto Channel -esittely
Sovelto Channel -esittely
 
Tilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuuTilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuu
 
Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen
 
Ajankohtaista tutkimustietoa
Ajankohtaista tutkimustietoaAjankohtaista tutkimustietoa
Ajankohtaista tutkimustietoa
 
Yhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukenaYhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukena
 
Hyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuusHyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuus
 
Tietotyön uusi kulttuuri
Tietotyön uusi kulttuuriTietotyön uusi kulttuuri
Tietotyön uusi kulttuuri
 
Intune ja Azure RMS
Intune ja Azure RMSIntune ja Azure RMS
Intune ja Azure RMS
 
Azure Active Directory
Azure Active DirectoryAzure Active Directory
Azure Active Directory
 
3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä
 
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen ​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
 
Seminaarin avaussanat
Seminaarin avaussanatSeminaarin avaussanat
Seminaarin avaussanat
 
Esimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, TilannejohtaminenEsimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, Tilannejohtaminen
 
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 Miten yritysarkkitehtuurilla kehitetään strategista johtamista Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
 
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
 
Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?
 
Päivän avaus
Päivän avaus Päivän avaus
Päivän avaus
 
Työntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessäTyöntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessä
 

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

  • 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