Desenvolvimento Web para Android                                #TaSafoConf #LightningTalk                                ...
Você conhece uma dessas tecnologias?                                   Formacão Completa em Android - @androidnarededoming...
Mas não sabe Android?                             Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
Calma!                                                     “Palma, palma!                                                 ...
JQuery Mobile é a Solução!                                                           jquerymobile.com                     ...
Mas não somente para Android! Para Qualquer Plataforma!                                                                   ...
Por onde começar?                             http://jquerymobile.com/demos/                                 Formacão Comp...
Estrutura básica de uma página em JQuery Mobile               <!DOCTYPE html>               <html>               ! <head> ...
Estrutura básica de uma página em JQuery Mobile         <body>           <div page-role=”page”>             <div page-role...
Estrutura básica de uma página em JQuery Mobile     <body>       <div page-role=”page”>         <div page-role=”header”>  ...
Estrutura básica de uma página em JQuery Mobile  <body>    <div page-role=”page”>      <div page-role=”header”>      </div...
Estrutura básica de uma página em JQuery Mobile    <body>      <div page-role=”page”>        <div page-role=”header”>     ...
Exemplo: Criando uma lista simples                             <body>                               <div page-role=”page”>...
Case de Exemplo                               Tá Safo! Conf 2012 Mobile                             http://tasafo.org/conf...
Mas como integrar JQuery Mobile em Android?                         Deve-se utilizar o                      componente Web...
Mas como integrar JQuery Mobile em Android?                                           Depois, devemos ativar              ...
Mas como integrar JQuery Mobile em Android?                                        Por fim, deve-se adicionar a            ...
Tá Safo! Conf 2012 para Android                       Em breve no                                Formacão Completa em Andr...
@androidnarede                             http://about.me/ramonrabello                                  Obrigado!        ...
Upcoming SlideShare
Loading in...5
×

Desenvolvimento Web para Android

2,132

Published on

Lightning Talk apresentada durante o Tá Safo! Conf 2012 - http://tasafo.org/conf2012/

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,132
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Desenvolvimento Web para Android

  1. 1. Desenvolvimento Web para Android #TaSafoConf #LightningTalk @ramonrabellodomingo, 17 de junho de 12
  2. 2. Você conhece uma dessas tecnologias? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  3. 3. Mas não sabe Android? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  4. 4. Calma! “Palma, palma! Não priemos cânico!” Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  5. 5. JQuery Mobile é a Solução! jquerymobile.com Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  6. 6. Mas não somente para Android! Para Qualquer Plataforma! ... Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  7. 7. Por onde começar? http://jquerymobile.com/demos/ Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  8. 8. Estrutura básica de uma página em JQuery Mobile <!DOCTYPE html> <html> ! <head> ! <title>Minha Página</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.css" /> ! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> ! <script src="http://code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.js"></script> </head> Primeiramente, devemos fazer referência à biblioteca do JQuery Mobile Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  9. 9. Estrutura básica de uma página em JQuery Mobile <body> <div page-role=”page”> <div page-role=”header”> Depois, definimos o corpo </div> da página, com a tag <body>. <div page- role=”content”> </div> Dentro, adicionamos o comando <div page-role=”footer”> </div> <div page-role=”page”>. </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  10. 10. Estrutura básica de uma página em JQuery Mobile <body> <div page-role=”page”> <div page-role=”header”> </div> Em seguida adicionamos <div page- role=”content”> o cabeçalho com o </div> comando <div page-role=”header”> <div page-role=”footer”> </div> </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  11. 11. Estrutura básica de uma página em JQuery Mobile <body> <div page-role=”page”> <div page-role=”header”> </div> Depois definimos o conteúdo com <div page-role=”content”> </div> o comando <div page-role=”content”> <div page-role=”footer”> </div> </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  12. 12. Estrutura básica de uma página em JQuery Mobile <body> <div page-role=”page”> <div page-role=”header”> </div> E por último, adicionamos <div page-role=”content”> <div page-role=”footer”> </div> para definirmos o <div page-role=”footer”> rodapé. </div> </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  13. 13. Exemplo: Criando uma lista simples <body> <div page-role=”page”> <!-- cabeçalho --> <div page-role=”content”> <ul data-role=”listview”> <li><a href=”#”>Android</a></li> <li><a href=”#”>iOS</a></li> <li><a href=”#”>Windows Phone</a></li> <li><a href=”#”>Blackberry</a></li> </ul> </div> <!-- rodapé --> </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  14. 14. Case de Exemplo Tá Safo! Conf 2012 Mobile http://tasafo.org/conf2012/mobile/ Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  15. 15. Mas como integrar JQuery Mobile em Android? Deve-se utilizar o componente WebView, específico para exibir páginas Web, utilizando o método loadUrl(). WebView webView = (WebView) findViewById(R.id.webView); webView.loadUrl(“file:///android_asset/www/index.html”); Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  16. 16. Mas como integrar JQuery Mobile em Android? Depois, devemos ativar a utilização de JavaScript nas páginas. WebView webView = (WebView) findViewById(R.id.webView); webView.loadUrl(“file:///android_asset/www/index.html”); WebSettings configuracoes = webView.getSettings(); configuracoes.setJavaScriptEnabled(true); Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  17. 17. Mas como integrar JQuery Mobile em Android? Por fim, deve-se adicionar a permissão de internet no AndroidManifest.xml. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="br.com.androidnarede.tasafoconf.app" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="3" /> <uses-permission android:name="android.permission.INTERNET" /> <!-- definição de application e activities --> </manifest> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  18. 18. Tá Safo! Conf 2012 para Android Em breve no Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  19. 19. @androidnarede http://about.me/ramonrabello Obrigado! Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×