Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desenvolvimento Web para Android

2,792 views

Published on

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

Published in: Technology

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

×