Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

An overview of mobile html + java script frameworks

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 44 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (16)

Anzeige

Ähnlich wie An overview of mobile html + java script frameworks (20)

Aktuellste (20)

Anzeige

An overview of mobile html + java script frameworks

  1. 1. An Overview of Mobile HTML + JavaScript Frameworks Presented By: Sasha dos Santos http://slidesha.re/zWlQlQ Orlando Code Camp 2012
  2. 2. About The Presenter • Twitter: @SashaGeekette • Blog: SashaGeekette.wordpress.com • Software Engineer, 3M Electronic Monitoring • ASP .NET Developer w/ interest in JavaScript, GIS and mobile • Lives near Tampa, FL • Graduate of the University of South Florida
  3. 3. Frameworks
  4. 4. Frameworks > JQuery Mobile • Tries to target every mobile, tablet, e-reader, desktop platform • Includes animations and components built on HTML 5 + JavaScript • Use HTML 5 data-role attribute to specify the component that a DOM element represents at runtime • Uses AJAX to transition between pages
  5. 5. Frameworks > JQuery Mobile > Demo
  6. 6. Frameworks > jQuery Mobile > Resources • Download: http://jquerymobile.com/ • Level of compatibility for different devices • List of data attributes
  7. 7. Frameworks > Kendo UI • Similar concept and syntax to jQuery Mobile • Components adaptively render to look and behave according to expectations for a particular platform – Currently supports: Android, iOS, Blackberry – Ex. Navigation controls for iOS are displayed at the bottom, on Android – at the top
  8. 8. Frameworks > Kendo UI > Demo
  9. 9. Frameworks > Kendo UI > Demo
  10. 10. Frameworks > Kendo UI > Demo
  11. 11. Frameworks > Kendo UI > Demo
  12. 12. Frameworks > Kendo UI > Demo
  13. 13. Frameworks > Kendo UI > Resources • Download • Kendo UI TV
  14. 14. Frameworks > PhoneGap • Build native applications using HTML + JavaScript – Applications can be placed in the various app store – Best case scenario: write one set of code & resources for all platforms • Supports: Android, iOS, Windows Phone, Blackberry, WebOS, Symbian
  15. 15. Frameworks > PhoneGap • Phone Gap (classic) is used within the development environment of the mobile platform that you are targeting – Ex. Phone Gap provides JARs to use with Java, dlls to use for .NET • Phone Gap build is a new cloud-based service that builds multiple native packages in the cloud – In most cases it would not be necessary to setup development environment for each platform
  16. 16. Frameworks > PhoneGap • No components – Can use components from jQuery Mobile, Kendo UI, Sencha • Native API Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  17. 17. Frameworks > PhoneGap > Architecture • PhoneGap shares an architecture used by many mobile frameworks • Provides a bridge between native device code and JavaScript to access native capabilities – ex. Camera, accelerometer • The application is actually running in a frameless browser window – Often called a ‘web view’ – All mobile OS SDKs offer this type of native control
  18. 18. Frameworks > PhoneGap > Architecture > Plugins • Sometimes PhoneGap provides the ability to do almost everything without writing native code • It may be necessary to write some portion of code that is specific to a mobile platform • You can create a JavaScript to Native Code bridge for each platform you target
  19. 19. Frameworks > Phone Gap > Architecture > Plugins Bridges Native Code: iOS JavaScript Native Code: Android
  20. 20. Frameworks > PhoneGap > Demo
  21. 21. Frameworks > PhoneGap > Resources • Project Website • GitHub directory of PhoneGap Plugins • Creating PhoneGap plugin for Android • Web Intent plugin for Android • Phonegap project structure using Git submodules • Crossing The PhoneGap For Multiplatform Mobile Applications
  22. 22. Frameworks > Sencha Touch 2 • Create mobile sites that look/feel like mobile apps OR create native packaging • Runs in webkit browsers – iOS, Android, Blackberry – No support for Windows Phone (yet), IE, Firefox • Uses MVC architecture • Like Phone Gap • uses ‘bridge’ between JavaScript and Native code • code runs in chrome-less webview (browser)
  23. 23. Frameworks > Sencha Touch 2 • Components such as date pickers, toolbars, tabs • Note: components do not adaptively render like Telerik’s Kendo UI but do look “mobile- ish”
  24. 24. Frameworks > Sencha Touch 2 • Native Device API: – Camera – Connection – Device – Geolocation – Notification – Orientation
  25. 25. Frameworks > Sencha Touch 2 > Demo
  26. 26. Frameworks > Sencha Touch 2 > Resources • Download • Guide • Tutorial #1 • Tutorial #2 • Examples on GitHub • Sencha blog posts – Includes fix for bug with Windows 7 (x64) • Look for the Examples folder in your installation
  27. 27. Testing
  28. 28. Testing > IIS Express • Problem: The default ASP .NET Development Server (Cassini) doesn’t allow for remote access – something required for testing mobile devices • One Solution: Switch to IIS Express – Will be default server in Visual Studio 11 • Step-By-Step Instructions on My Blog : http://bit.ly/GzBZT0
  29. 29. Testing > IIS Express > Configuration • Change Visual Studio to use IIS Express instead of ASP .NET Development Server • Change default configuration of IIS Express to allow for remote access • Configure Firewall to grant permissions to allow mobile devices to request the local site – Ex. Allow inbound requests on a particular port number, provided that the computers are on the local subnet and the computer is on a network marked as Private
  30. 30. Testing > Emulators > Windows Phone • Download Microsoft Visual Studio Express 2010 for Windows Phone • Start > All Programs > Windows Phone SDK 7.1 > Windows Phone Emulator • To access localhost use IP address 127.0.0.1 • Press Page Up / Page Down to enable / disable keyboard input (keyboard mapping reference)
  31. 31. Testing > Emulators > Windows Phone
  32. 32. Testing > Emulators > Windows Phone
  33. 33. Testing > Emulators > Android • Download the Android SDK & Android Virtual Device (AVD) Manager • To access localhost use IP address 10.0.2.2 • Can use telnet to send commands to the emulator – Use following command: telnet localhost 5554 – Telnet will need to be enabled on your dev machine
  34. 34. Testing > Emulators > Android
  35. 35. Testing > Emulators > Android > Default
  36. 36. Testing > Emulators > Android > Motorola (MOTODEV)
  37. 37. Testing > Emulators > Android > Samsung (Skin)
  38. 38. Testing > Emulators > Android
  39. 39. Testing > Emulators > Android > Resources • Java SE Development Kit • Eclipse • Android SDK • ADT Plugin for Eclipse • MOTODEV • Samsung Emulators
  40. 40. Testing > Adobe Shadow • Wirelessly connect to multiple mobile devices and preview, inspect, debug in real time • Supported Environments: – Development Computer: Windows 7 & Mac OS X – Development Browser: Chrome – Mobile Devices: Any Android or iOS device, on same network as the development computer
  41. 41. Testing > Adobe Shadow
  42. 42. Testing > Adobe Shadow • To test sites on mobile devices during development, use IIS Express and Adobe Shadow • Change default configuration of web site or web project to use computer name or IP address instead of localhost
  43. 43. Testing > Adobe Shadow > Resources • Download • Video • Using Visual Studio + IIS Express + Adobe Shadow to Test Local Websites on Mobile Devices
  44. 44. This presentation is available for viewing & download: http://slidesha.re/zWlQlQ “See you next time…”

×