jquery mobile - aplicações móveis com javascript
DESCRIPTION
How to start mobile applications with jQuery Mobile.Exemplos: https://github.com/luiztiago/keynote-jquerymobileTRANSCRIPT
jQuery MobilejQuery MobileAplicações móveis com JavascriptAplicações móveis com Javascript
Luiz TiagoLuiz Tiago
Sócio e Front-end Manager @ MGR TecnologiaSócio e Front-end Manager @ MGR TecnologiaOrganização do Pernambuco.JSOrganização do Pernambuco.JSiPhone DeveloperiPhone DeveloperjQueryBrasil.org TeamjQueryBrasil.org TeamAnd more things...And more things...
20019,8 milhões
201180 milhões
2021?????
Fonte: Ibope NetRatings
7 bilhões de pessoas
> 5 bilhõesFonte: ONU / ITU
25 dos 30 maiores do Alexa 25 dos 30 maiores do Alexa possuem versão mobilepossuem versão mobile
Por quê?Por quê?
MultidispositivoMultidispositivoMultiplataformaMultiplataformaAtualização “real-time”Atualização “real-time”
SuporteSuporte
Apple iOSApple iOSAndroidAndroidBlackberryBlackberryWindows PhoneWindows Phoneand more...and more...
Testes?Testes?jQuery Mobile Testing LabjQuery Mobile Testing Lab
Progressive Progressive EnhancementEnhancement
C-Grade:C-Grade: Basic HTML Basic HTML
+ B-Grade:+ B-Grade: Enhanced Style, No Ajax Enhanced Style, No Ajax
++ A-Grade:++ A-Grade: Full Enhanced Style, Ajax and CSS Full Enhanced Style, Ajax and CSS Transitions Transitions
Quanto custa?Quanto custa?
#1 Ajaxified Navigation #1 Ajaxified Navigation (PJAX?)(PJAX?)
Friendly Ajax URLSFriendly Ajax URLS
HistoryHistory
#2 Touch Friendly Inputs#2 Touch Friendly Inputs
#3 Theme Roller#3 Theme Roller
#4 Easy, very easy
Trabalha com o que“todo mundo”conhece
#5 E o melhor de tudo...#5 E o melhor de tudo...
Aplicações mobile Aplicações mobile nãonão
precisam ser testadas no IEprecisam ser testadas no IE
Hands onHands on
<!DOCTYPE html> <!DOCTYPE html> <html> <html>
<head> <head> <title>My Page</title> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-<meta name="viewport" content="width=device-width, initial-scale=1"> scale=1"> <link rel="stylesheet" <link rel="stylesheet" href="href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css1.1.0.min.css" />" /><script <script src="src="http://code.jquery.com/jquery-1.7.1.min.jshttp://code.jquery.com/jquery-1.7.1.min.js"></script>"></script><script <script src="src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js1.1.0.min.js"></script>"></script>
</head></head>
<body> <body> <div data-role="page"><div data-role="page">
<div data-role="header"><div data-role="header"><h1>My Title</h1><h1>My Title</h1>
</div><!-- /header --></div><!-- /header --><div data-role="content"><div data-role="content">
<p>Hello world</p><p>Hello world</p></div><!-- /content --></div><!-- /content -->
</div><!-- /page --></div><!-- /page --></body></body></html></html>
Exemplo 001.htmlExemplo 001.html
Pages - ContentPages - Content
<div data-role="page"><div data-role="page"> <div data-role="header">...</div> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> <div data-role="footer">...</div>
</div> </div>
Exemplo 002.htmlExemplo 002.html
List-view List-view Basic linked listBasic linked listNested listNested listNumbered listNumbered listSplit button listSplit button listList dividersList dividersCount bubbleCount bubbleThumbnailsThumbnails
IconsIconsContent formattingContent formattingSearch filter barSearch filter barRead-only listsRead-only listsLists with formsLists with formsInset styled listsInset styled listsList performance testList performance test
Exemplo 003.htmlExemplo 003.html
Exemplo 004.htmlExemplo 004.html
Exemplo 005.htmlExemplo 005.html
Ready! :)Ready! :)
Quando utilizar?Quando utilizar?
Pequenas aplicaçõesPequenas aplicaçõesAplicação não exige grandes funcionalidades Aplicação não exige grandes funcionalidades nativasnativas(acelerômetro, camera, contatos, notificações, (acelerômetro, camera, contatos, notificações, etc.)etc.)Quando precisar de algo Quando precisar de algo rápidorápido, , bombom e e consequentemente consequentemente baratobarato :) :)
Uso...Uso...
Can I help you?Can I help you?
@luiztiago@[email protected]@gmail.comwww.luiztiago.comwww.luiztiago.comhttps://github.com/luiztiago/keynote-https://github.com/luiztiago/keynote-jquerymobilejquerymobilehttp://www.slideshare.net/luiztiagohttp://www.slideshare.net/luiztiago