Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

JQuery Mobile

410 visualizaciones

Publicado el

Basic presentation about JQuery Mobile and its features.

Publicado en: Móvil
  • Sé el primero en comentar

JQuery Mobile

  1. 1. Diego A. Lusa - 2014
  2. 2. Agenda •Sobre JQuery Mobile •Funcionamento •Estrutura básica •Temas •Eventos •Exemplo prático
  3. 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. 4. Um pouco sobre JQuery Mobile •A versão estável mais atual é a 1.4.4 •O site oficial é http://jquerymobile.com/
  5. 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. 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. 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. 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. 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. 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. 11. JQuery Mobile – Estrutura básica
  12. 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. 13. JQuery Mobile – Estrutura básica •Dentro do elemento definido como “page” criam-se três containers específicos: header main footer
  14. 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. 15. JQuery Mobile - Criando Dialogs •Deve-se utilizar o atributo data-dialog=”true” para gerar o efeito de uma caixa de diálogo.
  16. 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. 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. 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. 19. JQuery Mobile – Codificando...
  20. 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. 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. 22. OBRIGADO PELA ATENÇÃO

×