qconsp 2011
DESCRIPTION
Palestra sobre desenvolvimento para plataformas móveis: nativos, HTML5, híbridos.TRANSCRIPT
![Page 1: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/1.jpg)
Aplicações Móveis Híbridas: usando Web e
Nativo juntos
[email protected] (@cbsanchez)[email protected] (@wlads)
1Tuesday, 22 May 2012
![Page 2: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/2.jpg)
Agenda• Aplicações Mobile Web
• Aplicações Mobile Nativas
• Aplicações Mobile Híbridas
2Tuesday, 22 May 2012
![Page 3: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/3.jpg)
1. Aplicações Mobile Web
3Tuesday, 22 May 2012
![Page 4: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/4.jpg)
No início era o nativo
4Tuesday, 22 May 2012
![Page 5: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/5.jpg)
e então Berners-Lee criou a web
Sir T
im B
erne
rs-L
ee
5Tuesday, 22 May 2012
![Page 6: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/6.jpg)
e desde 1991
• HTML, CSS e JavaScript
• Pearl, PHP e ASP
• Java
• .NET
• Applet
6Tuesday, 22 May 2012
![Page 7: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/7.jpg)
hoje na web
• Sistemas corporativos
• Google Docs
• e-Learning
• Twitter, Facebook, GitHub, Basecamp, Netflix...
7Tuesday, 22 May 2012
![Page 8: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/8.jpg)
mas nós queríamos mais• WML e WMLScript
• XHTML MP
• JavaME
• Nativos
Martin Cooper8Tuesday, 22 May 2012
![Page 9: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/9.jpg)
Fonte: Wikipedia
9Tuesday, 22 May 2012
![Page 10: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/10.jpg)
e chega o iPhone
Steve Jobs
10Tuesday, 22 May 2012
![Page 11: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/11.jpg)
11Tuesday, 22 May 2012
![Page 12: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/12.jpg)
HTML + CSS + JAVASCRIPT
12Tuesday, 22 May 2012
![Page 13: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/13.jpg)
• Chrome
• Firefox
• Safari
• IE
• Chrome Frame
ainda em desenvolvimento!
13Tuesday, 22 May 2012
![Page 14: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/14.jpg)
• Novas API’s
• Multimídia embutido
• Uso off-line
• Depuração de erros
e o que promete?
14Tuesday, 22 May 2012
![Page 15: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/15.jpg)
http://www.html5rocks.com/en/
http://html5demos.com/
15Tuesday, 22 May 2012
![Page 16: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/16.jpg)
Semântica
16Tuesday, 22 May 2012
![Page 17: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/17.jpg)
Canvas
17Tuesday, 22 May 2012
![Page 18: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/18.jpg)
Canvas• 2D APIs
• 3D APIs (WebGL)
• Inline SVG
18Tuesday, 22 May 2012
![Page 19: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/19.jpg)
Geolocation
19Tuesday, 22 May 2012
![Page 20: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/20.jpg)
Storage
20Tuesday, 22 May 2012
![Page 21: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/21.jpg)
Áudio e Vídeo
21Tuesday, 22 May 2012
![Page 22: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/22.jpg)
CSS3• seletores, atributos, targets
• instruções
• webfonts
• linhas e colunas
• transforms e animations
22Tuesday, 22 May 2012
![Page 23: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/23.jpg)
CSS3
23Tuesday, 22 May 2012
![Page 24: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/24.jpg)
JavaScript• Ele sempre esteve entre nós!
• Nova API DOM (getElementBy...)
• History API
• FileSystem API
• Geolocation
24Tuesday, 22 May 2012
![Page 25: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/25.jpg)
web mobile apps?• Afinal de contas, é HTML
• Portável
• Padrão aberto
• Porque é possível
25Tuesday, 22 May 2012
![Page 26: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/26.jpg)
e ainda...• Device orientation
• Multi-touch
• Desenvolvimento produtivo
• Comunidade
• Separation of Concerns
26Tuesday, 22 May 2012
![Page 27: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/27.jpg)
...e por último
27Tuesday, 22 May 2012
![Page 28: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/28.jpg)
SoC
• html estrutura
• css view/estilo
• javascript lógica
28Tuesday, 22 May 2012
![Page 29: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/29.jpg)
alguns (bons) exemplos• Financial Times
• Basecamp
• http://www.apple.com/webapps/
29Tuesday, 22 May 2012
![Page 30: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/30.jpg)
Financial Times
30Tuesday, 22 May 2012
![Page 31: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/31.jpg)
2. Aplicações Mobile Nativas
31Tuesday, 22 May 2012
![Page 32: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/32.jpg)
Native mode (wikipedia)• The term native mode or native code is used in computing in two
related senses:
• to describe something running on a computer natively or in native mode meaning that it is running without any external support as contrasted to running in emulation (i.e. browser)
• Native operating system, native instruction set, etc., in application to a computer processor means that the corresponding item was implemented specifically for the given model of the computer or microprocessor, as opposed to emulation or compatibility mode.
32Tuesday, 22 May 2012
![Page 33: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/33.jpg)
Conceito
• Native App:
• An application that is specifically written for a device platform.
33Tuesday, 22 May 2012
![Page 34: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/34.jpg)
Devices• Feature-phones
• Smart-phones
• Tablets
• TV
What else?
34Tuesday, 22 May 2012
![Page 35: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/35.jpg)
Plataformas Nativas• Plataformas e suas Linguagens de
Programação
• iOS => Objective-C, C
• Android => Java
• BlackBerry => Java
• Windows Mobile (Nokia) => .Net
35Tuesday, 22 May 2012
![Page 36: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/36.jpg)
36Tuesday, 22 May 2012
![Page 37: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/37.jpg)
37Tuesday, 22 May 2012
![Page 38: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/38.jpg)
38Tuesday, 22 May 2012
![Page 39: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/39.jpg)
39Tuesday, 22 May 2012
![Page 40: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/40.jpg)
Android => Java + Dalvik
• Java é uma linguagem familiar para muitos desenvolvedores, muitas vezes é a primeira linguagem
• Gustav’s Moto:
“Anybody can cook”
• Android fornece uma excelente API
40Tuesday, 22 May 2012
![Page 41: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/41.jpg)
Objective-C• Objective-C criada na decada de 90
(NeXT) e possui uma vasta API => produtos Apple
• Runtime C orientado a objetos
• Ganhou muita popularidade com o lançamento do iPhone e do iOS SDK
41Tuesday, 22 May 2012
![Page 42: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/42.jpg)
C/C++• Diversos Devices
• Possivel desenvolver em C/C++ para iOS e Android
• Projetos Open-Source!!!
• UI???
42Tuesday, 22 May 2012
![Page 43: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/43.jpg)
Características Apps Nativas
• Aparência Nativa (Native look & feel): impossível para Web por definição
• APIs: video, alarm clock, file access, push notification, ...
• Integração com aplicações: maps, mail, camera, youtube, gallery, agenda, ...
43Tuesday, 22 May 2012
![Page 44: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/44.jpg)
Características Apps Nativas
• Integração com SO: concorrência, system events
• Melhor Performance e uso da Bateria
• Web engines, plugins (e.g. <video> codecs)
• Desenvolvimento: debugging
44Tuesday, 22 May 2012
![Page 45: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/45.jpg)
Características Apps Nativas
• Uso “off-line”
• In-App Purchase: CC cadastrado + billing (e.g. High Noon)
• Tratamento de diferentes tamanhos e resoluções de tela (i.e. Android)
45Tuesday, 22 May 2012
![Page 46: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/46.jpg)
Human Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf
Fonte:
46Tuesday, 22 May 2012
![Page 47: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/47.jpg)
Armazenamento (off-line)
47Tuesday, 22 May 2012
![Page 48: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/48.jpg)
Principais Características “ordenadas” para App Nativas
1. offline mode
2. uso dos recursos (+hardware) do device
3. experiência de uso
4. centralização das aplicacoes (base de potenciais usuários)
5. integração com outras apps
6. notificações (push) e recursos de sistema (e.g. alarme)
7. “monetization” das lojas (busca e faturamento)
8. performance e uso da bateria
48Tuesday, 22 May 2012
![Page 49: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/49.jpg)
Domínio de Aplicações• GAMES
• Acesso a recursos nativos: ACCELEROMETER, CAMERA, COMPASS, CONTACTS, GEOLOCATION, NETWORK, NOTIFICATION, STORAGE
• NFC??????
Fonte: Google Images (http://goo.gl/7ZQLS)
49Tuesday, 22 May 2012
![Page 50: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/50.jpg)
Native UI Kits• Cocoa Touch
• Android UI
!"#$%&"'(
)*&++",(
-./0+(
12&$!"#$(
50Tuesday, 22 May 2012
![Page 51: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/51.jpg)
$$$• $32,639 for a simple app
• 2 months to create
• 2 weeks per feature = 4 features
• $8,160 per feature
Fonte: Pinch/Zoom (Seatle)
51Tuesday, 22 May 2012
![Page 52: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/52.jpg)
App Store, Market, etc• “o um lugar" para encontrar aplicações
• modelo de revenue share
70/30
Fonte: Google Images (http://goo.gl/cKArV)
52Tuesday, 22 May 2012
![Page 53: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/53.jpg)
Apple Store
Preço #Apps Games Total % TOTAL
Free 160.705 27,670 188,375 39.97%
$0.99 101.451 29,491 130,942 27.78%
$1.99 47.028 7,999 55,027 11.68%
79.43%
Fonte: http://148apps.biz/app-store-metrics/?mpage=appprice
53Tuesday, 22 May 2012
![Page 54: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/54.jpg)
54Tuesday, 22 May 2012
![Page 55: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/55.jpg)
Cases• Games: angry birds, plats vs zombies
• Facebook, Twitter
• Shazan
• Narizinho, AutoEsporte, Fibria, QuemCarnaval :D
55Tuesday, 22 May 2012
![Page 56: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/56.jpg)
Cases• “We bet everything on Apple and iOS
and then Apple killed us by changing the rules in the middle of the game”
• Finantial Times (ft.com)
• Primeiro: Nativo
• Depois: Web
56Tuesday, 22 May 2012
![Page 57: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/57.jpg)
Resumindo...• Web
- portabilidade- padrões abertos- simplicidade
• Nativas- integração hardware/plataforma- APIs novas- experiência + rica
57Tuesday, 22 May 2012
![Page 58: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/58.jpg)
3. Aplicações Mobile Híbridas
58Tuesday, 22 May 2012
![Page 59: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/59.jpg)
Conceito
• Hybrid App:
• An application using primarily web technologies inside a native container.
59Tuesday, 22 May 2012
![Page 60: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/60.jpg)
Aplicações Híbridas• WebView
• WebKit
• JavaScript bridge
60Tuesday, 22 May 2012
![Page 61: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/61.jpg)
WebView• Android e iOS
• Usa o WebKit como engine
61Tuesday, 22 May 2012
![Page 62: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/62.jpg)
WebKit• Browser Engine
• Apple, Google, KDE, Nokia, RIM, Samsung entre outras
62Tuesday, 22 May 2012
![Page 63: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/63.jpg)
JavaScript Bridge• Nativo pro WebView
• WebView pra Nativo
• Eventos do browser e JS com callback pro nativo
63Tuesday, 22 May 2012
![Page 64: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/64.jpg)
JavaScript => Android
64Tuesday, 22 May 2012
![Page 65: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/65.jpg)
Android => JavaScript
65Tuesday, 22 May 2012
![Page 66: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/66.jpg)
Formas de Fazer• WebView e recursos nativos
• WebView dentro de frame nativo
• Transitando entre WebView e nativo
66Tuesday, 22 May 2012
![Page 67: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/67.jpg)
cross-plataform frameworks• App Inventor• DroidDraw• Rhomobile• Appcelerator/Titanium• SproutCore• MonoTouch• JQuery Mobile• Jo• Sencha Touch• PhoneGap
67Tuesday, 22 May 2012
![Page 68: Qconsp 2011](https://reader034.vdocuments.site/reader034/viewer/2022052600/55872b96d8b42a86598b46ee/html5/thumbnails/68.jpg)
Appcelerator/Titanium
68Tuesday, 22 May 2012