Pratybos. Ketvirtadienį, Baltupiuose 8: :00 316

Transcription

1 Pratybos Ketvirtadienį, Baltupiuose 8: :00 316

2 Web sprendimai mobiliems telefonams Prisitaikantis dizainas (responsive design) pvz.: Web programėlės Web programėlės platinamos per App Store / Google Play

3 Prisitaikantis dizainas

4 Prisitaikantis dizainas Gardelės sistema (grid system) Nefiksuoti piešinuku dydžiai (flexible images) Media užklausos (media queries)

5 Bootstrap

6 Bootstrap

7 Web technologijos HTML CSS JavaScript

8 Šablonas

9 Bootstrap komponentai

10 Chrome Inspector

11 Eilutės ir stulpeliai (grid system) <div class="content"> <div class="row"> <div class="col-md-6">... </div> <div class="col-md-6">... </div> </div> </div>

12 Paveiksliukų dydžio nustatymai max-width: 100% Nenustatomas dydis pikseliais

13 WrapBootstrap

14 ViewPort <meta name="viewport" content="width=device-width, initial-scale=1.0" >

15 Safari naršklė

16 <meta name="viewport" content="width=590">

17 device-width

18 Media užklausos (media (max-width: 600px) veiks kol ekrano dydis bus mažesnis nei 600px min-width arba min-height max-width arba max-height

19 Media užklausos media_query_list: <media_query> [, <media_query> ]* media_query: [[only not]? <media_type> [ and <expression> ]*] <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all aural braille handheld print projection screen tty tv embossed media_feature: width min-width max-width height min-height max-height device-width min-device-width max-device-width device-height min-device-height max-device-height aspect-ratio min-aspect-ratio max-aspect-ratio device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio color min-color max-color color-index min-color-index max-color-index monochrome min-monochrome max-monochrome resolution min-resolution max-resolution scan grid

20 Media užklausos (min-width: 700px) {... (min-width: 700px) and (orientation: landscape) {... tv and (min-width: 700px) and (orientation: landscape) {... only screen and (min-width:480px) and (max-width: 640px) only screen and (max-width: 479px) {...}

21 Media savybės Device-aspect-ratio Device-height Grid Height Monochrome Orientation Resolution Scan Width

22 jquery Mobile

23 jquery Mobile

24 Privalumai Veikia su dauguma mobilių įrenginių Nereikalingi platinimo kanalai (App Store/Google Play) iš karto veikia, iš karto galima pataisyti klaidas, nėra tarpininkų parduodant paslaugas Naudojant jquery Mobile yra nesudėtinga sukurti sprendimus programuotojams susipažinusiems su HTML/CSS/Javascript jquery Mobile kodas pats prisitaiko prie įrenginių ir jų galimybių

25 Palaikomas daugelyje platformų

26 A-lygio palaikymas Apple ios 3.2* Tested on the original ipad (4.3 / 5.0), ipad 2 (4.3 / 5.1 / 6.1), ipad 3 (5.1 / 6.0), ipad Mini (6.1), 3GS (4.3), 4 (4.3 / 5.1), and 4S (5.1 / 6.0), and 5 (6.0) Android Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5) Android 3.2 (Honeycomb) Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM Android 4.0 (ICS) Tested on a Galaxy Nexus. Note: transition performance can be poor on upgradeddevices Android (Jelly Bean) Tested on a Galaxy Nexus and Galaxy 7 Windows Phone Tested on the HTC Surround (7.5), HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800 (7.8), HTC Mazaa (7.8), Nokia Lumia 520 (8.0) Blackberry 6-10 Tested on the Torch 9800 (6) and Style 9670 (6), BlackBerry Torch 9810 (7), BlackBerry Z10 (10) Blackberry Playbook ( ) Tested on PlayBook Palm WebOS ( ) Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0), HP TouchPad(3.0) Firefox Mobile 18 Tested on Android 2.3 and 4.1 devices Chrome for Android 18 Tested on Android 4.0 and 4.1 devices Skyfire Tested on Android 2.3 device

27 A-lygio palaikymas (II) Opera Mobile : Tested on Android 2.3 Meego 1.2 Tested on Nokia 950 and N9 Tizen (pre-release) Tested on early hardware Samsung Bada 2.0 Tested on a Samsung Wave 3, Dolphin browser UC Browser Tested on Android 2.3 device Kindle 3, Fire, and Fire HD - Tested on the built-in WebKit browser for each Nook Color Tested on original Nook Color, not Nook Tablet Chrome Desktop Tested on OS X 10.7 and Windows 7 Safari Desktop Tested on OS X 10.8 Firefox Desktop Tested on OS X 10.7 and Windows 7 Internet Explorer 8-10 Tested on Windows XP, Vista and 7, Windows Surface RT Opera Desktop Tested on OS X 10.7 and Windows 7

28 B-lygio palaikymas Blackberry 5.0*: Tested on the Storm , Bold 9770 Opera Mini 7 - Tested on ios 6.1 and Android 4.1 Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1) Internet Explorer 7 Tested on Windows XP

29 C-lygio palaikymas Internet Explorer 6 and older Tested on Windows XP ios 3.x and older Tested on original iphone (3.1), iphone 3 (3.2) Blackberry 4.x - Tested on the Curve 8330 Windows Mobile - Tested on the HTC Leo (WinMo 5.2) All older smartphone platforms and featurephones Any device that doesn t support media queries will receive the basic, C grade experience

30 Komponentai

31 jquery Mobile pagrindas <!DOCTYPE html> <html> <head> <title>my Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body>... </body> </html>

32 jquery mobile <body> <body> <div data-role="page"> </div> </body> <div data-role="header"> <h1>pavadinimas</h1> </div> <div data-role="content"> <p>hello world</p> </div>

33 Puslapiai ir dialogai data-role="page "header", "content", "footer Dialogai data-rel="dialog nuorodoje

34 Ajax navigacija ir perėjimai tarp puslapių jquery mobile periima nuorodas ir paverčia jas AJAX užklausomis Privalumai: Puslapio pasikrovimo greitis Laikinas puslapio išsaugojimas atmintyje (cache) Pakrovus puslapį Surandama dalis - data-role="page Dalis įkeliama į pradinio web puslapio DOM medį Generuojamas perėjimas į naują web puslapį (pagal nutylėjimą fade)

35 Ratchet

36

37 Ionic framework

38

39 PhoneGap

40 Cordova - Apache Platformos: Android Bada Blackberry FirefoxOS ios Mac OS X QT Tizen Ubuntu WebOS Windows (desktop) Windows Phone 7 Windows Phone 8

41 Cordova Įskiepiai: Battery Status Camera Console Contacts Device Device Motion Device Orientation Dialogs Camera File Transfer Geolocation Globalization In-App Browser Media Media Capture Network Information Splashscreen Vibration

42 PhoneGap

43 Instaliavimas Instaliuoti NodeJS Iš komandinės eilutės paleisti: C:\> npm install -g phonegap C:\> phonegap install android C:\> phonegap install wp7 (?) C:\> phonegap install ios

44 Lokaliam kompiliavimui Instaliuoti Eclipse Android platformai (lokaliam kompiliavimui) Instaliuoti Android SDK Instaliuoti ADT Plugin Pasitikrinti ar į PATH įtrauktas JDK bin katalogas (lokaliam kompiliavimui)...\android\android-sdk\platform-tools...\android\android-sdk\tools sukurti kintamajį JAVA_HOME

45 Aplikacijos sukūrimas Susikurti prisijungimą: m99m Iš komandinės eilutės paleisti: C:\> phonegap create hello -n HelloWorld -i com.example.hello Redaguojame: www/config.xml, pakeičiame ir pridedame <access origin="*"/> <content src=" /> Iš komandinės eilutės paleisti: C:\> phonegap remote build android (PhoneGap build serveris) arba C:\> phonegap run android (lokaliai)

46 Alyternatyvus būdas sukurti aplikaciją Jeigu iš karto reikalingas palaikymas visoms platformoms: Išpakuoti lib/windows-phone-8/createtemplates.bat gauti zip failai perkeliami į My Documents/Visual Studio 2012/Templates/ProjectTemplates/Visual C# Redaguojame: www/config.xml, pakeičiame ir pridedame <access origin="*"/> <content src=" /> Iš komandinės eilutės paleisti: C:\> phonegap remote build android (PhoneGap build serveris) arba C:\> phonegap run android (lokaliai)

47 Įskiepių pridėjimas Pvz.: geolokacija phonegap local plugin add Reikalingas GIT įskiepis

48 Projekto patalpinimas į Eclipse

49 Paleidimas emuliatoriuje Windows Phone: C:\Program Files (x86)\microsoft SDKs\Windows Phone\v7.1\Tools\XAP Deployment Android: adb e install [apk file name] Instaliuoja veikiančiame emuliatoriuje

50 ios ios sertifikatų instaliavimas

51 PhoneGap emuliatorius

52 Cam (1) <!DOCTYPE html> <html> <head> <title>capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> var picturesource; // picture source var destinationtype; // sets the format of returned value // Wait for device API libraries to load document.addeventlistener("deviceready",ondeviceready,false); // device APIs are available function ondeviceready() { picturesource=navigator.camera.picturesourcetype; destinationtype=navigator.camera.destinationtype; }

53 Cam (2) // A button will call this function function capturephoto() { navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 50, destinationtype: destinationtype.data_url }); } // Take picture using device camera and retrieve image as base64-encoded string // A button will call this function function capturephotoedit() { navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 20, allowedit: true, destinationtype: destinationtype.data_url }); } // Take picture using device camera, allow edit, and retrieve image as base64-encoded string

54 Cam (3) // Called when a photo is successfully retrieved function onphotodatasuccess(imagedata) { var smallimage = document.getelementbyid('smallimage'); // Get image handle smallimage.style.display = 'block'; // Unhide image elements smallimage.src = "data:image/jpeg;base64," + imagedata; // Show the captured photo } // Called when a photo is successfully retrieved function onphotourisuccess(imageuri) { var largeimage = document.getelementbyid('largeimage'); // Get image handle largeimage.style.display = 'block'; // Unhide image elements largeimage.src = imageuri; // Show the captured photo }

55 Cam (4) // A button will call this function function getphoto(source) { navigator.camera.getpicture(onphotourisuccess, onfail, { quality: 50, destinationtype: destinationtype.file_uri, sourcetype: source }); }// Retrieve image file location from specified source // Called if something bad happens. function onfail(message) { alert('failed because: ' + message); } </script> </head>

56 Cam (5) <body> <button onclick="capturephoto();">capture Photo</button> <br> <button onclick="capturephotoedit();">capture Editable Photo</button> <br> <button onclick="getphoto(picturesource.photolibrary);">from Photo Library</button><br> <button onclick="getphoto(picturesource.savedphotoalbum);">from Photo Album</button><br> <img style="display:none;width:60px;height:60px;" id="smallimage" src="" /> <img style="display:none;" id="largeimage" src="" /> </body> </html>