Tweet
Tweet

Slide 1

Slide 1 text

@mikehostetler BlackBerry DevCon Europe 2012 Rapidly Develop Mobile Web Applications with Monday, February 13, 12

Slide 2

Slide 2 text

@mikehostetler BlackBerry DevCon Europe 2012 Who am I? Monday, February 13, 12

Slide 3

Slide 3 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 4

Slide 4 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 5

Slide 5 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 6

Slide 6 text

@mikehostetler BlackBerry DevCon Europe 2012 http://learn.appendto.com Monday, February 13, 12

Slide 7

Slide 7 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 8

Slide 8 text

@mikehostetler BlackBerry DevCon Europe 2012 Many More ... Monday, February 13, 12

Slide 9

Slide 9 text

@mikehostetler BlackBerry DevCon Europe 2012 The Mobile Frontier ... Monday, February 13, 12

Slide 10

Slide 10 text

@mikehostetler BlackBerry DevCon Europe 2012 7 Billion People Monday, February 13, 12

Slide 11

Slide 11 text

@mikehostetler BlackBerry DevCon Europe 2012 Mobile is available to 90% Monday, February 13, 12

Slide 12

Slide 12 text

@mikehostetler BlackBerry DevCon Europe 2012 5.3 Billion+ Active Subscriptions http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf - Sept, 2011 Monday, February 13, 12

Slide 13

Slide 13 text

@mikehostetler BlackBerry DevCon Europe 2012 7% of US Traffic comes from SmartPhones and Tablets http://www.comscore.com/Press_Events/Press_Releases/2011/10/ Smartphones_and_Tablets_Drive_Nearly_7_Percent_of_Total_U.S._Digital_Traffic - Sept. 2011 Monday, February 13, 12

Slide 14

Slide 14 text

@mikehostetler BlackBerry DevCon Europe 2012 10+ billion by 2013 Monday, February 13, 12

Slide 15

Slide 15 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 16

Slide 16 text

@mikehostetler BlackBerry DevCon Europe 2012 Know Better ... Do Better ? Monday, February 13, 12

Slide 17

Slide 17 text

@mikehostetler BlackBerry DevCon Europe 2012 UPDATE! Know Better ... Do Better Monday, February 13, 12

Slide 18

Slide 18 text

@mikehostetler BlackBerry DevCon Europe 2012 The is the web People expect it to work everywhere Monday, February 13, 12

Slide 19

Slide 19 text

@mikehostetler BlackBerry DevCon Europe 2012 The Solution? Monday, February 13, 12

Slide 20

Slide 20 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 21

Slide 21 text

@mikehostetler BlackBerry DevCon Europe 2012 jQuery Philosophy ... Monday, February 13, 12

Slide 22

Slide 22 text

@mikehostetler BlackBerry DevCon Europe 2012 Unified System Universal Access Easy Development Monday, February 13, 12

Slide 23

Slide 23 text

@mikehostetler BlackBerry DevCon Europe 2012 One Codebase - Multiple Platforms Monday, February 13, 12

Slide 24

Slide 24 text

@mikehostetler BlackBerry DevCon Europe 2012 Desktop Too! Monday, February 13, 12

Slide 25

Slide 25 text

@mikehostetler BlackBerry DevCon Europe 2012 In <3 with Web Standards Monday, February 13, 12

Slide 26

Slide 26 text

@mikehostetler BlackBerry DevCon Europe 2012 Built on jQuery Core ... Monday, February 13, 12

Slide 27

Slide 27 text

@mikehostetler BlackBerry DevCon Europe 2012 Familiar API Style It’s just jQuery! $( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( 'cities.php' ); }).dialog( "close" ); }); Monday, February 13, 12

Slide 28

Slide 28 text

@mikehostetler BlackBerry DevCon Europe 2012 Small Filesize (gzipped) Monday, February 13, 12

Slide 29

Slide 29 text

@mikehostetler BlackBerry DevCon Europe 2012 Mobile Browser Grades Basic HTML C B A Enhanced experience without Ajax Full experience with Ajax-based animated page transitions. Monday, February 13, 12

Slide 30

Slide 30 text

@mikehostetler BlackBerry DevCon Europe 2012 Graded Browser Support Monday, February 13, 12

Slide 31

Slide 31 text

@mikehostetler BlackBerry DevCon Europe 2012 Doesn’t Break the Web Monday, February 13, 12

Slide 32

Slide 32 text

@mikehostetler BlackBerry DevCon Europe 2012 Unified Experience Monday, February 13, 12

Slide 33

Slide 33 text

@mikehostetler BlackBerry DevCon Europe 2012 Accessible Monday, February 13, 12

Slide 34

Slide 34 text

@mikehostetler BlackBerry DevCon Europe 2012 Normalizes Input Paradigms Monday, February 13, 12

Slide 35

Slide 35 text

@mikehostetler BlackBerry DevCon Europe 2012 Compiles to Native + = Monday, February 13, 12

Slide 36

Slide 36 text

@mikehostetler BlackBerry DevCon Europe 2012 The Con’s ... Monday, February 13, 12

Slide 37

Slide 37 text

@mikehostetler BlackBerry DevCon Europe 2012 Performance Monday, February 13, 12

Slide 38

Slide 38 text

@mikehostetler BlackBerry DevCon Europe 2012 Native Look & Feel vs. Monday, February 13, 12

Slide 39

Slide 39 text

@mikehostetler BlackBerry DevCon Europe 2012 Device API’s Monday, February 13, 12

Slide 40

Slide 40 text

@mikehostetler BlackBerry DevCon Europe 2012 Offline Access, sort of ( ) Monday, February 13, 12

Slide 41

Slide 41 text

@mikehostetler BlackBerry DevCon Europe 2012 These are hard problems ... Monday, February 13, 12

Slide 42

Slide 42 text

@mikehostetler BlackBerry DevCon Europe 2012 Choose the right tool ... Monday, February 13, 12

Slide 43

Slide 43 text

@mikehostetler BlackBerry DevCon Europe 2012 Current Project Status Monday, February 13, 12

Slide 44

Slide 44 text

@mikehostetler BlackBerry DevCon Europe 2012 Just released jQuery Mobile 1.0.1 Monday, February 13, 12

Slide 45

Slide 45 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 46

Slide 46 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 47

Slide 47 text

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

Slide 48

Slide 48 text

@mikehostetler BlackBerry DevCon Europe 2012 More at http://jqmgallery.com Monday, February 13, 12

Slide 49

Slide 49 text

@mikehostetler BlackBerry DevCon Europe 2012 Standard in Adobe CS5.5 Monday, February 13, 12

Slide 50

Slide 50 text

@mikehostetler BlackBerry DevCon Europe 2012 Shipping in Visual Studio Soon ... Monday, February 13, 12

Slide 51

Slide 51 text

@mikehostetler BlackBerry DevCon Europe 2012 Lets dive in ... Monday, February 13, 12

Slide 52

Slide 52 text

@mikehostetler BlackBerry DevCon Europe 2012 Download the code http://jquerymobile.com/download https://github.com/jquery/jquery-mobile or use a CDN ... Monday, February 13, 12

Slide 53

Slide 53 text

@mikehostetler BlackBerry DevCon Europe 2012 Pages Monday, February 13, 12

Slide 54

Slide 54 text

@mikehostetler BlackBerry DevCon Europe 2012 Your First Page! ... My first jQuery Mobile Page! .... Monday, February 13, 12

Slide 55

Slide 55 text

@mikehostetler BlackBerry DevCon Europe 2012 Add the tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"> .... Monday, February 13, 12

Slide 56

Slide 56 text

@mikehostetler BlackBerry DevCon Europe 2012 Add the tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"> .... Monday, February 13, 12

Slide 57

Slide 57 text

@mikehostetler BlackBerry DevCon Europe 2012 Add the tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"> .... Monday, February 13, 12

Slide 58

Slide 58 text

@mikehostetler BlackBerry DevCon Europe 2012 Building your Page

Hello World!

Monday, February 13, 12

Slide 59

Slide 59 text

@mikehostetler BlackBerry DevCon Europe 2012 The role of data attributes ...

Hello World!

Monday, February 13, 12

Slide 60

Slide 60 text

@mikehostetler BlackBerry DevCon Europe 2012 Full Sample Page
...
...
...
Monday, February 13, 12

Slide 61

Slide 61 text

@mikehostetler BlackBerry DevCon Europe 2012 Lists Monday, February 13, 12

Slide 62

Slide 62 text

@mikehostetler BlackBerry DevCon Europe 2012 Basic List

Hello World!

  • jQuery
  • jQuery UI
  • jQuery Mobile
  • QUnit
Monday, February 13, 12

Slide 63

Slide 63 text

@mikehostetler BlackBerry DevCon Europe 2012 Add the List View Role

Hello World!

  • jQuery
  • jQuery UI
  • jQuery Mobile
  • QUnit
Monday, February 13, 12

Slide 64

Slide 64 text

@mikehostetler BlackBerry DevCon Europe 2012 Inset Style

Hello World!

  • jQuery
  • jQuery UI
  • jQuery Mobile
  • QUnit
Monday, February 13, 12

Slide 65

Slide 65 text

@mikehostetler BlackBerry DevCon Europe 2012 Add Links
  • jQuery
    • ...
Monday, February 13, 12

Slide 66

Slide 66 text

@mikehostetler BlackBerry DevCon Europe 2012 More Examples ... Monday, February 13, 12

Slide 67

Slide 67 text

@mikehostetler BlackBerry DevCon Europe 2012 Ordered Lists

Hello World!

  1. jQuery
  2. jQuery UI
  3. jQuery Mobile
  4. QUnit
Monday, February 13, 12

Slide 68

Slide 68 text

@mikehostetler BlackBerry DevCon Europe 2012 Nested Lists = Drillable Pages Monday, February 13, 12

Slide 69

Slide 69 text

@mikehostetler BlackBerry DevCon Europe 2012 Count Bubbles
  • jQuery 1.6.4
    • ...
Monday, February 13, 12

Slide 70

Slide 70 text

@mikehostetler BlackBerry DevCon Europe 2012 List Dividers
  • Core
  • jQuery
  • UI
  • jQuery UI
  • jQuery Mobile
  • Testing
  • QUnit
Monday, February 13, 12

Slide 71

Slide 71 text

@mikehostetler BlackBerry DevCon Europe 2012 Filter Bar

Hello World!

    ....
Monday, February 13, 12

Slide 72

Slide 72 text

@mikehostetler BlackBerry DevCon Europe 2012 Adding List Items Monday, February 13, 12

Slide 73

Slide 73 text

@mikehostetler BlackBerry DevCon Europe 2012 Append, then Refresh! $(‘ul#jquery’). .append( ‘
  • Sizzle JS
    • ’ ).listview( ‘refresh’ ); Monday, February 13, 12

    Slide 74

    Slide 74 text

    @mikehostetler BlackBerry DevCon Europe 2012 Theming Monday, February 13, 12

    Slide 75

    Slide 75 text

    @mikehostetler BlackBerry DevCon Europe 2012 Basic Theming
    ....
    Monday, February 13, 12

    Slide 76

    Slide 76 text

    @mikehostetler BlackBerry DevCon Europe 2012 Side by Side Monday, February 13, 12

    Slide 77

    Slide 77 text

    @mikehostetler BlackBerry DevCon Europe 2012 ThemeRoller Monday, February 13, 12

    Slide 78

    Slide 78 text

    @mikehostetler BlackBerry DevCon Europe 2012 Links & Navigation Monday, February 13, 12

    Slide 79

    Slide 79 text

    @mikehostetler BlackBerry DevCon Europe 2012 External Links
    • jQuery
      • ...
    Monday, February 13, 12

    Slide 80

    Slide 80 text

    @mikehostetler BlackBerry DevCon Europe 2012 Internal + Hijax + DOM Injection
    • jQuery
      • ...
    Click! Monday, February 13, 12

    Slide 81

    Slide 81 text

    @mikehostetler BlackBerry DevCon Europe 2012 Internal + Hijax + DOM Injection /index.html /jquery.html Monday, February 13, 12

    Slide 82

    Slide 82 text

    @mikehostetler BlackBerry DevCon Europe 2012 Internal + Hijax + DOM Injection /jquery.html /index.html Monday, February 13, 12

    Slide 83

    Slide 83 text

    @mikehostetler BlackBerry DevCon Europe 2012 Internal + Hijax + DOM Injection /jquery.html /index.html Monday, February 13, 12

    Slide 84

    Slide 84 text

    @mikehostetler BlackBerry DevCon Europe 2012 Transitions Monday, February 13, 12

    Slide 85

    Slide 85 text

    @mikehostetler BlackBerry DevCon Europe 2012 External Links
    • jQuery a’ Poppin
      • ...
    Monday, February 13, 12

    Slide 86

    Slide 86 text

    @mikehostetler BlackBerry DevCon Europe 2012 Multi-Page & Pre-Fetch Monday, February 13, 12

    Slide 87

    Slide 87 text

    @mikehostetler BlackBerry DevCon Europe 2012 Multiple Pages, One DOM

    Hello World!

    Hello World!

    Monday, February 13, 12

    Slide 88

    Slide 88 text

    @mikehostetler BlackBerry DevCon Europe 2012 Pre-Fetching

    Hello World!

    ...

    Hello World!

    Monday, February 13, 12

    Slide 89

    Slide 89 text

    @mikehostetler BlackBerry DevCon Europe 2012 Forms Monday, February 13, 12

    Slide 90

    Slide 90 text

    @mikehostetler BlackBerry DevCon Europe 2012 Basic Form with Labels
    Example:
    Monday, February 13, 12

    Slide 91

    Slide 91 text

    @mikehostetler BlackBerry DevCon Europe 2012 Containers
    Example:
    Monday, February 13, 12

    Slide 92

    Slide 92 text

    @mikehostetler BlackBerry DevCon Europe 2012 Optimized for Width Changes Monday, February 13, 12

    Slide 93

    Slide 93 text

    @mikehostetler BlackBerry DevCon Europe 2012 Progressive Enhancement Monday, February 13, 12

    Slide 94

    Slide 94 text

    @mikehostetler BlackBerry DevCon Europe 2012 Text Input
    Example:
    Monday, February 13, 12

    Slide 95

    Slide 95 text

    @mikehostetler BlackBerry DevCon Europe 2012 Text Input Helpers ”password” ”email” ”tel” Monday, February 13, 12

    Slide 96

    Slide 96 text

    @mikehostetler BlackBerry DevCon Europe 2012 Text Area’s Grow Monday, February 13, 12

    Slide 97

    Slide 97 text

    @mikehostetler BlackBerry DevCon Europe 2012 Flip Switch
    Flip switch: Off On
    Monday, February 13, 12

    Slide 98

    Slide 98 text

    @mikehostetler BlackBerry DevCon Europe 2012 Radio Buttons
    Apples
    ... Monday, February 13, 12

    Slide 99

    Slide 99 text

    @mikehostetler BlackBerry DevCon Europe 2012 Checkboxes Too
    Apples
    ... Monday, February 13, 12

    Slide 100

    Slide 100 text

    @mikehostetler BlackBerry DevCon Europe 2012 Horizontal Set
    Apples
    ... Monday, February 13, 12

    Slide 101

    Slide 101 text

    @mikehostetler BlackBerry DevCon Europe 2012 Select Lists
    Choose shipping method: Standard: 7 day ...
    Monday, February 13, 12

    Slide 102

    Slide 102 text

    @mikehostetler BlackBerry DevCon Europe 2012 Select Lists
    Choose shipping method: Standard: 7 day ...
    Monday, February 13, 12

    Slide 103

    Slide 103 text

    @mikehostetler BlackBerry DevCon Europe 2012 Select Lists - Non-Native
    Choose shipping method: Standard: 7 day ...
    Monday, February 13, 12

    Slide 104

    Slide 104 text

    @mikehostetler BlackBerry DevCon Europe 2012 Extra’s Monday, February 13, 12

    Slide 105

    Slide 105 text

    @mikehostetler BlackBerry DevCon Europe 2012 Dialog’s
    Open dialog
    Monday, February 13, 12

    Slide 106

    Slide 106 text

    @mikehostetler BlackBerry DevCon Europe 2012 Button’s
    Link Button Star Icon!
    Monday, February 13, 12

    Slide 107

    Slide 107 text

    @mikehostetler BlackBerry DevCon Europe 2012 Toolbar’s
    Cancel

    Edit Contact

    Save
    Monday, February 13, 12

    Slide 108

    Slide 108 text

    @mikehostetler BlackBerry DevCon Europe 2012 Navbar’s
    ....
    • Summary
      • ...
    Monday, February 13, 12

    Slide 109

    Slide 109 text

    @mikehostetler BlackBerry DevCon Europe 2012 Fixed Positioning

    Fixed toolbars

    Monday, February 13, 12

    Slide 110

    Slide 110 text

    @mikehostetler BlackBerry DevCon Europe 2012 Persistent Footer Bar

    Friends

    Monday, February 13, 12

    Slide 111

    Slide 111 text

    @mikehostetler BlackBerry DevCon Europe 2012 Events Monday, February 13, 12

    Slide 112

    Slide 112 text

    @mikehostetler BlackBerry DevCon Europe 2012 New Events ‣tap, taphold ‣swipe, swipeleft, swiperight ‣scrollstart, scrollstop ‣orientationchange ‣Page Load: pageloadbefore, pageload, pageloadfailed ‣Page Change: pagechangebefore, pagechange, pagechangefailed ‣Many More! Monday, February 13, 12

    Slide 113

    Slide 113 text

    @mikehostetler BlackBerry DevCon Europe 2012 Virtual Mouse Events ‣vmouseover ‣vmousedown ‣vmousemove ‣vmouseup ‣vmouseclick - WARNING! ‣vmousecancel Monday, February 13, 12

    Slide 114

    Slide 114 text

    @mikehostetler BlackBerry DevCon Europe 2012 API Methods Monday, February 13, 12

    Slide 115

    Slide 115 text

    @mikehostetler BlackBerry DevCon Europe 2012 Changing Pages // Mimic’s a ‘tap’ or ‘click’ $.mobile.changePage( ‘about/us.html’ OR $(‘#about’), { /* options */ } ); // Fetches external URL, inserts it into the DOM $.mobile.loadPage( ‘about/us.html’, { /* options */ } ); Monday, February 13, 12

    Slide 116

    Slide 116 text

    @mikehostetler BlackBerry DevCon Europe 2012 Loading Message $.mobile.showLoadingMessage() $.mobile.hideLoadingMessage() Monday, February 13, 12

    Slide 117

    Slide 117 text

    @mikehostetler BlackBerry DevCon Europe 2012 The Data Question ... Monday, February 13, 12

    Slide 118

    Slide 118 text

    @mikehostetler BlackBerry DevCon Europe 2012 Those data- attributes ... Don’t use: $.data Use: jqmData() and jqmRemoveData() Monday, February 13, 12

    Slide 119

    Slide 119 text

    @mikehostetler BlackBerry DevCon Europe 2012 URL’s & Paths Monday, February 13, 12

    Slide 120

    Slide 120 text

    @mikehostetler BlackBerry DevCon Europe 2012 URL’s & Paths $.mobile.path URL: http://jblas:[email protected]:8080/mail/inbox? msg=1234&type=unread#msg-content obj = { domain: ‘http://jblas:[email protected]:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’ } Monday, February 13, 12

    Slide 121

    Slide 121 text

    @mikehostetler BlackBerry DevCon Europe 2012 http://filamentgroup.com Thanks to the Filament Group! Monday, February 13, 12

    Slide 122

    Slide 122 text

    @mikehostetler BlackBerry DevCon Europe 2012 Thanks to the jQuery Mobile Team! Monday, February 13, 12

    Slide 123

    Slide 123 text

    @mikehostetler BlackBerry DevCon Europe 2012 Thanks to the Sponsors! Monday, February 13, 12

    Slide 124

    Slide 124 text

    @mikehostetler BlackBerry DevCon Europe 2012 Thank You! @mikehostetler http://mike-hostetler.com http://learn.appendto.com Links: http://bitly.com/neWK0v Monday, February 13, 12