• Like
Building a Mobile Website: One Block at a Time
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Building a Mobile Website: One Block at a Time

  • 1,526 views
Published

Presented to LILRC on 9/30/10. …

Presented to LILRC on 9/30/10.

Note that Slideshare doesn't handle the animation at all. So some of this presentation, especially the Mobile Site Generator demo, will be impossible to follow here. The original powerpoint file, with animations intact, is available here: http://bit.ly/LILRCmobile

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Presented to LILRC on 9/30/10.

    Note that Slideshare doesn't handle the animation at all. So some of this presentation, especially the Mobile Site Generator demo, will be impossible to follow here. The original powerpoint file, with animations intact, is available here: http://bit.ly/LILRCmobile
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,526
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building a Mobile Website: One Block at a Time
    Chad Haefele
    Emerging Technologies Librarian
    UNC Chapel Hill
    chad.haefele@gmail.com
  • 2. What I’ll be showing you
    An overview of the mobile/smartphone landscape
    A tour through our development process
    The building blocks you’ll need to do it yourself, and the decisions you’ll need to make along the way
    A mobile site generator
  • 3. Why now?
  • 4. The Old Browser
  • 5. The New Browser
  • 6. Even Better
  • 7. http://bit.ly/MobileLandscape
  • 8. iPhone 4
  • 9. iOS devices
    iPhone, iPad, iPod Touch
    Available only through AT&T
    Debuted in 2007
    Apps developed in Objective C
    More than 250,000 apps
  • 10.
  • 11. Android
    HTC Evo
    Droid X
  • 12.
  • 13. Android devices
    Too many to list
    Available on all major carriers
    Debuted in 2008
    Apps developed in Java
    More than 80,000 apps
  • 14. BlackBerry Torch
  • 15.
  • 16. Blackberry details
    Too many to list
    Available on all major carriers
    Debuted in 1996 (sort of)
    More modern devices: 2005
    About 10000 apps
  • 17. Which platform?
    Mobile web use
    (August 2010)
    Market share – devices sold
    (July 2010)
    Anon. 2010. August 2010 Mobile OS Share. Quantcast Blog. September 3. http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html.
    Anon. 2010. comScore Reports July 2010 U.S. Mobile Subscriber Market Share -- RESTON, Va., Sept. 15 /PRNewswire/ --. http://www.prnewswire.com/news-releases/comscore-reports-july-2010-us-mobile-subscriber-market-share-102969094.html.
  • 18. Source: http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html
  • 19. VS
  • 20. UNC Mobile site walkthrough
    www.lib.unc.edu/m
    www.lib.unc.edu/m/plain
    + ‘View full site link’
  • 21. UNC Mobile site walkthrough
  • 22. Catalog
  • 23. UNC Mobile site walkthrough
  • 24. UNC Mobile site walkthrough
  • 25. http://www.flickr.com/photos/gullevek/155604654/
  • 26. Block #1: Survey your users
    Plus 44 ‘other’ responses
    Data from Spring, 2009
  • 27. Sample ‘Other’ responses:
    Cell phone
    Cheap free phone
    Braille Note
    Carrier pigeon
    Lame old phone :(
    My cheap phone that always has at least 2 bars
  • 28. Block #2: Platform
    Vs.
  • 29. Platform: App or Webapp?
    App
    Webapp
    Java, Objective C
    Single platform
    Full hardware access(GPS, camera, etc)
    Can be used offline
    Tricky to get stats
    HTML, CSS, Javascript
    Multi-platform (maybe)
    Limited hardware access (GPS only)
    Requires web connection
    Standard webstats
  • 30. Android’s App Inventor
  • 31. Other app development options
    Phonegap
    Flash
    Sencha Touch
    Appcelerator
    Others: http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
  • 32. Block #3: Framework
    Jason Clark’s: http://diginit.wordpress.com/2009/11/13/mobile-web-design-working-code-tips-best-practices/orhttp://bit.ly/cXlnlS
    www.lib.utc.edu/m
  • 33. Block #3: Framework
    iUI: code.google.com/p/iui/
    Mobile site generator:www.hiddenpeanuts.com/msg
    www.lib.unc.edu/m
  • 34. Mobile site generator
    www.hiddenpeanuts.com/msg
  • 35. Device testing
    iPhone/iPod Touch
  • 36. Device testing
    Android
  • 37. Device testing
    Text only
  • 38. Block #4: Data sources & Outside systems
    RSS feeds
    XML
    Other systems
    Computer availability
    eResources
    Hours
    IM / text a librarian services
  • 39. Block #5: Custom code
  • 40. http://dclibrarylabs.org/
    iPhone app code
    (app)
  • 41. iUI code (webapp)
    http://code.google.com/p/iui/
  • 42. Block #6: Catalog
    Catalog options
    Do it yourself
    ILS vendor-provided solution
    3rd party product
  • 43. Catalog: DIY
    Priority 1: Get a clean data feed
    XML feeds from ILS
    Yaz / Z39.50 (http://www.indexdata.com/yaz)
    Other solution – tap into DB directly somehow
    Harass your vendors!
  • 44. Catalog: DIY (at UNC)
    Endeca makes it all possible
    XML + php + Syndetics + iUI
  • 45. Catalog: ILS solutions
    Airpac, from Innovative
  • 46. Catalog: 3rd party product
    Library Anywhere
    “Works with 90% of current OPACs.”
    http://www.librarything.com/LibraryAnywhere
  • 47. Block #7: Promotion
  • 48. Rough stats: Hits, 2010
    Block #8: Evaluate & Iterate
  • 49. Rough stats: Catalog info, 2010
    Block #8: Evaluate & Iterate
  • 50. Blocks (review)
    Survey
    Platform
    Framework
    Data sources
    Custom code
    Catalog
    Promotion
    Evaluate & Iterate
  • 51. Mobile site generator
    www.hiddenpeanuts.com/msg
  • 52. iUI code (webapp)
    http://code.google.com/p/iui/
  • 53. Examples
    INSERT SAMPLE HERE
    www.cranstonlibrary.org/m
    http://library.boisestate.edu/m/
    http://mobile-library.mhcc.edu/
  • 54. Main Page
    40 possible pages
  • 55. Getting started
    Download the iUI code: http://code.google.com/p/iui/
    Unzip it, put the iUI folder on your server where you want the mobile site
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61. Custom code
  • 62.
  • 63.
  • 64. Webapps play well with others
  • 65. HTML5 & more on the horizon
    APIs – camera, GPS, mic, accelerometer, video
    Youtube: m.youtube.com
    Flickr: m.flickr.com
    Google Reader: google.com/reader/i
    Geolocation: hiddenpeanuts.com/ala
  • 66. This is not the end
    Slides online: http://bit.ly/LILRCmobile
    http://www.slideshare.net/cHaefele