jQuery Mobile

max firtman@firt firt.mobi

Zurich, Oct 21 2011

Tuesday, November 1, 11

http://invisible.ch

@jcfischer

http://akosma.com

@akosma

Learn more?

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

http://mobile-training.ch

15. - 17. November

http://mobile-training.ch

15. - 17. November

„Early Bird“ or /ch

CHF 1400

mobile+web developermobilexweb.com blog

who am I?

where?

buenos aires ~ argentina

where?

buenos aires ~ argentina

where?

patagonia footballmeat & winetango

Image from my house

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

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

(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 ?

‣ w3c standards (all in draft)

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

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

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

‣ 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

‣ (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...

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

webapp?

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

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?

‣ 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

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

‣ 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

‣ 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

‣ 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/

jQuery Mobile

Technology

Introducción a jQuery Mobile - jtech.ua.es · 1.1. Características de jQuery Mobile Las principales características de jQuery Mobile son las siguientes: • Basado en el núcleo

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples€¦ · Praise for jQuery, jQuery UI, and jQuery Mobile “de Jonge and Dutson’s cookbook approach to jQuery, jQuery UI,

10. jQuery Mobile - What is jQuery Mobile? How to use it?

JQuery Mobile Webinar

JQuery Mobile

jQuery Mobile: Optimizing Perfromance

Mobile web with jQuery Mobile

Jquery mobile

jQuery Mobile Apps

WebMatrix jQuery Mobile Web

Creating Mobile Applications with jQuery Mobile … · Creating Mobile Applications with jQuery Mobile and PhoneGap Build 3 ... Creating Mobile Applications with jQuery Mobile and

jQuery Mobile & PhoneGap

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examplesptgmedia.pearsoncmg.com/images/9780321822086/samplepages/... · Praise for jQuery, jQuery UI, and jQuery Mobile “de Jonge

Mobile Apps with jQuery Mobile - sigs.de€¦ · Mobile Apps with jQuery Mobile Kai Tödter Siemens Building Technologies

jQuery Mobile Jump Start

jQuery Mobile UI

Introduction to jQuery Mobile

04 jQuery Mobile

Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,

jQuery mobile UX