Your SlideShare is downloading. ×
Jquery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Jquery Mobile

1,516
views

Published on

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

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,516
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery Mobile Marcelo Quinta Triangulum / UFG / Globalcode
  • 2. http://bit.ly/tdcmobile Site móvel do TDC
  • 3. Onde seu site roda?
  • 4. Adaptar estrutura existente Criar nova experiência
  • 5. Usuários queremresposta rápida
  • 6. e com a famosaExperiência do Usuário
  • 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. Uma visão direta (ágil) sobre desenvolvimento móvel http://futurefriend.ly/
  • 9. Tela grande Parada Focada Entrada eficiente ConfortávelConexão rápida CPU poderoso CONTEXTO
  • 10. Oncocomeço?
  • 11. A plataforma é o browser (móvel)
  • 12. Conteúdo Conteúdo
  • 13. Técnica http://futebolbusiness.com.br/imagens/2011/06/Neymar-Santos.jpg
  • 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. Mobile First Luke Wroblewskihttp://static.lanyrd.net/cropped-profile-photos/6bc54848de8f99c13a1025ac9420b96b01257e09.jpg
  • 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. Tecnologias
  • 18. Não perca eu tempo Nativo X Web
  • 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. Famílias de dispositivoshttp://www.cs.gmu.edu/~jessica/VizTree_files/tree.gif
  • 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. Mobile browsers• Interação • Baseados em cursor; • Baseados em touch; • Baseados em multi-touch; • Alguns com suporte a zoom; • Alguns desconhecidos dos desenvolvedores.
  • 23. JQuery Mobile http://jquerymobile.com/
  • 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. JQuery Mobile é Framework multi-plataformapara criação de webapps cujainterface de usuário acontece via touch.
  • 26. Web app• Site ou serviço que roda dentro do contexto de um browser.
  • 27. Onde roda
  • 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. Você não precisa saber• HTML5;• CSS3;• Javascript;• JQuery;
  • 30. O que preciso para desenvolver• Editor de texto;• Browser.• Compilador híbrido? Framework? Não!• Emulador? Simulador? www.mobilexweb.com/emulators
  • 31. Voltinha no código
  • 32. Customize seu tema
  • 33. O que dá pra fazer? Mais em http://www.jqmgallery.com/
  • 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. Compatibilidade• iOS;• Android;• IE 9;• Blackberry >= 5.0;• Symbian Touch;• HP WebOS;• Windows Phone;• Opera Mini, Opera Mobile, Firefox;• Bada, Meego, Kindle...
  • 36. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg Obedeça os padrões
  • 37. Seu sistema móvel está bom? http://ready.mobi/launch.jsp?locale=en_EN
  • 38. Seu sistema móvel está bom? http://www.gomobrasil.com.br/br/d/
  • 39. http://bit.ly/testemobilehttp://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg É possível debugar no dispositivo
  • 40. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg Livros
  • 41. marceloricardoquinta@gmail.com @mrquinta