Approaches to mobile site development


Published on

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

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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

  • Approaches to mobile site development

    1. 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. 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. 3. Mobile app development Platform centric Browser centric Framework centric
    4. 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. 5. iOS application Collaborative project with CS student The great idea - JSON Graduation, functionality, dynamic configuration, hard-coded logic
    6. 6. Dashcode The greatest 5 minute tutorial ever: – Minglu Wang on Handheld Librarian htttp://
    7. 7. PastryKit digging-into-an-apple-pie 7
    8. 8. Safari based - CSS / JS frameworks
    9. 9. What makes an app useful?
    10. 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. 11. Experiment 1 How easy is jQTouch?
    12. 12. jQTouch framework
    13. 13. Adding contacts
    14. 14. Adding RSS feeds (jQuery + jQTouch) index.html local.js
    15. 15. Going offline (ok, that was easy) library.manifest
    16. 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
    17. 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. 18. A (simple) look at the Django model
    19. 19. Something a bit more accurate:
    20. 20. An admin interface in 3 lines of code? admin.autodiscover() (r'^admin/', include(, 'django.contrib.admin',
    21. 21. A look at the Django model Django project filesystem Contains your data model, used to create your database Contains your view definitions and logic Maps request urls to views mytemplates customized templates called by views
    22. 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. 23. Bringing feed data to the front screen dom = minidom.parse(urllib2.urlopen(library.defaultFeed)) title = dom.getElementsByTagName("title")[1] link = dom.getElementsByTagName("link")[1] news = { 'title': title, 'link': link }
    24. 24. Enabling search def search(request): Search_terms = request.GET['lookfor'] searchURL = ' type=AllFields&submit=Find&api=json&lookfor=' + search_terms searchContents = urllib2.urlopen(searchURL) return HttpResponse(searchContents) #, 'application/javascript')
    25. 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. 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.libraryName }}</a></li> {% endfor %} </ul> <div class="info"> </div> </div> </body> </html>
    27. 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. 28. Quick tour
    29. 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. 30. Development & debugging iPhone & Android simulators Safari > Preferences >Advanced > Developer > client settings Common HTML tools - firebug, data validation (jsonlint) Bluefish, Dashcode . . .
    31. 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. 32. Ok, some easy tutorials Stark, Johnathan Building iPhone Apps with HTML, CSS, and JavaScript. Django Project. Django development tutorial series. http:// Calhoun, David. Developer blog. Mitchell, Erik. Web development tutorials. tech/category/web-development/ Get the code -