Heraldo Gonalves Lima JuniorEudis Oliveira Teixeira1Porqu 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, 20112Como desenvolver um site mobile? Osusurios 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 fromMobile," 20113O jQuery Mobile Um sistema de interface unificada, baseadaem HTML5. Para usurios de todas asplataformas populares de dispositivos mveis,construdo sobre as slidas fundaes jQuerye jQuery UI. Tem um design flexvel,facilmente personalizvel. Escrever menos, fazer mais4Principais caractersticas Construdo no ncleo jQuery com uma sintaxe familiar e consistente, fcil aprendizagem e aproveita cdigos e padresdo 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.5Principais plataformas compatveis6Patrocinadores do projeto7Instalando o jQuery Mobile8 Page Title

[Bloco de cdigos html JQM]

Pginas Anatomia de uma pgina9 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 pginaem 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-page10 Um nico documento HTML pode conter vrias "pginas" que so carregados em conjunto pelo empilhamento de vrias divscom umdata-role="page. Cada "pgina" bloco precisa de uma identificao nica ( id = contato" ), que ser usado para ligar internamente as pginas ( href = "# contato" ).Pginas Estrutura Multi-page11 Voltar a pgina 1/> Pgina 1

*Desvantagem: O ttulo da pgina sempre o da primeira pgina.Pginas Estrutura Multi-page12 data-title = Pgina 1 Colocando este atributo em cada div com o atributo data-role="page" far com que cada pgina tenha o seu ttulo especfico. Ex: Temas de pginas13 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 data-theme="b" para a div da pgina bem como para o cabealho e rodap.Temas de pginas14Tema ATema PadroTemas de pginas15Tema CTema BTemas de pginas16Tema ETema DBotes17 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 . Link button Elementos de formulrios dos tipos input: reset, button, image, etc. sero convetidosautomaticamente em botes. Input type="button Input type="submit Input type="reset Input type="imageBotes - cones18 Um cone pode ser adicionado a um boto adicionando o atributo data-icon na ncora especificando o cone a exibir. Por exemplo: Delete Para alterar o posicionamento do cones se adiciona o atributo data-iconposao 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.Botes em Linha19 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.Barras de Ferramentas20Barras de ferramentas padro:CabealhoRodap 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.Barras de Ferramentas - Cabealho21 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.

Page Title

Cabealho Adicionando botes22 Cancelar Editar Contato salvar

Cabealho Configurando botes23Mudando a cor dos botes: Cancelar Editar Contato salvar

Cabealho Posio dos botes24 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-btn-right ncora. Contedo da pgina

Rodap26 O rodap tem a mesma estrutura bsica do cabealho, s que usa o atributo data-role com o valor de footer. Footer content

Rodap Adicionando botes27 Para incluir o preenchimento na barra, de forma mais organizada, adicione a class = "ui-bar" ao rodap. Remover Adicionar Up de Down

Isto cria uma barra de ferramentas com cones organizados em fileira:Rodap Adicionando botes28 Para agrupar um conjunto de botes, enrole os links em uma div com os atributos data-role="controlgroup e data-type="horizontal". Isto cria um conjunto agrupado de botes:Navbar (Barras de Navegao)29 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 envoltospor 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:

One

Two

Navbar (Barras de Navegao)30 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: cones em Navbars31 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=bottomao 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.Navbars em Cabealhos e Rodaps32 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.

ou