Mobiilsete seadmete kasutamine
-
Upload
priit-tammets -
Category
Education
-
view
1.782 -
download
6
description
Transcript of Mobiilsete seadmete kasutamine
![Page 1: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/1.jpg)
http://www.trueactivist.com/64-historical-pictures-you-most-likely-havent-seen-before-8-is-a-bit-disturbing/
Inglismaa esimene arvuti 1950
![Page 2: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/2.jpg)
Mobiilsete seadmete kasutamine
Priit Tammets
![Page 3: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/3.jpg)
http://commons.wikimedia.org/wiki/File:Macaca_nigra_self-portrait.jpg
![Page 4: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/4.jpg)
http://commons.wikimedia.org/wiki/File:Macaca_nigra_self-portrait.jpg
![Page 5: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/5.jpg)
Sissejuhatuseks
• iPadid koolides vs. paberkonspektid
• Mobiilsed arvutiklassid vs. printerkombainid
• Tahvelarvuti kui sisu looja mitte vahendaja
![Page 6: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/6.jpg)
Mobiilne seade?
![Page 9: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/9.jpg)
http://www.forbes.com/sites/insertcoin/2014/03/08/the-oculus-rift-will-battle-sony-and-microsoft-at-e3/
![Page 10: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/10.jpg)
![Page 12: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/12.jpg)
http://www.nerdlocker.com/movies/her-long-depressing
![Page 13: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/13.jpg)
http://io9.com/photos-from-the-days-when-thousands-of-cables-crowded-t-1629961917
![Page 14: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/14.jpg)
Minu telefon kui..
![Page 15: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/15.jpg)
http://www.phonearena.com/news/Apple-iPhone-6-camera-see-the-first-samples_id60504
![Page 16: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/16.jpg)
• Iga sündiva lapse kohta müüakse maailmas 10 mobiiltelefoni (2012 lõpp)
• Aprill 2013 - kõige populaarsem native app - Facebook
• Populaarsemad veebilehitsejad Apple / Android native, 2. kohal FB
http://www.lukew.com/ff/
![Page 17: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/17.jpg)
• Juuni 2012, 1 000 000 000 PC-d Windowsiga
• Sept. 2012 - 880 000 000 Android & iOS seadet
http://www.lukew.com/ff/
![Page 18: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/18.jpg)
• Telefon, tahvelarvuti, kell, prillid, ...
• Kuidas suurendab seadmete rohkus meie mobiilsust?
• Mis on nende seadmete ühine joon - miski, mida nad kõik kasutavad?
![Page 19: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/19.jpg)
Internet
![Page 20: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/20.jpg)
Mobile first
![Page 21: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/21.jpg)
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
![Page 22: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/22.jpg)
• Native app-id
• m-veeb
![Page 23: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/23.jpg)
+ nii native app kui m.something.com
maksavadb lisa-kopika
![Page 24: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/24.jpg)
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
![Page 25: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/25.jpg)
Tundlik veebidisain *
* http://translate.google.ee/#en/et/responsive%20web%20design
![Page 26: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/26.jpg)
![Page 27: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/27.jpg)
Lehekülg toimib igal suuruses ekraanil
![Page 28: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/28.jpg)
![Page 29: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/29.jpg)
![Page 30: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/30.jpg)
• Kasutajad otsivad informatsiooni läbi väga erinevate seadmete
• Me ei saa neid piirata
• Me saame neile anda kas:
• hea kogemuse
• veidi viletsama
• või ta kõrvale jätta. Kuid..
![Page 31: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/31.jpg)
Kasutaja = raha
![Page 32: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/32.jpg)
• Ei ole selliseid mõisteid nagu mobiiliveeb, mobiilne veeb vms
• On leheküljed, mis on kasutatavad “ühtviisi” nii mobiili ekraanil kui sülearvutis
![Page 33: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/33.jpg)
Responsive?
![Page 34: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/34.jpg)
Responsive?
![Page 35: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/35.jpg)
Media queries
![Page 36: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/36.jpg)
Media queries
http://www.joepettersson.com/css3-media-queries-and-mobile-devices/
![Page 39: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/39.jpg)
• 2012 - keskmine veebileht 1.25MB
• 2014 ennustus - üle 2MB
• Ja seda on liiga palju.
http://www.lukew.com/ff/entry.asp?1681
![Page 40: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/40.jpg)
Ülesanne
• Teil on EMT interneti pakett 1.5GB kuus hinnaga 7€
• Postimees.ee lehekülje laadimine (26.09.14) laeb andmeid ca 1.5MB eest
• Mitu korda te saate ühes kuus Postimees.ee lehekülge lugeda enne andmemahu täitumist?
![Page 41: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/41.jpg)
Aasia
![Page 42: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/42.jpg)
• 564 millionit interneti kasutajat on Hiinas
• Hiinas kasutavad 70% interneti kasutajatest teevad seda üle mobiilivõrgu
• Riistavara (telefonid), mida kasutatakse, ei jõua pea kunagi siia
![Page 43: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/43.jpg)
http://www.mi.com/sg/mi3/
![Page 44: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/44.jpg)
• Telefonide “kaubamajad”
• Koopiad, koopiate koopiad
![Page 45: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/45.jpg)
![Page 46: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/46.jpg)
• Oma brauserid - UC Browser (500 miljonit kasutajat, 2014 märts), QQ Browser
• Kiirused:
• Hong Kong 3G, 4G & piiramatu maht
• Hiina 2G ja 3G
![Page 47: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/47.jpg)
• Kiirus = disain
• Sisu loeb, “one page should serve everybody”
• Testi oma tööd - http://slowyapp.com/
![Page 48: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/48.jpg)
![Page 49: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/49.jpg)
• Siiski, kasutajad. Ja neid on palju
• Hiinlased on väga kokkuhoidlikud, kuid valmis maksma tõlgitud rakenduse eest
• Isegi väga väike turuosa tähendab Hiinas miljoneid kasutajaid
• Kasutajad on väga orienteerunud sisule, välimus on teisejärguline (vaikselt muutub)
• Veebipoed, m-commerce
![Page 50: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/50.jpg)
Privaatsus Apple Health, Google Maps, Facebook
![Page 51: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/51.jpg)
![Page 52: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/52.jpg)
![Page 53: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/53.jpg)
Kodune töö
• Ajaveebi postitus teemal “Minu privaatne mobiiltelefon”
![Page 54: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/54.jpg)
Esitluses on kasutatud materjale järgmisestest ettekannetest konverentsilt Webshaped 2013:
• The Future is Responsive - Jonathan Smiley
• 180 degrees East - Holger Bartel
![Page 55: Mobiilsete seadmete kasutamine](https://reader034.fdocuments.net/reader034/viewer/2022042518/557bf852d8b42a2b348b521e/html5/thumbnails/55.jpg)
Lisalugemist teemadel:
• Mobile First, Luke Wroblewski (http://www.abookapart.com/products/mobile-first)
• Responsive Web Design, Ethan Marcotte (http://www.abookapart.com/products/responsive-web-design)
• Creating a Mobile-First Responsive Web Design, Brad Frost (http://www.html5rocks.com/en/mobile/responsivedesign/)