Esta é uma apresentação que fiz sobre algumas práticas na hora de preparar a interface de sua aplicação web para ser vista em um iPhone

1. Desenvolvendo
aplicação web para
iPhone
por Rento Nitta
www.renatocn.com

2. Mas por quê?

3. aplicação nativa VS aplicação web
http://building-iphone-apps.labs.oreilly.com/

4. aplicação nativa VS aplicação web
Os prós da aplicação nativa
• Depois de aprovada, sua aplicação estará disponível para o mundo todo, são
milhões de possíveis compradores
• Você tem um framework completo com o Xcode, Interface Builder e Cocoa
Touch para desenvolver, a documentação é boa e vasta
• Você terá acesso a todas as funcionalidades de hardware do iPhone como:
acelerômetro, bússola, microfone, câmera e etc...

5. aplicação nativa VS aplicação web
Os contras aplicação nativa
• Você obrigatoriamente precisa ter um mac (não chega a ser um contra)
• Ter que desenvolver em Objective-C
• Ter que pagar para ser um desenvolvedor
• Precisa esperar por toda a burocracia do processo de aprovação da Apple
• Você não consegue concertar bugs com rapidez
• O ciclo de desenvolvimento e o feedback dos seus usuários é lento

6. aplicação nativa VS aplicação web
Os prós da aplicação web
• Desenvolvedores podem usar todas as ferramentas que já estão
acostumados a usar
• Você não fica preso a desenvolver em um Mac
• Além de iPhone, sua aplicação "teoricamente" pode rodar em qualquer
dispositivo com um navegador
• Você pode concertar bugs em tempo real
• O ciclo de desenvolvimento e o feedback dos usuários é mais rápido

7. aplicação nativa VS aplicação web
Os prós da aplicação web
• Desenvolvedores podem usar todas as ferramentas que já estão
acostumados a usar
• Você não fica preso a desenvolver em um Mac
• Além de iPhone, sua aplicação "teoricamente" pode rodar em qualquer
dispositivo com um navegador
• Você pode concertar bugs em tempo real
• O ciclo de desenvolvimento e o feedback dos usuários é mais rápido

8. aplicação nativa VS aplicação web
Os contras da aplicação web
• Você não pode acessar as funcionalidades de hardware: acelerômetro,
bússola, câmera, microfone e etc
• Se você quiser cobrar pela aplicação, vai ter que se virar sozinho

9. aplicação nativa VS aplicação web
Uma aplicação web pode acessar os
recusos de hardware?

10. aplicação nativa VS aplicação web
Uma aplicação web pode acessar os
recusos de hardware?
http://www.phonegap.com/
“PhoneGap is an open source development framework for building cross-platform mobile apps.”

11. aplicação nativa VS aplicação web
http://www.phonegap.com/
funcionalidades suportadas

12. OK, me convenceu
E agora faço o que?

13. Safari Dev Center
http://developer.apple.com/safari/

14. Dividindo em fases

15. Dividindo em fases
• Interface (visual)
•

16. Dividindo em fases
• Interface
(visual)
• Performance
•

17. Dividindo em fases
• Interface
(visual)
• Performance
• Interação(experiência do usuário)

18. Interface
Tags específicas

19. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">

20. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">

21. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">

22. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">

23. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">

24. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">
Largura padrão: 980px
Dimensões do iPhone: 320px X 480px

25. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">
Largura padrão: 980px
Dimensões do iPhone: 320px X 480px
Ex.:
<meta name="viewport" content="initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.5, user-scalable = no">

26. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">

27. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">
• <link rel="apple-touch-icon" href="apple-touch-icon.png" />

28. Interface
Tags específicas
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">
• <meta name="format-detection" content="telephone=no">
• <meta name = "viewport" content = "width = device-width">
• <link rel="apple-touch-icon" href="apple-touch-icon.png" />
• <link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />

29. Interface
Conteúdo
• Adaptar
• Retirar

30. Interface
CSS

31. Interface
CSS
• Fontes

32. Interface
CSS
• Fontes
• Imagens

33. Interface
CSS
• Fontes
• Imagens
• Formulários

34. Interface
CSS
• Fontes
• Imagens
• Formulários
• Botões

35. Interface
CSS
• Fontes
• Imagens
• Formulários
• Botões
• Links (mouse vs dedo)

36. Interface
CSS
• Fontes
• Imagens
• Formulários
• Botões
• Links (mouse vs dedo)

37. Interface
CSS
• Fontes
• Imagens
• Formulários
• Botões
• Links (mouse vs dedo)

38. Performance
Diminuir o tempo de espera para seu usuário

39. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais

40. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)

41. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)
78kb 57kb

42. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)
• Comprimir o CSS e JavaScript

43. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)
• Comprimir o CSS e JavaScript
• Assistir a apresentação do Diego Carrion sobre YSlow

44. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)
• Comprimir o CSS e JavaScript
• Assistir a apresentação do Diego Carrion sobre YSlow

45. Performance
Diminuir o tempo de espera para seu usuário
• CSS e JavaScript condicionais
• Imagens condicionais (com CSS sprites)
• Comprimir o CSS e JavaScript
• Assistir a apresentação do Diego Carrion sobre YSlow
Resultado prático:
de 3.4seg para 1.8seg

46. Interação
Melhorando a experiêcia do usuário
• Drag and Drop
• JQTouch - http://jqtouch.com/
• Client-Side Database (html5, javascript e SQLite)

47. Referências
• http://building-iphone-apps.labs.oreilly.com
• http://developer.apple.com/safari
• http://my.safaribooksonline.com
• http://jqtouch.com
• http://www.phonegap.com

48. Obrigado!