Jquery Mobile
4 gostaram1,668 visualizações
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.
Jquery Mobile
- 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
- 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;
- 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.
- 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
- 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
- 44. marceloricardoquinta@gmail.com @mrquinta