Building a Simple Mobile-optimized WebApp/Site Using the jQuery Mobile Framework
http://www.slideshare.net/chadmairn                @cmairn
Agenda• Learn what a mobile framework is.• Understand the various technologies (HTML, CSS, JavaScript) and  how they work ...
Virtual Petting Zoo    Google Plus     Hangout   gplus.to/chadmairn
Quick PollDoes your library have: Mobile-optimized Website Native App (iOS, Android etc.) Nothing yet, but considering an ...
Source: http://http://goo.gl/y8CFb
jQuery Mobile is …a unified, HTML5-based user interface system   for all popular mobile device platforms.                 ...
jQuery Mobile is well-documented andthere are great demos to get you started
What is HTML, CSS, and JavaScriptand how do they all fit together?
HyperText Markup Language (HTML) is the skeleton.Cascading Style Sheets (CSS) are the skin, clothes, cologne etc.         ...
Native Apps vs. Web/Browser Apps                  Issues                          Native apps                             ...
Getting Started!
Take an emulated look at your desktop site. Mobile Site               Desktop Site
Small Screen Rendering (260 px) using the   Web Developer add-on in FirefoxDesktop                        Small Screen
In-page AnalyticsNote: you can determine how your user’sare accessing your Web site (e.g., mobiledevices, carriers, browse...
“Fundamentally, mobilerefers to the user, not the  device or application.”Barbara Ballard Designing the Mobile User Experi...
Mobile Screen Resolutions  Android (Motorola Droid) 480x854  Android (MyTouch) 320x480  Android (Nexus One) 480x800  Apple...
Learn and borrow from sites you like.       http://m.novarelibrary.com/
Sketch ideas
Rapid Prototyping for jQuery Mobile    Try it at http://codiqa.com/
Try it at http://jquerymobile.com/themeroller/
Quick jQuery Mobile Demo  Highlight Documentation      CDN-Hosted Files     Viewport Meta Tag  Creating a Basic Template  ...
Advanced Example (Web SQL Database stores data within user’s browser. No cookies!) HTML5 has offline storage capabilities!...
http://www.w3.org/TR/webdatabase/Although Web SQL Database worked on this Web app, the W3C recommends these      storage-r...
Steal, umm, borrow this code if you want.<script type="text/javascript">var db = openDatabase(mydb, 1.0, Test DB, 100000);...
Some Best Practices• Follow the "m" convention (m.novarelibrary.com OR  lifeonterra.com/m/)• Keep categories (directories)...
Testing and validation      Test Page Speed in Firebug                     http://getfirebug.com/
W3C mobileOK Checkerhttp://validator.w3.org/mobile/
http://ready.mobi
Editors and Tools• You can use a simple text editor (e.g., Notepad) or a more sophisticated application  (e.g., Dreamweave...
Emulators/Simulators:•   Cowemo Mobile Emulator: http://www.mobilephoneemulator.com/•   dotMobi Emulator - http://mtld.mob...
Other mobile development tools/frameworks
The Future of Mobile Web App/Site Development? Responsive Web Design?
Free jQTouch Mobile Templates at:   http://goo.gl/biPJj   Note: jQuery Mobile templates coming soon!
http://www.slideshare.net/chadmairn                @cmairn
Virtual Petting Zoo    Google Plus     Hangout   gplus.to/chadmairn
Want to  Hangout?gplus.to/chadmairn
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Upcoming SlideShare
Loading in...5
×

Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework

26,497

Published on

Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.

Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:

- learn what a mobile framework is.

- acquire best practices in mobile Web development.

- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.

- recognize the differences between native and web apps.

- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.

- gain access after the webinar to a free Web server so you can see your mobile Web app live.

Published in: Technology, Design
2 Comments
8 Likes
Statistics
Notes
  • Hi Uzma,
    Its nice work. Congratulations.
    Please and Please contact with me. I am also in touch with Faisal Bhi. I wana talk with you. So please...
    Find below my email ID AMJAD_WASEEM@HOTMAIL.COM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Uzma, Its nice work and Happy Birthday in Advance. :)
    I wana talk with you. Please and please contact with me on my email ID amjad_waseem@hotmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
26,497
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
263
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework"

  1. 1. Building a Simple Mobile-optimized WebApp/Site Using the jQuery Mobile Framework
  2. 2. http://www.slideshare.net/chadmairn @cmairn
  3. 3. Agenda• Learn what a mobile framework is.• Understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps/sites.• Recognize the differences between native and web apps/sites.• Explore jQuery Mobile basics.• Acquire best practices in mobile Web development.• Create an opportunity to continue to work with me after the webinar to demonstrate what you learned.• Gain access after the webinar to a free Web server so you can see your mobile Web app/site live.
  4. 4. Virtual Petting Zoo Google Plus Hangout gplus.to/chadmairn
  5. 5. Quick PollDoes your library have: Mobile-optimized Website Native App (iOS, Android etc.) Nothing yet, but considering an app Nothing yet, but considering a website. No plans; it is too expensive/complex!
  6. 6. Source: http://http://goo.gl/y8CFb
  7. 7. jQuery Mobile is …a unified, HTML5-based user interface system for all popular mobile device platforms. Source: http://jquerymobile.com/
  8. 8. jQuery Mobile is well-documented andthere are great demos to get you started
  9. 9. What is HTML, CSS, and JavaScriptand how do they all fit together?
  10. 10. HyperText Markup Language (HTML) is the skeleton.Cascading Style Sheets (CSS) are the skin, clothes, cologne etc. JavaScript is the personality. The character. The pizazz! Source: http://goo.gl/kWzET
  11. 11. Native Apps vs. Web/Browser Apps Issues Native apps Web appsInternet access Not required Required, except for apps written in HTML5 (offline capabilities)Shareable content (Twitter etc.) Only if it is built in to the app Web links can be shared. Social API’s allow 1-click postingAccess to hardware sensors Yes: camera, gyroscope, microphone, Access thru browser is limited. compass, accelerometer, GPS Geolocation works!Development Build app for target platform (Android, Write/publish once using standard Web iOS [Objective-C] etc.) technologies, view it anywhere with URL. Speedy debugging and development.Distribution Most app stores require approval. No hassles. Source: http://goo.gl/zSeDU
  12. 12. Getting Started!
  13. 13. Take an emulated look at your desktop site. Mobile Site Desktop Site
  14. 14. Small Screen Rendering (260 px) using the Web Developer add-on in FirefoxDesktop Small Screen
  15. 15. In-page AnalyticsNote: you can determine how your user’sare accessing your Web site (e.g., mobiledevices, carriers, browsers , OS’s, screenresolution etc.)
  16. 16. “Fundamentally, mobilerefers to the user, not the device or application.”Barbara Ballard Designing the Mobile User Experience
  17. 17. Mobile Screen Resolutions Android (Motorola Droid) 480x854 Android (MyTouch) 320x480 Android (Nexus One) 480x800 Apple iPhone 320x480 Apple iPad 1024x768 Palm Pre 320 x 480 Source: http://goo.gl/zEDoi
  18. 18. Learn and borrow from sites you like. http://m.novarelibrary.com/
  19. 19. Sketch ideas
  20. 20. Rapid Prototyping for jQuery Mobile Try it at http://codiqa.com/
  21. 21. Try it at http://jquerymobile.com/themeroller/
  22. 22. Quick jQuery Mobile Demo Highlight Documentation CDN-Hosted Files Viewport Meta Tag Creating a Basic Template Listview with FilterButtons with different themes
  23. 23. Advanced Example (Web SQL Database stores data within user’s browser. No cookies!) HTML5 has offline storage capabilities! Favorites List Favorites Found: 4 Conference Committee, Friday, 8- 9am, Azalea A Building the Next Generation of E-Govt, Thurs. 1- 2pm, Jasmine Opening General Session, Wed. 9:15- 11:15am, Floral Ballroom http://novarelibrary.com/FLAmobile/ Note: this URL is not a best practice. More later.
  24. 24. http://www.w3.org/TR/webdatabase/Although Web SQL Database worked on this Web app, the W3C recommends these storage-related specifications: Web Storage and Indexed Database API.
  25. 25. Steal, umm, borrow this code if you want.<script type="text/javascript">var db = openDatabase(mydb, 1.0, Test DB, 100000);var msg;var insertTxt = "";$(document).ready(function() {$("button").click(function(event) {if(!confirm("Would you like to add to your favorites?")) { return;}insertTxt = $(this).text();db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEYAUTOINCREMENT, log TEXT NOT NULL ),[],function(tx, result){},function(tx,error){alert("Error: Disable privatebrowsing");}); tx.executeSql(SELECT * FROM LOGS WHERE log = ?,[insertTxt], function(tx, result) {if(result.rows.length == 0) {tx.executeSql(INSERT INTO LOGS (log) VALUES (?);, [insertTxt]);}});});});});</script>
  26. 26. Some Best Practices• Follow the "m" convention (m.novarelibrary.com OR lifeonterra.com/m/)• Keep categories (directories) short. Remember that you are creating a page that people touch without much typing• Limit image and markup sizes• Limit HTML pages to 25KB to allow for caching• "Minify" your scripts and CSS (JSLint, CleanCSS)• Link to Full Site• Sniff for User Agent – Detection (allow the user to decide where to go)• One Column Layout with some whitespace• Mobile refers to the user!
  27. 27. Testing and validation Test Page Speed in Firebug http://getfirebug.com/
  28. 28. W3C mobileOK Checkerhttp://validator.w3.org/mobile/
  29. 29. http://ready.mobi
  30. 30. Editors and Tools• You can use a simple text editor (e.g., Notepad) or a more sophisticated application (e.g., Dreamweaver).• Adobe Device Central is part of Adobe’s CS.• iUI: http://code.google.com/p/iui/ for iPhone.• MIT Mobile Web Open Source Project http://sourceforge.net/projects/mitmobileweb/• Device detection? http://detectmobilebrowsers.mobi/• To see your browsers HTTP Headers. Works on mobile browsers. http://rabin.mobi/http• Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a mobile browser.
  31. 31. Emulators/Simulators:• Cowemo Mobile Emulator: http://www.mobilephoneemulator.com/• dotMobi Emulator - http://mtld.mobi/emulator.php• Opera Mini Simulator - http://www.opera.com/mobile/demo/• Mimic - emulates European and Japanese models: N400i and N505i. http://pukupi.com/post/2059• Android Emulator - http://developer.android.com/guide/developing/tools/emulator.html• BlackBerry Device Simulators - https://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477• iPhone Dev Center: http://developer.apple.com/iphone/• Palm Pre - http://developer.palm.com/• Windows Mobile - http://msdn.microsoft.com/en-us/windowsmobile/default.aspx• JAVA ME - Java Platform Micro Edition was termed J2ME. It is considered one of the most ubiquitous application platform for mobile devices. http://java.sun.com/javame/reference/apis.jsp
  32. 32. Other mobile development tools/frameworks
  33. 33. The Future of Mobile Web App/Site Development? Responsive Web Design?
  34. 34. Free jQTouch Mobile Templates at: http://goo.gl/biPJj Note: jQuery Mobile templates coming soon!
  35. 35. http://www.slideshare.net/chadmairn @cmairn
  36. 36. Virtual Petting Zoo Google Plus Hangout gplus.to/chadmairn
  37. 37. Want to Hangout?gplus.to/chadmairn
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×