Your SlideShare is downloading. ×
0
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Desenvolvimento Web para Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desenvolvimento Web para Android

2,085

Published on

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

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,085
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desenvolvimento Web para Android #TaSafoConf #LightningTalk @ramonrabellodomingo, 17 de junho de 12
  • 2. Você conhece uma dessas tecnologias? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 3. Mas não sabe Android? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 4. Calma! “Palma, palma! Não priemos cânico!” Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 5. JQuery Mobile é a Solução! jquerymobile.com Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 6. Mas não somente para Android! Para Qualquer Plataforma! ... Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 7. Por onde começar? http://jquerymobile.com/demos/ Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Tá Safo! Conf 2012 para Android Em breve no Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12
  • 19. @androidnarede http://about.me/ramonrabello Obrigado! Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

×