Por: / Gabriel Zigolis @zigolis
Desenvolvimento ágil com jQuery Mobile
May 26, 2015
Apresentação sobre desenvolvimento ágil com jQuery Mobile no RSJS 2013 por Gabriel Zigolis
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
» 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/
Related Documents
