desenvolvimento ágil com jquery mobile
DESCRIPTION
Apresentação sobre desenvolvimento ágil com jQuery Mobile no RSJS 2013 por Gabriel ZigolisTRANSCRIPT
» Gabriel Zigolis
QUEM É?
Front-End Developer há 8 anos
Instrutor de desenvolvimento web há 6 anos
globo.com, grupo RBS, IBM, GoodCard, [email protected]
http://zigolis.com
» jQuery Mobile
O QUE É?
É um framework para desenvolvimento web, otimizado parainteração por toque, capaz de criar sistemas de interfaceunificados, baseados em HTML5 e CSS3 para as principaisplataformas móveis, construído sobre o jQuery e jQuery UI.
» jQuery Mobile
COMO EU USO ISSO?
Guia de introdução
Documentação
http://view.jquerymobile.com/1.3.0/docs/intro/
http://view.jquerymobile.com/1.3.0/
» jQuery Mobile
INICIANDO...
Adicione o Doctype de HTML5: ‹!DOCTYPE html›
Adicione a meta tag (viewport)
Inclua o jQuery, jQuery Mobile e os arquivos JavaScript
Inclua o CSS do jQuery Mobile
Baixe os arquivos ou use através do CDN
» jQuery Mobile
CÓDIGO<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
</body>
</<html>
» jQuery Mobile
COMO FUNCIONA?
jQm trabalha com o conceito de páginas
Em cada página temos "divs" com o atributo data-role
Definindo assim header, content e footer
Div com atributo data-role? <div data-role="header">
Isso mesmo, HTML5 permite qualquer atributo!
» jQuery Mobile
CÓDIGO
<div data-role="page">
<div data-role="header">
<h1>RSJS 2013</h1>
</div>
<div data-role="content">
<p>Segunda edição do maior evento de Javascript do sul do país.</p>
<p>Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição.</p>
</div>
</div>
» jQuery Mobile
E A MÁGICA ACONTECE
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
RSJS 2013
Todos os direitos reservados.
» jQuery Mobile
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
Todos os direitos reservados.
» jQuery Mobile
E PARA CUSTOMIZAR?
É extramamente simples adaptar ao estilo do seu projeto,com poucas linhas de css e algumas classes no HTML.
» jQuery Mobile
CÓDIGO.ui-page {
background: #f9f9f9;
font-family: 'PT Sans',sans-serif;
}
.ui-header {
background: #f9f9f9;
border-top: 5px solid #A51D1D;
}
.logo {
background: url(../../img/logo.png);
font: 0/0 arial;
height: 75px;
width: 58px;
}
.ui-footer {
background: #A51D1D;
}
» jQuery Mobile
E SUA APLICAÇÃO FICA ASSIM
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
Todos os direitos reservados.
» jQuery Mobile
WIDGETS
De forma simples, prática e rápida podemos enriquecernossa aplicação com o uso dos Widgets.
Caixas de diálogo
Elementos de formulário
Navbar
Transições
...
» jQuery Mobile
CÓDIGO - NAVBAR
<div data-role="navbar" data-grid="d">
<ul>
<li><a href="#" class="ui-btn-active">sobre</a></li>
<li><a href="#">inscrições</a></li>
<li><a href="#">programação</a></li>
</ul>
</div>
» jQuery Mobile
E LÁ VEM ELE...
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
sobre inscrições programação
Todos os direitos reservados.
» jQuery Mobile
WIDGETS
E navegação, como funciona se eu precisar de modais, alertasou simples links?
Ah! E como eu faço a mágica das animações?
» jQuery Mobile
CÓDIGO - NAVEGAÇÃO
<div data-role="navbar" data-grid="d">
<ul>
<li><a href="index.html" class="ui-btn-active">sobre</a></li>
<li><a href="inscricoes.html" data-rel="dialog" data-transition="pop">inscrições</a></li>
<li><a href="programacao.html" data-transition="flow">programação</a></li>
</ul>
</div>
» jQuery Mobile
E LÁ VEM ELE...
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
sobre inscrições programação
Todos os direitos reservados.
» jQuery Mobile
WIDGETS
Beleza, mas agora eu preciso de um formulário de contato, eai?
E outra, eu gostaria que ele aparecesse diferente na tela...
» jQuery Mobile
CÓDIGO - PAINEL<div data-role="page">
<div data-role="panel" id="contato">
/*Form*/
</div>
<!-- header -->
<!-- content -->
<!-- footer -->
</div>
» jQuery Mobile
CÓDIGO - FORM<form> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" />
<label for="email">Email:</label> <input type="email" name="email" id="email" data-clear-btn="true" />
<label for="select">Motivo do contato:</label> <select name="select" id="select" data-native-menu="false"> <option>Selecione uma opção</option> <option value="1">Dúvidas</option> <option value="2">Sugestões</option> </select>
<label for="textarea">Escreva sua mensagem:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
<input type="submit" value="Enviar"></form>
» jQuery Mobile
E DESSA VEZ O QUE TEMOS...
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
sobre inscrições programação
Dúvidas?
Todos os direitos reservados.
» jQuery Mobile
WIDGETS
Bacana, e agora mais alguma maneira de "esconder" oconteúdo?
» jQuery Mobile
CÓDIGO - COLLAPSIBLE<div data-role="page">
<div data-role="content">
<p class="desc-evento"><em>Programação!</em></p>
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="c" data-content-theme="d">
<h4>8h30</h4>
<p>Checkin</p>
</div>
<div data-role="collapsible" data-theme="c" data-content-theme="d">
<h4>9h00</h4>
<p>Dissecando sua aplicação com Chrome Dev Tools</p>
</div>
</div>
</div>
</div>
» jQuery Mobile
SIMPLES E DIRETO...
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
Todos os direitos reservados.
sobre inscrições programação
Dúvidas?
» jQuery Mobile
JAVASCRIPT
E o JavaScript, onde e como a gente utiliza?
» jQuery Mobile
CÓDIGO - CHAMADA
<script src="../jquery-1.9.1.min.js"></script>
<script src="jquery.configs.js"></script>
<script src="../mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
» jQuery Mobile
CÓDIGO - JQUERY.CONFIGS.JS
$(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = "flip";
});
» jQuery Mobile
E O PADRÃO DE NAVEGAÇÃO DO SISTEMA MUDA...
Segunda edição do maior evento deJavascript do sul do país.
Confira o sucesso da primeira edição egaranta o quanto antes a sua inscrição.
Todos os direitos reservados.
sobre inscrições programação
Dúvidas?
» jQuery Mobile
JAVASCRIPT
Os eventos são outro ponto simples de trabalhar e modificarna aplicação.
Touch
Orientation
Scroll
...
» jQuery Mobile
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);
});
}
})
})
» jQuery Mobile
CÓDIGO - GRID
<div data-role="content">
<div class="ui-grid-a" id="portrait">
<div class="ui-block-a box">Orientation</div>
<div class="ui-block-b box">Portrait</div>
</div>
<div class="ui-grid-c" id="landscape">
<div class="ui-block-a box">Orientation</div>
<div class="ui-block-b box">Landscape</div>
<div class="ui-block-c box">Orientation</div>
<div class="ui-block-d box">Landscape</div>
</div>
</div>
» jQuery Mobile
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.
Todos os direitos reservados.
sobre inscrições programação
Dúvidas?
» jQuery Mobile
ABRA A SUA MENTE
Com a manipulação dos eventos podemos por exemplocarregar um JSON com mais dados para uma orientation.
Ou para um breakpoint específico.
» jQuery Mobile
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
» jQuery Mobile
DÚVIDAS? SUGESTÕES OU DOAÇÕES...
» jQuery Mobile
OBRIGADO!!!
Material disponível em:
www.zigolis.com.br/rsjs/