jquery mobile
DESCRIPTION
Basic presentation about JQuery Mobile and its features.TRANSCRIPT
Diego A. Lusa - 2014
Agenda
• Sobre JQuery Mobile
• Funcionamento
• Estrutura básica
• Temas
• Eventos
• Exemplo prático
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
Um pouco sobre JQuery Mobile
• A versão estável mais atual é a 1.4.4
• O site oficial é http://jquerymobile.com/
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
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.
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.
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/
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
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
JQuery Mobile – Estrutura básica
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>.
JQuery Mobile – Estrutura básica
• Dentro do elemento definido como “page” criam-se três containers específicos:
header
main
footer
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
JQuery Mobile - Criando Dialogs
• Deve-se utilizar o atributo data-dialog=”true” para gerar o efeito de uma caixa de diálogo.
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
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
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.)
JQuery Mobile – Codificando...
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/
Contatos
• Linkedin – br.linkedin.com/in/diegolusa/
• Facebook – https://pt-br.facebook.com/diego.lusa
• Lattes – http://lattes.cnpq.br/2284574291171229
• E-mail – [email protected]
OBRIGADO PELA ATENÇÃO