Jquery Mobile

1,757
-1

Published on

Apresentação feita sobre JQuery Mobile no TDC 2012.

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

No Downloads
Views
Total Views
1,757
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Jquery Mobile

  1. 1. jQuery Mobile Marcelo Quinta Triangulum / UFG / Globalcode
  2. 2. http://bit.ly/tdcmobile Site móvel do TDC
  3. 3. Onde seu site roda?
  4. 4. Adaptar estrutura existente Criar nova experiência
  5. 5. Usuários queremresposta rápida
  6. 6. e com a famosaExperiência do Usuário
  7. 7. Tamanho da tela Quantidade de cores suportadas Capacidade de processamento Capacidade de armazenamento Tempo de vida da bateria Mecanismos de interação limitadosLargura de banda e custo de plano de dadosFalta de padronização no suporte à mídias
  8. 8. Uma visão direta (ágil) sobre desenvolvimento móvel http://futurefriend.ly/
  9. 9. Tela grande Parada Focada Entrada eficiente ConfortávelConexão rápida CPU poderoso CONTEXTO
  10. 10. Oncocomeço?
  11. 11. A plataforma é o browser (móvel)
  12. 12. Conteúdo Conteúdo
  13. 13. Técnica http://futebolbusiness.com.br/imagens/2011/06/Neymar-Santos.jpg
  14. 14. Responsive Web design• O mesmo HTML para todos os dispositivos;• Grid flexível; @media screen and (min-width: 480px) {   .content {• Media queries; }   .social_icons { float: left;• Imagens flexíveis; } display: none• Não há adaptação de conteúdo no servidor;• Resolve bem o problema de resolução debrowser;• Future-friendly;• Manipulação ineficiente de imagens, se nãotomar cuidado;• Só resolve problema da resolução;
  15. 15. Mobile First Luke Wroblewskihttp://static.lanyrd.net/cropped-profile-photos/6bc54848de8f99c13a1025ac9420b96b01257e09.jpg
  16. 16. Progressive Enhacement• O mesmo HTML “base” para todos os dispositivos;• Java script para cada perfil;• Melhoramento progressivo, de acordo com ademanda;• A adaptação vai mais para o lado cliente;• Resolve bem o problema de resolução debrowser e já ocorre uma adaptação mais fina;• Confiar demais na engine do navegadorcliente;• Mesmo HTML e imagens continuam...
  17. 17. Tecnologias
  18. 18. Não perca eu tempo Nativo X Web
  19. 19. Server-side adaptation• Mais antiga e mais utilizada em grandes aplicações;• Detecção de dispositivo e entrega deconteúdo refinado;• Usada por Google, Facebook, Amazon,Youtube, eBay,Yahoo, INF-UFG...;• “It is difficult to find a successful mobile website thatdoes not use server-side content adaptation” goMobi;• Maior adaptação possível, com riqueza dedetalhes;• Bibliotecas de detecção de dispositivo compreço caro;• Maior tempo de implementação;
  20. 20. Famílias de dispositivoshttp://www.cs.gmu.edu/~jessica/VizTree_files/tree.gif
  21. 21. Mobile browsers• Muita diversidade;• Alguns muito limitados;• Alguns muito inovadores;• Alguns baseados em proxy;• A maioria sem documentação;• A maioria sem ferramentas de debug.
  22. 22. Mobile browsers• Interação • Baseados em cursor; • Baseados em touch; • Baseados em multi-touch; • Alguns com suporte a zoom; • Alguns desconhecidos dos desenvolvedores.
  23. 23. JQuery Mobile http://jquerymobile.com/
  24. 24. JQuery Mobile não é• Um framework alternativo ao JQuery comum;• Um SDK com compilação híbrida/nativa;• Um framework para fazer tudo com JavaScript;• Uma solução para todas as aplicações;
  25. 25. JQuery Mobile é Framework multi-plataformapara criação de webapps cujainterface de usuário acontece via touch.
  26. 26. Web app• Site ou serviço que roda dentro do contexto de um browser.
  27. 27. Onde roda
  28. 28. Por quê?• Código HTML5 não intrusivo;• Open-source;• Lightweight;• Multiplataforma por progressive enhancement;• Suporte para acessibilidade;• Personalizável;• Inclui biblioteca javascript
  29. 29. Você não precisa saber• HTML5;• CSS3;• Javascript;• JQuery;
  30. 30. O que preciso para desenvolver• Editor de texto;• Browser.• Compilador híbrido? Framework? Não!• Emulador? Simulador? www.mobilexweb.com/emulators
  31. 31. Voltinha no código
  32. 32. Customize seu tema
  33. 33. O que dá pra fazer? Mais em http://www.jqmgallery.com/
  34. 34. Lembre-se que podemos usar JS para:• Carregar conteúdo;• Customizações especiais;• Estilizar para dispositivos não compatíveis;• Geolocalização, cache off-line, acelerômetro;•
  35. 35. Compatibilidade• iOS;• Android;• IE 9;• Blackberry >= 5.0;• Symbian Touch;• HP WebOS;• Windows Phone;• Opera Mini, Opera Mobile, Firefox;• Bada, Meego, Kindle...
  36. 36. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg Obedeça os padrões
  37. 37. Seu sistema móvel está bom? http://ready.mobi/launch.jsp?locale=en_EN
  38. 38. Seu sistema móvel está bom? http://www.gomobrasil.com.br/br/d/
  39. 39. http://bit.ly/testemobilehttp://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg É possível debugar no dispositivo
  40. 40. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg Livros
  41. 41. marceloricardoquinta@gmail.com @mrquinta

×