O documento apresenta uma introdução ao framework JQuery Mobile, descrevendo sua estrutura, temas, eventos e exemplos práticos. É destacado que se trata de uma biblioteca para criação de interfaces responsivas em múltiplos dispositivos, baseada em HTML5, CSS e Javascript. Sua estrutura básica utiliza containers como header, main e footer dentro de páginas definidas por data-role="page".

1. Diego A. Lusa - 2014

2. Agenda
•Sobre JQuery Mobile
•Funcionamento
•Estrutura básica
•Temas
•Eventos
•Exemplo prático

3. 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

4. Um pouco sobre JQuery Mobile
•A versão estável mais atual é a 1.4.4
•O site oficial é http://jquerymobile.com/

5. 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

6. 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.

7. 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.

8. 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/

9. 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

10. 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

11. JQuery Mobile – Estrutura básica

12. 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>.

13. JQuery Mobile – Estrutura básica
•Dentro do elemento definido como “page” criam-se três containers específicos:
header
main
footer

14. 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

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

16. 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

17. 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

18. 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.)

19. JQuery Mobile – Codificando...

20. 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/

21. Contatos
•Linkedin
–br.linkedin.com/in/diegolusa/
•Facebook
–https://pt-br.facebook.com/diego.lusa
•Lattes
–http://lattes.cnpq.br/2284574291171229
•E-mail
–83473@upf.br

22. OBRIGADO PELA ATENÇÃO