O documento discute estratégias para desenvolvimento de sites móveis, comparando abordagens como responsive web design, mobile first e adaptação no servidor. Apresenta também a biblioteca jQuery Mobile, destacando que ela permite criar webapps multiplataforma de forma não intrusiva por meio de código HTML5 e progressive enhancement.

1. jQuery Mobile
Marcelo Quinta
Triangulum / UFG / Globalcode

2. http://bit.ly/tdcmobile
Site móvel do TDC

3. Onde seu site roda?

5. Adaptar estrutura existente
Criar nova experiência

6. Usuários querem
resposta rápida

7. e com a famosa
Experiência do Usuário

8. Tamanho da tela
Quantidade de cores suportadas
Capacidade de processamento
Capacidade de armazenamento
Tempo de vida da bateria
Mecanismos de interação limitados
Largura de banda e custo de plano
de dados
Falta de padronização no suporte à
mídias

9. Uma visão direta (ágil) sobre
desenvolvimento móvel
http://futurefriend.ly/

10. Tela grande Parada
Focada
Entrada
eficiente Confortável
Conexão rápida
CPU poderoso
CONTEXTO

11. Oncocomeço?

12. A plataforma é o browser (móvel)

13. Conteúdo
Conteúdo

14. Técnica
http://futebolbusiness.com.br/imagens/2011/06/Neymar-Santos.jpg

15. 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 de
browser;
• Future-friendly;
• Manipulação ineficiente de imagens, se não
tomar cuidado;
• Só resolve problema da resolução;

16. Mobile
First
Luke Wroblewski
http://static.lanyrd.net/cropped-profile-photos/6bc54848de8f99c13a1025ac9420b96b01257e09.jpg

17. Progressive Enhacement
• O mesmo HTML “base” para todos os dispositivos;
• Java script para cada perfil;
• Melhoramento progressivo, de acordo com a
demanda;
• A adaptação vai mais para o lado cliente;
• Resolve bem o problema de resolução de
browser e já ocorre uma adaptação mais fina;
• Confiar demais na engine do navegador
cliente;
• Mesmo HTML e imagens continuam...

18. Tecnologias

19. Não perca eu tempo
Nativo X Web

20. Server-side adaptation
• Mais antiga e mais utilizada em grandes aplicações;
• Detecção de dispositivo e entrega de
conteúdo refinado;
• Usada por Google, Facebook, Amazon,Youtube, eBay,
Yahoo, INF-UFG...;
• “It is difficult to find a successful mobile website that
does not use server-side content adaptation” goMobi;
• Maior adaptação possível, com riqueza de
detalhes;
• Bibliotecas de detecção de dispositivo com
preço caro;
• Maior tempo de implementação;

21. Famílias de dispositivos
http://www.cs.gmu.edu/~jessica/VizTree_files/tree.gif

22. 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.

23. Mobile browsers
• Interação
• Baseados em cursor;
• Baseados em touch;
• Baseados em multi-touch;
• Alguns com suporte a zoom;
• Alguns desconhecidos dos
desenvolvedores.

24. JQuery Mobile
http://jquerymobile.com/

25. 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;

26. JQuery Mobile é
Framework multi-plataforma
para criação de webapps cuja
interface de usuário acontece
via touch.

27. Web app
• Site ou serviço que roda dentro do
contexto de um browser.

28. Onde roda

29. Por quê?
• Código HTML5 não intrusivo;
• Open-source;
• Lightweight;
• Multiplataforma por progressive
enhancement;
• Suporte para acessibilidade;
• Personalizável;
• Inclui biblioteca javascript

30. Você não precisa saber
• HTML5;
• CSS3;
• Javascript;
• JQuery;

31. O que preciso para
desenvolver
• Editor de texto;
• Browser.
• Compilador híbrido? Framework? Não!
• Emulador? Simulador?
www.mobilexweb.com/emulators

32. Voltinha no código

35. Customize seu tema

36. O que dá pra fazer?
Mais em
http://www.jqmgallery.com/

37. 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;
•

38. Compatibilidade
• iOS;
• Android;
• IE 9;
• Blackberry >= 5.0;
• Symbian Touch;
• HP WebOS;
• Windows Phone;
• Opera Mini, Opera Mobile, Firefox;
• Bada, Meego, Kindle...

39. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg
Obedeça os padrões

40. Seu sistema móvel está bom?
http://ready.mobi/launch.jsp?locale=en_EN

41. Seu sistema móvel está bom?
http://www.gomobrasil.com.br/br/d/

42. http://bit.ly/testemobile
http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg
É possível debugar no dispositivo

43. http://www.w3.org/Talks/2005/1227-W3C-22C3/Cake.jpg
Livros

44. marceloricardoquinta@gmail.com
@mrquinta