1# Revisão – Jquery Mobile e Phonegap

Postado em por

0

O Jquery Mobile criar sites em formato especifico para smartphone e tablets, já o Phonegap empacota qualquer site em aplicativo e o html5 possibilita que tudo isso aconteça.

Analisando o contexto de criar aplicativos com Jquery Mobile e phonegap, chegamos a seguinte conclusão: Esse método é a maneira mais fácil, rápida e rentável de construir um aplicativo multi-plataforma para celulares.

#1 Aula – Introdução ao Jquery Mobile e Phonegap.

 
O Jquery mobile mostrou ao mundo os sites responsivos, que por sua vez, se adapta a vários tamanhos de telas existentes no mercado, e hoje, muitos sites tem aderido a essa prática modelística de sites para compor a grande demanda de Smartphones no mercado que já supera as demandas de notebooks e desktop’s, Ou seja, é mais provável que um site seja visualizado em um celular do que em um Computador comum, e é ai que essa tecnologia se torna útil.
Existem empresas que pagam valores exorbitantes para terem um aplicativo próprio ou apenas um site em interface mobile, já que é  encarado como um procedimento difícil, mas graças a biblioteca do Phonegap, esse procedimento deixou de ser tão complexo e ficou dependente apenas dos códigos do html5.
O Phonegap se encarrega de criar a interface para rodar seu site como um aplicativo, e sua função e execução ficou absurdamente fácil desde que foi totalmente incorporado ao Adobe Dreamweaver CS6, fazendo o empacotamento do seu site nas nuvens para qualquer plataforma mobile, sem a necessidade de ter um Kit de desenvolvedor ou SDK instalados.
            build.phonegap.com
             Adobe Dreamweaver

#2 Aula- Iniciando a construção do site mobile

 
A praticidade que o Dreamweaver CS6 oferece para a construção de códigos é impar, mesmo assim, devemos ressaltar que o minimo descuido dos códigos podem gerar atritos no projeto final, ou seja, qualquer ponto errado ou excluído acidentalmente pode comprometer a integridade do aplicativo na hora do empacotamento. Para fugir desse problema, devemos nos adaptar com os códigos do jquery mobile em camadas, por exemplo:
Um html comum tem essa estrutura.
<html>
<head>
</head>
<body>
</body>
</head>
Assim como o corpo humano, os códigos tem suas estruturas quase esqueléticas. Observe que são três tipos de tag’s, html, cabeça e corpo, e outras 3, sendo seguidas por tag’ com travessão (/).
Quando se ver uma tag com travessão, quer dizer que é o final dela, por exemplo: <head>tudo que eu colocar aqui faz parte da cabeça do código</head> o que eu colocar a parti da tag com travessão não estará dentro da head.
Para a nossa alegria o Dreamweaver nos entrega todos esses códigos pré-feitos, e apenas precisamos modica-lo.
As Camadas que corresponde ao Jquery mobile são feitas na tag <div>, fazendo 3 estruturas básicas para uma página:
Página
Cabeçalho
Corpo
Rotapé
/página

#3 Aula – Criação de páginas

O jquery Mobile tem suas próprias ferramentas como botões, listview, páginas e etc, ou seja, você tem a possibilidade de criar algo realmente novo e do seu jeito.
para mais informações sobre essas ferramentas acesse: http://view.jquerymobile.com/1.3.1/dist/demos/intro/

#4 Aula – Listview e botões

 
Listview são espécie de botões que são próprios para o conteúdo mobile, podendo ser personalizado de maneiras individuais.
Esse é o site responsivo que fiz para uma empresa e que foi citado no começo da video-aula:
Esse é o site completo: http://www.lord.com.br

#5 Aula – Filtro de pesquisa

 
A ferramente de Listview do jquery mobile tem um função muito interessante para quem pretende trabalhar com catálogos que é o filtro de pesquisa.
Esse filtro pode ser alterado em nome e cor, e faz procuras rápidas, mostrando os resultados instântaneamente.

#6 Aula – Empacotando aplicativo

Finalizando o primeiro arco de aulas temos a amostra da biblioteca do phonegap, empacotando o seu site forjado em jquery mobile.