• Like
Approaches to mobile site development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Approaches to mobile site development


In this presentation I cover my work on developing mobile web sites using jQuery, jQTouch, and Django

In this presentation I cover my work on developing mobile web sites using jQuery, jQTouch, and Django

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide

  • 1. Download the jQTouch framework
    2. Download the jQuery framework
    3. Create an HTML page that replicates the structure at the JQTouch website

  • http://cloud.lib.wfu.edu/blog/tech/2010/09/28/migrating-your-mobile-site-to-django/
  • http://cloud.lib.wfu.edu/blog/tech/2010/09/28/migrating-your-mobile-site-to-django/
  • http://cloud.lib.wfu.edu/blog/tech/2010/09/28/migrating-your-mobile-site-to-django/


  • 1. Generalizing mobile applications for multiple libraries . . .my summer project & why it was fun Erik Mitchell, PhD Assistant Director for Technology Services Z. Smith Reynolds Library Wake Forest University
  • 2. Scope Review the area of mobile app development - iPhone centric view :) Define the scope of our investigation today Look at some interesting tools Discuss what I learned think about next steps
  • 3. Mobile app development Platform centric Browser centric Framework centric http://davidbcalhoun.com/tag/jqtouch
  • 4. Scoping our investigation iOS - a project and a sigh. . . Dashcode - a fun beginning jQTouch, jQuery, HTML5 - platform independence Django - Making your app a bit more dynamic
  • 5. iOS application Collaborative project with CS student The great idea - JSON Graduation, functionality, dynamic configuration, hard-coded logic
  • 6. Dashcode The greatest 5 minute tutorial ever: – Minglu Wang on Handheld Librarian htttp://catalog.zsr.wfu.edu/zsr_new_videos
  • 7. PastryKit http://davidbcalhoun.com/2009/pastrykit- digging-into-an-apple-pie 7
  • 8. Safari based - CSS / JS frameworks http://jqtouch.com http://code.google.com/p/iui/
  • 9. What makes an app useful?
  • 10. Library equivalents Mobile apps Library equivalents Focused use Resources, location, hours, contacts Connectivity Updates, search, browsing Session persistence Off-line use, favorites Information need Discovery, location, help 10
  • 11. Experiment 1 How easy is jQTouch? http://erikmitchell.info/lita_mobile/static_site
  • 12. jQTouch framework
  • 13. Adding contacts
  • 14. Adding RSS feeds (jQuery + jQTouch) index.html local.js
  • 15. Going offline (ok, that was easy) library.manifest http://erikmitchell.info/lita_mobile/static_site
  • 16. Experiment 1 - Observations Easy to write Simple to maintain Focused, connected, persistent Complexity in RSS/JSON data Content updates & delegation Framework flexibility Catalog search hijacks page http://cloud.lib.wfu.edu/blog/tech/2010/09/27/creating-a-mobile-site-using-jqtouch-html-css-and-javascript/
  • 17. Experiment 2 - Lets make it dynamic “How can I make the app do more and be flexible enough to work differently for each library? Can it include embedded search, updates, and easy maintenance?” Model -- View -- Controller (MVC) Automatic administration interface Simple template system URL management Relational database High-level programming language
  • 18. A (simple) look at the Django model http://cloud.lib.wfu.edu/blog/tech/2010/09/28/using-django-to-create-complex-sites-simply/
  • 19. Something a bit more accurate:
  • 20. An admin interface in 3 lines of code? urls.py: admin.autodiscover() (r'^admin/', include(admin.site.urls)), settings.py 'django.contrib.admin',
  • 21. A look at the Django model Django project filesystem models.py Contains your data model, used to create your database views.py Contains your view definitions and logic urls.py Maps request urls to views mytemplates customized templates called by views
  • 22. Changes to site code Four main Views index - A listing of multiple libraries details - The main application feed - a simple rss feed api search - a simple JSON search api (Thanks Vufind!) Two main JavaScript processes (Thanks Kevin!) Search ajax Feed ajax
  • 23. Bringing feed data to the front screen dom = minidom.parse(urllib2.urlopen(library.defaultFeed)) title = dom.getElementsByTagName("title")[1].firstChild.data link = dom.getElementsByTagName("link")[1].firstChild.data news = { 'title': title, 'link': link }
  • 24. Enabling search def search(request): Search_terms = request.GET['lookfor'] searchURL = 'http://cloud.lib.wfu.edu/vufind/Search/Results? type=AllFields&submit=Find&api=json&lookfor=' + search_terms searchContents = urllib2.urlopen(searchURL) return HttpResponse(searchContents) #, 'application/javascript')
  • 25. Enhancing ‘What’s New’ def feed(request, feed_id): feed = get_object_or_404(Feed, pk=feed_id) feedContents = urllib2.urlopen(feed.feedURI) return HttpResponse(feedContents, 'application/xml') $.ajax({ type: "GET", url: feedurl, dataType: "xml", success: function(xml) { $('#' + myFeed + ' ul').empty(); $(xml).find("item").each(function() { var title = $(this).find('title').text(); var pubDate = $(this).find('published').text(); var link = $(this).find('link').text(); var listItem = $('<li class="rounded">.....</li>'); $('#' + myFeed + ' ul').append(listItem); }); }, error: errorMsg });
  • 26. Multi-library site happens ‘automatically’ Library list template file - called from index view <!DOCTYPE html> <html><head> <css and stylesheet links. . . .> <title>List of Libraries</title> </head><body> <div id="home" class="current"> <div class="toolbar"><h1>Mobile Library Sites</h1></div> <ul class="rounded"> {% for mylibrary in libraryList %} <li class="forward" > <a target="_blank" href="/librware/site/ {{ mylibrary.id }}">{{ mylibrary.libraryName }}</a></li> {% endfor %} </ul> <div class="info"> </div> </div> </body> </html>
  • 27. Let’s reflect - what did Django give us? Dynamic site with automatically generated admin interfaces A simple-to-configure data model and easily written view/ template architecture No database connection code, lots of pre-built libraries, MVC architecture, simple data proxy & api calls Integrated debugging environment Pluggable application architecture - drop this app into your django site & go.
  • 28. Quick tour
  • 29. What’s Next? Real HTML5 - Video, geo-location, chat Better abstraction of data model and application code A change in default css Better integration with standard full website Integration with digital collections ?
  • 30. Development & debugging iPhone & Android simulators Safari > Preferences >Advanced > Developer > client settings Common HTML tools - firebug, data validation (jsonlint) Bluefish, Dashcode . . .
  • 31. Ok - how do you get started? 1. Learn html 2. Learn html5 3. Learn a bit of javascript 4. Learn the jQuery syntax 5. Learn the jQTouch framework 6. Learn a bit of python 7. Learn just a bit of data modeling 8. Learn Django 9. Figure out how to run Django on your site/server 10. Publish!
  • 32. Ok, some easy tutorials Stark, Johnathan Building iPhone Apps with HTML, CSS, and JavaScript. http://building-iphone-apps.labs.oreilly.com Django Project. Django development tutorial series. http:// docs.djangoproject.com/en/dev/intro/ Calhoun, David. Developer blog. http://davidbcalhoun.com/tag/jqtouch Mitchell, Erik. Web development tutorials. http://cloud.lib.wfu.edu/blog/ tech/category/web-development/ Get the code - http://github.com/mitcheet/