Desenvolvimento ágil com jQuery Mobile

»GabrielZigolis
QUEM É?
Front-EndDeveloperhá8anos
Instrutordedesenvolvimentowebhá6anos
globo.com,grupoRBS,IBM,GoodCard,SelulloidAg...
gabriel.zigolis@gmail.com
http://zigolis.com

»jQueryMobile
O QUE É?
É um framework paradesenvolvimento web, otimizado para
interação por toque, capaz de criar sistemas de interface
unificados, baseados em HTML5 e CSS3 paraas principais
plataformas móveis, construído sobre o jQuerye jQueryUI.

»jQueryMobile
COMO EU USO ISSO?
Guiadeintrodução
Documentação
http://view.jquerymobile.com/1.3.0/docs/intro/
http://view.jquerymobile.com/1.3.0/

»jQueryMobile
INICIANDO...
AdicioneoDoctypedeHTML5:‹!DOCTYPEhtml›
Adicioneametatag(viewport)
IncluaojQuery,jQueryMobileeosarquivosJavaScript
IncluaoCSSdojQueryMobile
BaixeosarquivosouuseatravésdoCDN

»jQueryMobile
CÓDIGO
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>jQueryMobile</title>
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
</body>
</<html>

»jQueryMobile
COMO FUNCIONA?
jQmtrabalhacomoconceitodepáginas
Emcadapáginatemos"divs"comoatributodata-role
Definindoassimheader,contentefooter
Divcomatributodata-role?<divdata-role="header">
Issomesmo,HTML5permitequalqueratributo!

»jQueryMobile
CÓDIGO
<divdata-role="page">
<divdata-role="header">
<h1>RSJS2013</h1>
</div>
<divdata-role="content">
<p>SegundaediçãodomaioreventodeJavascriptdosuldopaís.</p>
<p>Confiraosucessodaprimeiraediçãoegarantaoquantoantesasuainscrição.</p>
</div>
</div>

»jQueryMobile
E A MÁGICA ACONTECE
Segunda edição do maior evento de
Javascript do sul do país.
Confira o sucesso da primeira edição e
garanta o quanto antes a sua inscrição.
RSJS 2013
Todos os direitos reservados.

»jQueryMobile
EM OUTROS BREAKPOINTS
Segunda edição do maior evento de Javascript do sul do país.
Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição.
RSJS 2013

»jQueryMobile
E PARA CUSTOMIZAR?
É extramamente simples adaptar ao estilo do seu projeto,
com poucas linhas de css e algumas classes no HTML.

»jQueryMobile
CÓDIGO
.ui-page{
background:#f9f9f9;
font-family:'PTSans',sans-serif;
}
.ui-header{
background:#f9f9f9;
border-top:5pxsolid#A51D1D;
}
.logo{
background:url(../../img/logo.png);
font:0/0arial;
height:75px;
width:58px;
}
.ui-footer{
background:#A51D1D;
}

»jQueryMobile
E SUA APLICAÇÃO FICA ASSIM

»jQueryMobile
WIDGETS
De formasimples, práticae rápidapodemos enriquecer
nossaaplicação com o uso dos Widgets.
Caixasdediálogo
Elementosdeformulário
Navbar
Transições
...

»jQueryMobile
CÓDIGO - NAVBAR
<divdata-role="navbar"data-grid="d">
<ul>
<li><ahref="#"class="ui-btn-active">sobre</a></li>
<li><ahref="#">inscrições</a></li>
<li><ahref="#">programação</a></li>
</ul>
</div>

»jQueryMobile
E LÁ VEM ELE...
sobre inscrições programação

»jQueryMobile
WIDGETS
E navegação, como funcionase eu precisar de modais, alertas
ou simples links?
Ah!E como eu faço amágicadas animações?

»jQueryMobile
CÓDIGO - NAVEGAÇÃO
<divdata-role="navbar"data-grid="d">
<ul>
<li><ahref="index.html"class="ui-btn-active">sobre</a></li>
<li><ahref="inscricoes.html"data-rel="dialog"data-transition="pop">inscrições</a></li>
<li><ahref="programacao.html"data-transition="flow">programação</a></li>
</ul>
</div>

»jQueryMobile
WIDGETS
Beleza, mas agoraeu preciso de um formulário de contato, e
ai?
E outra, eu gostariaque ele aparecesse diferente natela...

»jQueryMobile
CÓDIGO - PAINEL
<divdata-role="panel"id="contato">
/*Form*/
</div>



</div>

»jQueryMobile
CÓDIGO - FORM
<form>
<labelfor="nome">Nome:</label>
<inputtype="text"name="nome"id="nome"/>
<labelfor="email">Email:</label>
<inputtype="email"name="email"id="email"data-clear-btn="true"/>
<labelfor="select">Motivodocontato:</label>
<selectname="select"id="select"data-native-menu="false">
<option>Selecioneumaopção</option>
<optionvalue="1">Dúvidas</option>
<optionvalue="2">Sugestões</option>
</select>
<labelfor="textarea">Escrevasuamensagem:</label>
<textareacols="40"rows="8"name="textarea"id="textarea"></textarea>
<inputtype="submit"value="Enviar">
</form>

»jQueryMobile
E DESSA VEZ O QUE TEMOS...
Dúvidas?

»jQueryMobile
WIDGETS
Bacana, e agoramais algumamaneirade "esconder"o
conteúdo?

»jQueryMobile
CÓDIGO - COLLAPSIBLE
<pclass="desc-evento"><em>Programação!</em></p>
<divdata-role="collapsible-set">
<divdata-role="collapsible"data-theme="c"data-content-theme="d">
<h4>8h30</h4>
<p>Checkin</p>
</div>
<divdata-role="collapsible"data-theme="c"data-content-theme="d">
<h4>9h00</h4>
<p>DissecandosuaaplicaçãocomChromeDevTools</p>
</div>
</div>
</div>
</div>

»jQueryMobile
SIMPLES E DIRETO...
Dúvidas?

»jQueryMobile
JAVASCRIPT
E o JavaScript, onde e como agente utiliza?

»jQueryMobile
CÓDIGO - CHAMADA
<scriptsrc="../jquery-1.9.1.min.js"></script>
<scriptsrc="jquery.configs.js"></script>
<scriptsrc="../mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

»jQueryMobile
CÓDIGO - JQUERY.CONFIGS.JS
$(document).on("mobileinit",function(){
$.mobile.defaultPageTransition= "flip";
});

»jQueryMobile
E O PADRÃO DE NAVEGAÇÃO DO SISTEMA MUDA...
Dúvidas?

»jQueryMobile
JAVASCRIPT
Os eventos são outro ponto simples de trabalhar e modificar
naaplicação.
Touch
Orientation
Scroll
...

»jQueryMobile
CÓDIGO - JQUERY.EVENTS.JS
$(function(){
$(window).bind("orientationchange",function(e){
if(e.orientation=="portrait"){
$( "#landscape").fadeOut(500,function(){
$( "#portrait").fadeIn(300);
});
} else{
$( "#portrait").fadeOut(500,function(){
$( "#landscape").fadeIn(300);
});
}
})
})

»jQueryMobile
CÓDIGO - GRID
<divclass="ui-grid-a"id="portrait">
<divclass="ui-block-abox">Orientation</div>
<divclass="ui-block-bbox">Portrait</div>
</div>
<divclass="ui-grid-c"id="landscape">
<divclass="ui-block-abox">Orientation</div>
<divclass="ui-block-bbox">Landscape</div>
<divclass="ui-block-cbox">Orientation</div>
<divclass="ui-block-dbox">Landscape</div>
</div>
</div>

»jQueryMobile
OLHA AGORA A APLICAÇÃO EM LANDSCAPE...
Orientation Landscape Orientation Landscape
Segunda edição do maior evento de Javascript do sul do país.
Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição.
Dúvidas?

»jQueryMobile
ABRA A SUA MENTE
Com amanipulação dos eventos podemos por exemplo
carregar um JSONcom mais dados paraumaorientation.
Ou paraum breakpointespecífico.

»jQueryMobile
QUEM ESTÁ USANDO O JQM?
http://m.fiat.es
http://m.rolex.com/en/
http://mobile.united.com
http://m.sears.com
http://events.jquery.org/m/
http://www.jqmgallery.com

»jQueryMobile
DÚVIDAS? SUGESTÕES OU DOAÇÕES...

»jQueryMobile
OBRIGADO!!!
Materialdisponívelem:
www.zigolis.com.br/rsjs/

Desenvolvimento ágil com jQuery Mobile

Mais conteúdo relacionado

Mais procurados

Semelhante a Desenvolvimento ágil com jQuery Mobile

Último

Desenvolvimento ágil com jQuery Mobile