Mobile Web Application Best Practices

Universidade Atlântica
Licenciatura em Sistemas e Tecnologias da Informação
Seminário de Sistemas e Tecnologias de Informação I

Mobile Web Application
Best Practices

Docente: Prof Dr. Marcírio Chaves

Grupo: Pedro Moita Aluno: 777201254
Ricardo Saragoça Aluno: 20121638
Vitor Ribeiro Aluno: 20121666

Ano Lectivo 2012/2013

Agenda

Introdução

O Potencial Móvel

Definições

Vantagens Apps Web vs Apps Nativas

Melhores Praticas

Caso Prático

Considerações Finais

Mobile Web Application Best Practices 2

Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



Introdução

Com o aumento da utilização dos dispositivos móveis e da sua capacidade de processamento,
assistimos ao aparecimento de inúmeras aplicações web para dispositivos móveis. Mas os dispositivos
móveis possuem algumas limitações e especificidades quando comparados com os sistemas desktop.

• Algumas Limitações
– Menor poder de processamento.
– Memoria limitada.
– Tamanho do ecrã.
– Autonomia.
– Custo de acesso á internet.

Devido ás diferentes características entre os dispositivos móveis e às
limitações que estes ainda possuem face aos desktops, a
“The World Wide Web Consortium “(W3C) emitiu um conjunto de
boas práticas para o desenvolvimento de aplicações web.

Mobile Web Application Best Practices
4

Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



O Potencial Móvel

Para compreender a importância das aplicações para dispositivos móveis, devemos olhar
para o mercado do acesso à internet onde podemos verificar a sua crescente evolução.

Segundo os dados do “Serviço de Acesso à Internet - 3.º trimestre de 2012” disponibilizado
pela ANACOM o acesso de banda larga móvel à internet já é bastante superior ao fixo.

6

O Potencial Móvel

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

De Janeiro de 2011 para 2012, o acesso à Internet através de dispositivos móveis – sem incluir tablets,
nem portáteis – cresceu de 4,3% para 8,5% no total de acessos à escala mundial.

7

Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



Definições
• Aplicação Móvel
– As aplicações móveis são programas compactos que foram desenhados para executarem tarefas
específicas num dispositivo móvel.
• Aplicação Móvel Nativa
– É sempre instalada no dispositivo, algumas delas já estão pré-instaladas ou então podem ser instaladas
através uma App Store. São desenvolvidas especificamente para cada tipo de dispositivo o que leva a uma
maior integração com as funções do dispositivo. São as mais utilizadas.
• Aplicação Web Móvel
– A aplicação web reside num servidor e é acedida através da Internet. Este tipo de aplicações já é capaz de
efectuar a maior parte das funções das aplicações nativas. Normalmente é efectuado o download do
código necessário para o dispositivo móvel a cada execução. Este tipo de software é escrito como uma
página web em HTML e CSS com algumas funções em JavaScript, isto significa que a aplicação pode ser
executada a partir que qualquer browser independentemente do dispositivo.
• Aplicação Híbrida
– Uma aplicação híbrida é uma aplicação web em que parte do código é transferido para o cliente,
normalmente para apresentar a aplicação como nativa ao utilizador (instalando um ícone no dispositivo),
Para tirar partido de algumas funções específicas do dispositivo ou para poderem ser utilizadas em modo
offline.

9

Tipos de Apps

10

Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



Vantagens das Apps web Vs Apps nativas

• Disponibilidade – As aplicações web ficam disponíveis imediatamente após a sua
publicação para todos os tipos de dispositivos móveis. Já as aplicações nativas
requerem o download e instalação para poderem ser utilizadas.

• Compatibilidade – A aplicação é apresentada como um site podendo ser acedida
através de todos os tipos de dispositivos com browser. Por outro lado as aplicações
nativas requerem uma versão especifica para cada plataforma (Android, iOS, etc).

• Actualizações imediatas – Numa aplicação web as actualizações são mais rápidas e
flexíveis. A actualização fica disponível para todos os clientes. No caso das aplicações
nativas a actualização tem de ser efectuada em separado para cada plataforma e
requere o download e instalação para ficar disponível.


Vantagens das Apps web Vs Apps nativas

• Facilidade de pesquisa – Uma aplicação web pode ser encontrada mais facilmente
através de um motor de busca, ou os utilizadores podem ser redireccionados
automaticamente para a aplicação mobile através do site principal. As aplicações
nativas estão disponíveis nas apps stores proprietárias.

• Partilha – A aplicação web pode ser partilha facilmente, pois basta partilhar o link que
pode ser enviado por mail, rede social, etc. Os utilizadores podem também ser
reencaminhados a partir de blogs, foruns, etc.

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

• Suporte – O investimento numa aplicação não acaba no momento em que é
disponibilizada, é necessário suportar e actualizar a aplicação, o que é muito mais fácil
e menos dispendioso nas aplicações web do que nas aplicações nativas.


Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



Melhores Praticas de Aplicações
Web para Dispositivos Moveis

As melhores práticas de desenvolvimento para aplicações web foram criadas pelo World Wide Web Consortium
(W3C). Estas boas práticas têm como objectivo desenvolver um padrão aberto internacionalmente para garantir o
desenvolvimento e evolução de aplicações web para dispositivos móveis.

As boas práticas devem ser aplicadas de modo a tornar as aplicações mais simples, leves, rápidas e seguras, as boas
praticas podem-se dividir em seis grandes grupos:

• Dados da Aplicação
• Segurança e Privacidade
• Dar Informação e Controlo ao Utilizador
• Consumo moderado dos recursos do dispositivo
• Experiência do Utilizador
• Contextos de Entrega
• Outras Considerações


Dados da Aplicação

A maioria das aplicações necessita de armazenar diversos tipos de dados, os dados introduzidos
pelo utilizador na sua utilização e as configurações da própria aplicação.

Estas melhores práticas descrevem a melhor forma de gerir os dados de uma aplicação web.

• Moderação na Utilização de Cookies - A informação guardada nos cookies é enviada para o servidor
a cada request por isso a sua utilização excessiva pode impactar o desempenho, em particular numa rede
móvel.

• Utilizar a tecnologia adequada para guardar dados do lado do cliente - Utilizar o
armazenamento do lado do cliente nas aplicações web é a melhor forma de garantir um bom tempo de
arranque e melhor capacidade de resposta.

• Replicar dados locais para um servidor se necessário - Regra geral os dados que necessitam de
ser partilhados ou recuperados devem de ser enviados para o servidor o mais rápido possível.


Segurança e Privacidade

Utilize informações confiáveis e proteja todas as informações pessoais. As
aplicações web para dispositivos móveis estão sujeitas aos mesmos riscos que as
aplicações web para desktop, assim são aplicadas as mesmas recomendações.

Esta boa pratica não pretende ser exaustiva mas sim focar os pontos mais
importantes.

• Não execute dados JSON não confiáveis – Executar código JavaScript malicioso num
dispositivo móvel é especialmente perigoso, pois pode permitir acesso a dados sensíveis como a
localização, dados dos contactos, etc.


Dar Informação e Controlo ao Utilizador

Permitir que o utilizador controle o comportamento da aplicação no acesso á rede e aos dados
armazenados no dispositivo.

Sempre que possível, é preferível utilizar as funcionalidades nativas do browser para notificar o
utilizador destes acessos, no entanto as melhores práticas descritas abaixo descrevem as normas
a adoptar pelas aplicações em situações onde as funcionalidades nativas dos browsers podem
não ser suficientes para garantir a informação e controlo ao utilizador.

• Garanta que o utilizador é informado sobre a utilização de informação pessoal e do
dispositivo - O utilizador deve ser informado no primeiro acesso a aplicação ou no primeiro acesso a informação do
utilizador. A notificação deve conter informação suficiente para que o utilizador possa avaliar se permite o acesso da
aplicação aos seus dados

• Activar o “Automatic Sign-in” - Se a aplicação requer que o utilizador se identifique através de “username” e
“password” deve disponibilizar a opção de login automático nas próximas sessões.


Consumo moderado dos recursos do dispositivo

A melhor maneira que assegurar que a aplicação executa de forma rápida é minimizar o consumo de
memória, processador e largura de banda. Recursos que estão muito mais limitados num dispositivo móvel do
que num desktop.

• Compressão de dados - Os dados devem de ser comprimidos para uma transmissão mais eficiente.

• Minimizar a aplicação e os dados - As aplicações mais pequenas são transferidas e executadas mais
rapidamente.

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

• Optimizar os pedidos a rede - É preferível efectuar menos pedidos com mais informação do que vários pedidos
com pouca informação.

• Evitar a utilização de recursos externos - Sempre que possível combine todos os “style sheets” e todos os scripts
num único recurso.


Consumo moderado dos recursos do dispositivo

• Agregar imagens estáticas num único recurso composto - Se carregar cada imagem
separadamente, cada imagem representa um pedido http o que provoca uma degradação 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 referências - os Recursos podem ser armazenados em
cache com um URI que inclua a referência ao seu conteúdo.

• Utilize a cache para dados AJAX - Sempre que possível os dados acedidos por AJAX devem de estar
na cache.

• Não utilize cookies de forma desnecessária - Os recursos estáticos não necessitam de cookies.

• Mantenha o tamanho da DOM (Document Object Model) razoável - O tamanho da memória para
a DOM ode estar limitado em alguns dispositivos.


Experiência do Utilizador

Dado o nível adicional de complexidade de interacção com uma aplicação num dispositivo
móvel devem ser tomados em conta alguns aspectos importantes: Latência, método de
interacção e consistência dos dados.

• Optimize a aplicação para um arranque rápido - A experiência de utilização é fortemente afectada
pelo tempo que a aplicação demora a iniciar.

• Minimize a percepção da latência - Minimizar a percepção de latência por parte do utilizador é um
factor importante para a usabilidade da aplicação.

• Desenhe a aplicação para vários métodos de interacção - Os meios para interagir com a aplicação
variam de device para device.

• Preserve o focus nos updates dinâmicos - A utilização do método JavaScript focus só deve de ser
efectuada quando é essencial para a utilização da aplicação.


Experiência do Utilizador
• Utilize “Fragment ID’s”- As aplicações web podem mudar a vista sem ter de recarregar a página
inteira utilizando a técnica de mostrar e esconder secções de conteúdos da página.

• Utilize o “Click-to-Call – As funções nativas do telefone fazer chamas, enviar sms, etc) devem ser
utilizadas para facilitar a interacção das aplicações com o dispositivo.

• Garantir o enquadramento do texto - Não utilize medidas em pixéis. Utilize a percentagem e
medidas relativas para enquadrar o texto automaticamente.

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

• Considere as tecnologias móveis para iniciar as aplicações - Os métodos de entrega de conteúdos
por rede (“Push”) permitem que notificações e updates possam ser enviados para o dispositivo
mesmo quando estão fora do contexto da aplicação.

• Utilize “meta viewport element” para identificar o tamanho do ecrã - O “viewport meta tag” diz
ao dispositivo em que escala deve de mostra a página.


Contextos de Entrega

Os vários contextos de entrega (como os diversos tipos de dispositivos) é uma característica
importante das aplicações. As aplicações web para dispositivos móveis devem adaptar-se ao
dispositivo onde estão a ser executadas ajustando o conteúdo e a navegação de modo a oferecer
uma boa experiência de utilização no maior número de dispositivos possível.

• Prefira a detecção do lado do servidor sempre que possível - Sempre que possível utilize os dados
disponíveis no servidor para determinar o contexto de entrega.
• Utilize a detecção do lado do cliente quando necessário - Quando não é possível determinar
algumas propriedades do contexto de entrega do lado do servidor a informação pode ser obtida
do lado do cliente.
• Utilize a classificação do dispositivo para simplificar a adaptação do utilizador - classifique os
dispositivos em classes e construa uma versão da aplicação por cada classe.
• Suporte um ambiente Não JavaScript - Aplicações baseadas em Script e XHR não são suportadas
por todos os browser.
• Oferecer ao utilizador a escolha do interface - Quando existem varias versões da aplicação deve
sempre ser dada ao utilizador a opção de alterar a versão a utilizar.


Outras Considerações

As práticas abaixo indicadas embora não sejam boas práticas da W3C, são
boas práticas adoptadas pela maioria da comunidade de programadores e são
fundamentais para o bom desenvolvimento de aplicações web.

• Considere utilizar elementos Canvas ou SVG para gráficos dinâmicos - Os elementos Canvas
especificam uma área no ecrã onde pode utilizar JavaScript para desenhar gráficos simples. O SVG
pelo contrário utiliza XML para definir um vector de elementos gráficos.

• Informe o utilizador sobre o acesso automático à rede - O tráfego de rede num dispositivo móvel
desgasta a bateria e pode ter custos.

• Fornecer os meios suficientes para o controlo automático do acesso à rede - O utilizador deve de
ter o controlo sobre os acessos automáticos à rede.


Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático



Caso Prático

Um bom exemplo de uma aplicação web construída para dispositivos móveis, é o
m.Youtube.com
Nesta aplicação podemos ver as melhores praticas em execução. Podemos verificar que foi
construída com o intuito de proporcionar uma boa experiência de utilização, resultando
numa aplicação prática e com as mesmas funcionalidades da aplicação nativa.

Link demostração:
http://www.youtube.com/watch?feature=player_embedded&v=GGT8ZCTBoBA


Agenda

Introdução

O Potencial Móvel

Definições


Melhores Praticas

Caso Prático




Com a explosão do acesso à internet por banda larga móvel, o mercado empresarial tentou adaptar as suas
aplicações para os dispositivos moveis, mas nem sempre da melhor forma. Para ajudar no sucesso das
aplicações web para dispositivos moveis, a W3C elaborou um conjunto de boas praticas para o
desenvolvimento das mesmas.

• Podemos agrupar as melhores práticas em seis grandes grupos:
– Reduzir a utilização de rede – Utilize as funcionalidades dos protocolos web de modo a reduzir a latência da rede.
– Dar controlo ao utilizador – Os dispositivos móveis são utilizados nos mais variados contextos, desde lazer ate
tarefas importantes. Informa os utilizadores sobre as acções das aplicações.
– Aplique os princípios de desenvolvimento web – Os dispositivos móveis são mais um modo de aceder a aplicações
web. Os princípios de desenvolvimento para web, são aplicáveis para dispositivos móveis.
– Flexibilidade – As aplicações devem de ser desenhadas para correr nos mais variados dispositivos móveis.
– Explore as funções específicas – Existem funções específicas nos dispositivos móveis, aprenda e utilize.
– Optimize o tempo de resposta – Todos os detalhes contam, optimize o tempo de resposta para uma boa
experiência de utilização.

Resumindo estas boas práticas foram criadas para tornar a experiência de utilização mais agradável, rápida e
segura.


Referências Bibliográficas
1. World Wide Web Consortium (2010). Mobile Web Application Best Practices, Disponível online em http://www.w3.org/TR/2010/REC-mwabp-20101214/
2. World Wide Web Consortium (2008). Mobile Web Best Practices 1.0, Disponível online em http://www.w3.org/TR/mobile-bp
3. World Wide Web Consortium. Página institucional , Disponível online em [http://www.w3.org/]
4. World Wide Web Consortium. W3C WebApps Working Group, Disponível online em http://www.w3.org/2008/webapps/
5. World Wide Web Consortium. W3C Device APIs Working Group , Disponível online em http://www.w3.org/2009/dap/
6. OMTP and BONDI. OMTP and BONDI , Disponível online em http://bondi.omtp.org/
7. World Wide Web Consortium (2012). HTML5, Ian Hickson and David Hyatt, W3C Working Draft, Disponível online em http://www.w3.org/TR/html5/
8. Opera Software. Opera Web Widget API , Disponível 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, Disponível online em http://www.w3.org/TR/offline-
webapps/
10. The Open Web Application Security Project. Main Page, Disponível online em https://www.owasp.org/
11. Douglas Crockford repository. Implementation of a secure JSON parser in JavaScript, Disponível 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), Disponível online em http://www.ietf.org/rfc/rfc4627
13. Arthur Blake (2011). JavaScript Compressor, Disponível online em http://compressorrater.thruhere.net/
14. Ajax Patterns. Unique URLs, Disponível online em http://ajaxpatterns.org/Unique_URLs/
15. H. Schulzrinne (2004). The tel URI for Telephone Numbers IETF, Disponível online em http://www.ietf.org/rfc/rfc3966.txt
16. E. Wilde and A. Vaha-Sipila (2010). URI Scheme for Global System for Mobile Communications (GSM) Short Message Service (SMS), IETF, Disponível online em
http://www.ietf.org/rfc/rfc3966.txt
17. Open Mobile Alliance (2006). User Agent Profile , OMA, Disponível online em http://www.openmobilealliance.org/technical/release_program/docs/UAProf/V2_0-20060206-
A/OMA-TS-UAProf-V2_0-20060206-A.pdf
18. Open Mobile Alliance. OMA Push specifications, OMA, Disponível online em http://technical.openmobilealliance.org/Technical/wapindex.aspx
19. Jo Rabin et al (2008). Device Description Repository Simple API, W3C, Disponível 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, Disponível online em http://www.w3.org/TR/CSS21/media.html
21. Håkon Wium Lie, Tantek elik, Daniel Glazman, Anne van Kesteren (2010). Media Queries, W3C, Disponível online em http://www.w3.org/TR/css3-mediaqueries/
22. mobiThinking (2010). What is a Web-based mobile application or Web app? Here’s expert opinion from the W3C, Disponível online em http://mobithinking.com/blog/what-is-a-
web-app
23. Human Service Solutions. Mobile Website vs. Mobile App (Application): Which is Best for Your Organization?, Disponível online em
http://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/
24. Autoridade Nacional de Comunicações (2012). Serviço de Acesso à Internet - 3.º trimestre de 2012 , Disponível online em http://www.anacom.pt/render.jsp?contentId=1143810


Mobile Web Application Best Practices

Recommended

Recommended

More Related Content

Featured

Featured (20)

Mobile Web Application Best Practices