Portando sua aplicação web para iphone

1.056 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.056
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Portando sua aplicação web para iphone

    1. 1. Desenvolvendoaplicação web para iPhone por Rento Nitta www.renatocn.com
    2. 2. Mas por quê?
    3. 3. aplicação nativa VS aplicação web http://building-iphone-apps.labs.oreilly.com/
    4. 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. 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. 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. 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. 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. 9. aplicação nativa VS aplicação webUma aplicação web pode acessar os recusos de hardware?
    10. 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. 11. aplicação nativa VS aplicação webhttp://www.phonegap.com/funcionalidades suportadas
    12. 12. OK, me convenceuE agora faço o que?
    13. 13. Safari Dev Centerhttp://developer.apple.com/safari/
    14. 14. Dividindo em fases
    15. 15. Dividindo em fases• Interface (visual)•
    16. 16. Dividindo em fases• Interface (visual)• Performance•
    17. 17. Dividindo em fases• Interface (visual)• Performance• Interação(experiência do usuário)
    18. 18. InterfaceTags específicas
    19. 19. Interface Tags específicas• <meta name="apple-mobile-web-app-capable" content="yes">
    20. 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. 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. 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. 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. 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. 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 480pxEx.:<meta name="viewport" content="initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.5, user-scalable = no">
    26. 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. 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. 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. 29. Interface Conteúdo• Adaptar• Retirar
    30. 30. Interface CSS
    31. 31. Interface CSS• Fontes
    32. 32. Interface CSS• Fontes• Imagens
    33. 33. Interface CSS• Fontes• Imagens• Formulários
    34. 34. Interface CSS• Fontes• Imagens• Formulários• Botões
    35. 35. Interface CSS• Fontes• Imagens• Formulários• Botões• Links (mouse vs dedo)
    36. 36. Interface CSS• Fontes• Imagens• Formulários• Botões• Links (mouse vs dedo)
    37. 37. Interface CSS• Fontes• Imagens• Formulários• Botões• Links (mouse vs dedo)
    38. 38. PerformanceDiminuir o tempo de espera para seu usuário
    39. 39. Performance Diminuir o tempo de espera para seu usuário• CSS e JavaScript condicionais
    40. 40. Performance Diminuir o tempo de espera para seu usuário• CSS e JavaScript condicionais• Imagens condicionais (com CSS sprites)
    41. 41. Performance Diminuir o tempo de espera para seu usuário• CSS e JavaScript condicionais• Imagens condicionais (com CSS sprites) 78kb 57kb
    42. 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. 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. 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. 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. 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. 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. 48. Obrigado!

    ×