JQuery Mobile

22
Diego A. Lusa - 2014

description

Basic presentation about JQuery Mobile and its features.

Transcript of JQuery Mobile

Page 1: JQuery Mobile

Diego A. Lusa - 2014

Page 2: JQuery Mobile

Agenda

• Sobre JQuery Mobile

• Funcionamento

• Estrutura básica

• Temas

• Eventos

• Exemplo prático

Page 3: JQuery Mobile

Um pouco sobre JQuery Mobile

• É um framework baseado em HTML5, Javascript e CSS, voltado a criação de interfaces responsivas para vários dispositivos

• Mantido pela JQuery Foundation

– JQuery

– JQuery UI

– QUnit

• Projeto open source

Page 4: JQuery Mobile

Um pouco sobre JQuery Mobile

• A versão estável mais atual é a 1.4.4

• O site oficial é http://jquerymobile.com/

Page 5: JQuery Mobile

JQuery Mobile – Compatibilidade (1.4) Recursos Totais Experiência aprimorada, mas sem

navegação por Ajax Suporte básico, mas funcional

Apple iOS 4-7.0 Android 4.4 (KitKat) Android 4.1-4.3 (Jelly Bean) Android 4.0 (ICS) Android 3.2 (Honeycomb) Android 2.1-2.3 Windows Phone 7.5-8 Blackberry 6-10 Blackberry Playbook (1.0-2.0) Palm WebOS (1.4-3.0)

Firefox Mobile 18 Chrome for Android 18 Skyfire 4.1 Opera Mobile 11.5-12 Meego 1.2 Tizen Samsung Bada 2.0 UC Browser Kindle 3, Fire, and Fire HD Nook Color 1.4.1 Chrome Desktop 16-24 Safari Desktop 5-6 Firefox Desktop 10-18 Internet Explorer 8-10 Opera Desktop 10-12

Opera Mini 7 Nokia Symbian^3

Internet Explorer 7 e mais antigos Apple iOS 3.x e mais antigos Blackberry 4-5 Windows Mobile Plataformas antigas

Page 6: JQuery Mobile

JQuery Mobile - Licença

• É concedido uso sob a licença MIT

– Pode-se utilizar o software para projetos proprietários

– O software desenvolvido permanece proprietário

– Não é necessário distribuir versões do código de forma aberta

Fonte: Arantes, C. A. Comparativo de Licenças de Código Aberto. Belo Horizonte, 2009.

Disponível em <http://homepages.dcc.ufmg.br/~alison/Monografia_Especializacao_Comparativo_licencas_codigo_aberto.pdf>. Acesso em: 23 out. 2014.

Page 7: JQuery Mobile

Custom Data Attributes

• Foram criados na especificação do HTML5

• Tem por objetivo transportar alguma semântica para a aplicação, mas nenhum sentido/efeito para o browser

• Todos os atributos custom devem ser prefixados com data- e não podem conter nenhum caractere em caixa alta.

Page 8: JQuery Mobile

Custom Data Attributes

• O desenvolvimento de interfaces com JQuery Mobile utiliza atributos data-*

• A lista com todos os atributos data-* utilizados podem ser encontrados em http://api.jquerymobile.com/data-attribute/

Page 9: JQuery Mobile

JQuery Mobile – Estrutura básica

• É preciso iniciar o site com a doctype HTML5

• No head do HTML é necessário referenciar o Javascript e CSS usados pelo framework

Page 10: JQuery Mobile

JQuery Mobile – Estrutura básica

• No head do HTML é preciso adicionar a tag meta, configurando o viewport

– Configura as dimensões

– Nível de zoom inicial

Page 11: JQuery Mobile

JQuery Mobile – Estrutura básica

Page 12: JQuery Mobile

JQuery Mobile – Estrutura básica

• Dentro da tag body do HTML configuram-se as visões ou páginas que irão compor o aplicativo.

• É possível configurar uma ou várias visões em um mesmo arquivo HTML.

• Toda visão é identificada pelo atributo data-role=“page”, geralmente colocada numa tag <div>.

Page 13: JQuery Mobile

JQuery Mobile – Estrutura básica

• Dentro do elemento definido como “page” criam-se três containers específicos:

header

main

footer

Page 14: JQuery Mobile

JQuery Mobile – Estrutura básica

• data-role="page"

– É a página que será exibida no web browser

• data-role=“header"

– Cria uma barra de ferramentas no topo da página

• data-role="main"

– Define o conteúdo da página

• data-role=“footer"

– Cria uma barra de ferramentas na parte inferior da página

Page 15: JQuery Mobile

JQuery Mobile - Criando Dialogs

• Deve-se utilizar o atributo data-dialog=”true” para gerar o efeito de uma caixa de diálogo.

Page 16: JQuery Mobile

JQuery Mobile - Efeitos de Transição

• Configurados através do atributo data-transition

• O atributo data-direction="reverse" inverte o sentido do efeito

• Aplica-se a transição para pages e dialogs

• Alguns efeitos:

– fade, flip, flow, slide, slidefade, slideup, turn, none

Page 17: JQuery Mobile

JQuery Mobile - Criando Temas

• Pode-se customizar a aparência visual dos elementos

• A ferramenta ThemeRoller pode ser utilizada para tal: http://themeroller.jquerymobile.com/

• Criado o tema, basta baixar o novo arquivo css e utilizá-lo

• Utilizar o atributo data-theme

Page 18: JQuery Mobile

JQuery Mobile - Eventos

• Todos os eventos da API JQuery

• E eventos específicos, como

– Toque

– Scroll

– Rotação

– Eventos de página (criada, escondida, etc.)

Page 19: JQuery Mobile

JQuery Mobile – Codificando...

Page 20: JQuery Mobile

Links Úteis

• http://api.jquerymobile.com/data-attribute/

• http://themeroller.jquerymobile.com/

• http://demos.jquerymobile.com/1.4.4/

• http://jquerymobile.com/

• http://api.jquerymobile.com/classes/

• http://www.w3schools.com/jquerymobile/

Page 22: JQuery Mobile

OBRIGADO PELA ATENÇÃO