Slides for the presentation that I gave at Museums and the Web regarding the San Jose Museum of Art iPhone interactive guide that I created and launched in May 2008. Talks about the various frameworks that are available for developing on the platform.
1. “Frame” by rodimenko from Flickr
Framed!
An Intro to
iPhone Frameworks for Museums Tours
Chris Alexander
Program Director - Toura
2. “Frame” by ansik from Flickr
Framework
A framework streamlines development by automating
many of the patterns employed for a given purpose. A
framework also adds structure to the code, prompting
the developer to write better, more readable, and more
maintainable code. Ultimately, a framework makes
programming easier, since it packages complex
operations into simple statements.
3. Elements of iPhone Frameworks
HTML File
-index.html
-a great place to start hacking
CSS File or Folder w/Files
-style.css
-change the look and feel
JavaScript File or Folder w/Files
-controls the behavior of the
web app.
4. The SJMA App
• Had been using Notes-only mode or “Museum -
Mode” w/Video iPods
• First iPhone in October 2007
• Web Apps were the only thing then
• Started looking at how they were created
• Discovered the iUI framework
• Created by Joe Hewitt, developer at Facebook
• Made open source
• Started hacking away at it
• Had a working prototype by November 2007
5.
6. The Cast of Characters
iUI - iPhone User Interface
Site: http://code.google.com/p/iui/
Demo: http://iui-js.appspot.com/
iWebkit
Site: http://iwebkit.net/
Demo: http://demo.iwebkit.net
UiUI - Universal iPhone User Interface
Site: http://code.google.com/p/iphone-universal/
Demo: http://www.minid.net/iphone/
WebApp.net
Site: http://webapp-net.com/
Demo: http://demo.webapp-net.com/
jQTouch
Site: http://www.jqtouch.com/
Demo: http://demo.jqtouch.com/preview/demos
/main/#home
7. iUI - iPhone User Interface
•Nice rundown of the framework code:
http://www.k10design.net/articles/iui/
• Create Navigational Menus and iPhone
interfaces from standard HTML
• Use or knowledge of JavaScript is not
required to create basic iPhone pages
• Ability to handle phone orientation
changes
• Provide a more "iPhone-like" experience
to Web apps (on or off the iPhone)
8. iWebkit
• Offers the most integration with other
iPhone features.
• Takes full advantage of CSS3
• Style form elements with CSS
• Easily switch between Navigation style
• Searching option available
• Create Apple style listing easily
9. UiUI - Universal iPhone User Interface
• Utilize different headers with navigation
• Offers different styles of lists
• Information fields similar to the contacts
app on the iPhone/iPod Touch
• Create image grids with loading sprites
• Chat style conversation threads
• Basic form elements
• Button panels
10. WebApp.net
• Change styles through a theming system
• Handles JSON requests
• Incremental lists
• Different types of buttons
• Basic form handling
• Quicktime media
• Some linking to iPhone functionality
11. jQTouch
• The Cadillac of iPhone Frameworks
• Different UIs built-in
• Incredible animations to utilize
• AJAX Calls
• Extensions include Geolocation, Offline
storage, and Floaty Bar (?)
• Has some demo apps showing
functionality
12. Chris Alexander
Program Director
Toura
calexander@toura.com
www.toura.com
www.chris-alexander.com
www.slideshare.net/cmalexander
Editor's Notes
Demo Facebook web app in Emulator
Demo SJMA app in Emulator
Show code and walk through it in Coda