Desenvolvimento Web para Android
-
Upload
ramon-rabello -
Category
Technology
-
view
1.961 -
download
4
description
Transcript of Desenvolvimento Web para Android
![Page 1: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/1.jpg)
@ramonrabello
Desenvolvimento Web para Android
#TaSafoConf #LightningTalk
domingo, 17 de junho de 12
![Page 2: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/2.jpg)
Formacão Completa em Android - @androidnarede
Você conhece uma dessas tecnologias?
domingo, 17 de junho de 12
![Page 3: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/3.jpg)
Formacão Completa em Android - @androidnarede
Mas não sabe Android?
domingo, 17 de junho de 12
![Page 4: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/4.jpg)
Formacão Completa em Android - @androidnarede
Calma!
“Palma, palma! Não priemos
cânico!”
domingo, 17 de junho de 12
![Page 5: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/5.jpg)
Formacão Completa em Android - @androidnarede
JQuery Mobile é a Solução!
jquerymobile.com
domingo, 17 de junho de 12
![Page 6: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/6.jpg)
Formacão Completa em Android - @androidnarede
Mas não somente para Android! Para Qualquer Plataforma!
...domingo, 17 de junho de 12
![Page 7: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/7.jpg)
Formacão Completa em Android - @androidnarede
Por onde começar?
http://jquerymobile.com/demos/domingo, 17 de junho de 12
![Page 8: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/8.jpg)
Formacão Completa em Android - @androidnarede
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
domingo, 17 de junho de 12
![Page 9: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/9.jpg)
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page- role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
Depois, definimos o corpo da página, com a tag
<body>.
Dentro, adicionamos o comando
<div page-role=”page”>.
domingo, 17 de junho de 12
![Page 10: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/10.jpg)
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page- role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
Em seguida adicionamos o cabeçalho com o
comando <div page-role=”header”>
domingo, 17 de junho de 12
![Page 11: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/11.jpg)
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page-role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
Depois definimos o conteúdo com
o comando <div page-role=”content”>
domingo, 17 de junho de 12
![Page 12: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/12.jpg)
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page-role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
E por último, adicionamos
<div page-role=”footer”> para definirmos o
rodapé.
domingo, 17 de junho de 12
![Page 13: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/13.jpg)
Formacão Completa em Android - @androidnarede
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>
domingo, 17 de junho de 12
![Page 14: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/14.jpg)
Formacão Completa em Android - @androidnarede
Case de Exemplo
http://tasafo.org/conf2012/mobile/
Tá Safo! Conf 2012 Mobile
domingo, 17 de junho de 12
![Page 15: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/15.jpg)
Formacão Completa em Android - @androidnarede
Mas como integrar JQuery Mobile em Android?
WebView webView = (WebView) findViewById(R.id.webView);webView.loadUrl(“file:///android_asset/www/index.html”);
Deve-se utilizar o componente WebView, específico para exibir
páginas Web, utilizando o método loadUrl().
domingo, 17 de junho de 12
![Page 16: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/16.jpg)
Formacão Completa em Android - @androidnarede
Mas como integrar JQuery Mobile em Android?
WebView webView = (WebView) findViewById(R.id.webView);webView.loadUrl(“file:///android_asset/www/index.html”);
WebSettings configuracoes = webView.getSettings();configuracoes.setJavaScriptEnabled(true);
Depois, devemos ativar a utilização de JavaScript
nas páginas.
domingo, 17 de junho de 12
![Page 17: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/17.jpg)
Formacão Completa em Android - @androidnarede
Mas como integrar JQuery Mobile em Android?
<?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>
Por fim, deve-se adicionar a permissão de internet no
AndroidManifest.xml.
domingo, 17 de junho de 12
![Page 18: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/18.jpg)
Formacão Completa em Android - @androidnarede
Tá Safo! Conf 2012 para Android
Em breve no
domingo, 17 de junho de 12
![Page 19: Desenvolvimento Web para Android](https://reader034.fdocumentos.tips/reader034/viewer/2022052504/54b43f374a7959f3358b469f/html5/thumbnails/19.jpg)
Formacão Completa em Android - @androidnarede
Obrigado!
http://about.me/ramonrabello
@androidnarede
domingo, 17 de junho de 12