Slidejquerymobile 121018223901 Phpapp02

Heraldo Gonalves Lima Junior Eudis Oliveira Teixeira
Porqu desenvolver um site mobile?

Os seus clientes j esto mobile! E voc?
At 2013 estima-se que os usurios vo usar mais os dispositivos mveis do que o PC para acessar a internet. Procura por dispositivos mveis cresceram 400% desde 2010.
Em 2015 vai haver um aparelho mvel para cada pessoa na terra.

Fontes: Gartner, 2010; Google Internal Data, 2011; Cisco, 2011
2
Como desenvolver um site mobile?

Os usurios esperam que a sua experincia mobile seja to boa como a do PC.
60% dos usurios esperam que o site carregue em 3 segundos ou menos. 71% dos usurios esperam que o site mobile carregue to rpido quanto o do PC. 78% vai voltar ao site duas vezes ou menos se este no carregar inicialmente.
Fontes: Compuware, "What Users Want from Mobile," 2011
O jQuery Mobile
Um sistema de interface unificada, baseada em HTML5. Para usurios de todas as plataformas populares de dispositivos mveis, construdo sobre as slidas fundaes jQuery e jQuery UI. Tem um design flexvel, facilmente personalizvel.
Escrever menos, fazer mais

4
Principais caractersticas
Construdo no ncleo jQuery com uma sintaxe familiar e consistente, fcil aprendizagem e aproveita cdigos e padres do jQuery UI.
Compatvel com todos as plataformas
Tamanho leve
Baseado em HTML5 e CSS3 Poderoso Ajax-powered sistema de navegao para permitir transies de pgina animadas. Acessibilidade, recursos como WAI-ARIA tambm so includos para assegurar que as pginas funcionam para leitores de tela (por exemplo, o VoiceOver no iOS) e outras tecnologias assistidas.
Principais plataformas compatveis
Patrocinadores do projeto
Instalando o jQuery Mobile

<html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> [Bloco de cdigos html JQM] </body> </html>
Pginas Anatomia de uma pgina

<meta name="viewport" content="width=device-width, initial-scale=1"> especifica como o navegador deve exibir o nvel de zoom da pgina e suas dimenses. Se isso no for definido, muitos navegadores mveis iro utilizar uma largura de pgina em torno de 900px. Ao definir os atributos de viewport para content="width=device-width, initial-scale=1" , a largura ser definida para a largura de pixels da tela do dispositivo. Essas configuraes no desativam a capacidade do usurio para fazer zoom das pginas, o que bom do ponto de vista da acessibilidade.
Pginas Estrutura Multi-page

Um nico documento HTML pode conter vrias "pginas" que so carregados em conjunto pelo empilhamento de vrias divs com um data-role="page. Cada "pgina" bloco precisa de uma identificao nica ( id = contato" ), que ser usado para ligar internamente as pginas ( href = "# contato" ).
10

<div data-role="page" id=pagina1"> <p/> Ir para a pgina 2<p/> <a href="#pagina2"> Pgina 2 </a> </div> <div data-role="page" id=pagina2"> <p/> Voltar a pgina 1/> <a href="#pagina1"> Pgina 1 </a> </div>
*Desvantagem: O ttulo da pgina sempre o da primeira pgina.

11

data-title = Pgina 1
Colocando este atributo em cada div com o atributo datarole="page" far com que cada pgina tenha o seu ttulo especfico.
Ex: <div data-role="page" data-title=Pgina 2 id="pagina2" >
12
Temas de pginas
O atributo data-theme pode ser aplicado para os recipientes cabealho, rodap, contedo ou a div que compreende a pgina toda, que possui o atributo data-role=page, para garantir que a cor de fundo ser aplicada pgina completa. Quando isso feito, todos os widgets na pgina tambm iro herdar o tema especificado no recipiente da pgina. No entanto, os cabealhos e rodaps sero padro para o tema "a". Se voc quer ter uma pgina com, por exemplo, apenas o tema "b" para todos os seus elementos, incluindo o seu cabealho e rodap, voc ter que especificar datatheme="b" para a div da pgina bem como para o cabealho e rodap.
13
Temas de pginas
Tema Padro
Tema A
14
Temas de pginas
Tema B
Tema C
15
Temas de pginas
Tema D
Tema E
16
Botes
Botes so atribudos a links html. Podem ser apenas botes de links ou inputs de formulrios. No contedo de uma pgina, voc pode estilizar qualquer link ncora como um boto, adicionando o atributo data-role="button . <a href="index.html" data-role="button">Link button</a>
Elementos de formulrios dos tipos input: reset, button, image, etc. sero convetidos automaticamente em botes. Input type="button Input type="submit Input type="reset Input type="image
17
Botes - cones
Um cone pode ser adicionado a um boto adicionando o atributo data-icon na ncora especificando o cone a exibir. Por exemplo: <a href="index.html" data-role="button" data-icon="delete">Delete</a>
Para alterar o posicionamento do cones se adiciona o atributo data-iconpos ao link, com os valores left, right, top ou bottom, para definir se o cone ficar acima, abaixo ou a direita. Por padro o cone fica a esquerda do ttulo.
18
Botes em Linha
Por padro os botes no corpo do documento so determinados para preencherem toda a largura da tela:
No entanto, se voc quiser um boto mais compacto, que seja to grande quanto o texto e cone dentro, adicione o atributo data-inline="true" para o boto:
Se voc tem vrios botes e quer que eles fiquem lado a lado na mesma linha, adicione o atributo data-inline="true" para cada boto.
19
Barras de Ferramentas
Barras de ferramentas padro: Cabealho Rodap As barras de ferramentas utilizam o posicionamento inline por padro. O modo de posicionamento fixed faz com que as barras de ferramentas fiquem sempre fixas nas suas posies na tela. Para adicionar este comportamento pgina, adicione o atributo data-position=fixed.
20
Barras de Ferramentas - Cabealho

O cabealho uma barra de ferramentas na parte superior da pgina, que normalmente contm o texto do ttulo da pgina e botes opcionais posicionados esquerda e/ou direita do ttulo para a navegao ou aes. O texto do ttulo normalmente um elemento H1 ttulo, mas possvel usar qualquer nvel de ttulo (H1-H6) para permitir a flexibilidade semntica. <div data-role="header"> <h1>Page Title</h1> </div>
21
Cabealho Adicionando botes

<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete"> Cancelar </a> <h1> Editar Contato </h1> <a href="index.html" data-icon="check"> salvar </a> </div>
22
Cabealho Configurando botes

Mudando a cor dos botes: <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete"> Cancelar </a> <h1> Editar Contato </h1> <a href="index.html" data-icon="check" data-theme="b"> salvar </a> </div>
23
Cabealho Posio dos botes

A posio do boto tambm pode ser controlada pela adio de classes para as ncoras do boto, em vez de confiar na ordem de origem. Isto especialmente til se voc quer apenas um boto no canto direito por exemplo. Para especificar a posio do boto, adicione a classe de ui-btn-left ou ui-btnright ncora.
<div data-role="header" data-position="inline> <h1>Page Title</h1> <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a> </div>
24
Corpo
Todo o contedo da pgina fica dentro da div com o atributo datarole=content. <div data-role=content"> Contedo da pgina </div>
25
Rodap
O rodap tem a mesma estrutura bsica do cabealho, s que usa o atributo data-role com o valor de footer. <div data-role="footer"> <h4>Footer content</h4> </div>
26
Rodap Adicionando botes

Para incluir o preenchimento na barra, de forma mais organizada, adicione a class = "uibar" ao rodap. <div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="delete"> Remover </a> <a href="index.html" data-role="button" data-icon="plus"> Adicionar </a> <a href="index.html" data-role="button" data-icon="arrow-u"> Up </a> <a href="index.html" data-role="button" data-icon="arrow-d"> de Down </a> </ div> Isto cria uma barra de ferramentas com cones organizados em fileira:
27
Rodap Adicionando botes

Para agrupar um conjunto de botes, enrole os links em uma div com os atributos datarole="controlgroup e data-type="horizontal". <div data-role="controlgroup" data-type="horizontal"> Isto cria um conjunto agrupado de botes:
28
Navbar (Barras de Navegao)

O jQuery Mobile tem um widget de barra de navegao bsico que til para fornecer at 5 botes com cones opcionais, normalmente dentro de um cabealho ou rodap. A barra de navegao codificada como uma lista de links desordenados envoltos por uma div que possui o atributo data-role="navbar". Para definir um dos links para o estado ativo (selecionado), adicione a classe class="ui-btn-active" para o link. Neste exemplo, temos uma barra de navegao de dois botes no rodap com o item One definido como ativo:
<div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div>
29
Navbar (Barras de Navegao)

Adicionando um terceiro item, automaticamente cada boto ocupar 1/3 da largura da janela do navegador: Adicionando um quarto, cada boto ocupe 1/4 da largura da janela do navegador:
Se a barra de navegao possuir at 5 itens, eles se organizaro igualmente em uma nica linha, como nos exemplos anteriores. Se forem mais de cinco itens, a navbar vai quebrar em mais de uma linha:
30
cones em Navbars
cones podem ser adicionados aos itens da navbar adicionando o atributo data-icon especificando um determinado cone ao link. Por padro, os cones so adicionados acima do texto ( data-iconpos="top" ).
A posio do cone definida no recipiente navbar em, e no em links individuais. Por exemplo, para colocar os cones abaixo dos ttulos, adicione o atributo data-iconpos=bottom ao recipiente navbar.
A posio de cone pode ser definido como data-iconpos=left :
Ou a posio de cone pode ser configurada para data-iconpos=right :
Todas essas instrues tambm se aplicam a botes de links ou elemento de formulrios, no a penas a navbars.
31
Navbars em Cabealhos e Rodaps

Se voc quiser adicionar uma barra de navegao no topo da pgina ou no rodap, basta adicionar o recipiente navbar dentro do bloco de cabealho ou rodap. <div data-role=header"> <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> </div>
32
Contedo Dobrvel
Para criar um bloco de contedo dobrvel, adicione o atributo data-role="collapsible" a uma div. O atributo data-content-theme permite que voc defina um tema para o contedo desta div. Dentro desta div, adicione um elemento de cabealho (H1-H6), este elemento ser exibido com um boto clicvel e possuir um cone "+" a esquerda para indicar que expansvel. Aps o cabealho, adicionar qualquer marcao HTML que voc quer que seja desmontvel. O quadro vai quebrar essa marcao em um recipiente que ser escondido/mostrado quando o ttulo clicado.
<div data-role="collapsible" data-theme="a" data-content-theme="a"> <h3>Header swatch A</h3> <p>I'm the collapsible content with a themed content block set to "A".</p> </div>
33
Contedos Dobrveis(Acordees)
Conjuntos de contedos dobrveis comeam com a mesma marcao exata dos collapsibles individuais . Ao adicionar uma div pai com o atributo data-role="collapsible-set" em torno de vrias collapsibles, todas passaro a ser visualmente agrupadas e se comportaro como um acordeo, onde apenas uma seo pode ser aberta de cada vez.
<div data-role="collapsible-set data-theme="c" data-content-theme="d"> <div data-role="collapsible> <h3>Section 1</h3> <p>I'm the collapsible set content for section B.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>I'm the collapsible set content for section B.</p> </div> </div>
34
Listas
exibida como uma simples lista ordenada contendo itens ligados com o atributo data-role="listview".O jQuery Mobile ir aplicar todos os estilos necessrios para transformar a lista em uma exibio de lista mvel amigvel com indicador de seta para a direita e que preenche toda a largura da janela do navegador. Veja todos os atributos de lista disponveis na documentao do jQuery Mobile.
<ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
35
Links Links com Ajax(padro)

Para permitir transies de pgina animados, todos os links que apontam para uma pgina externa (ex. products.html) ser carregado via Ajax. Se a solicitao Ajax bem sucedido, o contedo da nova pgina adicionado ao DOM(modelo de objeto de documento), todos os widgets mveis so auto-inicializado, ento a nova pgina colocada em exibio com uma transio de pgina. Se o pedido Ajax falhar, o quadro ir visualizar uma mensagem de erro pequena, que desaparece aps um breve perodo de tempo para que isso no quebre o fluxo de navegao.
36
Links Links com Ajax(padro)

*Obs.: No se pode ligar links a pginas de estrutura Multi-page
utilizando Ajax, porque ao abrir um documento desse tipo s a primeira pgina carregada com o recurso, e no o conjunto completo de pginas internas. Nestes casos, voc deve ligar sem Ajax, para uma atualizao de pgina inteira para evitar possveis erros.
Alguns navegadores apresentam incompatibilidade ao utilizar o Ajax.
37
Links Sem Ajax

Links que apontam para outros domnios ou que tm rel = "external", data-ajax = "false" ou target no sero carregados com o Ajax. Em vez disso, estes links causam uma atualizao de pgina inteira, sem transio animada. Ambos os atributos ( rel = "external" e data-ajax = "false" ) tm o mesmo efeito, mas um significado semntico diferente: rel = "external" deve ser usado quando o link aponta para outro site ou domnio, enquanto data-ajax = "false" til para apontar uma pgina dentro do seu prprio domnio sem ser carregado via Ajax.
38
Links Sem Ajax

Ex: <a href=www.ifsertao-pe.edu.br" rel="external"> ou
<a href="contato.html data-ajax=false>
*Obs.: Ao construir uma aplicao jQuery Mobile, onde o

sistema de navegao global Ajax est desativado ou frequentemente desativado em links individuais, recomendase desabilitar a a funo nas configuraes padres do jQuery mobile, para evitar o comportamento de navegao inconsistente em alguns navegadores.
39
Links Boto voltar

Se voc usar o atributo data-rel = back" em uma ncora, cliques sobre essa ncora vo imitar o boto voltar, voltando uma entrada do histrico, ignorando o href da ncora padro. Certifique-se de ainda fornecer um valor significativo que realmente aponta para a URL da pgina de referncia para que o recurso funcione para que no haja incompatibilidade com nenhum navegador.
40
Transio de pginas
O jQuery Mobile inclui um conjunto de seis efeitos baseados em CSS de transio que podem ser aplicadas a qualquer link da pgina ou envio de formulrio com navegao Ajax : Slide Slideup Slidedown Pop Fade Flip
Obs.: A transio flip no processadoa

corretamente na maioria das verses do Android. Recomenda-se usar esta transio com moderao.
41
Transio de pginas
Por padro, se aplica a transio slide da direita para a esquerda.Para definir um efeito de transio personalizada, adicione o atributo data-transition para o link. <a href="index.html" data-transition="pop"> pop</a> Quando o boto Voltar for pressionado, o quadro aplicar automaticamente a verso inversa da transio que foi usada para mostrar a pgina. Para especificar que a verso inversa de uma transio deve ser usada, adicione o atributo datadirection="reverse para um link.
42
Dilogos
Qualquer pgina pode ser apresentada como um dilogo modal, adicionando o atributo data-rel="dialog" para o link da pgina. Quando o atributo de "dilogo" aplicado, a estrutura adiciona estilos para adicionar cantos arredondados, margens em torno da pgina e um fundo escuro para fazer o "dilogo" parecer ser suspensa, acima da pgina. <a href=contato.html" data-rel="dialog>Abrir contato</a>
43
Dilogos - Transies
Por padro, a caixa de dilogo ser aberta com uma transio 'pop'. Como todas as pginas, voc pode especificar qualquer transio de pgina que voc quer na caixa de dilogo, adicionando o atributo data-transition para o link.
<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
44
Dilogos - Temas
Dilogos podem ser decorados com temas diferentes, como qualquer pgina, adicionando o atributo data-theme para o cabealho, contedo, ou rodap.
45
Formulrios
Todos os formulrios devem ser envoltos por uma tag form que tem uma ao e mtodo que ir lidar com a forma de processamento dos dados no servidor.
<form action="form.php" method="post"> ... </Form>
Entradas de texto <input type="text" name="nome" id="basic" value="" /> Podem ser do tipo text, password, etc. De acordo com os tipos do HTML 5
46
Formulrios
Textarea <textarea name="textarea" id="textarea-a"> .......</ Textarea> Barra de Pesquisa <input type="search" name="search" id="searc-basic" value=""/>
Slide <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5"/>
47
Formulrios
Interruptor <select name="slider" id="flip-a" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
Radio vertical
<fieldset data-role="controlgroup"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> Cat </ label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice2"> Dog </ label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice3"> Hamster </ label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /></fieldset>
48
Formulrios
Radio horizontal
Basta colocar o <fieldset data-role="controlgroup" data-type="horizontal" >
<div data-role="fieldcontain"> - Organiza os elementos do formulrio de forma mais compacta.

49
Formulrios
Checkboxes
<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom"/> <label for="checkbox-0">I agree</label>
Menus de Seleo
<label for="select-choice-0" class="select">Shipping method:</label> <select name="select-choice-0" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select> 50
Referncias
jQuery Mobile Documentation Disponvel em: http://jquerymobile.com/. Acesso em 12 Out de 2012. Porqu desenvolver um site mobile? Disponvel em: http://www.gestordeconteudos.com/Mobile/Porqu%C3%AAdesenvolverumsitemobile/tabid/4 109/Default.aspx . Acesso em 10 out de 2012.
Falando de jQuery Mobile Disponvel em: http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile Acesso em 12 Out de 2012.
51
Obrigado pela ateno!

Contato: Heraldo Gonalves
Heraldo.info@gmail.com Facebook.com/heraldo.info
Eudis Teixeira
Eudisnet@gmail.com
52

Slidejquerymobile 121018223901 Phpapp02

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Slidejquerymobile 121018223901 Phpapp02

Загружено:

Авторское право:

Доступные форматы

Heraldo Gonalves Lima Junior Eudis Oliveira Teixeira

Porqu desenvolver um site mobile?

Em 2015 vai haver um aparelho mvel para cada pessoa na terra.

Como desenvolver um site mobile?

Escrever menos, fazer mais

Principais plataformas compatveis

Instalando o jQuery Mobile

Pginas Anatomia de uma pgina

Pginas Estrutura Multi-page

Pginas Estrutura Multi-page

*Desvantagem: O ttulo da pgina sempre o da primeira pgina.

Pginas Estrutura Multi-page

Barras de Ferramentas - Cabealho

Cabealho Adicionando botes

Cabealho Configurando botes

Cabealho Posio dos botes

Rodap Adicionando botes

Rodap Adicionando botes

Navbar (Barras de Navegao)

Navbar (Barras de Navegao)

A posio de cone pode ser definido como data-iconpos=left :

Ou a posio de cone pode ser configurada para data-iconpos=right :

Navbars em Cabealhos e Rodaps

Links Links com Ajax(padro)

Links Links com Ajax(padro)

Links Sem Ajax

Links Sem Ajax

*Obs.: Ao construir uma aplicao jQuery Mobile, onde o

Links Boto voltar

Obs.: A transio flip no processadoa

Slide <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5"/>

<div data-role="fieldcontain"> - Organiza os elementos do formulrio de forma mais compacta.

Falando de jQuery Mobile Disponvel em: http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile Acesso em 12 Out de 2012.

Obrigado pela ateno!

Вам также может понравиться