mobile web application best practices

Universidade AtlnticaLicenciatura em Sistemas e Tecnologias da InformaoSeminrio de Sistemas e Tecnologias de Informao I

Mobile Web Application Best PracticesDocente: Prof Dr. Marcrio Chaves

Grupo: Pedro Moita Aluno: 777201254 Ricardo Saragoa Aluno: 20121638 Vitor Ribeiro Aluno: 20121666

Ano Lectivo 2012/2013

1

AgendaMobile Web Application Best Practices2

2


3

Introduo

Com o aumento da utilizao dos dispositivos mveis e da sua capacidade de processamento, assistimos ao aparecimento de inmeras aplicaes web para dispositivos mveis. Mas os dispositivos mveis possuem algumas limitaes e especificidades quando comparados com os sistemas desktop.

Algumas Limitaes Menor poder de processamento.Memoria limitada.Tamanho do ecr.Autonomia.Custo de acesso internet.

Devido s diferentes caractersticas entre os dispositivos mveis e s limitaes que estes ainda possuem face aos desktops, a The World Wide Web Consortium (W3C) emitiu um conjunto de boas prticas para o desenvolvimento de aplicaes web.

Mobile Web Application Best Practices

4


5

O Potencial Mvel

Para compreender a importncia das aplicaes para dispositivos mveis, devemos olhar para o mercado do acesso internet onde podemos verificar a sua crescente evoluo.

Segundo os dados do Servio de Acesso Internet - 3. trimestre de 2012 disponibilizado pela ANACOM o acesso de banda larga mvel internet j bastante superior ao fixo.


6

O Potencial Mvel

Segundo um estudo da StatCounter, o acesso internet por dispositivos mveis quase duplicou no mundo de 2011 para 2012.

De Janeiro de 2011 para 2012, o acesso Internet atravs de dispositivos mveis sem incluir tablets, nem portteis cresceu de 4,3% para 8,5% no total de acessos escala mundial.


7


8

DefiniesAplicao MvelAs aplicaes mveis so programas compactos que foram desenhados para executarem tarefas especficas num dispositivo mvel.Aplicao Mvel Nativa sempre instalada no dispositivo, algumas delas j esto pr-instaladas ou ento podem ser instaladas atravs uma App Store. So desenvolvidas especificamente para cada tipo de dispositivo o que leva a uma maior integrao com as funes do dispositivo. So as mais utilizadas.Aplicao Web Mvel A aplicao web reside num servidor e acedida atravs da Internet. Este tipo de aplicaes j capaz de efectuar a maior parte das funes das aplicaes nativas. Normalmente efectuado o download do cdigo necessrio para o dispositivo mvel a cada execuo. Este tipo de software escrito como uma pgina web em HTML e CSS com algumas funes em JavaScript, isto significa que a aplicao pode ser executada a partir que qualquer browser independentemente do dispositivo.Aplicao HbridaUma aplicao hbrida uma aplicao web em que parte do cdigo transferido para o cliente, normalmente para apresentar a aplicao como nativa ao utilizador (instalando um cone no dispositivo), Para tirar partido de algumas funes especficas do dispositivo ou para poderem ser utilizadas em modo offline.


9

Tipos de AppsMobile Web Application Best Practices

10


11

Vantagens das Apps web Vs Apps nativasMobile Web Application Best Practices12

Disponibilidade As aplicaes web ficam disponveis imediatamente aps a sua publicao para todos os tipos de dispositivos mveis. J as aplicaes nativas requerem o download e instalao para poderem ser utilizadas.

Compatibilidade A aplicao apresentada como um site podendo ser acedida atravs de todos os tipos de dispositivos com browser. Por outro lado as aplicaes nativas requerem uma verso especifica para cada plataforma (Android, iOS, etc).

Actualizaes imediatas Numa aplicao web as actualizaes so mais rpidas e flexveis. A actualizao fica disponvel para todos os clientes. No caso das aplicaes nativas a actualizao tem de ser efectuada em separado para cada plataforma e requere o download e instalao para ficar disponvel.

Vantagens das Apps web Vs Apps nativasFacilidade de pesquisa Uma aplicao web pode ser encontrada mais facilmente atravs de um motor de busca, ou os utilizadores podem ser redireccionados automaticamente para a aplicao mobile atravs do site principal. As aplicaes nativas esto disponveis nas apps stores proprietrias. Partilha A aplicao web pode ser partilha facilmente, pois basta partilhar o link que pode ser enviado por mail, rede social, etc. Os utilizadores podem tambm ser reencaminhados a partir de blogs, foruns, etc.

Tempo e Custo O desenvolvimento de uma aplicao web feito mais rapidamente e com um custo mais baixo do que uma aplicao nativa, especialmente se o objectivo estar presente nos diversos tipos de dispositivos.

Suporte O investimento numa aplicao no acaba no momento em que disponibilizada, necessrio suportar e actualizar a aplicao, o que muito mais fcil e menos dispendioso nas aplicaes web do que nas aplicaes nativas.

Mobile Web Application Best Practices13


14

Melhores Praticas de Aplicaes Web para Dispositivos Moveis

As melhores prticas de desenvolvimento para aplicaes web foram criadas pelo World Wide Web Consortium (W3C). Estas boas prticas tm como objectivo desenvolver um padro aberto internacionalmente para garantir o desenvolvimento e evoluo de aplicaes web para dispositivos mveis.

As boas prticas devem ser aplicadas de modo a tornar as aplicaes mais simples, leves, rpidas e seguras, as boas praticas podem-se dividir em seis grandes grupos:

Dados da AplicaoSegurana e PrivacidadeDar Informao e Controlo ao UtilizadorConsumo moderado dos recursos do dispositivoExperincia do UtilizadorContextos de EntregaOutras Consideraes


URI Identificador Uniforme de Recursos URI significa a identificao especfica do recursoURI -> consiste em um trecho da URL excluindo-se o nome do dominio e a query string. Ele especifica o recurso. Por exemplo: URL :[url]http://java.sun.com/products/servlet/index.htm[/url] URI : /products/servlet/index.html 15

Dados da Aplicao

A maioria das aplicaes necessita de armazenar diversos tipos de dados, os dados introduzidos pelo utilizador na sua utilizao e as configuraes da prpria aplicao.

Estas melhores prticas descrevem a melhor forma de gerir os dados de uma aplicao web.

Moderao na Utilizao de Cookies - A informao guardada nos cookies enviada para o servidor a cada request por isso a sua utilizao excessiva pode impactar o desempenho, em particular numa rede mvel.

Utilizar a tecnologia adequada para guardar dados do lado do cliente - Utilizar o armazenamento do lado do cliente nas aplicaes web a melhor forma de garantir um bom tempo de arranque e melhor capacidade de resposta.

Replicar dados locais para um servidor se necessrio - Regra geral os dados que necessitam de ser partilhados ou recuperados devem de ser enviados para o servidor o mais rpido possvel.


16

Segurana e Privacidade

Utilize informaes confiveis e proteja todas as informaes pessoais. As aplicaes web para dispositivos mveis esto sujeitas aos mesmos riscos que as aplicaes web para desktop, assim so aplicadas as mesmas recomendaes.

Esta boa pratica no pretende ser exaustiva mas sim focar os pontos mais importantes.

No execute dados JSON no confiveis Executar cdigo JavaScript malicioso num dispositivo mvel especialmente perigoso, pois pode permitir acesso a dados sensveis como a localizao, dados dos contactos, etc.


json (Java Script Object Notation) uma formatao leve de troca de dados17

Dar Informao e Controlo ao Utilizador

Permitir que o utilizador controle o comportamento da aplicao no acesso rede e aos dados armazenados no dispositivo.

Sempre que possvel, prefervel utilizar as funcionalidades nativas do browser para notificar o utilizador destes acessos, no entanto as melhores prticas descritas abaixo descrevem as normas a adoptar pelas aplicaes em situaes onde as funcionalidades nativas dos browsers podem no ser suficientes para garantir a informao e controlo ao utilizador.

Garanta que o utilizador informado sobre a utilizao de informao pessoal e do dispositivo - O utilizador deve ser informado no primeiro acesso a aplicao ou no primeiro acesso a informao do utilizador. A notificao deve conter informao suficiente para que o utilizador possa avaliar se permite o acesso da aplicao aos seus dados

Activar o Automatic Sign-in - Se a aplicao requer que o utilizador se identifique atravs de username e password deve disponibilizar a opo de login automtico nas prximas sesses.


Consumo moderado dos recursos do dispositivo

A melhor maneira que assegurar que a aplicao executa de forma rpida minimizar o consumo de memria, processador e largura de banda. Recursos que esto muito mais limitados num dispositivo mvel do que num desktop.

Compresso de dados - Os dados devem de ser comprimidos para uma transmisso mais eficiente.

Minimizar a aplicao e os dados - As aplicaes mais pequenas so transferidas e executadas mais rapidamente.

Evite Redireccionar- O atraso provocado pelo redireccionar dos pedidos muito alto nas redes moveis.

Optimizar os pedidos a rede - prefervel efectuar menos pedidos com mais informao do que vrios pedidos com pouca informao.

Evitar a utilizao de recursos externos - Sempre que possvel combine todos os style sheets e todos os scripts num nico recurso.Mobile Web Application Best Practices19

CCS style sheets Seu principal benefcio prover a separao entre o formato e o contedo de um documento.19

Consumo moderado dos recursos do dispositivoAgregar imagens estticas num nico recurso composto - Se carregar cada imagem separadamente, cada imagem representa um pedido http o que provoca uma degradao de performance.

Inclua as imagens de background em CSS Style Sheets - As imagens de background podem ser codificadas como dados URI.

Armazene os recursos em cache pelas suas referncias - os Recursos podem ser armazenados em cache com um URI que inclua a referncia ao seu contedo.

Utilize a cache para dados AJAX - Sempre que possvel os dados acedidos por AJAX devem de estar na cache.

No utilize cookies de forma desnecessria - Os recursos estticos no necessitam de cookies.

Mantenha o tamanho da DOM (Document Object Model) razovel - O tamanho da memria para a DOM ode estar limitado em alguns dispositivos.Mobile Web Application Best Practices20

DOM - onde pode-se dinamicamente alterar e editar a estrutura, contedo e estilo de um documento eletrnico, permitindo que o documento seja mais tarde processado e os resultados desse processamento, incorporados de volta no prprio documento20

Experincia do Utilizador

Dado o nvel adicional de complexidade de interaco com uma aplicao num dispositivo mvel devem ser tomados em conta alguns aspectos importantes: Latncia, mtodo de interaco e consistncia dos dados.

Optimize a aplicao para um arranque rpido - A experincia de utilizao fortemente afectada pelo tempo que a aplicao demora a iniciar.

Minimize a percepo da latncia - Minimizar a percepo de latncia por parte do utilizador um factor importante para a usabilidade da aplicao.

Desenhe a aplicao para vrios mtodos de interaco - Os meios para interagir com a aplicao variam de device para device.

Preserve o focus nos updates dinmicos - A utilizao do mtodo JavaScript focus s deve de ser efectuada quando essencial para a utilizao da aplicao.Mobile Web Application Best Practices21

Experincia do Utilizador

Utilize Fragment IDs- As aplicaes web podem mudar a vista sem ter de recarregar a pgina inteira utilizando a tcnica de mostrar e esconder seces de contedos da pgina.

Utilize o Click-to-Call As funes nativas do telefone fazer chamas, enviar sms, etc) devem ser utilizadas para facilitar a interaco das aplicaes com o dispositivo.

Garantir o enquadramento do texto - No utilize medidas em pixis. Utilize a percentagem e medidas relativas para enquadrar o texto automaticamente.

Garanta a consistncia de estado entre dispositivos - Os dados actualizados num dispositivo, devem de ser vistos de forma consistente noutros dispositivos.

Considere as tecnologias mveis para iniciar as aplicaes - Os mtodos de entrega de contedos por rede (Push) permitem que notificaes e updates possam ser enviados para o dispositivo mesmo quando esto fora do contexto da aplicao.

Utilize meta viewport element para identificar o tamanho do ecr - O viewport meta tag diz ao dispositivo em que escala deve de mostra a pgina.Mobile Web Application Best Practices22

Fragment IDs - a ultima parte do URI aponta para o recurso In URIs for MIME text/html pages such as http://www.example.org/foo.html#bar the fragment refers to the element with id="bar". 22

Contextos de Entrega

Os vrios contextos de entrega (como os diversos tipos de dispositivos) uma caracterstica importante das aplicaes. As aplicaes web para dispositivos mveis devem adaptar-se ao dispositivo onde esto a ser executadas ajustando o contedo e a navegao de modo a oferecer uma boa experincia de utilizao no maior nmero de dispositivos possvel.

Prefira a deteco do lado do servidor sempre que possvel - Sempre que possvel utilize os dados disponveis no servidor para determinar o contexto de entrega.

Utilize a deteco do lado do cliente quando necessrio - Quando no possvel determinar algumas propriedades do contexto de entrega do lado do servidor a informao pode ser obtida do lado do cliente.

Utilize a classificao do dispositivo para simplificar a adaptao do utilizador - classifique os dispositivos em classes e construa uma verso da aplicao por cada classe.

Suporte um ambiente No JavaScript - Aplicaes baseadas em Script e XHR no so suportadas por todos os browser.

Oferecer ao utilizador a escolha do interface - Quando existem varias verses da aplicao deve sempre ser dada ao utilizador a opo de alterar a verso a utilizar.


Outras Consideraes

As prticas abaixo indicadas embora no sejam boas prticas da W3C, so boas prticas adoptadas pela maioria da comunidade de programadores e so fundamentais para o bom desenvolvimento de aplicaes web.

Considere utilizar elementos Canvas ou SVG para grficos dinmicos - Os elementos Canvas especificam uma rea no ecr onde pode utilizar JavaScript para desenhar grficos simples. O SVG pelo contrrio utiliza XML para definir um vector de elementos grficos.

Informe o utilizador sobre o acesso automtico rede - O trfego de rede num dispositivo mvel desgasta a bateria e pode ter custos.

Fornecer os meios suficientes para o controlo automtico do acesso rede - O utilizador deve de ter o controlo sobre os acessos automticos rede.


Canvas - um elemento da HTML5 destinado a delimitar uma rea para renderizao dinmica de grficosSVG - Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e grficos bidimensionais24


25

Caso Prtico

Um bom exemplo de uma aplicao web construda para dispositivos mveis, o m.Youtube.comNesta aplicao podemos ver as melhores praticas em execuo. Podemos verificar que foi construda com o intuito de proporcionar uma boa experincia de utilizao, resultando numa aplicao prtica e com as mesmas funcionalidades da aplicao nativa.

Link demostrao:http://www.youtube.com/watch?feature=player_embedded&v=GGT8ZCTBoBA



27

Consideraes Finais

Com a exploso do acesso internet por banda larga mvel, o mercado empresarial tentou adaptar as suas aplicaes para os dispositivos moveis, mas nem sempre da melhor forma. Para ajudar no sucesso das aplicaes web para dispositivos moveis, a W3C elaborou um conjunto de boas praticas para o desenvolvimento das mesmas.

Podemos agrupar as melhores prticas em seis grandes grupos:Reduzir a utilizao de rede Utilize as funcionalidades dos protocolos web de modo a reduzir a latncia da rede.Dar controlo ao utilizador Os dispositivos mveis so utilizados nos mais variados contextos, desde lazer ate tarefas importantes. Informa os utilizadores sobre as aces das aplicaes.Aplique os princpios de desenvolvimento web Os dispositivos mveis so mais um modo de aceder a aplicaes web. Os princpios de desenvolvimento para web, so aplicveis para dispositivos mveis.Flexibilidade As aplicaes devem de ser desenhadas para correr nos mais variados dispositivos mveis.Explore as funes especficas Existem funes especficas nos dispositivos mveis, aprenda e utilize.Optimize o tempo de resposta Todos os detalhes contam, optimize o tempo de resposta para uma boa experincia de utilizao.

Resumindo estas boas prticas foram criadas para tornar a experincia de utilizao mais agradvel, rpida e segura.


Referncias Bibliogrficas

1. World Wide Web Consortium (2010). Mobile Web Application Best Practices, Disponvel online em http://www.w3.org/TR/2010/REC-mwabp-20101214/2. World Wide Web Consortium (2008). Mobile Web Best Practices 1.0, Disponvel online em http://www.w3.org/TR/mobile-bp3. World Wide Web Consortium. Pgina institucional , Disponvel online em [http://www.w3.org/]4. World Wide Web Consortium. W3C WebApps Working Group, Disponvel online em http://www.w3.org/2008/webapps/5. World Wide Web Consortium. W3C Device APIs Working Group , Disponvel online em http://www.w3.org/2009/dap/6. OMTP and BONDI. OMTP and BONDI , Disponvel online em http://bondi.omtp.org/7. World Wide Web Consortium (2012). HTML5, Ian Hickson and David Hyatt, W3C Working Draft, Disponvel online em http://www.w3.org/TR/html5/8. Opera Software. Opera Web Widget API , Disponvel online em http://dev.opera.com/libraries/widgetobject/9. World Wide Web Consortium (2008). Offline Web Applications, Anne Van Kesteren and Ian Hickson, W3C Working Group Note, Disponvel online em http://www.w3.org/TR/offline-webapps/10. The Open Web Application Security Project. Main Page, Disponvel online em https://www.owasp.org/11. Douglas Crockford repository. Implementation of a secure JSON parser in JavaScript, Disponvel online em https://raw.github.com/douglascrockford/JSON-js/master/json_parse.js/12. D. Crockford (2006). The application/json Media Type for JavaScript Object Notation (JSON), Disponvel online em http://www.ietf.org/rfc/rfc462713. Arthur Blake (2011). JavaScript Compressor, Disponvel online em http://compressorrater.thruhere.net/14. Ajax Patterns. Unique URLs, Disponvel online em http://ajaxpatterns.org/Unique_URLs/15. H. Schulzrinne (2004). The tel URI for Telephone Numbers IETF, Disponvel online em http://www.ietf.org/rfc/rfc3966.txt16. E. Wilde and A. Vaha-Sipila (2010). URI Scheme for Global System for Mobile Communications (GSM) Short Message Service (SMS), IETF, Disponvel online em http://www.ietf.org/rfc/rfc3966.txt17. Open Mobile Alliance (2006). User Agent Profile , OMA, Disponvel online em http://www.openmobilealliance.org/technical/release_program/docs/UAProf/V2_0-20060206-A/OMA-TS-UAProf-V2_0-20060206-A.pdf18. Open Mobile Alliance. OMA Push specifications, OMA, Disponvel online em http://technical.openmobilealliance.org/Technical/wapindex.aspx19. Jo Rabin et al (2008). Device Description Repository Simple API, W3C, Disponvel online em http://www.w3.org/TR/DDR-Simple-API/20. Bert Bos et al (2009). Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C, Disponvel online em http://www.w3.org/TR/CSS21/media.html21. Hkon Wium Lie, Tantek elik, Daniel Glazman, Anne van Kesteren (2010). Media Queries, W3C, Disponvel online em http://www.w3.org/TR/css3-mediaqueries/22. mobiThinking (2010). What is a Web-based mobile application or Web app? Heres expert opinion from the W3C, Disponvel online em http://mobithinking.com/blog/what-is-a-web-app23. Human Service Solutions. Mobile Website vs. Mobile App (Application): Which is Best for Your Organization?, Disponvel online em http://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/24. Autoridade Nacional de Comunicaes (2012). Servio de Acesso Internet - 3. trimestre de 2012 , Disponvel online em http://www.anacom.pt/render.jsp?contentId=1143810Mobile Web Application Best Practices29

mobile web application best practices

Documents