• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desenvolvimento Web para Android
 

Desenvolvimento Web para Android

on

  • 2,210 views

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/

Statistics

Views

Total Views
2,210
Views on SlideShare
2,207
Embed Views
3

Actions

Likes
0
Downloads
33
Comments
0

1 Embed 3

http://palestrascoletivas.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desenvolvimento Web para Android Desenvolvimento Web para Android Presentation Transcript

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