SlideShare a Scribd company logo
1 of 12
“Frame” by rodimenko from Flickr




        Framed!
            An Intro to
iPhone Frameworks for Museums Tours
          Chris Alexander
         Program Director - Toura
“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.
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.
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
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
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)
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
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
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
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
Chris Alexander

       Program Director
            Toura
    calexander@toura.com
        www.toura.com

  www.chris-alexander.com
www.slideshare.net/cmalexander

More Related Content

What's hot

The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe Edge
Joseph Labrecque
 
Training on webwroks1
Training on webwroks1Training on webwroks1
Training on webwroks1
sumeettechno
 

What's hot (15)

Not Just another WordPress Site Design - Phil Peet - WordCamp Sydney 2012
Not Just another WordPress Site Design - Phil Peet - WordCamp Sydney 2012Not Just another WordPress Site Design - Phil Peet - WordCamp Sydney 2012
Not Just another WordPress Site Design - Phil Peet - WordCamp Sydney 2012
 
Book Reader Bingo: Which Page-Turner Should I Use?
Book Reader Bingo: Which Page-Turner Should I Use?Book Reader Bingo: Which Page-Turner Should I Use?
Book Reader Bingo: Which Page-Turner Should I Use?
 
Microsoft
MicrosoftMicrosoft
Microsoft
 
AppNotch
AppNotchAppNotch
AppNotch
 
Air Presentation
Air PresentationAir Presentation
Air Presentation
 
Mobile applications chapter 2
Mobile applications chapter 2Mobile applications chapter 2
Mobile applications chapter 2
 
The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe Edge
 
Alternatives to LMS and Content development
Alternatives to LMS and Content developmentAlternatives to LMS and Content development
Alternatives to LMS and Content development
 
Training on webwroks1
Training on webwroks1Training on webwroks1
Training on webwroks1
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Mobile applications chapter 4
Mobile applications chapter 4Mobile applications chapter 4
Mobile applications chapter 4
 
Google apps product_slides
Google apps product_slidesGoogle apps product_slides
Google apps product_slides
 
Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud DevelopersTop 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud Developers
 
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
 
Concrete5 workshop
Concrete5 workshopConcrete5 workshop
Concrete5 workshop
 

Viewers also liked

Viewers also liked (6)

SFSU - Apple's Disruption in Museums
SFSU - Apple's Disruption in MuseumsSFSU - Apple's Disruption in Museums
SFSU - Apple's Disruption in Museums
 
Tate Handheld Conference
Tate Handheld ConferenceTate Handheld Conference
Tate Handheld Conference
 
SFSU
SFSUSFSU
SFSU
 
California Association of Museums
California Association of MuseumsCalifornia Association of Museums
California Association of Museums
 
Create. Consume. Repurpose.
Create. Consume. Repurpose.Create. Consume. Repurpose.
Create. Consume. Repurpose.
 
Piecing it Together: Steps to Building Mobile Application
Piecing it Together: Steps to Building Mobile ApplicationPiecing it Together: Steps to Building Mobile Application
Piecing it Together: Steps to Building Mobile Application
 

Similar to Coding - iPhone Frameworks for Museum Tours

Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Haig Armen
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPress
GGDBologna
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
Maulik Bamania
 
Firefox operating system
Firefox operating systemFirefox operating system
Firefox operating system
Nishant Mehare
 

Similar to Coding - iPhone Frameworks for Museum Tours (20)

Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
 
jQuery Mobile Introduction
jQuery Mobile IntroductionjQuery Mobile Introduction
jQuery Mobile Introduction
 
Tools For Mobile Web Design and App Creation
Tools For Mobile Web Design and App CreationTools For Mobile Web Design and App Creation
Tools For Mobile Web Design and App Creation
 
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPressMobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPress
 
Mobile applications chapter 5
Mobile applications chapter 5Mobile applications chapter 5
Mobile applications chapter 5
 
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...
 
Dev Con 2011
Dev Con 2011Dev Con 2011
Dev Con 2011
 
UI Framework Prototyping with Playgrounds for iOS Apps
UI Framework Prototyping with Playgrounds for iOS AppsUI Framework Prototyping with Playgrounds for iOS Apps
UI Framework Prototyping with Playgrounds for iOS Apps
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
 
TOC Workshop 2013
TOC Workshop 2013TOC Workshop 2013
TOC Workshop 2013
 
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
 
Layer architecture of ios (1)
Layer architecture of ios (1)Layer architecture of ios (1)
Layer architecture of ios (1)
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
PLAT-18 Alfresco iOS Mobile Application Details and Design
PLAT-18 Alfresco iOS Mobile Application Details and DesignPLAT-18 Alfresco iOS Mobile Application Details and Design
PLAT-18 Alfresco iOS Mobile Application Details and Design
 
Firefox operating system
Firefox operating systemFirefox operating system
Firefox operating system
 
Firefox os
Firefox osFirefox os
Firefox os
 

More from Chris Alexander

American Association of Museums MUSE Award
American Association of Museums MUSE AwardAmerican Association of Museums MUSE Award
American Association of Museums MUSE Award
Chris Alexander
 
Museums And The Web 2008
Museums And The Web 2008Museums And The Web 2008
Museums And The Web 2008
Chris Alexander
 
Santa Clara University Museum Studies Class
Santa Clara University Museum Studies ClassSanta Clara University Museum Studies Class
Santa Clara University Museum Studies Class
Chris Alexander
 
Museums and the Web Field Trip Talk
Museums and the Web Field Trip TalkMuseums and the Web Field Trip Talk
Museums and the Web Field Trip Talk
Chris Alexander
 

More from Chris Alexander (13)

SFSU - Digital Preservation
SFSU - Digital PreservationSFSU - Digital Preservation
SFSU - Digital Preservation
 
Learning Times Handheld Conference
Learning Times Handheld ConferenceLearning Times Handheld Conference
Learning Times Handheld Conference
 
Cultural Connections - Road Trip
Cultural Connections - Road TripCultural Connections - Road Trip
Cultural Connections - Road Trip
 
American Association of Museums MUSE Award
American Association of Museums MUSE AwardAmerican Association of Museums MUSE Award
American Association of Museums MUSE Award
 
Museums And The Web 2008
Museums And The Web 2008Museums And The Web 2008
Museums And The Web 2008
 
Santa Clara University Museum Studies Class
Santa Clara University Museum Studies ClassSanta Clara University Museum Studies Class
Santa Clara University Museum Studies Class
 
SJMA Board Retreat
SJMA Board RetreatSJMA Board Retreat
SJMA Board Retreat
 
JFK University Class
JFK University ClassJFK University Class
JFK University Class
 
Museums and the Web Field Trip Talk
Museums and the Web Field Trip TalkMuseums and the Web Field Trip Talk
Museums and the Web Field Trip Talk
 
SJMA Docent Talk
SJMA Docent TalkSJMA Docent Talk
SJMA Docent Talk
 
Stanford University
Stanford UniversityStanford University
Stanford University
 
MCN Cal SIG
MCN Cal SIGMCN Cal SIG
MCN Cal SIG
 
AAM 2008
AAM 2008AAM 2008
AAM 2008
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

Coding - iPhone Frameworks for Museum Tours

  • 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

  1. Demo Facebook web app in Emulator Demo SJMA app in Emulator Show code and walk through it in Coda