jQuery Mobile

max firtman@firt firt.mobi

Zurich, Oct 21 2011

Tuesday, November 1, 11

Danke


http://invisible.ch

@jcfischer

http://akosma.com

@akosma


http://invisible.ch

http://invisible.ch

http://invisible.ch

http://invisible.ch

Learn more?


http://mobile-training.chTuesday, November 1, 11

http://mobile-training.ch



15. - 17. November





15. - 17. November

„Early Bird“ or /ch

/open

CHF 1400




mobile+web developermobilexweb.com blog

@firt

who am I?


where?


buenos aires ~ argentina

where?


buenos aires ~ argentina

where?

patagonia footballmeat & winetango


Image from my house

books


Using the Latest Today

Estelle Weyl & Maximiliano Firtman

Mobile HTML5

coming soon...also by @estellevw


you have a question for me


the answer is no


why mobile?


2015 is coming...


mobile devices are ourflying cars


mobile is more about users


mobile


mobile‣ absolutely personal


mobile‣ absolutely personal‣ +5 billions


mobile‣ absolutely personal‣ +5 billions‣ will be the 1st browsing device... soon


mobile‣ absolutely personal‣ +5 billions‣ will be the 1st browsing device... soon‣ make us focus


mobile‣ absolutely personal‣ +5 billions‣ will be the 1st browsing device... soon‣ make us focus‣ read our context...


mobile‣ absolutely personal‣ +5 billions‣ will be the 1st browsing device... soon‣ make us focus‣ read our context...‣ ... always...


mobile‣ absolutely personal‣ +5 billions‣ will be the 1st browsing device... soon‣ make us focus‣ read our context...‣ ... always...‣ ... and everywhere.


then... what is the problem?


mobile is a minefield

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


lots of questions

Photo by wayneandwax (Flickr) Tuesday, November 1, 11

lots of questions

we need to learn


lots of platformsTuesday, November 1, 11

mobile web appears


nativevs

web


WAIT!


Are you sure?


native codevs

javascript


browservs

installed apps& stores


lack of definitions


when we say mobile web



from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps



from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps

(browser or installed)


what are the problems with mobile web?


we are second class producers


Testing & debugging


Standards!


Photo by Ben Millett (Flickr) Tuesday, November 1, 11

Are you sure?

Photo by Ricky David (Flickr) Tuesday, November 1, 11

What is ?


html5


html5

‣ w3c standards (all in draft)


html5

‣ w3c standards (all in draft)‣ some are other w3c standards


html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards


html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards‣ w3c ex-standards


html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards‣ w3c ex-standards‣ everything “new” on the web


mobile browsers


mobile browsers‣ too many


mobile browsers‣ too many‣ (some) too limited


mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative


mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based


mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based‣ (most) without documentation


mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based‣ (most) without documentation‣ (most) without a name


mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based‣ (most) without documentation‣ (most) without a name‣ (most) without debugging tools


mobile browsers


mobile browsers

‣ (some) focus-based


mobile browsers

‣ (some) focus-based‣ (some) cursor-based


mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based


mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based


mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based‣ (some) with zooming support


mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based‣ (some) with zooming support‣ (most) unknown for web devs


jQuery mobile


what is ... ?


what is not ...?


jQuery mobile is not...



‣ alternative mobile jQuery framework



‣ alternative mobile jQuery framework‣ SDK for native/hybrid compilation



‣ alternative mobile jQuery framework‣ SDK for native/hybrid compilation‣ a framework for doing all using JS



‣ alternative mobile jQuery framework‣ SDK for native/hybrid compilation‣ a framework for doing all using JS‣ the solution for every app


jQuery mobile is...


jQuery mobile is...

a cross-platform UI framework for creating webapps for touch-enabled smartphones and tablets


webapp?


a webapp can be...


a webapp can be...

‣ a website or service based on the

browser


a webapp can be...


browser

‣ a full-screen (chromeless) app on the

browser


a webapp can be...


browser

‣ a full-screen (chromeless) app on the

browser

‣ a hybrid -native app through stores-


why jQuery mobile?


typeof html5 != boolean


features


features‣ non-intrusive semantic html5 code


features‣ non-intrusive semantic html5 code‣ open sourced


features‣ non-intrusive semantic html5 code‣ open sourced‣ lightweight


features‣ non-intrusive semantic html5 code‣ open sourced‣ lightweight‣ multiplatform with progressive enhancement


features‣ non-intrusive semantic html5 code‣ open sourced‣ lightweight‣ multiplatform with progressive enhancement‣ accessibility support


features‣ non-intrusive semantic html5 code‣ open sourced‣ lightweight‣ multiplatform with progressive enhancement‣ accessibility support‣ customizable


features‣ non-intrusive semantic html5 code‣ open sourced‣ lightweight‣ multiplatform with progressive enhancement‣ accessibility support‣ customizable ‣ includes javascript api


you don’t need to know



‣ html5



‣ html5‣ css 3



‣ html5‣ css 3 ‣ javascript



‣ html5‣ css 3 ‣ javascript‣ jQuery



‣ html5‣ css 3 ‣ javascript‣ jQuery

but... you should :)


� %DVLF�FRQWHQW�LV�DFFHVVLEOH�WR�DOO�EURZVHUV�

� %DVLF�IXQFWLRQDOLW\�LV�DFFHVVLEOH�WR�DOO�EURZVHUV�

� 6HPDQWLF�PDUNXS�FRQWDLQV�DOO�FRQWHQW�

� (QKDQFHG�OD\RXW�LV�SURYLGHG�E\�H[WHUQDOO\�OLQNHG�&66�

� (QKDQFHG�EHKDYLRU�LV�SURYLGHG�E\�XQREWUXVLYH��H[WHUQDOO\�OLQNHG�-DYD6FULSW�

� (QG�XVHU�EURZVHU�SUHIHUHQFHV�DUH�UHVSHFWHG�

7KLV� OLVW�VRXQGV� OLNH� M4XHU\�0RELOH¦V� IHDWXUH� OLVW��GRHVQ¦W� LW"�7KDW¦V�ULJKW��$� M4XHU\0RELOH�DSSOLFDWLRQ�ZLOO�DOVR�ZRUNV�RQ�D�YHU\�EDVLF�EURZVHU�ZLWKRXW�&66�RU�-DYD6FULSWVXSSRUW��$QG�WKDW�LV�D�JUHDW�IHDWXUH�IRU�D�PRELOH�ZHEDSS�

Accessibility support)URP�:LNLSHGLD�

:HE�DFFHVVLELOLW\�UHIHUV�WR�WKH�LQFOXVLYH�SUDFWLFH�RI�PDNLQJ�ZHEVLWHV�XVDEOH�E\�SHRSOH�RIDOO�DELOLWLHV�DQG�GLVDELOLWLHV��:KHQ�VLWHV�DUH�FRUUHFWO\�GHVLJQHG��GHYHORSHG�DQG�HGLWHG��DOOXVHUV�FDQ�KDYH�HTXDO�DFFHVV�WR�LQIRUPDWLRQ�DQG�IXQFWLRQDOLW\�

7KH�ZHE�DFFHVVLELOLW\�LQVLGH�PRELOH�EURZVHUV�KDV�MXVW�EHJXQ��KRZHYHU�M4XHU\�0RELOHLV�QRZ�IXOO\�FRPSDWLEOH�ZLWK�:�&¦V�:$,�$5,$�VSHFLILFDWLRQ�RQ�FRPSDWLEOH�EURZVHUV�KWWS��ZZZ�Z��RUJ�75�ZDL�DULD��$W�WKH�WLPH�RI�WKLV�ZULWLQJ��RQO\�L26��RU�KLJKHU�LVFRPSDWLEOH�ZLWK�WKLV�VSHFLILFDWLRQ�ZLWK�WKH�IHDWXUH�FDOOHG�9RLFH2YHU�

7KHUHIRUH��D�M4XHU\�0RELOH�ZHEDSS�ZLOO�SURYLGH�DQ�DFFHVVLEOH�H[SHULHQFH�WR�XVHUV�ZLWKYLVXDO�GLVDELOLWLHV�RQ�L3KRQH��L3RG�DQG�L3DG�

)LJXUH��7KLV�LV�KRZ�RXU�ILUVW�DQG�VLPSOH�M4XHU\�0RELOH�FRGH�ORRNV�OLNH�LQ�GLIIHUHQW�GHYLFHV��L26�ZHE26�DQG�$QGURLG�

Main Features | 17


7KHUH�DUH�DOVR�RSHUDWLQJ�V\VWHP�HPXODWRUV�WKDW�GRQ¦W�UHSUHVHQW�DQ\�UHDO�GHYLFH�KDUGZDUHEXW�UDWKHU�WKH�RSHUDWLQJ�V\VWHP�DV�D�ZKROH��7KHVH�H[LVW�IRU�:LQGRZV�0RELOH�DQG�$Q�GURLG�

2Q�WKH�RWKHU�KDQG��D�VLPXODWRU�LV�D�OHVV�FRPSOH[�DSSOLFDWLRQ�WKDW�VLPXODWHV�VRPH�RI�WKHEHKDYLRU�RI�D�GHYLFH��EXW�GRHV�QRW�HPXODWH�KDUGZDUH�DQG�GRHV�QRW�ZRUN�RYHU�WKH�UHDORSHUDWLQJ�V\VWHP��7KHVH�WRROV�DUH�VLPSOHU�DQG�OHVV�XVHIXO�WKDQ�HPXODWRUV��$�VLPXODWRUPD\�EH�FUHDWHG�E\�WKH�GHYLFH�PDQXIDFWXUHU�RU�E\�VRPH�RWKHU�FRPSDQ\�RIIHULQJ�D�VLP�XODWLRQ�HQYLURQPHQW�IRU�GHYHORSHUV��$V�WKH�VLPXODWRU�GRHV�QRW�VLPXODWH�DOO�WKH�GHYLFHIHDWXUHV��ZH�VKRXOG�ILQG�WRROV�WKDW�ZLOO�QRW�EH�KHOSIXO�IRU�PRELOH�ZHE�GHYHORSPHQW�EXWIRU�RWKHU�WHFKQRORJLHV�� OLNH�-DYD�0(��,Q�PRELOH�EURZVLQJ��WKHUH�DUH�VLPXODWRUV�ZLWKSL[HO�OHYHO� VLPXODWLRQ�� DQG� RWKHUV� WKDW� QHLWKHU� FUHDWH� D� VNLQ� RYHU� D� W\SLFDO� GHVNWRSEURZVHU��H�J��)LUHIR[�RU�6DIDUL��ZLWK�UHDO�W\SRJUDSK\�QRU�UHQGHU�HQJLQH�VLPXODWLRQ�

)LJXUH��<RX�FDQ�KDYH�DQ�L3DG�IRU�IUHH�LQVLGH�\RXU�0DF�XVLQJ�WKH�L26�6LPXODWRU��7KH�VDPH�FDQKDSSHQV�IRU�RWKHU�WDEOHWV��DOVR�ZLWK�:LQGRZV�RU�/LQX[�GHVNWRS�PDFKLQHV�

Testing webapps | 21


what do we need?


what do we need?

‣ a text editor


what do we need?

‣ a text editor‣ a browser


what do we need?


‣ and the framework?


what do we need?


‣ and the framework?‣ and hybrid compilers?


what do we need?


‣ and the framework?‣ and hybrid compilers?‣ and emulators and simulators?


what do we need?


‣ and the framework?‣ and hybrid compilers?‣ and emulators and simulators?www.mobilexweb.com/emulators


warning!


still not stable


but near...


compatibility

rc2


compatibility


compatibility‣ iOS‣ Android‣ BlackBerry >= 5.0‣ Symbian touch‣ HP webOS‣ Windows Phone‣ Opera Mini, Opera Mobile, Firefox‣ Bada, Meego, Kindle 3+, ...‣ Others?


the framework


the framework today


the framework today

‣ a javascript file


the framework today

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


the framework today


‣ self-hosted


the framework today


‣ self-hosted‣ CDN - “stable” versions


the framework today


‣ self-hosted‣ CDN - “stable” versions‣ CDN - latest versions


the framework tomorrow



‣ a custom javascript file



‣ a custom javascript file ‣ a base css file



‣ a custom javascript file ‣ a base css file‣ a theme css file and a group of images


<div data-role="page" id="page1"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <a href="#page2" data-role="button">Go to page 2</a> </div> <div data-role="footer"> <h4>Footer</h4> </div></div>


<div data-role="content"> <ul data-role="listview"> <li>iPhone <li>Android <li>BlackBerry <li>Symbian <li>webOS <li>MeeGo <li>Bada </ul> </div>


features


features

‣ fixed toolbars


features

‣ fixed toolbars‣ list, content and form rich controls


features

‣ fixed toolbars‣ list, content and form rich controls‣ theming and color swatches


features

‣ fixed toolbars‣ list, content and form rich controls‣ theming and color swatches‣ transitions


features

‣ fixed toolbars‣ list, content and form rich controls‣ theming and color swatches‣ transitions‣ ajax


Icon Description value

Info (i) info

Home icon home

Search icon search

5HPHPEHU�WKDW�WKH�LFRQ�LPDJHV�DUH�SURYLGHG�ZLWK�WKH�IUDPHZRUN��LQ�WKHGRZQORDG�=,3�SDFNDJH�RU�KRVWHG�LQ�WKH�&'1��%XWWRQ�LFRQV�QHHG�WKHLPDJH�IROGHU�WR�EH�DYDLODEOH�LQ�FDVH�ZH�GHFLGH�WR�KRVW�WKH�IUDPHZRUN�E\RXUVHOYHV�RI�LI�ZH�DUH�FUHDWLQJ�D�QDWLYH�DSS�ZLWK�WKH�IUDPHZRUN�LQVLGH�M4XHU\�0RELOH�XVHV�&66�VSULWHV�WR�UHGXFH�LPDJH�ORDGLQJ�RQ�LFRQV�DQG�LWSURYLGHV�WZR�YHUVLRQV��D�ORZ��DQG�D�KLJK�'3,�YHUVLRQV�WKDW�ZLOO�EH�DX�WRPDWLFDOO\�XVHG�

<RX�FDQ�VHH�KRZ�HDFK�LFRQ�LV�UHQGHUHG�LQ�)LJXUH��

Creating custom icons,I�ZH�ZDQW�WR�SURYLGH�RXU�RZQ�FXVWRP�LFRQV��ZH�MXVW�QHHG�WR�GHILQH�RXU�RZQ�XQLTXHQDPH�LQ�WKH�data-icon�DWWULEXWH��7KH�SUHIHUUHG�QDPLQJ�VFKHPH�WR�XVH�LV��DSS�QDPH!��LFRQ�QDPH!��IRU�H[DPSOH��myapp-tweet�

M4XHU\�0RELOH�ZLOO�DXWRPDWLFDOO\�DGG�D�ZKLWH�FLUFOHG�EDFNJURXQG�WR�WKHLFRQ��VR�LW�ZLOO�ZRUN�RQ�HYHU\�URZ�EDFNJURXQG�ZLWKRXW�DQ\�SUREOHP�

M4XHU\�ZLOO�DOVR�H[SHFW�XV�WR�FUHDWH�D�&66�FODVV�FDOOHG�ui-icon-<name>��IRU�H[DPSOH��ui-icon-myapp-tweet��DQG�VSHFLI\�D�EDFNJURXQG�LPDJH��7R�UHGXFH�8,�SUREOHPV��WKH�LFRQVKRXOG�EH�LQ�ZKLWH��RU�D�FOHDU�FRORU��VDYHG�DV�D��[��SL[HOV�31*��ZLWK�DOSKD�WUDQV�

)LJXUH��$OO�WKH�LFRQV�LQFOXGHG�LQ�WKH�M4XHU\�0RELOH�IUDPHZRUN

84 | Chapter 3:ಗUI Components


advanced topics


advanced topics

‣ using javascript for loading content


advanced topics

‣ using javascript for loading content‣ theming and customization


advanced topics

‣ using javascript for loading content‣ theming and customization‣ styling for non-compatible devices


advanced topics

‣ using javascript for loading content‣ theming and customization‣ styling for non-compatible devices‣ javascript api & events


advanced topics

‣ using javascript for loading content‣ theming and customization‣ styling for non-compatible devices‣ javascript api & events‣ html5 (geolocation, offline storage, offline access, accelerometer)


you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

firt.mobitwitter: @firt

mobilexweb.com

https://www.ch-open.ch/auswertung/


http://www.mobilexweb.com

http://www.mobilexweb.com



jQuery Mobile

Technology

Transcript of jQuery Mobile