Tweet
Tweet

Slide 1

Slide 1 text

jQuery UK jQuery Mobile filament group

Slide 2

Slide 2 text

hi there. Todd Parker Project Lead, jQuery Mobile Partner, Filament Group Inc.

Slide 3

Slide 3 text

Open source

Slide 4

Slide 4 text

Sponsor & design lead

Slide 5

Slide 5 text

jQuery Mobile An introduction

Slide 6

Slide 6 text

Mobile-first UI tools

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

UI Elements

Slide 9

Slide 9 text

AJAX Nav

Slide 10

Slide 10 text

Project Goals No browser left behind.

Slide 11

Slide 11 text

10+ Billion Web enabled mobile devices on the internet Source: ITU, Mark Lipacis, Morgan Stanley Research.

Slide 12

Slide 12 text

(They aren’t all iPhones) 4.01 12.3 17.1 18.17 19.95 22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront July 2011 World Mobile Browsers http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar

Slide 13

Slide 13 text

All Platforms 1 codebase

Slide 14

Slide 14 text

and for everyone Make it work everywhere

Slide 15

Slide 15 text

iOS Android WebOS Blackberry WP7 Meego Symbian Kindle/Nook reader + tablets Playbook Symbian Bada

Slide 16

Slide 16 text

Desktop too

Slide 17

Slide 17 text

50+ devices in our lab

Slide 18

Slide 18 text

Built on web standards

Slide 19

Slide 19 text

Progressive Enhancement

Slide 20

Slide 20 text

Responsive Web Design Image by Brad Frost

Slide 21

Slide 21 text

Don’t break the web. Bookmark / Refresh Friendly URLS History Works

Slide 22

Slide 22 text

Don’t break the web. Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html

Slide 23

Slide 23 text

Keep it accessible

Slide 24

Slide 24 text

Touch, mouse, keyboard Touch & Mouse Events Mouse Events

Slide 25

Slide 25 text

Web to Native

Slide 26

Slide 26 text

...to App Stores

Slide 27

Slide 27 text

Themable, Brandable

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

...or native if you want http://taitems.github.com/iOS- Inspired-jQuery-Mobile-Theme/

Slide 32

Slide 32 text

Pretty cool.

Slide 33

Slide 33 text

Inspiration http://www.jqmgallery.com

Slide 34

Slide 34 text

Getting Started Developer accessibility

Slide 35

Slide 35 text

Make a regular website 1 STEP

Slide 36

Slide 36 text

Welcome!

Welcome!

Send me a note!

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Add jQuery Mobile 2 STEP

Slide 39

Slide 39 text

My Web App body { text-align: center; }

Welcome to my Site!

Contact

Slide 40

Slide 40 text

My Web App body { text-align: center; }

Welcome to my Site!

Contact

Slide 41

Slide 41 text

Automagic-ness Ajaxify links + forms = transitions Enhance all form elements Wrap contents a ‘page’ container *

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Data- attributes Easy config in HTML

Slide 44

Slide 44 text

HTML5 data- attributes data-foo="whatever"

Slide 45

Slide 45 text

Links, Ajaxified Link

Slide 46

Slide 46 text

Listen, intercept, handle w/ Ajax products.html
TAP

Slide 47

Slide 47 text

Listen, intercept, handle w/ Ajax products.html
TAP

Slide 48

Slide 48 text

Single vs. multiple One page per HTML doc OR Multiple page containers within a single HTML doc

Slide 49

Slide 49 text

Pre-load Link

Slide 50

Slide 50 text

Transitions Link

Slide 51

Slide 51 text

Transitions Link

Slide 52

Slide 52 text

Dialog Link

Slide 53

Slide 53 text

Button Button

Slide 54

Slide 54 text

Icon Button

Slide 55

Slide 55 text

Theme swatch Button

Slide 56

Slide 56 text

Listviews

Slide 57

Slide 57 text

  • Products
  • Services
  • About us
  • Contact
A Regular UL

Slide 58

Slide 58 text

Basic unordered list

Slide 59

Slide 59 text

  • Products
  • Services
  • About us
  • Contact
Add role

Slide 60

Slide 60 text

Read-only listview

Slide 61

Slide 61 text

  • Products
  • Services
  • About us
  • Contact
Add links

Slide 62

Slide 62 text

Linked listview

Slide 63

Slide 63 text

  • Products
  • Services
  • About us
  • Contact
Filter + inset

Slide 64

Slide 64 text

List with links

Slide 65

Slide 65 text

Etc.

Slide 66

Slide 66 text

Forms

Slide 67

Slide 67 text

Native

Slide 68

Slide 68 text

Auto enhanced

Slide 69

Slide 69 text

Search Input: label> Opt out

Slide 70

Slide 70 text

Search Input: Hide labels accessibly

Slide 71

Slide 71 text

Page regions

Slide 72

Slide 72 text

Anatomy of a page header footer content

Slide 73

Slide 73 text

...
...
...
Page sections

Slide 74

Slide 74 text

Nothing at all. What’s required?

Slide 75

Slide 75 text

Nothing at all.
We add this for you

Slide 76

Slide 76 text

Nothing at all.
Want some padding?

Slide 77

Slide 77 text

...
...
...
Toolbars

Slide 78

Slide 78 text

Taking it further

Slide 79

Slide 79 text

Rich API

Slide 80

Slide 80 text

Rich API

Slide 81

Slide 81 text

FlipPics

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

Coming soon 1.1 late February

Slide 84

Slide 84 text

New loader design

Slide 85

Slide 85 text

Transition re-vamp

Slide 86

Slide 86 text

New types

Slide 87

Slide 87 text

New types

Slide 88

Slide 88 text

Default: fade Fail 3D transform test = fade ONLY (Android 2.x)

Slide 89

Slide 89 text

Chrome will save us!

Slide 90

Slide 90 text

Chrome will save us!

Slide 91

Slide 91 text

True fixed toolbars

Slide 92

Slide 92 text

CSS position:fixed - iOS 5 - Android 2.2, 2.3, 3.0 (honeycomb), 4.0 (ICS) - Blackberry 7, PlayBook 1+ - Firefox mobile 6 - WebOS 2+ - Kindle Fire - Kindle 3 - Nook Color 1 & 2 (tablet) - All modern desktop browsers (Safari, Firefox, Opera, Chrome, IE, etc.) Brad Frost

Slide 93

Slide 93 text

...with native scrolling (fall back to scrolling bars with the page)

Slide 94

Slide 94 text

Wow

Slide 95

Slide 95 text

Forms in bars

Slide 96

Slide 96 text

forms: data-mini

Slide 97

Slide 97 text

...buttons too

Slide 98

Slide 98 text

Adorable!

Slide 99

Slide 99 text

slider: data-highlight

Slide 100

Slide 100 text

data-enhance="false" data-ajax="false" Hands off!

Slide 101

Slide 101 text

iOS orientation bug

Slide 102

Slide 102 text

touchOverflow no more

Slide 103

Slide 103 text

AMD

Slide 104

Slide 104 text

Preview jquerymobile.com/test

Slide 105

Slide 105 text

What's next? 1.2 and beyond

Slide 106

Slide 106 text

Download builder

Slide 107

Slide 107 text

Bug fixes

Slide 108

Slide 108 text

Popup

Slide 109

Slide 109 text

Fetchlinks

Slide 110

Slide 110 text

Overflow regions

Slide 111

Slide 111 text

Responsive layouts

Slide 112

Slide 112 text

Ecosystem Tools & Resources

Slide 113

Slide 113 text

Adobe CS 5.5

Slide 114

Slide 114 text

Tools

Slide 115

Slide 115 text

Tools

Slide 116

Slide 116 text

Tools

Slide 117

Slide 117 text

Tools http://codiqa.com/jqueryuk

Slide 118

Slide 118 text

Tools

Slide 119

Slide 119 text

Books

Slide 120

Slide 120 text

Resources www.jquerymobile.com/resources

Slide 121

Slide 121 text

Wrapping up

Slide 122

Slide 122 text

Awesome sponsors filament group

Slide 123

Slide 123 text

Go team! Scott Jehl, Filament Group Mat Marquis, Filament Group John Bender, Adobe Kin Blas, Adobe Ghislain Gesuin, Jive Software Anne-Gaelle Colom, Univ. of Westminster Gabriel Schulhof, Intel Sergey Grebnov, Microsoft Jason Scott, RIM ...and countless others!

Slide 124

Slide 124 text

@jquerymobile Stay in the loop jquerymobile.com/blog

Slide 125

Slide 125 text

Get Involved github.com/jquery/jquery-mobile

Slide 126

Slide 126 text

Support the project Test devices (ICS!) Financial donations Sponsor developer time

Slide 127

Slide 127 text

Thanks!