Generalizing mobile applications
     for multiple libraries

    . . .my summer project & why it was
                   f...
Scope

Review the area of mobile app development - iPhone
centric view :)

Define the scope of our investigation today

Lo...
Mobile app development

 Platform centric

 Browser centric

 Framework centric

 http://davidbcalhoun.com/tag/jqtouch
Scoping our investigation

iOS - a project and a sigh. . .

Dashcode - a fun beginning

jQTouch, jQuery, HTML5 - platform ...
iOS application
Collaborative project with CS student

The great idea - JSON




Graduation, functionality, dynamic config...
Dashcode
The greatest 5 minute tutorial ever:
   – Minglu Wang on Handheld Librarian




         htttp://catalog.zsr.wfu....
PastryKit


            http://davidbcalhoun.com/2009/pastrykit-
            digging-into-an-apple-pie




               ...
Safari based - CSS / JS frameworks




  http://jqtouch.com   http://code.google.com/p/iui/
What makes an app useful?
Library equivalents

Mobile apps           Library equivalents

Focused use           Resources, location,
               ...
Experiment 1
   How easy is jQTouch?




http://erikmitchell.info/lita_mobile/static_site
jQTouch framework
Adding contacts
Adding RSS feeds (jQuery + jQTouch)
index.html




local.js
Going offline (ok, that was easy)

                                      library.manifest




http://erikmitchell.info/lit...
Experiment 1 - Observations

                                   Easy to write
                                   Simple to...
Experiment 2 - Lets make it dynamic

“How can I make the app do more and be flexible enough to
work differently for each l...
A (simple) look at the Django model




      http://cloud.lib.wfu.edu/blog/tech/2010/09/28/using-django-to-create-complex...
Something
a bit more
accurate:
An admin interface in 3 lines of code?




urls.py:
    admin.autodiscover()
    (r'^admin/', include(admin.site.urls)),
s...
A look at the Django model
 Django project filesystem   models.py     Contains your data
                                 ...
Changes to site code

Four main Views
 index - A listing of multiple libraries
 details - The main application
 feed - a s...
Bringing feed data to the front screen


dom = minidom.parse(urllib2.urlopen(library.defaultFeed))
title = dom.getElements...
Enabling search

def search(request):
   Search_terms = request.GET['lookfor']
   searchURL = 'http://cloud.lib.wfu.edu/vu...
Enhancing ‘What’s New’
 def feed(request, feed_id):
      feed = get_object_or_404(Feed, pk=feed_id)
      feedContents = ...
Multi-library site happens ‘automatically’
Library list template file - called from index view
<!DOCTYPE html>
<html><head...
Let’s reflect - what did Django give us?

Dynamic site with automatically generated admin interfaces

A simple-to-configur...
Quick tour
What’s Next?

Real HTML5 - Video, geo-location, chat

Better abstraction of data model and application code

A change in d...
Development & debugging

iPhone & Android simulators

Safari > Preferences >Advanced > Developer > client settings

Common...
Ok - how do you get started?

 1.    Learn html
 2.    Learn html5
 3.    Learn a bit of javascript
 4.    Learn the jQuer...
Ok, some easy tutorials

Stark, Johnathan Building iPhone Apps with HTML, CSS, and
JavaScript. 
 http://building-iphone-ap...
Approaches to mobile site development
Upcoming SlideShare
Loading in...5
×

Approaches to mobile site development

2,255

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,255
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
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


















  • 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/
  • 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 http://davidbcalhoun.com/tag/jqtouch
    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://catalog.zsr.wfu.edu/zsr_new_videos
    7. 7. PastryKit http://davidbcalhoun.com/2009/pastrykit- digging-into-an-apple-pie 7
    8. 8. Safari based - CSS / JS frameworks http://jqtouch.com http://code.google.com/p/iui/
    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? http://erikmitchell.info/lita_mobile/static_site
    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 http://erikmitchell.info/lita_mobile/static_site
    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 http://cloud.lib.wfu.edu/blog/tech/2010/09/27/creating-a-mobile-site-using-jqtouch-html-css-and-javascript/
    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 http://cloud.lib.wfu.edu/blog/tech/2010/09/28/using-django-to-create-complex-sites-simply/
    19. 19. Something a bit more accurate:
    20. 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. 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. 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].firstChild.data link = dom.getElementsByTagName("link")[1].firstChild.data news = { 'title': title, 'link': link }
    24. 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. 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.id }}">{{ 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. 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/
    1. A particular slide catching your eye?

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

    ×