JQuery Mobile

download JQuery Mobile

of 22

  • date post

    04-Jun-2015
  • Category

    Mobile

  • view

    82
  • download

    0

Embed Size (px)

description

Basic presentation about JQuery Mobile and its features.

Transcript of JQuery Mobile

  • 1. Diego A. Lusa - 2014

2. AgendaSobre JQuery MobileFuncionamentoEstrutura bsicaTemasEventosExemplo prtico 3. Um pouco sobre JQuery Mobile um framework baseado em HTML5, Javascript e CSS, voltado a criao de interfaces responsivas para vrios dispositivosMantido pela JQuery FoundationJQueryJQuery UIQUnitProjeto open source 4. Um pouco sobre JQuery MobileA verso estvel mais atual a 1.4.4O site oficial http://jquerymobile.com/ 5. JQuery Mobile Compatibilidade (1.4)Recursos TotaisExperincia aprimorada, mas sem navegao por AjaxSuporte bsico, mas funcionalApple iOS 4-7.0Android 4.4 (KitKat)Android 4.1-4.3 (Jelly Bean)Android 4.0 (ICS)Android 3.2 (Honeycomb)Android 2.1-2.3Windows Phone 7.5-8Blackberry 6-10Blackberry Playbook (1.0-2.0)Palm WebOS (1.4-3.0)Firefox Mobile 18Chrome for Android 18Skyfire 4.1Opera Mobile 11.5-12Meego 1.2TizenSamsung Bada 2.0UC BrowserKindle 3, Fire, and Fire HDNook Color 1.4.1Chrome Desktop 16-24Safari Desktop 5-6Firefox Desktop 10-18Internet Explorer 8-10Opera Desktop 10-12Opera Mini 7Nokia Symbian^3Internet Explorer 7 e mais antigosApple iOS 3.x e mais antigosBlackberry 4-5Windows MobilePlataformas antigas 6. JQuery Mobile - Licena concedido uso sob a licena MITPode-se utilizar o software para projetos proprietriosO software desenvolvido permanece proprietrioNo necessrio distribuir verses do cdigo de forma abertaFonte: Arantes, C. A. Comparativo de Licenas de Cdigo Aberto. Belo Horizonte, 2009.Disponvel em . Acesso em: 23 out. 2014. 7. Custom Data AttributesForam criados na especificao do HTML5Tem por objetivo transportar alguma semntica para a aplicao, mas nenhum sentido/efeito para o browserTodos os atributos custom devem ser prefixados com data- e no podem conter nenhum caractere em caixa alta. 8. Custom Data AttributesO 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 bsica preciso iniciar o site com a doctype HTML5No head do HTML necessrio referenciar o Javascript e CSS usados pelo framework 10. JQuery Mobile Estrutura bsicaNo head do HTML preciso adicionar a tag meta, configurando o viewportConfigura as dimensesNvel de zoom inicial 11. JQuery Mobile Estrutura bsica 12. JQuery Mobile Estrutura bsicaDentro da tag body do HTML configuram-se as vises ou pginas que iro compor o aplicativo. possvel configurar uma ou vrias vises em um mesmo arquivo HTML.Toda viso identificada pelo atributo data- role=page, geralmente colocada numa tag

. 13. JQuery Mobile Estrutura bsicaDentro do elemento definido como page criam-se trs containers especficos:headermainfooter 14. JQuery Mobile Estrutura bsicadata-role="page" a pgina que ser exibida no web browserdata-role=header"Cria uma barra de ferramentas no topo da pginadata-role="main"Define o contedo da pginadata-role=footer"Cria uma barra de ferramentas na parte inferior da pgina 15. JQuery Mobile - Criando DialogsDeve-se utilizar o atributo data-dialog=true para gerar o efeito de uma caixa de dilogo. 16. JQuery Mobile - Efeitos de TransioConfigurados atravs do atributo data-transitionO atributo data-direction="reverse" inverte o sentido do efeitoAplica-se a transio para pages e dialogsAlguns efeitos:fade, flip, flow, slide, slidefade, slideup, turn, none 17. JQuery Mobile - Criando TemasPode-se customizar a aparncia visual dos elementosA ferramenta ThemeRoller pode ser utilizada para tal: http://themeroller.jquerymobile.com/Criado o tema, basta baixar o novo arquivo css e utiliz-loUtilizar o atributo data-theme 18. JQuery Mobile - EventosTodos os eventos da API JQueryE eventos especficos, comoToqueScrollRotaoEventos de pgina (criada, escondida, etc.) 19. JQuery Mobile Codificando... 20. Links teishttp://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. ContatosLinkedinbr.linkedin.com/in/diegolusa/Facebookhttps://pt-br.facebook.com/diego.lusaLatteshttp://lattes.cnpq.br/2284574291171229E-mail83473@upf.br 22. OBRIGADO PELA ATENO