Desenvolvendo aplicações    Mobile com HTML, CSS e           JavaScript       Aproveitando o conhecimento Web          no ...
PalestranteRodrigo Urubatan (@urubatan no Twitter) trabalha com desenvolvimento de software desde 1997. Já desenvolveu sis...
Primeira idéia• Symbian e WebOS suportam aplicações escritas em  HTML+CSS+Javascript nativamente• Seria legal fazer o mesm...
Esqueleto de aplicação              Android           Portando WRT para Androidfisl@urubatancom.br       http://www.urubat...
Layout (main.xml)<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/and...
Activity@Overridepublic void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R....
Port da API WRT• É necessário expor os objetos da API WRT para a aplicação  Android   o device   o widget   o menu• WebVie...
Isto daria muito trabalho          Uma das maiores virtudes dos          programadores é a preguiça.fisl@urubatancom.br   ...
Open Source for the Rescue      Alguem já deve ter feito isto por mimfisl@urubatancom.br         http://www.urubatan.com.br
Opções• PhoneGap   o APIs Javascript para acesso a recursos de dispositivos     moveis   o Suporte para iOS, Android, Symb...
Opção e Motivos da Escolha - 1• Titanium Mobile   o Falta suporte para Symbian   o API única para todas as plataformas   o...
Opção e Motivos da Escolha - 2• PhoneGap   o Eu uso e gosto do Symbian   o Possui uma API única para todos os dispositivos...
Desvantagens• Em ambos os casos é necessário ter os SDKs para cada  uma das plataformas instalado na maquina (Exceto se fo...
PhoneGap        Meu framework favorito para esta                   tarefafisl@urubatancom.br        http://www.urubatan.co...
APIs nativas disponíveisAcelerometer           Camera        Capture       CompassConnection             Contacts      Dev...
Frameworks disponíveis para UI•   jQuery Mobile•   jQTouch•   Sencha Touch•   Guarana-UI•   Nokia Web Templates for High-E...
Pequeno exemplo• Este é o código de uma API escrita diretamente para Nokia  WRT portada depois para Android utilizando Pho...
Mobile Pomodorofisl@urubatancom.br     http://www.urubatan.com.br
index.html<html>  <head>    <title>Mobile Pomodoro</title>    <link rel="stylesheet" type="text/css" href="css/basic.css"/...
index.html (2)  <body>     <h1 id="header" style="background: url(icon.png) no-repeat;">        Mobile Pomodoro     </h1> ...
basic.cssbody {  font-family:Verdana;  background-color:#1c1c1c;  color: #fff;  margin: 0;  padding: 0;}#header {    text-...
basic.css (2).button {    height: 30px;    line-height: 30px;    text-align: center;    text-indent: 30px;    vertical-ali...
basic.css (3).break {    background-image:   url(../images/coffee_mug.png);}.exit {    background-image: url(../images/exi...
pomodoro.jsfunction App(name){   this.settings = {      pomodoro_time: 25,      interval_time: 5   };this.history = [];   ...
pomodoro.js (2)  this.loadSettings = function(){     if (window.widget) {         var rawJSON = window.widget.preferenceFo...
pomodoro.js (3)App.prototype.initialize = function(timer_id){  window.app.timer_id = timer_id;  $("#" + timer_id).countdow...
pomodoro.js(4)App.prototype.timeUp = function(){   window.app.playSound();   window.app.vibrate();}App.prototype.startPomo...
Problemas   API para menus ainda não disponível multi    plataforma          Mas isto raramente é utilizado para disposi...
Geolocalization// onSuccess Callback// This method accepts a `Position` object, which   contains// the current GPS coordin...
Captura de Imagensnavigator.camera.getPicture(onSuccess, onFail, {  quality: 50,  destinationType:  Camera.DestinationType...
?!?!?!fisl@urubatancom.br       http://www.urubatan.com.br
Referências    http://www.urubatan.com.br    http://phonegap.com    jQuery Mobile    JQTouch    Sencha Touch    Guar...
Upcoming SlideShare
Loading in …5
×

Desenvolvendo aplicacoes mobile_com_html_css_

1,435 views

Published on

Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,435
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvendo aplicacoes mobile_com_html_css_

  1. 1. Desenvolvendo aplicações Mobile com HTML, CSS e JavaScript Aproveitando o conhecimento Web no desenvolvimento Mobilefisl@urubatancom.br http://www.urubatan.com.br
  2. 2. PalestranteRodrigo Urubatan (@urubatan no Twitter) trabalha com desenvolvimento de software desde 1997. Já desenvolveu sistemas em uma gama de linguagens e ambientes, incluindo Delphi, C, C++, PHP, ASP, ColdFusion, Assembly, Leather, Ruby e Java. Atualmente trabalha com pesquisa e desenvolvimento na HP, utilizando principalmente Java, Flex e Ruby, e já ministrou cursos e palestras em diversos eventos pelo Brasil. Autor do livro Ruby On Rails: Desenvolvimento Fácil e Rápido de Aplicações Web.fisl@urubatancom.br http://www.urubatan.com.br
  3. 3. Primeira idéia• Symbian e WebOS suportam aplicações escritas em HTML+CSS+Javascript nativamente• Seria legal fazer o mesmo para Android e iOS• Vou criar um esqueleto de aplicação com WebKit e rodar minha app Symbian WRT no Android! fisl@urubatancom.br http://www.urubatan.com.br
  4. 4. Esqueleto de aplicação Android Portando WRT para Androidfisl@urubatancom.br http://www.urubatan.com.br
  5. 5. Layout (main.xml)<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent"><WebView android:id="@+id/webView"android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout> fisl@urubatancom.br http://www.urubatan.com.br
  6. 6. Activity@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); web = (WebView) findViewById(R.id.webView); WebSettings settings = web.getSettings(); settings.setJavaScriptEnabled(true); settings.setJavaScriptCanOpenWindowsAutomatically(true); settings.setSupportMultipleWindows(true); settings.setSupportZoom(false); settings.setPluginsEnabled(true); web.setVerticalScrollBarEnabled(true); web.setHorizontalScrollBarEnabled(false); // Our applications main page will be loaded web.loadUrl("file:///android_asset/index.html");} fisl@urubatancom.br http://www.urubatan.com.br
  7. 7. Port da API WRT• É necessário expor os objetos da API WRT para a aplicação Android o device o widget o menu• WebView.addJavascriptInterface(objetoJava, “nomeNoJavascript”) fisl@urubatancom.br http://www.urubatan.com.br
  8. 8. Isto daria muito trabalho Uma das maiores virtudes dos programadores é a preguiça.fisl@urubatancom.br http://www.urubatan.com.br
  9. 9. Open Source for the Rescue Alguem já deve ter feito isto por mimfisl@urubatancom.br http://www.urubatan.com.br
  10. 10. Opções• PhoneGap o APIs Javascript para acesso a recursos de dispositivos moveis o Suporte para iOS, Android, Symbian, Windoes Mobile, WebOS, Bada (em desenvolvimento), WindowsPhone 7 (em desenvolvimento) o UI desenvolvida com Frameworks JS+CSS o Licensa BSD ou MIT o que for mais conveniente• Titanium Mobile o APIs Javascript para acesso a recursos de dispositivos moveis o Suporte para iOS e Android o API para UI disponivel com L&F nativos o Apache + Comercial para modulos adicionais e suporte fisl@urubatancom.br http://www.urubatan.com.br
  11. 11. Opção e Motivos da Escolha - 1• Titanium Mobile o Falta suporte para Symbian o API única para todas as plataformas o API própria para UI o Possibilidade de utilizar quase o mesmo código para gerar aplicações Mobile e Desktop  Nos exemplos apresentados o código é diferente*  Mesmo assim, a possibilidade de compartilhar código é muito interessante o Ambiente de desenvolvimento próprio o Build service - gera aplicação nativa para android e iOS a partir dos fontes enviados (Serviço pago) fisl@urubatancom.br http://www.urubatan.com.br
  12. 12. Opção e Motivos da Escolha - 2• PhoneGap o Eu uso e gosto do Symbian o Possui uma API única para todos os dispositivos  Com algumas excessões de coisas que funcionam e uma e não na outra mas isto esta documentado o Eu já conheço gosto de diversos frameworks Javascript o Existem frameworks Javascript que me permitem ter uma UI "nativa" em todas as plataformas o Possibilidade de utilizar a IDE ou editor de textos que me convier o Phonegap Build - serviço que gera apps nativas para todas as plataformas suportadas a partir de um código único (Serviço pago) fisl@urubatancom.br http://www.urubatan.com.br
  13. 13. Desvantagens• Em ambos os casos é necessário ter os SDKs para cada uma das plataformas instalado na maquina (Exceto se for utilizar o serviço de build)• Em ambos os casos se for necessária para a aplicação uma API não disponível no framework, sera necessário implementar nativamente para cada uma das plataformas desejadas fisl@urubatancom.br http://www.urubatan.com.br
  14. 14. PhoneGap Meu framework favorito para esta tarefafisl@urubatancom.br http://www.urubatan.com.br
  15. 15. APIs nativas disponíveisAcelerometer Camera Capture CompassConnection Contacts Device EventsFile Geolocation Media NetworkNotification Storage fisl@urubatancom.br http://www.urubatan.com.br
  16. 16. Frameworks disponíveis para UI• jQuery Mobile• jQTouch• Sencha Touch• Guarana-UI• Nokia Web Templates for High-End Devices• Muitos mais pela web ... fisl@urubatancom.br http://www.urubatan.com.br
  17. 17. Pequeno exemplo• Este é o código de uma API escrita diretamente para Nokia WRT portada depois para Android utilizando PhoneGap• É uma APP gratuita disponível na OviStore fisl@urubatancom.br http://www.urubatan.com.br
  18. 18. Mobile Pomodorofisl@urubatancom.br http://www.urubatan.com.br
  19. 19. index.html<html> <head> <title>Mobile Pomodoro</title> <link rel="stylesheet" type="text/css" href="css/basic.css"/> <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="lib/jquery.json-2.2.min.js"></script> <script type="text/javascript" src="lib/jquery.countdown/jquery.countdown.js"></script> <script type="text/javascript" src="lib/pomodoro.js"></script> <style type="text/css"> @import "lib/jquery.countdown/jquery.countdown.css"; </style> <script type="text/javascript"> $(document).ready(function(){ var app = new App("mobile_pomodoro"); app.initialize("timer"); $("#exit_btn").click(function(evt){ window.close(); }); });</script> </head> fisl@urubatancom.br http://www.urubatan.com.br
  20. 20. index.html (2) <body> <h1 id="header" style="background: url(icon.png) no-repeat;"> Mobile Pomodoro </h1> <div id="screen_one" class="screen"> <div id="timer"> </div> <div id="controls"> <div id="timer_pomodoro" class="button pomodoro">Start Pomodoro</div> <div id="timer_break" class="button break">Take a Break</div> <div id="exit_btn" class="button exit">Exit</div> </div> </div> </body></html> fisl@urubatancom.br http://www.urubatan.com.br
  21. 21. basic.cssbody { font-family:Verdana; background-color:#1c1c1c; color: #fff; margin: 0; padding: 0;}#header { text-indent: 50px;fisl@urubatancom.br http://www.urubatan.com.br
  22. 22. basic.css (2).button { height: 30px; line-height: 30px; text-align: center; text-indent: 30px; vertical-align: middle; background-repeat: no-repeat; right: 20px; left: 20px;fisl@urubatancom.br http://www.urubatan.com.br
  23. 23. basic.css (3).break { background-image: url(../images/coffee_mug.png);}.exit { background-image: url(../images/exit.png);}#timer { background-color: #1C1C1C;fisl@urubatancom.br http://www.urubatan.com.br
  24. 24. pomodoro.jsfunction App(name){ this.settings = { pomodoro_time: 25, interval_time: 5 };this.history = []; this.name = name; this.saveSettings = function(){ if (window.widget) { widget.setPreferenceForKey($.toJSON(this.settings), settings); } } this.saveHistory = function(){ if (window.widget) { widget.setPreferenceForKey($.toJSON(this.history), history); } } fisl@urubatancom.br http://www.urubatan.com.br
  25. 25. pomodoro.js (2) this.loadSettings = function(){ if (window.widget) { var rawJSON = window.widget.preferenceForKey(settings); if (rawJSON != "" && rawJSON != null && rawJSON != undefined) { this.settings = $.evalJSON(rawJSON); } } $(this).trigger("settings_loaded"); } this.loadHistory = function(){ if (window.widget) { var rawJSON = window.widget.preferenceForKey(history); if (rawJSON != "" && rawJSON != null && rawJSON != undefined) { this.history = $.evalJSON(rawJSON); } } $(this).trigger("settings_loaded"); } this.loadSettings(); this.loadHistory();fisl@urubatancom.br http://www.urubatan.com.br window.app = this;
  26. 26. pomodoro.js (3)App.prototype.initialize = function(timer_id){ window.app.timer_id = timer_id; $("#" + timer_id).countdown({ until: 0, format: HMS }); $("#" + timer_id + "_pomodoro").click(window.app.startPomodoro); $("#" + timer_id + "_break").click(window.app.startBreak); $(body).append(<div id=" + window.app.name + player" style="display:none"></div>); if (window.menu) { window.menu.showSoftkeys(); var pomodoroMenu = new MenuItem("Start Pomodoro", 101); pomodoroMenu.onSelect = function(idx){ window.app.startPomodoro(); } var breakMenu = new MenuItem("Take a Break", 111); breakMenu.onSelect = function(idx){ window.app.startBreak(); } window.menu.clear();fisl@urubatancom.br http://www.urubatan.com.br window.menu.append(pomodoroMenu);
  27. 27. pomodoro.js(4)App.prototype.timeUp = function(){ window.app.playSound(); window.app.vibrate();}App.prototype.startPomodoro = function(evt){ var time = window.app.settings.pomodoro_time * 60; $(# + window.app.timer_id).countdown("change", { until: time, format: HMS, onExpiry: window.app.timeUp }); return false;}App.prototype.startBreak = function(evt){ var time = window.app.settings.interval_time * 60; $(# + window.app.timer_id).countdown("change", { until: time, format: HMS, onExpiry: window.app.timeUp }); fisl@urubatancom.br http://www.urubatan.com.br return false;
  28. 28. Problemas API para menus ainda não disponível multi plataforma  Mas isto raramente é utilizado para dispositivos touch screen Algumas vezes é necessário adicionar alguns Ifs para adicionar código especifico para alguma plataformafisl@urubatancom.br http://www.urubatan.com.br
  29. 29. Geolocalization// onSuccess Callback// This method accepts a `Position` object, which contains// the current GPS coordinates//var onSuccess = function(position) { alert(Latitude: + position.coords.latitude + n + Longitude: + position.coords.longitudefisl@urubatancom.br http://www.urubatan.com.br
  30. 30. Captura de Imagensnavigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });function onSuccess(imageURI) { var image = document.getElementById(myImage); image.src = imageURI;fisl@urubatancom.br http://www.urubatan.com.br
  31. 31. ?!?!?!fisl@urubatancom.br http://www.urubatan.com.br
  32. 32. Referências http://www.urubatan.com.br http://phonegap.com jQuery Mobile JQTouch Sencha Touch Guarana-UI Nokia Web Templates for High-End Devices Http://livro.urubatan.com.br fisl@urubatancom.br http://www.urubatan.com.br

×