59 j Query Slides

8/13/2019 59 j Query Slides

1/159

max firtman@firt firt.mobi

May 9th 2012Wednesday, May 9, 12


2/159

mobile+web developer

mobilexweb.com

@firt

Wednesday, May 9, 12


3/159



4/159

buenos aires ~argentina



5/159

buenos aires ~argentina

patagoniasoccer

meat & winetango



6/159



7/159

Image from my house



8/159Wednesday, May 9, 12


11/159

.com



12/159

Lets start



14/159

mobile



15/159

mobile

!absolutely personal



16/159

mobile


!+5 billions



17/159

mobile


!+5 billions

!make us focus



18/159

mobile


!+5 billions

!make us focus!read our context...



19/159

mobile


!+5 billions


!... always...



20/159

mobile


!+5 billions


!... always...

!... and everywhere.



21/159

then... what is the

roblem?



22/159

mobile is a

minefield

Photo by World of Good (Flickr)Malvinas / Falklands Islands



23/159

lots of questions

Photo by wayneandwax (Flickr)



24/159

lots of questions



25/159lots of platformsWednesday, May 9, 12


26/159


27/159

its different



28/159

its different

!slower networks



29/159

its different

!slower networks

!higher latency



30/159

its different

!slower networks

!higher latency

!slower hardware



31/159

its different

!slower networks

!higher latency

!slower hardware!different browsing experience



32/159

its different

!slower networks

!higher latency


!different context



33/159

its different

!slower networks

!higher latency


!different context

!different behaviors



34/159

its different

!slower networks

!higher latency


!different context

!different behaviors

!different possible networks



35/159

when we say mobile web



36/159


from a developers

perspectiveits using HTML,

CSS and JavaScriptto

develop mobile apps



37/159


from a developers

perspectiveits using HTML,

CSS and JavaScriptto

develop mobile apps

(browser or installed)



38/159

webapp?


b b


39/159

a webapp can be...


b b


40/159

a webapp can be...

!browser-based experience


b b


41/159

a webapp can be...


!a full-screen app on the browser


b b


42/159

a webapp can be...


!a full-screen app on the browser

!a native web / hybrid app



43/159

And ?


h l5


44/159

html5


h l5


45/159

html5

!w3c standards (all in draft)


h l5


46/159

html5


!some are other w3c standards


h l5


47/159

html5



!de-facto standards


h l5


48/159

html5



!de-facto standards

!w3c ex-standards


ht l5


49/159

html5



!de-facto standards

!w3c ex-standards

!everything new on the web



50/159

typeof html5 !=boolean



51/159

mobile browsers



52/159

mobile browsers

!too many



53/159

mobile browsers

!too many

!(some)too limited



54/159

mobile browsers

!too many

!(some)too limited

!(some)too innovative



55/159

mobile browsers

!too many

!(some)too limited

!(some)too innovative!(some) proxy based



56/159

mobile browsers

!too many

!(some)too limited


!(most)without documentation



57/159

mobile browsers

!too many

!(some)too limited



!(most)without a name



58/159

mobile browsers

!too many

!(some)too limited



!(most)without a name

!(most)without debugging tools



59/159

mobile browsers



60/159

mobile browsers

!(some)focus-based



61/159

mobile browsers

!(some)focus-based

!(some)cursor-based



62/159

mobile browsers

!(some)focus-based

!(some)cursor-based

!(some) touch-based



63/159

mobile browsers

!(some)focus-based

!(some)cursor-based

!(some) touch-based

!(some)multitouch-based



64/159

mobile browsers

!(some)focus-based

!(some)cursor-based

!(some) touch-based


!

(some)with zooming support



65/159

mobile browsers

!(some)focus-based

!(some)cursor-based

!(some) touch-based


!

(some)with zooming support!(most) unknown for web devs


k


66/159

some are known


k


67/159

some are known

!Safari (on iOS)

!Opera Mobile (on Android & Symbian)

!Firefox (on Android)

!Chrome (on Android)

!Internet Explorer (on Windows Phone)


k


68/159

some are unknown


k


69/159

some are unknown

!Nokia Browser (on Symbian, S40 & Meego 1.2)

!BlackBerry Browser

!Android Browser

!webOS Browser!Amazon Silk

!Bada Browser

!Opera Mini

!NetFront

!Phantom

!...


they are on tablets too!


70/159





71/159


!Safari

!Android Browser

!webOS Browser

!BlackBerry Browser

!Opera Mini

!Firefox!Chrome



72/159

and with different

versions...



73/159

and we can also

create native apps-such as phonegap-



74/159

html5



75/159

some features safe



76/159

some features only on

few latforms



77/159

some features

ex erimental



78/159

jQuery mobile



79/159

what is ... ?



80/159

what is not ...?



81/159



82/159

(...) leaving out DOM

and selector stuff,

which falls under the

more fundamental

JQuery literature (...)



83/159



84/159

jQ bil i t


85/159

jQuery mobile is not...

!alternative mobile jQuery framework


jQ er mobile is not


86/159



!SDK for native/hybrid compilation


jQuery mobile is not


87/159



!SDK for native/hybrid compilation!a framework for doing all JS code


jQuery mobile is not


88/159



!SDK for native/hybrid compilation!a framework for doing all JS code

!the solution for every app


jQuery mobile is


89/159

jQuery mobile is...


jQuery mobile is...


90/159

jQuery mobile is...

a cross-platform UI

frameworkfor creatingwebappsfor touch-enabled

smartphones and tablets



91/159

why jQuery mobile?



92/159



93/159

typeof html5 !=boolean



94/159

features


features


95/159

features


features


96/159

features

!non-intrusive semantic html5 code


features


97/159

features


!open source


features


98/159

features


!open source

!

lightweight


features


99/159

features


!open source

!

lightweight!progressive enhancement


features


100/159

features


!open source

!


!accessibility support


features


101/159

features


!open source

!



!customizable


features


102/159

features


!open source

!



!customizable

!includes javascript api



103/159

versions up to 2012-05-09


104/159

versions

!stable: 1.1.0


versions up to 2012-05-09


105/159

versions

!stable: 1.1.0

!future: 1.2


you dont need to know


106/159

you don t need to know



107/159



108/159


!html5

!css 3




109/159


!html5

!css 3

!

javascript




110/159


!html5

!css 3

!

javascript!jQuery




111/159


!html5

!css 3

!

javascript!jQuery

but... you should :)



112/159



113/159

what do we need?


what do we need?


114/159

what do we need?


what do we need?


115/159

what do we need?

!a text editor


what do we need?


116/159

a do e eed

!a text editor

!a browser


what do we need?


117/159

!a text editor

!a browser

!and the framework?


what do we need?


118/159

!a text editor

!a browser

!and the framework?

!and hybrid compilers?


what do we need?


119/159

!a text editor

!a browser

!and the framework?


!and emulators and simulators?


what do we need?


120/159

!a text editor

!a browser

!and the framework?


!and emulators and simulators?www.mobilexweb.com/emulators



121/159

compatibility

1.1



122/159

compatibility


123/159

p y

!

iOS!Android

!BlackBerry >= 5.0

!Symbian touch!HP webOS

!Windows Phone

!Opera Mini, Opera Mobile, Firefox!Chrome, Bada, Meego, Kindle 3+, ...

!Others?



124/159

the framework


the framework


125/159


the framework


126/159

!a javascript file


the framework


127/159

!a javascript file!a css file and a group of images



128/159

the framework


129/159


!optionally, a structural-only css file

!self-hosted


the framework


130/159



!self-hosted

!CDN - stable versions


the framework


131/159



!self-hosted

!CDN - stable versions!CDN - latest versions



132/159

tools



133/159


134/159

fireworks cs6



135/159


136/159

samples



137/159



138/159


139/159

Header

Go to page 2 Footer



140/159

Header

Go to page 2 Footer



141/159


142/159

iPhone Android BlackBerry

Symbian webOS MeeGo Bada



143/159

Name

I accept

Country



144/159

Name

I accept

Country


features


145/159


features


146/159

!fixed toolbars on some platforms


features


147/159


!list, content and form rich controls


features


148/159



!theming and color swatches



149/159

features


150/159



!theming and color swatches!transitions

!ajax


features


151/159



!theming and color swatches!transitions

!ajax

!phonegap compatibility


advanced topics


152/159


advanced topics


153/159

!using javascript for loading content


advanced topics


154/159


!theming and customization


advanced topics


155/159



!styling for non-compatible devices


advanced topics


156/159



!styling for non-compatible devices!javascript api & events


advanced topics


157/159



!styling for non-compatible devices!javascript api & events

!html5 (geolocation, offline storage,

offline access, accelerometer)



158/159

demo

time


you can reach a goodexperience

thanks!
http://www.mobilexweb.com/http://www.mobilexweb.com/


159/159

p

firt.mobi

twitter: @firtbil b
http://www.mobilexweb.com/http://www.mobilexweb.com/http://www.mobilexweb.com/

59 j Query Slides

Documents

Transcript of 59 j Query Slides