SlideShare a Scribd company logo
Building a Simple Mobile-optimized Web
App/Site Using the jQuery Mobile Framework
http://www.slideshare.net/chadmairn




                @cmairn
Agenda
• Learn what a mobile framework is.

• Understand the various technologies (HTML, CSS, JavaScript) and
  how they work together to build mobile Web apps/sites.

• Recognize the differences between native and web apps/sites.

• Explore jQuery Mobile basics.

• Acquire best practices in mobile Web development.

• Create an opportunity to continue to work with me after the
  webinar to demonstrate what you learned.

• Gain access after the webinar to a free Web server so you can see
  your mobile Web app/site live.
Virtual Petting Zoo


    Google Plus
     Hangout




   gplus.to/chadmairn
Quick Poll
Does your library have:

 Mobile-optimized Website

 Native App (iOS, Android etc.)

 Nothing yet, but considering an app

  Nothing yet, but considering a website.

  No plans; it is too expensive/complex!
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Source: http://http://goo.gl/y8CFb
jQuery Mobile is …

a unified, HTML5-based user interface system
   for all popular mobile device platforms.




                                Source: http://jquerymobile.com/
jQuery Mobile is well-documented and
there are great demos to get you started
What is HTML, CSS, and JavaScript
and how do they all fit together?
HyperText Markup Language (HTML) is the skeleton.




Cascading Style Sheets (CSS) are the skin, clothes, cologne etc.




                 JavaScript is the personality. The character. The pizazz!

                                                         Source: http://goo.gl/kWzET
Native Apps vs. Web/Browser Apps
                  Issues                          Native apps                               Web apps

Internet access                    Not required                              Required, except for apps written in
                                                                             HTML5 (offline capabilities)


Shareable content (Twitter etc.)   Only if it is built in to the app         Web links can be shared. Social API’s
                                                                             allow 1-click posting


Access to hardware sensors         Yes: camera, gyroscope, microphone,       Access thru browser is limited.
                                   compass, accelerometer, GPS               Geolocation works!



Development                        Build app for target platform (Android,   Write/publish once using standard Web
                                   iOS [Objective-C] etc.)                   technologies, view it anywhere with
                                                                             URL. Speedy debugging and
                                                                             development.
Distribution                       Most app stores require approval.         No hassles.




                                                                                              Source: http://goo.gl/zSeDU
Getting Started!
Take an emulated look at your desktop site.
 Mobile Site               Desktop Site
Small Screen Rendering (260 px) using the
   Web Developer add-on in Firefox
Desktop                        Small Screen
In-page Analytics




Note: you can determine how your user’s
are accessing your Web site (e.g., mobile
devices, carriers, browsers , OS’s, screen
resolution etc.)
“Fundamentally, 'mobile'
refers to the user, not the
  device or application.”


Barbara Ballard Designing the Mobile User Experience
Mobile Screen Resolutions




  Android (Motorola Droid) 480x854
  Android (MyTouch) 320x480
  Android (Nexus One) 480x800
  Apple iPhone 320x480
  Apple iPad 1024x768
  Palm Pre 320 x 480
                                     Source: http://goo.gl/zEDoi
Learn and borrow from sites you like.




       http://m.novarelibrary.com/
Sketch ideas
Rapid Prototyping for jQuery Mobile




    Try it at http://codiqa.com/
Try it at http://jquerymobile.com/themeroller/
Quick jQuery Mobile Demo

  Highlight Documentation
      CDN-Hosted Files
     Viewport Meta Tag
  Creating a Basic Template
     Listview with Filter
Buttons with different themes
Advanced Example (Web SQL Database stores data within user’s
 browser. No cookies!) HTML5 has offline storage capabilities!




                                                            Favorites List
                                                            Favorites Found: 4

                                                            Conference
                                                            Committee, Friday, 8-
                                                            9am, Azalea A

                                                            Building the Next Generation
                                                            of E-Govt, Thurs. 1-
                                                            2pm, Jasmine

                                                            Opening General
                                                            Session, Wed. 9:15-
                                                            11:15am, Floral Ballroom




 http://novarelibrary.com/FLAmobile/   Note: this URL is not a best practice. More later.
http://www.w3.org/TR/webdatabase/



Although Web SQL Database worked on this Web app, the W3C recommends these
      storage-related specifications: Web Storage and Indexed Database API.
Steal, umm, borrow this code if you want.
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 100000);
var msg;
var insertTxt = "";
$(document).ready(function() {
$("button").click(function(event) {
if(!confirm("Would you like to add to your favorites?")) {
             return;
}
insertTxt = $(this).text();
db.transaction(function (tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY
AUTOINCREMENT, log TEXT NOT NULL )',[],function(tx, result){},function(tx,error){alert("Error: Disable private
browsing");});

   tx.executeSql('SELECT * FROM LOGS WHERE log = ?',[insertTxt], function(tx, result) {
if(result.rows.length == 0) {
tx.executeSql('INSERT INTO LOGS (log) VALUES (?);', [insertTxt]);
}
});
});
});
});
</script>
Some Best Practices
• Follow the "m" convention (m.novarelibrary.com OR
  lifeonterra.com/m/)

• Keep categories (directories) short. Remember that you are creating a
  page that people touch without much typing

• Limit image and markup sizes

• Limit HTML pages to 25KB to allow for caching

• "Minify" your scripts and CSS (JSLint, CleanCSS)

• Link to Full Site

• Sniff for User Agent – Detection (allow the user to decide where to go)

• One Column Layout with some whitespace

• Mobile refers to the user!
Testing and validation

      Test Page Speed in Firebug




                     http://getfirebug.com/
W3C mobileOK Checker
http://validator.w3.org/mobile/
http://ready.mobi
Editors and Tools
• You can use a simple text editor (e.g., Notepad) or a more sophisticated application
  (e.g., Dreamweaver).

•   Adobe Device Central is part of Adobe’s CS.

• iUI: http://code.google.com/p/iui/ for iPhone.

• MIT Mobile Web Open Source Project
  http://sourceforge.net/projects/mitmobileweb/

• Device detection? http://detectmobilebrowsers.mobi/

• To see your browser's HTTP Headers. Works on mobile browsers.
  http://rabin.mobi/http

• Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen
  Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a
  mobile browser.
Emulators/Simulators:
•   Cowemo Mobile Emulator: http://www.mobilephoneemulator.com/

•   dotMobi Emulator - http://mtld.mobi/emulator.php

•   Opera Mini Simulator - http://www.opera.com/mobile/demo/

•   Mimic - emulates European and Japanese models: N400i and N505i. http://pukupi.com/post/2059

•   Android Emulator - http://developer.android.com/guide/developing/tools/emulator.html

•   BlackBerry Device Simulators -
    https://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477

•   iPhone Dev Center: http://developer.apple.com/iphone/

•   Palm Pre - http://developer.palm.com/

•   Windows Mobile - http://msdn.microsoft.com/en-us/windowsmobile/default.aspx

•   JAVA ME - Java Platform Micro Edition was termed J2ME. It is considered one of the most ubiquitous
    application platform for mobile devices.
    http://java.sun.com/javame/reference/apis.jsp
Other mobile development tools/frameworks
The Future of Mobile Web App/Site Development? Responsive Web Design?
Free jQTouch Mobile Templates at:   http://goo.gl/biPJj




   Note: jQuery Mobile templates coming soon!
http://www.slideshare.net/chadmairn




                @cmairn
Virtual Petting Zoo


    Google Plus
     Hangout




   gplus.to/chadmairn
Want to
  Hangout?




gplus.to/chadmairn
Ad

Recommended

Introduction to international law.ppt
Introduction to international law.ppt
SHeikh Muhammad Adnan
 
PUBLIC INTERNATIONAL LAW I
PUBLIC INTERNATIONAL LAW I
Amalia Sulaiman
 
Interpretation of statutes
Interpretation of statutes
Atul Kumar Suryavanshi
 
Hard and soft law copy
Hard and soft law copy
Chandan Paswan
 
Law of refugee
Law of refugee
Millersville Admissions
 
Codification of International Law
Codification of International Law
Muhammad Bilal
 
Ch.01 private and public international law
Ch.01 private and public international law
Asmatullah Kakar
 
Refugee Rights and Problems
Refugee Rights and Problems
Nilendra Kumar
 
UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
KIZZA ARNOLD LUMINSA
 
Ad hoc Tribunals in International Criminal Law.pptx
Ad hoc Tribunals in International Criminal Law.pptx
Masoud Zamani
 
International Bill of Human Right
International Bill of Human Right
VIVEK KUMAR
 
Law of War
Law of War
Shaheera Hassan
 
Law of treaty
Law of treaty
AdrianNugraha12
 
The Prevention of Food Adulteration Act 1954.pdf
The Prevention of Food Adulteration Act 1954.pdf
KiranMayiAudina
 
The contempt of courts act, 1971
The contempt of courts act, 1971
Leo Lukose
 
Sources of international law (by Advocate Raja Aleem)
Sources of international law (by Advocate Raja Aleem)
Raja Aleem
 
Forum non conveniens
Forum non conveniens
Altacit Global
 
law of the sea
law of the sea
Hafizul Mukhlis
 
Cyber Obscenity
Cyber Obscenity
sneha164
 
35 minority rights (1)
35 minority rights (1)
TeutaVuciterna
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Airbnb tech talk: Levi Weintraub on webkit
Airbnb tech talk: Levi Weintraub on webkit
naseemh
 
Pushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency System
Kevin Ballard
 
Impact of Open Source
Impact of Open Source
Anne-Gaelle Colom
 
Unit testing
Unit testing
Leonardo Balter
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
Marc Grabanski
 
Introduction to Storm
Introduction to Storm
Chandler Huang
 
DNS Security Presentation ISSA
DNS Security Presentation ISSA
Srikrupa Srivatsan
 
Анонимные записи в Haskell. Никита Волков
Анонимные записи в Haskell. Никита Волков
Юрий Сыровецкий
 

More Related Content

What's hot (12)

UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
KIZZA ARNOLD LUMINSA
 
Ad hoc Tribunals in International Criminal Law.pptx
Ad hoc Tribunals in International Criminal Law.pptx
Masoud Zamani
 
International Bill of Human Right
International Bill of Human Right
VIVEK KUMAR
 
Law of War
Law of War
Shaheera Hassan
 
Law of treaty
Law of treaty
AdrianNugraha12
 
The Prevention of Food Adulteration Act 1954.pdf
The Prevention of Food Adulteration Act 1954.pdf
KiranMayiAudina
 
The contempt of courts act, 1971
The contempt of courts act, 1971
Leo Lukose
 
Sources of international law (by Advocate Raja Aleem)
Sources of international law (by Advocate Raja Aleem)
Raja Aleem
 
Forum non conveniens
Forum non conveniens
Altacit Global
 
law of the sea
law of the sea
Hafizul Mukhlis
 
Cyber Obscenity
Cyber Obscenity
sneha164
 
35 minority rights (1)
35 minority rights (1)
TeutaVuciterna
 
UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
UNDERSTANDING THE POLITICAL QUESTION DOCTRINE (P.Q.D)
KIZZA ARNOLD LUMINSA
 
Ad hoc Tribunals in International Criminal Law.pptx
Ad hoc Tribunals in International Criminal Law.pptx
Masoud Zamani
 
International Bill of Human Right
International Bill of Human Right
VIVEK KUMAR
 
The Prevention of Food Adulteration Act 1954.pdf
The Prevention of Food Adulteration Act 1954.pdf
KiranMayiAudina
 
The contempt of courts act, 1971
The contempt of courts act, 1971
Leo Lukose
 
Sources of international law (by Advocate Raja Aleem)
Sources of international law (by Advocate Raja Aleem)
Raja Aleem
 
Cyber Obscenity
Cyber Obscenity
sneha164
 
35 minority rights (1)
35 minority rights (1)
TeutaVuciterna
 

Viewers also liked (20)

Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Airbnb tech talk: Levi Weintraub on webkit
Airbnb tech talk: Levi Weintraub on webkit
naseemh
 
Pushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency System
Kevin Ballard
 
Impact of Open Source
Impact of Open Source
Anne-Gaelle Colom
 
Unit testing
Unit testing
Leonardo Balter
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
Marc Grabanski
 
Introduction to Storm
Introduction to Storm
Chandler Huang
 
DNS Security Presentation ISSA
DNS Security Presentation ISSA
Srikrupa Srivatsan
 
Анонимные записи в Haskell. Никита Волков
Анонимные записи в Haskell. Никита Волков
Юрий Сыровецкий
 
Монады для барабанщиков. Антон Холомьёв
Монады для барабанщиков. Антон Холомьёв
Юрий Сыровецкий
 
Intro to Functional Programming
Intro to Functional Programming
Hugo Firth
 
Introduction and Overview of Apache Kafka, TriHUG July 23, 2013
Introduction and Overview of Apache Kafka, TriHUG July 23, 2013
mumrah
 
Category theory, Monads, and Duality in the world of (BIG) Data
Category theory, Monads, and Duality in the world of (BIG) Data
greenwop
 
From cache to in-memory data grid. Introduction to Hazelcast.
From cache to in-memory data grid. Introduction to Hazelcast.
Taras Matyashovsky
 
Cassandra Introduction & Features
Cassandra Introduction & Features
DataStax Academy
 
Introduction to MongoDB
Introduction to MongoDB
Mike Dirolf
 
Etsy Activity Feeds Architecture
Etsy Activity Feeds Architecture
Dan McKinley
 
Introduction to Apache ZooKeeper
Introduction to Apache ZooKeeper
Saurav Haloi
 
Intro to HBase
Intro to HBase
alexbaranau
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Airbnb tech talk: Levi Weintraub on webkit
Airbnb tech talk: Levi Weintraub on webkit
naseemh
 
Pushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency System
Kevin Ballard
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
Marc Grabanski
 
Introduction to Storm
Introduction to Storm
Chandler Huang
 
DNS Security Presentation ISSA
DNS Security Presentation ISSA
Srikrupa Srivatsan
 
Анонимные записи в Haskell. Никита Волков
Анонимные записи в Haskell. Никита Волков
Юрий Сыровецкий
 
Монады для барабанщиков. Антон Холомьёв
Монады для барабанщиков. Антон Холомьёв
Юрий Сыровецкий
 
Intro to Functional Programming
Intro to Functional Programming
Hugo Firth
 
Introduction and Overview of Apache Kafka, TriHUG July 23, 2013
Introduction and Overview of Apache Kafka, TriHUG July 23, 2013
mumrah
 
Category theory, Monads, and Duality in the world of (BIG) Data
Category theory, Monads, and Duality in the world of (BIG) Data
greenwop
 
From cache to in-memory data grid. Introduction to Hazelcast.
From cache to in-memory data grid. Introduction to Hazelcast.
Taras Matyashovsky
 
Cassandra Introduction & Features
Cassandra Introduction & Features
DataStax Academy
 
Introduction to MongoDB
Introduction to MongoDB
Mike Dirolf
 
Etsy Activity Feeds Architecture
Etsy Activity Feeds Architecture
Dan McKinley
 
Introduction to Apache ZooKeeper
Introduction to Apache ZooKeeper
Saurav Haloi
 
Ad

Similar to Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework (20)

Best Practices for Mobile Web Design
Best Practices for Mobile Web Design
St. Petersburg College
 
Skill Session - Web Multi Device
Skill Session - Web Multi Device
filirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
HTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy
Apigee | Google Cloud
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Heiko Behrens
 
Bruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Appcelerator Titanium at Mobile 2.0
Appcelerator Titanium at Mobile 2.0
Jeff Haynie
 
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Jeff Haynie
 
Mobile for the rest of us
Mobile for the rest of us
Axway Appcelerator
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
An introduction to Titanium
An introduction to Titanium
Graham Weldon
 
Web app and more
Web app and more
faming su
 
Web Apps and more
Web Apps and more
Yan Shi
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Caridy Patino
 
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
JAX London
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott
 
Skill Session - Web Multi Device
Skill Session - Web Multi Device
filirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
HTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy
Apigee | Google Cloud
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Heiko Behrens
 
Bruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Appcelerator Titanium at Mobile 2.0
Appcelerator Titanium at Mobile 2.0
Jeff Haynie
 
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Jeff Haynie
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
An introduction to Titanium
An introduction to Titanium
Graham Weldon
 
Web app and more
Web app and more
faming su
 
Web Apps and more
Web Apps and more
Yan Shi
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Caridy Patino
 
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
JAX London
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott
 
Ad

More from St. Petersburg College (20)

Introducing Immersive Technologies for Libraries
Introducing Immersive Technologies for Libraries
St. Petersburg College
 
Introducing How to Build a Personal Voice Assistant (AIY Edition)
Introducing How to Build a Personal Voice Assistant (AIY Edition)
St. Petersburg College
 
360° Tours and More
360° Tours and More
St. Petersburg College
 
Taking the Magical Leap with Immersive Technologies in Libraries
Taking the Magical Leap with Immersive Technologies in Libraries
St. Petersburg College
 
Open Education Resources in Libraries
Open Education Resources in Libraries
St. Petersburg College
 
How to Repurpose Library Space: Listening Lab Edition
How to Repurpose Library Space: Listening Lab Edition
St. Petersburg College
 
Using CoSpaces Edu to Create Virtual and Augmented Reality Experiences
Using CoSpaces Edu to Create Virtual and Augmented Reality Experiences
St. Petersburg College
 
Understanding Artificial Intelligence
Understanding Artificial Intelligence
St. Petersburg College
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
St. Petersburg College
 
What’s New With 3D Design and Printing?
What’s New With 3D Design and Printing?
St. Petersburg College
 
Creating a Program to Assist Users Cutting Cable
Creating a Program to Assist Users Cutting Cable
St. Petersburg College
 
Understanding Artificial Intelligence
Understanding Artificial Intelligence
St. Petersburg College
 
Beginning Python Programming
Beginning Python Programming
St. Petersburg College
 
3D Design Fundamentals
3D Design Fundamentals
St. Petersburg College
 
STEM Demystified
STEM Demystified
St. Petersburg College
 
Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBand
Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBand
St. Petersburg College
 
Open Education Resources in Libraries
Open Education Resources in Libraries
St. Petersburg College
 
Learning Kodu: Basic Video Game Design for Kids
Learning Kodu: Basic Video Game Design for Kids
St. Petersburg College
 
Learn to Code and Have Fun Doing It!
Learn to Code and Have Fun Doing It!
St. Petersburg College
 
How to Think in the Information Age: Finding Facts in a Post-Truth World
How to Think in the Information Age: Finding Facts in a Post-Truth World
St. Petersburg College
 
Introducing Immersive Technologies for Libraries
Introducing Immersive Technologies for Libraries
St. Petersburg College
 
Introducing How to Build a Personal Voice Assistant (AIY Edition)
Introducing How to Build a Personal Voice Assistant (AIY Edition)
St. Petersburg College
 
Taking the Magical Leap with Immersive Technologies in Libraries
Taking the Magical Leap with Immersive Technologies in Libraries
St. Petersburg College
 
How to Repurpose Library Space: Listening Lab Edition
How to Repurpose Library Space: Listening Lab Edition
St. Petersburg College
 
Using CoSpaces Edu to Create Virtual and Augmented Reality Experiences
Using CoSpaces Edu to Create Virtual and Augmented Reality Experiences
St. Petersburg College
 
What’s New With 3D Design and Printing?
What’s New With 3D Design and Printing?
St. Petersburg College
 
Creating a Program to Assist Users Cutting Cable
Creating a Program to Assist Users Cutting Cable
St. Petersburg College
 
Understanding Artificial Intelligence
Understanding Artificial Intelligence
St. Petersburg College
 
Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBand
Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBand
St. Petersburg College
 
Learning Kodu: Basic Video Game Design for Kids
Learning Kodu: Basic Video Game Design for Kids
St. Petersburg College
 
How to Think in the Information Age: Finding Facts in a Post-Truth World
How to Think in the Information Age: Finding Facts in a Post-Truth World
St. Petersburg College
 

Recently uploaded (20)

Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 

Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework

  • 1. Building a Simple Mobile-optimized Web App/Site Using the jQuery Mobile Framework
  • 3. Agenda • Learn what a mobile framework is. • Understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps/sites. • Recognize the differences between native and web apps/sites. • Explore jQuery Mobile basics. • Acquire best practices in mobile Web development. • Create an opportunity to continue to work with me after the webinar to demonstrate what you learned. • Gain access after the webinar to a free Web server so you can see your mobile Web app/site live.
  • 4. Virtual Petting Zoo Google Plus Hangout gplus.to/chadmairn
  • 5. Quick Poll Does your library have: Mobile-optimized Website Native App (iOS, Android etc.) Nothing yet, but considering an app Nothing yet, but considering a website. No plans; it is too expensive/complex!
  • 8. jQuery Mobile is … a unified, HTML5-based user interface system for all popular mobile device platforms. Source: http://jquerymobile.com/
  • 9. jQuery Mobile is well-documented and there are great demos to get you started
  • 10. What is HTML, CSS, and JavaScript and how do they all fit together?
  • 11. HyperText Markup Language (HTML) is the skeleton. Cascading Style Sheets (CSS) are the skin, clothes, cologne etc. JavaScript is the personality. The character. The pizazz! Source: http://goo.gl/kWzET
  • 12. Native Apps vs. Web/Browser Apps Issues Native apps Web apps Internet access Not required Required, except for apps written in HTML5 (offline capabilities) Shareable content (Twitter etc.) Only if it is built in to the app Web links can be shared. Social API’s allow 1-click posting Access to hardware sensors Yes: camera, gyroscope, microphone, Access thru browser is limited. compass, accelerometer, GPS Geolocation works! Development Build app for target platform (Android, Write/publish once using standard Web iOS [Objective-C] etc.) technologies, view it anywhere with URL. Speedy debugging and development. Distribution Most app stores require approval. No hassles. Source: http://goo.gl/zSeDU
  • 14. Take an emulated look at your desktop site. Mobile Site Desktop Site
  • 15. Small Screen Rendering (260 px) using the Web Developer add-on in Firefox Desktop Small Screen
  • 16. In-page Analytics Note: you can determine how your user’s are accessing your Web site (e.g., mobile devices, carriers, browsers , OS’s, screen resolution etc.)
  • 17. “Fundamentally, 'mobile' refers to the user, not the device or application.” Barbara Ballard Designing the Mobile User Experience
  • 18. Mobile Screen Resolutions Android (Motorola Droid) 480x854 Android (MyTouch) 320x480 Android (Nexus One) 480x800 Apple iPhone 320x480 Apple iPad 1024x768 Palm Pre 320 x 480 Source: http://goo.gl/zEDoi
  • 19. Learn and borrow from sites you like. http://m.novarelibrary.com/
  • 21. Rapid Prototyping for jQuery Mobile Try it at http://codiqa.com/
  • 22. Try it at http://jquerymobile.com/themeroller/
  • 23. Quick jQuery Mobile Demo Highlight Documentation CDN-Hosted Files Viewport Meta Tag Creating a Basic Template Listview with Filter Buttons with different themes
  • 24. Advanced Example (Web SQL Database stores data within user’s browser. No cookies!) HTML5 has offline storage capabilities! Favorites List Favorites Found: 4 Conference Committee, Friday, 8- 9am, Azalea A Building the Next Generation of E-Govt, Thurs. 1- 2pm, Jasmine Opening General Session, Wed. 9:15- 11:15am, Floral Ballroom http://novarelibrary.com/FLAmobile/ Note: this URL is not a best practice. More later.
  • 25. http://www.w3.org/TR/webdatabase/ Although Web SQL Database worked on this Web app, the W3C recommends these storage-related specifications: Web Storage and Indexed Database API.
  • 26. Steal, umm, borrow this code if you want. <script type="text/javascript"> var db = openDatabase('mydb', '1.0', 'Test DB', 100000); var msg; var insertTxt = ""; $(document).ready(function() { $("button").click(function(event) { if(!confirm("Would you like to add to your favorites?")) { return; } insertTxt = $(this).text(); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT NOT NULL )',[],function(tx, result){},function(tx,error){alert("Error: Disable private browsing");}); tx.executeSql('SELECT * FROM LOGS WHERE log = ?',[insertTxt], function(tx, result) { if(result.rows.length == 0) { tx.executeSql('INSERT INTO LOGS (log) VALUES (?);', [insertTxt]); } }); }); }); }); </script>
  • 27. Some Best Practices • Follow the "m" convention (m.novarelibrary.com OR lifeonterra.com/m/) • Keep categories (directories) short. Remember that you are creating a page that people touch without much typing • Limit image and markup sizes • Limit HTML pages to 25KB to allow for caching • "Minify" your scripts and CSS (JSLint, CleanCSS) • Link to Full Site • Sniff for User Agent – Detection (allow the user to decide where to go) • One Column Layout with some whitespace • Mobile refers to the user!
  • 28. Testing and validation Test Page Speed in Firebug http://getfirebug.com/
  • 31. Editors and Tools • You can use a simple text editor (e.g., Notepad) or a more sophisticated application (e.g., Dreamweaver). • Adobe Device Central is part of Adobe’s CS. • iUI: http://code.google.com/p/iui/ for iPhone. • MIT Mobile Web Open Source Project http://sourceforge.net/projects/mitmobileweb/ • Device detection? http://detectmobilebrowsers.mobi/ • To see your browser's HTTP Headers. Works on mobile browsers. http://rabin.mobi/http • Web Developer Toolbar in Firefox: Select Miscellaneous >>> Small Screen Rendering (260 px) >>> the layout will be reformatted to simulate rendering by a mobile browser.
  • 32. Emulators/Simulators: • Cowemo Mobile Emulator: http://www.mobilephoneemulator.com/ • dotMobi Emulator - http://mtld.mobi/emulator.php • Opera Mini Simulator - http://www.opera.com/mobile/demo/ • Mimic - emulates European and Japanese models: N400i and N505i. http://pukupi.com/post/2059 • Android Emulator - http://developer.android.com/guide/developing/tools/emulator.html • BlackBerry Device Simulators - https://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477 • iPhone Dev Center: http://developer.apple.com/iphone/ • Palm Pre - http://developer.palm.com/ • Windows Mobile - http://msdn.microsoft.com/en-us/windowsmobile/default.aspx • JAVA ME - Java Platform Micro Edition was termed J2ME. It is considered one of the most ubiquitous application platform for mobile devices. http://java.sun.com/javame/reference/apis.jsp
  • 33. Other mobile development tools/frameworks
  • 34. The Future of Mobile Web App/Site Development? Responsive Web Design?
  • 35. Free jQTouch Mobile Templates at: http://goo.gl/biPJj Note: jQuery Mobile templates coming soon!
  • 37. Virtual Petting Zoo Google Plus Hangout gplus.to/chadmairn
  • 38. Want to Hangout? gplus.to/chadmairn