jQuery Mobile

A Touch-Optimized Web Framework for Smartphones & Tablets

Mike Taylor, Opera Software | @miketaylr

Hello, my name is Mike

  • Web Opener, Developer Relations & Tools. Opera Software
  • Member of the W3C HTML Working Group
  • Currently living in Brooklyn, NY
  • I open Webs
jQuery Mobile

Outline

  1. So like, Mobile
  2. jQuery Mobile
  3. Remote Debugging

Mobile Operating Systems Worldwide

Mobile Operating Systems

Mobile Browser Usage Worldwide

Mobile Browsers

Why jQuery Mobile

  • Built on jQuery core
  • Compatible with all major mobile, tablet, e-reader & desktop platforms
  • Lightweight size
  • Modular architecture
  • HTML5 Markup-driven configuration
  • Progressive enhancement

Why jQuery Mobile, continued

  • Responsive design
  • Powerful Ajax-powered navigation system
  • Accessibility
  • Touch and mouse event support
  • Unified UI widgets
  • Powerful theming framework
buzzword bingo
Themeroller
jQuery Mobile

Browser Support

Getting Started

        <!DOCTYPE html>
        <head>
         <title>Something Awesome</title>
         <link rel="stylesheet" href="jquery.mobile-1.0rc2.min.css">
         <script src="j/jquery.js"></script>
         <script src="j/jquery.mobile-1.0rc2.min.js"></script>
        </head>

Data Attributes

        <div data-role="page" id="foo">
          <div data-role="header">...
          <div data-role="content" id="bar">...
          <div data-role="footer" data-theme="d">...
        </div>

Name-spaced Data Attributes

        <div data-lol-role="page" id="foo">
          <div data-lol-role="header">...
          <div data-lol-role="content" id="bar">...
          <div data-lol-role="footer" data-lol-theme="d">...
        </div>
        <script>$.mobile.ns = "lol-";<script>

Further Resources

OMGBUG

The Briefest History of Debugging on the Web

  1. alert() & view-source
  2. error consoles
  3. actual tools (i.e., Firebug, Dragonfly, Chrome Dev Tools, F12)
Alert Debugging
Alert Debugging
View Source

I will not teach you how to debug. This redhead will.

fixingthesejquery.com

Emulators and Tools

  1. iPhone/iPad Simulator
  2. Android Emulator
  3. WebOS Emulator
  4. Opera Mobile Emulator
  5. Opera Mini Microemulator
  6. Windows Phone 7 emulator
iphone and android emulators
opera mobile and opera mini emulators

The Current Landscape of Remote Debugging

  1. Socketbug
  2. Weinre
  3. Dragonfly
Opera Dragonfly Hompage
Opera Dragonfly Hompage
Weinre Remote Console
Weinre Remote DOM
Opera Dragonfly Hompage
Opera Dragonfly Remote Console
Opera Dragonfly Remote DOM

Gracias.

Get in touch.

Special thanks to Leo Balter (@leobalter) for letting me steal some of his slides.