Análise de Boas Práticas para o Desenvolvimento de Web Wapps

FUNDAO DE ENSINO EURPIDES SOARES DA ROCHA
CENTRO UNIVERSITRIO EURPIDES DE MARLIA UNIVEM

CURSO DE BACHARELADO EM SISTEMAS DE INFORMAO
CARLOS EDUARDO MARTINELLI BERGANTIN
ANLISE DE BOAS PRTICAS PARA O DESENVOLVIMENTO DE

WEB WAPPS
MARLIA
2014
CARLOS EDUARDO MARTINELLI BERGANTIN
ANLISE DE BOAS PRTICAS PARA O DESENVOLVIMENTO DE

WEB APPS
Trabalho de Curso apresentado ao Curso de

Bacharelado em Sistemas de Informao da
Fundao de Ensino Eurpides Soares da
Rocha, mantenedora do Centro Universitrio
Eurpides de Marlia UNIVEM, como
requisito parcial para obteno do grau de
Bacharel em Sistemas de Informao.
Orientador
Prof: Me. Ricardo Jos Sabatine
MARLIA
2014
Martinelli, Carlos Eduardo

ANLISE DE BOAS PRTICAS PARA O
DESENVOLVIMENTO DE WEB WAPPS / Carlos Eduardo Martinelli;
orientador: Prof. Me. Ricardo Jos Sabatine. Marlia, SP: [s.n.], 2014.
76 folhas
Monografia (Bacharelado em Sistemas de Informao): Centro

Universitrio Eurpides de Marlia.
1.
2.
CDD: 005.2
3.
Dedico esse trabalho primeiramente Deus

pela realizao de um sonho, a minha filha Maria Luiza
e aos meus familiares, amigos e professores pelo incentivo.
AGRADECIMENTOS
Primeiramente, Deus pelas foras concedidas, e pela oportunidade de concluir mais

uma etapa na minha vida.
minha esposa Mariana e a minha filha que sempre estiveram ao meu lado me
acalmando e me dando fora para realizao de mais um sonho, juntos.
Aos meu familiares e amigos que sempre me apoiaro e acreditaram nas realizaes
de minha vida.
A famlia eFinance pelos incentivos e a dedicao em me ajudar, especialmente ao
Rogerio Bertini Guilen, o qual muito me auxiliou.
Aos professores e colaboradores do UNIVEM, em especial a Prof. Ms. Giuliana
Marega Marques, e ao meu orientador Prof. Ms. Ricardo Jos Sabatine pela ajuda e dedicao
para que o trabalho fosse concludo com sucesso.
Ao pessoal da sala que durante esses quatro anos mostram o quanto importante
batalharmos unidos pelos objetivos, principalmente na formao acadmica.
Ao Grupo Nota 10 sendo eles, Jorge Pereira, Rafael Akira, Italo Inoue, Jssica
Oliveira, Fernando Mazetti, pessoas que fizeram grande parte na minha formao acadmica,
se tornando mais do que colegas de sala, e que vo continuar presentes em minha vida com
certeza.
Obrigado a todas as pessoas que contriburam para meu sucesso e para meu
crescimento como pessoa. Sou o resultado da confiana e da fora de cada um de vocs.
Concentre-se nos pontos fortes, reconhea as fraquezas,

agarre as oportunidades e proteja-se contra as ameaas.
Sun Tzu
O verdadeiro perigo no que computadores comearo a pensar como homens,

mas que homens comearo a pensar como computadores.
Sydney J. Harris
Julgue seu sucesso pelas coisas que voc teve que renunciar para conseguir.
Dalai Lama
BERGANTIN, Carlos Eduardo Martinelli. Anlise de boas prticas para o desenvolvimento de web
apps. 2014. 73 f. Trabalho de Curso (Bacharelado em Sistemas de Informao) Centro Universitrio
Eurpides de Marlia, Fundao de Ensino Eurpides Soares da Rocha, Marlia, 2014.
RESUMO
Com a evoluo constante das variedades de aplicativos mveis que demandam flexibilidade
no acesso e troca de informaes, aumenta a necessidade da qualidade e composio sobre sua
arquitetura. importante compreender quais as melhores prticas que se encaixam nas
aplicaes mveis a serem desenvolvidas. O presente trabalho visa estudar e analisar as boas
prticas do ponto de vista dos desenvolvedores e usurios, onde uma Web App foi
implementada, visando analisar os fatores que incluem interface com o usurio, facilidade de
desenvolvimento, desempenho, infraestrutura de comunicao e manuteno. Outro objetivo,
avaliar os impactos de boas prticas de otimizao de aplicaes web amplamente utilizadas,
uma vez que, em dispositivos mveis algumas prticas podem no ter os benefcios pretendidos,
ou, podem at mesmo prejudicar o desempenho.
Palavras-Chave: aplicao mvel, Web App, sistema web, interface do utilizador, usabilidade.
BERGANTIN, Carlos Eduardo Martinelli. Anlise de boas prticas para o desenvolvimento de web
apps. 2014. 73 f. Trabalho de Curso (Bacharelado em Sistemas de Informao) Centro Universitrio
Eurpides de Marlia, Fundao de Ensino Eurpides Soares da Rocha, Marlia, 2014.
ABSTRACT
With the constant evolution of varieties of mobile applications that require flexibility in it access
and swap of information, enhance the need for quality and composition of its architecture. It is
important to comprise what the best practices that fit in the mobile applications to be developed.
This work aims to study and to analyze good practices from the perspective of developers and
users, where a Web App was implemented in order to analyze the factors that include interface
with user, facility of development, performance, communication infrastructure and
maintenance. Another objective is to evaluate the impacts of good optimization practices of
web applications widely used, since in practice some mobile devices can not have the intended
benefits, or it may even degrade performance.
Key words: mobile application, Web App, Web system, User interface, usability.
LISTA DE ILUSTRAES
Figura 1 - Arquitetura do funcionamento de uma aplicao nativa ......................................... 22
Figura 2 - Arquitetura do funcionamento de uma aplicao hbrida ........................................ 23
Figura 3 - Arquitetura do funcionamento de uma aplicao web ............................................. 25
Figura 4 - Relacionamento entre os componentes da arquitetura MVC................................... 42
Figura 5 - Camadas fornecidas pelo framework Sencha Touch ............................................... 42
Figura 6 - Diagrama de Pacotes da aplicao ........................................................................... 45
Figura 7 - Diagrama de classes do pacote Controller .............................................................. 45
Figura 8 - Diagrama de classes do pacote Model ..................................................................... 46
Figura 9 - Diagrama de classes do pacote View ....................................................................... 47
Figura 10 - Diagrama de classes do pacote Store ..................................................................... 47
Figura 11 - Diagrama de classes do pacote Ext ........................................................................ 48
Figura 12 - Diagrama de classes do pacote Integraes ........................................................... 48
Figura 13 - Cdigo fonte do arquivo web.config para compreso. .......................................... 52
Figura 14 - Cdigo fonte do arquivo web.config para a utilizao do web cache. .................. 53
Figura 15 - Cdigo fonte do arquivo web.config para a utilizao do Keep Alive. .................. 54
Figura 16 - Grfico da utilizao do cache na rede GPRS ....................................................... 57
Figura 17 - Grfico da utilizao do cache na rede 3G ............................................................ 58
Figura 18 - Grfico da utilizao do cache na rede Wi-Fi........................................................ 59
Figura 19 - Grfico da utilizao do Gzip ................................................................................ 60
Figura 20 - Grfico da utilizando a reduo do JavaScript ...................................................... 61
Figura 21 - Grfico da utilizando a reduo do CSS ................................................................ 62
Figura 22 - Tela de login (A) resoluo de 480x800 e (B) 1280x800...................................... 63
Figura 23 - Tela do Twitter (A) resoluo de 480x800 e (B) 1280x800. ................................. 64
Figura 24 - Tela de Imagens (A) resoluo de 480x800 e (B) 1280x800. ............................... 64
Figura 25 - Tela de Contato (A) resoluo de 480x800 e (B) 1280x800. ................................ 65
Figura 26 - Tela de Relatrio (A) resoluo de 480x800 e (B) 1280x800. .............................. 65
Figura 27 - Resultado obtido pela ferramenta YSlow. ............................................................. 67
Figura 28 - Resultado obtido pela ferramenta PageSpeed. ....................................................... 68
Figura 29 - Grfico de algumas tcnicas .................................................................................. 69
Figura 30 - Comparao entre as otimizao na ferramenta PageSpeed, (A) No est otimizado
(B) Est otimizado. ................................................................................................................... 70
Figura 31 - Comparao entre as otimizao na ferramenta YSlow, (A) No est otimizado (B)
Est otimizado. ......................................................................................................................... 70
LISTA DE TABELAS
Tabela 1 - Comparao entre os tipos de aplicaes, Nativo, Hbrido e Web App ................. 26
Tabela 2 - Compatibilidade dos browsers com os principais mdulos do HTML 5. ............... 30
Tabela 3 - Comparao entre os frameworks escolhidos. ........................................................ 35
Tabela 4 - Comparao da utilizao do cache na aplicao utilizando a rede GPRS. ........... 56
Tabela 5 - Comparao da utilizao do cache na aplicao utilizando a rede 3G. ................. 57
Tabela 6 - Comparao da utilizao do cache na aplicao utilizando a rede Wi-Fi. ............ 58
Tabela 7 - Comparao entre a utilizao da tcnica Gzip....................................................... 60
Tabela 8 - Comparao entre os arquivos JavaScript minificados. .......................................... 61
Tabela 9 - Comparao entre os arquivos CSS minificados. ................................................... 62
LISTA DE ABREVIATURAS E SIGLAS

3DES
Triple Data Encryption Standard
3G
Terceira Gerao de Tecnologia de Internet Mvel
AES
Advanced Encryption Standard
API
Application Programming Interface
CSS
Cascading Style Sheets
DES
Data Encryption Standard
DOM
Document Object Model
FT
Financial Times
FTP
File Transfer Protocol
GPRS
General Packet Radio Service
GPS
Global Positioning System
HMAC
Hash-based message authentication code
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
IDE
Integrated Development Environment
IIS
Internet Information Services
iOS
iPhone Operation System
IP
Internet Protocol
JSON
JavaScript Object Notation
LAN
Local Area Network
MD5
Message-Digest algorithm 5
MVC
Model View Controller
NCSA
National Center for Supercomputing Applications
PDA
Personal digital assistant
REST
Representational State Transfer
SDK
Software Development Kit
SHA1
Secure Hash Algorithm 1
SMS
Short Message Service
SVG
Scalable Vector Graphics
URL
Uniform Resource Locator
W3C
World Wide Web Consortium
WHATWG
Web Hypertext Application Technology Working Group
Wi-Fi
Tecnologia para transmisso de dados por rede sem fio
XHR
XMLHttpRequest
SUMRIO
INTRODUO .................................................................................................................................... 17
1
ESTUDO DE APLICAES MVEIS ....................................................................................... 19

1.1
Tipos de aplicaes mveis ................................................................................................... 20
1.1.1
Aplicaes nativas ......................................................................................................... 20
1.1.2
Aplicaes Hbridas ...................................................................................................... 22
1.1.3
Aplicaes Web (Web Apps) ........................................................................................ 23
1.1.4
Comparaes entre os tipos de aplicaes .................................................................... 25
1.1.5
Consideraes finais ...................................................................................................... 27
WEB MOBILE .............................................................................................................................. 28

2.1
HTML ................................................................................................................................... 28
2.2
HTML 5 ................................................................................................................................ 29
2.2.1
Compatibilidade com os navegadores ........................................................................... 29
2.2.2
Novas funcionalidades do HTML 5 .............................................................................. 31
2.3
Hypertext Transfer Protocol (HTTP) .................................................................................... 32
2.4
Tecnologias para desenvolvimento de Web Apps................................................................. 33
2.4.1
jQuery Mobile ............................................................................................................... 34
2.4.2
AppMobi ....................................................................................................................... 34
2.4.3
Sencha Touch ................................................................................................................ 34
2.4.4
Comparativo entre as ferramentas ................................................................................. 35
2.5
Melhores Prticas para desenvolvimento de Aplicao Web Mobile ................................... 35
2.5.1
2.6
3
World Wide Web Consortium (W3C)........................................................................... 36
Consideraes finais .............................................................................................................. 40
IMPLEMENTAO DE UMA WEB APPS ............................................................................... 41

3.1
MVC...................................................................................................................................... 41
3.1.1
MVC Sencha Touch ...................................................................................................... 42
3.2
Descrio da aplicao proposta ........................................................................................... 43
3.3
Implementao da Aplicao ................................................................................................ 44
3.3.1
Pacote Controller .......................................................................................................... 45
3.3.2
Pacote Model ................................................................................................................. 46
3.3.3
Pacote View ................................................................................................................... 46
3.3.4
Pacote Store ................................................................................................................... 47
3.3.5
Pacote Ext ...................................................................................................................... 48
3.3.6
Pacote Integraes ........................................................................................................ 48
3.4
3.4.1
Tcnicas na Autenticao do Usurio ........................................................................... 49
3.4.2
Tcnica de carregamento ............................................................................................... 49
3.4.3
Tcnica de entrada de dados .......................................................................................... 50
3.4.4
Otimizaes do lado do servidor (Otimizaes do servidor web) ................................. 51
RESULTADOS E ANLISES ..................................................................................................... 56

4.1
Cenrio com Cache e sem Cache .......................................................................................... 56
4.2
Cenrio com Gzip e sem Gzip............................................................................................... 59
4.3
Cenrio da minificar do JavaScript e do CSS ....................................................................... 61
4.4
Cenrio de resolues diferentes de Tela .............................................................................. 62
4.5
Anlises e resultados ............................................................................................................. 66
4.5.1
YSLOW......................................................................................................................... 66
4.5.2
PAGESPEED ................................................................................................................ 67
4.6
5
Tcnicas de otimizao ......................................................................................................... 49
Consideraes finais .............................................................................................................. 69
CONCLUSO .............................................................................................................................. 71
5.1
Trabalhos Futuros.................................................................................................................. 72
REFERNCIAS .................................................................................................................................... 73
17
INTRODUO
Nos ltimos anos vem ocorrendo um aumento acelerado na utilizao dos dispositivos
mveis, tornando-se o principal mecanismo de conexo internet. Entre os vrios motivos que
esto levando isso, podemos destacar os dispositivos cada vez mais poderosos em relao a
capacidade de armazenamento, processamento, memria, etc.
A cada dia que passa os usurios esto buscando cada vez mais praticidade e agilidade
ao acessar as informaes na web, isso inclui tarefas simples do seu dia a dia. Um relatrio
apresentado pela Ericsson, prev que no final de 2019 teremos cerca de 9,2 bilhes de conexes
mveis no mundo. Sendo que 5,6 bilhes sero de smartphones [ERICSSON, 2014].
J a Google dispe de um relatrio que informa que em 2012 a frequncia do uso da
internet mvel era de 42% e nos aparelhos estavam instalados 14 aplicativos. Em 2013 esses
dados subiram para 62% e 17 aplicativos instalados. O relatrio tambm menciona que 86%
dos usurios acessam um meio comunicao, sendo rede sociais, e-mail, entre outros, e que
63% utilizam para leituras de notcias, via portais, jornais ou revistas. [GOOGLE SERVICE,
2014].
Visando esse potencial, as empresas esto investindo cada vez mais no
desenvolvimento, seja para criao como para adaptao de seus websites, ou at mesmo
sistemas web para dispositivos mveis. Entretanto, em alguns casos elas no esto tendo o
devido sucesso, seja pela falta de planejamento ou utilizao incorreta das prticas de
programao.
O desenvolvimento voltado para dispositivos mveis tem as suas particularidades, tais
como tamanhos, armazenamento, processamento, utilizao das redes mveis, entre outros.
Essas particularidades esto gerando novos desafios que requerem uma estratgia
completamente diferente da qual utilizada para computadores de mesa.
Atualmente, com a chegada de novas tecnologias como HTML5, CSS3, APIs, etc., os
desenvolvedores passaram a ter mais poder ao implementarem. Em contrapartida quando
utilizados muitos recursos a performance de carregamento do website diminui, podendo
ocasionar uma insatisfao do usurio pela espera.
Pensando nas diferenas entre os dispositivos mveis e os computadores de mesa,
alguns profissionais da rea de desenvolvimento para web, esto abordando com alta
frequncia, a otimizaes. Existem grupos como o W3C, que j disponibiliza um documento
com um conjunto de boas prticas para o desenvolvimento de aplicao web voltada para
18
dispositivos mveis.
Este trabalho abordar algumas otimizaes tanto no lado do cliente como no servidor,
por meio de tcnicas recomendadas pelo documento de boas prticas do W3C, visando
minimizar o tempo de carregamento, latncia da rede, nmeros de requisies HTTP, entre
outros.
Motivao e Justificativa
Tem-se como objetivo estudar e analisar algumas das melhores prticas para se
desenvolver uma aplicao web para dispositivos mveis, mais especficamente, os
smartphones. Para realizar o estudo e a anlise das melhores prticas para desenvolvimento
mobile, foi utilizado um framework e o documento criado pelo grupo W3C.
Contribuir com as empresas e os desenvolvedores, para que possam utilizar algumas
das melhores prticas, proporcionando aos usurios uma agradvel experincia na utilizao da
aplicao.
Objetivos
Tem-se como objetivo estudar e analisar algumas das melhores prticas, para se
desenvolver uma aplicao web para dispositivos mveis, mais especfico, os smartphones.
Para realizar o estudo e a anlise das melhores prticas, foi desenvolvido uma aplicao web
utilizado um framework e as tcnicas de boas prticas disponibilizada no documento criado
pelo grupo W3C, onde mostram as melhores prticas para desenvolvimento mobile.
De modo a contribuir com as empresas e os desenvolvedores, para que possam utilizar
algumas das melhores prticas, proporcionando aos usurios uma agradvel experincia na
utilizao da aplicao.
Organizao do Trabalho
A organizao do trabalho encontra-se organizado da seguinte forma:
Captulo 1 Estudo de Aplicaes Mveis: Foi realizada uma reviso

bibliogrfica sobre aplicaes mveis.
Captulo 2 Web Mobile: Foi realizada uma pesquisa sobre as otimizaes

voltadas para aplicaes mveis.
Captulo 3 Implementao de uma Web Apps: Foi implementado um

prottipo para realizar otimizaes levantadas no segundo capitulo.
Captulo 4 Resultados e Anlises: Foram aplicadas as tcnicas de otimizao

e verificados os resultados obtidos.
Captulo 5 Concluso: Apresentada a concluso do trabalho.
19
ESTUDO DE APLICAES MVEIS

Aplicaes mveis so softwares desenvolvidos para fornecer aos usurios servios
semelhantes a de um computador tradicional, como tarefas, funes ou at mesmo um passa

tempo. As aplicaes so desenvolvidas para serem executadas em dispositivos mveis, como
Smartphone, Tablet, PDA, etc., combinando assim com suas tecnologias de processamento,
memoria, comunicao, localizao, entre outros. Os aplicativos podem ser instalados durante
a fabricao do aparelho, ou por meio de download nas lojas online, como App Store, Google
Play, e Windows Phone Marketplace.
A App Store foi lanada em 2008, um servio exclusivo para os aparelhos da Apple
que utilizam como plataforma principal o iOS, tais como iPhone, iPad, iPod Touch, etc.
permitindo aos usurios efetuarem os downloads diretamente pelos dispositivos mveis, ou via
computador pela iTunes Store. Nesse caso pode ser transferido para o dispositivo na sua
sincronizao com o computador [APPLE, 2014].
O Google Play comeou a existir da unificao do Google com a Android Market em
2012. uma loja online mantida pela Google, que permite aos usurios efetuarem downloads
diretamente nos dispositivos mveis que utilizam como plataforma o Android, ou via
computador pela sua loja, podendo ser transferidos ao dispositivo pela sua sincronizao
[GOOGLE, 2014].
O Windows Phone Marketplace foi disponibilizada pela primeira vez em 2012,
permitindo aos usurios a efetuarem os downloads de aplicativos mveis que utilizam como
plataforma o Windows 8, Windows RT ou Windows Phone [MSDN, 2014].
Os aplicativos mveis disponibilizados nas lojas podem ser pagos ou gratuitos,
dependendo dos fabricantes e so distribudos em categorias como: Jogos, Musicas,
Entretenimento, Livros, entre outros.
A rea de aplicaes mveis est em constante crescimento, devido sua popularidade
e tecnologia apresentada nos dispositivos mveis, tornando assim o desenvolvimento de
aplicaes mais visado. Porm, os nmeros de plataformas e ambientes de desenvolvimento
esto crescendo proporcionalmente, deixando mais difcil a escolha no processo para o
desenvolvimento de um aplicativo, levando em considerao os recursos, o tempo, a
experincia e os custos.
20
1.1 Tipos de aplicaes mveis

Os tipos de aplicaes mveis influenciam diretamente na usabilidade, performance,
custo e tempo da aplicao. Com isso torna-se claro a importncia de analisar os requisitos do
projeto, para que a escolha da arquitetura tenha as melhores funcionalidades, facilidades e
produtividades, obtendo os objetivos necessrios para satisfao do cliente.
As aplicaes mveis podem ser desenvolvidas em trs tipos de arquitetura,
conhecidas como nativa, hbrida e web. Cada tipo possui particularidades, vantagens e
desvantagens.
1.1.1 Aplicaes nativas

Aplicaes Nativas (Native App) so aplicaes desenvolvidas especificamente para
uma plataforma (Sistema operacional) como Android, iOS, Windows Phone, entre outras.
Assim sendo, as aplicaes s funcionaro na plataforma para a qual foi desenvolvida [IBM,
2014].
Para desenvolver um aplicativo tem que conhecer a linguagem e as ferramentas
especificas que so oferecida pelos fabricantes. No caso de iOS utiliza-se a linguagem de
programao Objective-C, framework de desenvolvimento Cocoa Touch e a ferramenta Xcode.
Aps o seu desenvolvimento pode ser publicado na loja da Apple conhecida nos dispositivos
como App Store [APPLE, 2014]. O Android utiliza a linguagem Java com o Android SDK na
ferramenta Eclipse. Para ter a disponibilidade do usurio efetuar o download do aplicativo
desenvolvido, preciso publicar na loja do Google, conhecida como Play Store [GOOGLE,
2014]. No caso do Windows Phone a linguagem utilizada o C# com Windows Phone SDK e
com a ferramenta Visual Studio. Quando a aplicao estiver pronta, pode ser disponibilizada na
loja do Windows, conhecida nos dispositivos como Windows Store, para que usurio tenha
acesso ao download [MSDN, 2014].
Os aplicativos podem ser instalados durante a fabricao do aparelho, ou atravs de
download nas lojas online, j mencionado acima. Eles podero ser classificados em categorias
como jogos, entretenimento, livros, msicas, notcias, etc. Para que os aplicativos possam ser
publicados nas lojas online, precisam ter o certificado da aprovao e a licena para desenvolver
na plataforma desejada. Cada loja tem seus termos e particularidades para ter aprovao do
aplicativo desenvolvido.
21
Vantagens das aplicaes nativas
Experincia aprimorada ao usurio: Por ser um aplicativo nativo possibilita a

melhor utilizao dos recursos grficos, interface, APIs do Sistemas
Operacionais como cmera, bssola, GPS entre outros, proporcionando assim
uma interao mais rpida e agradvel do usurio.
Armazenamento de dados: Aplicao nativa pode realizar o armazenamento

local tanto em arquivos, como em banco de dados offline.
Integrao: A integrao entre aplicativos, torna-se mais simples, o

desenvolvimento mais seguro por conta dos aplicativos estarem utilizando e
acessando a mesma linguagem e mtodos do Sistema Operacional.
Desvantagens das aplicaes nativas
1.1.1.1
Custo alto no desenvolvimento em multiplataformas: Por existirem vrias

plataformas, o aplicativo requer uma verso separada para cada sistema
operacional, tornando assim o tempo e custo mais elevados.
Atualizao na verso aplicativo: Para cada alterao no aplicativo, seja ele na

estrutura ou apenas no contedo, necessrio que o desenvolvedor gere novas
verses para cada sistema operacional, e assim fazendo com que o usurio
efetue um nova instalao do mesmo no dispositivo. No tem a garantia que
todos os usurios estejam usando a mesma verso.
Aprovao nas lojas online: Cada loja tem seus termos e particularidades no
processo de aprovao dos aplicativos, tornando a publicao de um aplicativo
mais complicado.
Arquitetura do aplicativo
As aplicaes nativas, por serem desenvolvidas especificamente para uma nica

plataforma, tm a possibilidade de oferecer alta qualidade na experincia do usurio, com o
acesso do dispositivo mvel, utilizando todos os recursos oferecidos pelo mesmo, como
ilustrado na Figura 1.
22
Figura 1 - Arquitetura do funcionamento de uma aplicao nativa
Fonte: CECCATO, 2014
1.1.2 Aplicaes Hbridas

As aplicaes hbridas combinam o desenvolvimento dos cdigos nativos, com os
cdigos utilizadas na web (HTML, CSS, JavaScript), que so executados em conjunto,
mantendo o acesso aos recursos oferecidos pelo aparelho [IBM, 2014].
Com o intuito de auxiliar e facilitar a implementao das aplicaes hbridas, existem
algumas ferramentas de terceiros, como PhoneGap, Titanium, Kivy, que empacota o cdigo
escrito com as tecnologia da web, para o formato nativo da plataforma do aparelho. Porem cada
ferramenta tem a suas caractersticas e particularidades no processo de implementao
[PHONEGAP, 2014; TITANIUM, 2014; KIVY, 2014]. No so recomendados para aplicaes
intensivas como, jogos ou que requeiram acesso total ao aparelho.
Vantagens das aplicaes hbridas
Suporta mltiplas plataformas: Existem frameworks que transformam

aplicaes escritas na tecnologia web (HTML, CSS, JavaScript), para serem
interpretadas como uma aplicao nativa.
Facilidade no desenvolvimento: Por existirem alguns frameworks que do

suporte diversas plataformas, no necessita a reescrita do cdigo fonte para
cada uma, j que o framework interpreta para a plataforma desejada.
23
Custo reduzido no desenvolvimento: Os custos podem variar de acordo com o

projeto, em comparao ao desenvolvimento de uma aplicao nativas o seu
custo podem ser relativamente menores.
Desvantagens das aplicaes hbridas
1.1.2.1
Aprovao nas lojas: Por serem desenvolvidas com as tecnologias da web

(HTML, CSS, JavaScript), e interpretada para linguagem nativa por
ferramentas de terceiros, no se garante a aprovao do aplicativo.
Performance e Interface: Embora as aplicaes mesclarem o cdigo nativo com

a web, ainda tem suas limitaes perante ao aparelho e a plataforma,
conseguintemente tornando a performance e a interface limitada.
Aplicaes Hbridas combinam as tecnologia da web com as tecnologias de um

aplicativo nativo, mantendo assim o acesso aos recursos oferecidos pelos dispositivos e
plataformas, como ilustra na Figura 2.
Figura 2 - Arquitetura do funcionamento de uma aplicao hbrida
1.1.3 Aplicaes Web (Web Apps)

Aplicaes Web mais conhecido como Web App, so construdas com as tecnologias
da web, tais como HTML, CSS, Javascript, entre outras, e projetadas especificamente para
24
dispositivos mveis. As aplicaes so interpretadas por meio de um browser (navegador de

internet) desde que tenha acesso a internet, no sendo necessrio a instalao no dispositivo
para o funcionamento, tornando independente de plataformas e do dispositivo que o usurio
esteja usando [OEHLMAN, BLANC, 2011].
Um grande nmero de empresas j esto oferecendo seus servios nos dispositivos
mveis de seus softwares. O aumento destes servios, vem ocorrendo devido as melhorias que
esto sendo feita pelos provedores de redes na internet, no aumento da velocidade da banda e
na reduo de custo.
Arquitetura multiplataforma altamente recomendvel para aplicaes empresariais,
visto que diminui o tempo necessrio para chegada ao mercado. Ao utilizarmos cdigos j
existentes, podemos chegar aos nossos clientes de diferentes plataformas de maneira muito mais
rpida e simples. [NOKIA, 2014]
Para otimizar e simplificar o processo de implementao do, existem vrias
ferramentas baseada nas tecnologias web, com o intuito de aproximar ou at mesmo igualar a
interface e performance de uma aplicao nativa. As ferramentas que dispem desses recursos
so o Sencha Touch, jQuery Mobile, Dojo Mobile, AppMobi, entre outras [SENCHA, 2014;
JQUERY, 2014; DOJO, 2014; APPMOBI, 2014;].
Vantagens das aplicaes Web Apps [SIX REVISIONS, 2014]
Utiliza tecnologias web: So escritos em HTML, CSS, JavaScript e linguagens

server-side ou framework de aplicao web da escolha do desenvolvedor (PHP,
Rails, Python, etc.)
Suporta mltiplas plataformas: Por ser executado em qual quer browser com
acesso internet, funcionar independentemente da plataforma do dispositivo,
acessando um nmero maior de usurios.
Menor custo: Existem mais desenvolvedores com o conhecimento nas

tecnologias da web, tornando mais fcil de encontrar mo de obra qualificada
e de baixo custo.
Tempo de desenvolvimento: As aplicao web se torna mais rpido no

desenvolvimento, por no ter a necessidade dos conhecimentos especficos das
plataformas e dos dispositivos.
Processo de aprovao: No h necessidade de aprovao das lojas, por no

precisar efetuar o download da aplicao, j que o acesso via URL de um
navegador Web.
Atualizaes instantneas: Por ser escritos na web, todos acessam a mesma

aplicao com a mesma verso, atualizando uma nica vez, atualiza para todos
os usurios, independendo da plataforma e dispositivo.
Desvantagens das aplicaes Web Apps [SIX REVISIONS, 2014]
25
1.1.3.1
Recursos e funcionalidades do dispositivos e plataformas: Web app possui

acessos parciais das funcionalidades e dos recursos que os hardwares e
softwares disponibilizam, por ser desenvolvida com as tecnologias da Web.
Conexo: O tempo de resposta se torna mais lento pelo fato de utilizar conexo
com a internet, que acaba sendo o responsvel pelo funcionamento da
aplicao.
Localizar: A sua localizao pode se tornar um pouco mais difcil devido a sua
inexistncia em App stores.
Segurana: Por no ser avaliado, no existe um sistema de controle de

qualidade para aplicativos Web. Os usurios no tm a mesma segurana que
uma aplicao nativa.
Aplicaes Web, so desenvolvidas com as mesmas tecnologias da web, com isso as

aplicaes no tem acesso aos recursos que uma aplicao nativa, tornando a experincia do
usurio inferior a de aplicaes nativas ou hbridas, como ilustra na Figura 3.
Figura 3 - Arquitetura do funcionamento de uma aplicao web
1.1.4 Comparaes entre os tipos de aplicaes

Com o intuito de facilitar o entendimento na arquitetura dos trs tipos de aplicaes
mveis (Nativa, Hbrida e Web App) foram realizados uma breve comparao entre as mesmas.
26
Tabela 1 - Comparao entre os tipos de aplicaes, Nativo, Hbrido e Web App

Nativo
Multiplataforma
Desenvolvido para um certo

tipo de dispositivo.
Acesso internet No necessita.

Recursos do
Utiliza recursos do dispositivo,
dispositivo /
como cmera, GPS, etc.
plataforma
Performance
Implementao
Hbrido
Necessrio
Utiliza recursos do
dispositivo, como
cmera, GPS, etc.
Possuem acesso limitado os

recursos.
Cada plataforma tem a sua

linguagem de programao
especifica Objective-C iOS,
Java Android, Visual C++ Windows Mobile, etc.
Mescla a linguagem de
programao, Web com
a linguagem Nativa da
plataforma utilizada.
Devem ser feitas

*
instalao do aplicativo.
Localizar
Existem lojas para ajudar a

encontra o aplicativo
Existem lojas para ajudar

a encontra o aplicativo.
Sim, a maioria das lojas
Processo de
requerem aprovao, antes de
aprovao publicar.
Alguns usurios podem optar
Desenvolvido para funcionar

nos browsers,
independentemente de
plataforma.
Necessita parcialmente.
Usurio tem uma experincia

melhor, mais rpida e fluida,
por estar utilizando todos os
recursos do aparelho.
Instalaes / manualmente pelo usurio,

Atualizaes fazer novo download e
Web App
Usurio pode no ter uma

boa experincia, por
depender parcialmente da
internet para o seu
funcionamento.
Utiliza a linguagem web,
HTML, JavaScript, CSS, entre
outras, desde que seja
compatvel aos navegadores.
So feitas pelo prprio
servidor, sem precisar da
interveno do usurio.
Como no h loja de Web
App, pode se tornar um pouco
mais difcil encontra-lo.
No, basta acessar o
endereo da aplicao.
Controle de por no atualiza, resultando

verso em que todos os usurios no
Mantem todos os usurios

nas mesmas verses.
estejam na mesma verso.

Custo alto, por ter que lidar
Custo de
com mudanas de diferentes
desenvolvimento dispositivos/plataformas.
Baixo, por ser linguagem web,

no precisar lidar com
mudanas de diferentes
dispositivos/plataformas.
Fonte: SALESFORCE, 2014; WEBMONKEY, 2014; SIX REVISIONS, 2014;
Onde temos um asterisco porque depende de como o projeto foi definido diante ao
desenvolvimento da aplicao hbrida.
27
1.1.5 Consideraes finais

Os aplicativos Nativos, Hbridos ou Web Apps, contem suas caractersticas prprias,
tendo vantagens e desvantagens em alguns aspectos, deixando indefinido qual tipo o melhor.
A escolha de qual tipo de aplicao ser utilizada, depende do que a empresa ou
usurios estejam precisando. Para ter uma boa escolha no tipo que ir usar no desenvolvimento,
necessria uma anlise detalhada de todos os requisitos que iro ser implementados no projeto,
perante as necessidades definidas.
Algumas consideraes devem ser analisadas no projeto para ter a melhor escolha do
tipo de aplicao. So elas:
Acesso as funcionalidades do dispositivo;
Necessidade ao acesso da internet;
Compatibilidade com as plataformas;
Performance de utilizao da aplicao;
Interface com o usurio;
Pblico alvo;
Custo de desenvolvimento;
Devido as necessidades das empresas, a escolha do tipo de aplicativo acaba se tornando

uma escolha difcil. Duas grandes empresas foram para caminhos distintos na criao de
aplicativos:
Facebook: Mark Zuckerberg, o CEO do Facebook, que a maior rede social

no momento, revelou que a estratgia de investir no HTML 5 em vez de
aplicativos nativos, foi um dos grandes erros que ele cometeu. O fundador do
Facebook decidiu mudar de estratgia que para ele estava errada, alterando o
foco para os aplicativos nativos. Desde ento, o nmero de usurios vem
subindo, por conta da aplicao estar com uma melhor performance
[CONSTINE, 2012].
Financial Times: Um dos maiores jornais do mundo e tradicional do meio

impresso, optou em mudar o foco do seu investimento. Antes o aplicativo para
dispositivos mveis era desenvolvido especificamente com tecnologia nativa.
Com isso, o FT vinha enfrentando problemas com as lojas, custos, clientes,
entre outros. Acabou resolvendo mudar o foco de desenvolvimento, mudando
para a tecnologia web, mais especificamente o HTML 5, que est
proporcionando uma melhor experincia, tanto para o jornal como para seus
clientes e leitores [DREDGE, 2013].
28
WEB MOBILE
A World Wide Web teve seu incio em 1980 na Sua. O precursor da ideia foi o
britnico Timothy John Berners-Lee. Em 1990 o britnico Berners-Lee, um dos primeiros a

utilizar o hypertext como forma de armazenar informaes, criou o primeiro navegador web do
mundo, o WorldWideWeb. O navegador teve esse nome por ser o nico meio de acessar a web.
Logo aps um tempo o WorldWideWeb foi renomeado para Nexus, com o intuito de evitar
confuses entre o navegador e a prpria web, por terem nomes parecidos [W3C, 2014].
Entretanto, para ter um bom domnio do desenvolvimento Web, algumas caractersticas
e tcnicas so fundamentais para um bom conhecimento das tecnologias:
URL: Uniform Resource Locators: so utilizadas para localizar um recurso,

que esteja disponvel em uma rede, seja ela intranet ou at mesmo internet.
Utilizam alguns dos protocolos de comunicao HTTP, FTP, TELNET, entre
outros, para acessar os recursos disponveis, em tal endereo [KIOSKEA,
2014].
HTML: Hypertext Markup Language: uma linguagem de marcao utilizada

para desenvolver pginas na Web. Permite a criao de um documento que
possa ser transmitido pela internet e lido de qualquer computador.
HTTP: Hypertext Transfer Protocol: um protocolo de comunicao usado na

World Wide Web para trocas de informaes do browser ao servidor. Esse
protocolo a base da comunicao dos dados da Word Wide Web.
2.1 HTML
A linguagem Hypertext Markup Language (Linguagem de marcao hypertext) ou
mais conhecida como HTML, teve seu incio em 1991, permitindo a ligao de uma pgina a
outra, pelas tags, que so comandos para inserir algum tipo de elemento ou caractersticas da
mesma. A sua popularidade cresceu atravs do navegador web Mosaic, que foi desenvolvido no
NCSA [VENKATESH, 2012].
Em 1994 surge a primeira melhoria da verso do HTML, o HTML 2.0 tendo apenas
correes e padronizaes das principais caractersticas da verso anterior [VENKATESH,
2012].
Aps dois anos o HTML apresenta um conjunto de tecnologias como o Cascading
Style Sheets, conhecido como CCS, que uma linguagem de estilos, onde podem ser definidas
as apresentaes do documento, que so escritas em linguagem de marcao. E tambm o
JavaScript, que uma linguagem de programao interpretada, para que pudessem ser
29
executados scripts no lado do cliente, nos navegadores. Quando as tecnologias se juntam,

podem disponibilizar vrios recursos, e at mesmo podendo tornar o HTML dinmico
[VENKATESH, 2012].
Logo aps, a linguagem foi reconhecida pela W3C, que um grupo responsvel por
manter o padro dos cdigos. O grupo trabalhou em uma nova verso para que a linguagem
tornasse uma pratica comum na web [W3C HTML 5, 2014].
Desde de ento o HTML 3 vem sendo atualizado com as novas verses: HTML 3.2,
HTML 4, HTML 4.01 e a verso atual HTML 5, trazendo novos recursos e conjuntos de
tecnologias [W3C HTML 5, 2014].
O HTML foi desenvolvido de modo que funcione em todos os equipamentos, que
sejam capazes de utilizar as informaes na Web, independente do tamanho de resoluo, cores,
dispositivos, entre outros.
2.2 HTML 5
A criao do HTML 5 veio com a unio dos grupos W3C e Web Hypertext Application
Technology Working Group ou conhecido como WHATWG, onde antes a W3C estava apenas
focada em criar a segunda verso do XHTML, e o grupo WHATWG estava trabalhando um
uma nova verso do HTML que trazia mais flexibilidade a produo de websites e sistemas que
so baseados na web [W3C HTML 5, 2014].
O HTML 5 uma atualizao baseada nas verses anteriores, com melhorias
significantes, tornando algo a mais, do que simplesmente uma linguagem de marcao,
fornecendo ferramentas para o JavaScript e o CSS fazerem o melhor trabalho possvel em
conjunto com o HTML [W3C HTML 5, 2014].
Desde da sua criao o HTML 5 vem se tornando uma das principais tecnologias na
interao com a web, por dispor de novas funcionalidades, elementos, recursos, integraes e
diversas outras novidades, criando assim novas experincias aos usurios e desenvolvedores.
Esta linguagem de marcao oferece a possibilidade de criar aplicaes mais complexas com
os conjuntos de padres abertos que so oferecidos.
2.2.1 Compatibilidade com os navegadores

Devido a existncia de diversos dispositivos como Tablets, Smartphones, Notebooks,
entre outros, que acessam a internet, torna mais difcil para os desenvolvedores, manter um
30
bom nvel de compatibilidade com todos os navegadores, levando em conta as particularidades

de cada um deles. Cada browser tem o seu motor de renderizao que responsvel pelo
processamento dos cdigos da pgina. Os navegadores Safari e Google Chrome, utilizam o
motor Webkit, j o Firefox, Mozilla e Camino utilizam o Gecko, as verses do Internet Explorer
que vo do 4 ao 9, utilizam o Trident. O motor Presto utilizado pelo Opera das verses que
vo do 7 ao 10 [W3C HTML 5, 2014].
O mais interessante fazer um cdigo compatvel com os principais motores de
renderizao, para que tenha uma amplitude maior nos browsers e consequentemente nos
usurios.
O motor de renderizao mais compatvel atualmente com os padres do HTML 5,
o Webkit, sendo assim os navegadores que tiverem com esse motor de renderizao, o mais
indicado a utilizar as tecnologias do HTML 5 [W3C HTML 5, 2014].
Existe uma grande preocupao que deve ser levado em conta, com websites e
aplicaes web onde utiliza as tecnologias do HTML 5 para o seu funcionamento: a
retrocompatibilidade com as verses anteriores dos browsers. As empresas vem cada vez mais
se empenhando em atualizar os navegadores, para que sejam compatveis com os padres do
HTML 5, proporcionado a utilizao dos novos recursos e tecnologias oferecidos.
Na Tabela 2 ilustra a compatibilidade dos navegadores com alguns mdulos do HTML
5.
Tabela 2 - Compatibilidade dos browsers com os principais mdulos do HTML 5.
Safari
Chrome
Opera
Firefox
IE 8
IE 9
Local Storage
Sim
Sim
Sim
Sim
Sim
Sim
Histrico de Sesso
Sim
Sim
Sim
Sim
Sim
Sim
Aplicaes Offline
Sim
Sim
No
Sim
No
No
Novos tipos de campos
Sim
Sim
Sim
No
No
No
Form: Autofocus
Sim
Sim
Sim
No
No
No
Form: Autocomplete
No
No
Sim
No
No
No
Form: Required
Sim
Sim
Sim
No
No
No
Video, Audio e Canvas Text
Sim
Sim
Sim
Sim
No
Sim
Fonte: W3C HTML 5, 2014
31
2.2.2 Novas funcionalidades do HTML 5

O HTML 5 incluiu novidades significantes em vrios aspectos que nas verses
anteriores no existiam. As mudanas no foram apenas incluses ou remoes de tags, mas
sim melhorias para suprimir a necessidade de usar outras tecnologias para criao de certas
funcionalidades. Por serem utilizadas tecnologias de terceiros, era comum encontrar erros e
incompatibilidades nas funcionalidades criadas.
Alguns dos recursos que foram includos no HTML 5, so [W3C HTML 5, 2014]:
Estrutura do corpo: Os websites tem formatos comuns, que so compostos por

elementos, tais como: cabealho, corpo, rodap, etc.
Tags para contedo especficos: Antes para ser utilizado os contedos

enriquecidos nas pginas, utilizava-se apenas um nica tag para diversos tipos
de contedo. Agora possvel utilizar tags especificas para cada tipo de
contedo em particular, tais como udio, vdeo, etc.
Canvas: um componente novo, que permite desenhar diversos tipos de

formas que podem ser animadas e ter interao com o usurio, por meio de
funes de uma API, sem necessidade de instalar nenhum plugin.
Reviso ortogrfica e gramatical: Oferece recursos de reviso ortogrfica e

gramatical aos usurios.
Banco de dados: Por meio de uma API, as pginas web, podero permitir o
armazenamento de dados no agente do usurio, sem precisar definir a expirao
dos dados. A documentao sugere que o espao de armazenamento seja de
5MB para cada domnio.
Aplicaes web Offline: Permite que o usurio trabalhe na aplicao web, sem
estar com acesso internet, como se estivesse utilizando uma aplicao local.
Geolocalizao: As pginas da web, podero tem acesso a localizao

geogrfica do usurio, podendo ser de trs maneiras, Geolocalizao por IP,
Triangulao GPRS e ao GPS do dispositivo.
Drag and Drop: Permite o usurio arrastar e soltar os objetos. Antes era
necessrio utilizar ferramentas de terceiros, para a criao da funcionalidade
de arrastar e soltar.
Novos suporte para interface: Com o intudo de melhorar a experincia do

usurio em relao a interface, a atualizao do HTML veio som suporte a
diversos recursos como CSS3, SVG, DOM, entre outros.
Novos elementos de udio, Vdeo e Codecs: Teve incluso de tags especificas

para reproduo de udio e vdeo sem a necessidade de utilizar mecanismos de
terceiros.
Histrico de Sesso: Permite via Javascript ter controle do histrico de

navegao do cliente.
32
2.3 Hypertext Transfer Protocol (HTTP)

Segundo Steve Souders em seu livro High Performance Web Sites somente 1020% do tempo total do carregamento de uma pgina gasto para receber o HTML do servidor
para o navegador. Voc precisa focar nos outros 80-90% se voc quiser tornar suas pginas
visivelmente mais rpidas [SOUDERS, 2008].
Hypertext Transfer Protocol (HTTP) um mtodo utilizado para enviar e receber
informaes na web. O protocolo baseado em requisies e respostas entre o servidor e o
cliente. A mensagem HTTP composta por uma linha de requisio, as linhas do cabealho e
o corpo da mensagem [HYPERTEXT TRANSFER PROTOCOL, 2014].
Quando realizada uma requisio ao servidor utilizando o protocolo HTTP
necessrio informar o mtodo, mais conhecido como verbos da ao a ser executada.
Os mtodos mais utilizados, so o GET (Solicita informao ao servidor.), POST
(Insere as informao enviadas no corpo da mensagem), DELETE (Remove as informaes) e
o PUT (Atualiza as informaes). Existem mais 4 mtodos, que no so muitos utilizados como
o HEAD, OPTIONS, TRACE e CONNECT [HYPERTEXT TRANSFER PROTOCOL, 2014].
Toda requisio recebe um cdigo de resposta conhecido como status. Com ele
possvel saber se a operao solicitada ao servidor foi realizada com sucesso. Os cdigos so
formados por trs dgitos, sendo que o primeiro representa a classe que pertence e o restante as
condies. As classes foram classificadas em cinco tipos, para facilitar o entendimento da
resposta, as classes so:
1xx: Informational (Informao) utilizada para informar ao cliente que a

requisio foi recebida e est sendo processada.
2xx: Success (Sucesso) informa ao cliente que a requisio foi sucedida.
3xx: Redirection (Redirecionamento) so medidas adicionais que devem ser

tomadas a fim de completar solicitao.
4xx: Client Error (Erro no cliente) informa que provavelmente houve um erro
na solicitao, impedindo o servidor que processe.
5xx: Server Error (Erro no servidor) indica que o servidor teve um erro interno,
esses erros so geralmente do servidor e no da solicitao.
Os cdigos de status mais comuns de encontrar ao acessar um site so o 200 (OK), 304
(Not Modified), 401 (Unathorized), 404 (Not Found), 500 (Internal Server Error), 502 (Bad
Gateway) e 503 (Service Unavailable) [HYPERTEXT TRANSFER PROTOCOL, 2014].
No cabealho possvel definir algumas tcnicas para otimizar o desempenho da
33
comunicao. O cache uma das tcnicas onde avisa o navegador que ele pode armazenar uma
cpia daquele recurso para evitar que o download e/ou requisies sejam feitas novamente.
Com o Cache-Control possvel definir o tempo que os recursos iro permanecer vlidos no
navegador [FADINO, 2014].
Outra maneira de otimizar habilitar o gzip no servidor para comprimir os dados das
respostas e reduzir a largura de banda. Porm, o uso da CPU ser maior para descompactar as
respostas [GOOGLE 2].
Segurana
Como relao segurana, as conexes provm autenticao (HMAC, MAC),
integridade (MD5, SHA1) e confidencialidade (DES, 3DES, AES) das requisies e dos dados
solicitados. So utilizadas quando os dados importantes so transmitidos, geralmente utilizada
pelos sites de Internet Banking e de comrcio eletrnico [CERT.BR, 2012].
O protocolo HTTP oferece esquema de autenticao de usurio para ter acesso aos
recursos sigilosos. O esquema utiliza de incluses de dados no cabealho (ou header) tanto
pelas requisies como pelas respostas realizadas pelo servidor.
Autenticao HTTP Basic envia para o servidor usando a codificao Base64 na forma
de texto. Porm o tipo de autenticao Basic considerado um dos mais inseguros, pelo fato
dos dados serem trafegados na rede como texto plano, sendo possvel a interceptao por
terceiros e tornando acessvel [ANDRADE, 2010].
Open Authorization (OAuth) um protocolo aberto que permite autorizao segura
utilizando padres de mtodos simples, garantindo acesso de um usurio de um site a um
aplicao externa. OAuth tornou-se mais segura e simplificada com as interaes dos dados
protegidos pelo cliente ou fornecedor [ANDRADE, 2010].
2.4 Tecnologias para desenvolvimento de Web Apps

Podemos observar que existem diversos frameworks que j utilizam as funcionalidades
do HTML 5 e que oferecem solues viveis para o desenvolvimento de aplicaes para
dispositivos mveis, atendendo a um maior pblico, independe de plataforma ou fabricante dos
dispositivos. Entre os principais podemos destacar: jQuery Mobile, Sencha Touch e AppMobi
[SENCHA 2014; JQUERY 2014; APPMOBI 2014].
34
2.4.1 jQuery Mobile

jQuery Mobile um framework de interface de usurio baseada nas bibliotecas
anteriores, o jQuery e jQuery UI. A principal linguagem utilizada para construo o JavaScript
[JQUERY, 2014].
Atualmente, o framework encontra-se na verso 1.4.2 e com esta verso possvel
encontrar diversas funcionalidades e interfaces, como listviews, pop-ups, collapsible, entre
outras, e totalmente gratuito [JQUERY, 2014].
2.4.2 AppMobi
Com esse framework possvel desenvolver aplicaes com visual adequado para
dispositivos mveis por meio de arquivos HTML. O seu ambiente de desenvolvimento consiste
em uma extenso no navegador Chrome [APPMOBI, 2014].
O framework foi adquirido pela empresa Intel em 2012, onde muito defendida a
utilizao de linguagens como HTML 5, CSS e JavaScript [APPMOBI, 2014]. Se destacou pela
facilidade no processo de desenvolvimento, tanto para aplicao web como para aplicaes
hbridas [APPMOBI, 2014].
2.4.3 Sencha Touch

Sencha Touch foi otimizado para aplicativos mveis que trabalham em diversas
plataformas, tamanhos e navegadores. Para tornar a escrita do cdigo mais simples possvel,
ele fornece a utilizao da arquitetura em Model View Controller (MVC). Esta arquitetura
mantm o cdigo mais limpo, testvel e de fcil manuteno [SENCHA, 2014].
Atualmente o framework est na verso 2.3.1, utilizando as tecnologias da web como
HTML 5, JavaScript e CSS para construo de sistemas web para dispositivos mveis. A maior
parte de sua biblioteca desenvolvida utilizando o JavaScript [SENCHA, 2014].
O grande destaque do Sencha Touch a facilidade da escrita do cdigo para sistemas
web e a reutilizao do mesmo cdigo fonte para criar aplicaes nativas. O framework permite
aos desenvolvedores criarem aplicativos poderosos que funcionem no iOS, Android,
BlackBerry, Windows Phone, entre outros. Outra vantagem do Sencha a comunidade que vem
aumentando rapidamente e que dispe de diversos documentos, fruns, conferencias, cursos,
entre outros, para auxiliar no processo da utilizao da ferramenta [SENCHA, 2014].
35
2.4.4 Comparativo entre as ferramentas

Para o desenvolvimento de um aplicativo web, existe uma grande diversidade de
frameworks que disponibilizam as ferramentas necessrias para facilitar o desenvolvedor a
implementar bons sistemas. No presente trabalho foi comparado, uns dos trs maiores
frameworks que esto disponveis no mercado.
Pode se observar que cada frameworks tem suas caractersticas prprias, no definindo
qual o melhor entre eles. A Tabela 3 mostra um comparativo entre algumas caractersticas dos
frameworks selecionados.
Tabela 3 - Comparao entre os frameworks escolhidos.
JQuery Mobile
AppMobi
Sencha Touch
Web Mobile
Hbrido / Web Mobile
Hbrido / Web Mobile
SDK Gratuito
Sim
Sim
Sim
Possui IDE
Sim
Sim
Sim
IDE Gratuita
No
Sim
No
HTML5, JavaScript e CSS
Permite PhoneGap
No
Sim
Sim
Web mobile app
Sim
Sim
Sim
Suporte
Sim
Sim
Sim
Documentao
Sim
Sim
Sim
Mdio
Mdio
Fcil
Sim
Sim
Sim
Categoria
Linguagens utilizados
Nvel de aprendizado
Frum
Fonte: AUTORIA PRPRIA
2.5 Melhores Prticas para desenvolvimento de Aplicao Web Mobile

Diversas aplicaes web so desenvolvidas diariamente sem uma abordagem
adequada. O desenvolvimento de aplicaes web requer uma viso completamente diferente do
que acostumamos ver em uma aplicao convencional, para computadores de mesa. Muito se
discute qual a melhor prtica a ser utilizada no desenvolvimento, de forma que atenda todos os
requisitos de funcionalidade e proporcione ao usurio uma boa experincia de uso.
36
Existem alguns atributos que podero ser levados em considerao no

desenvolvimento de uma aplicao web mobile. So eles [MARSHALL, 2013]:
Escalabilidade (Scalability): Com a necessidade do uso da aplicao se

tornando cada vez maior, torna-se muito importante que a aplicao consiga
suportar grandes nmeros de usurios, sesses e operaes simultneos.
Disponibilidade (Availability): Ter disponibilidade mesmo se trabalhar offline,

para que possa ser utilizado a qualquer momento, tendo sempre um bom grau
de disponibilidade do aplicativo.
Performance (Performance): A performance de uma aplicao web se refere a

realizao de tarefas entre um determinado perodo de tempo.
Tempo de resposta (Responsiveness): O tempo que o usurio leva para obter

uma resposta do servidor dever ser o mnimo possvel para que tenha uma boa
experincia de uso.
Os atributos fundamentais para se ter uma boa aplicao, a escalabilidade e o tempo

de resposta. As aplicaes web que no atendem aos atributos, podero proporcionar
experincias de uso desagradveis aos usurios, levando a diminuio do uso pela sua
improdutividade no seu dia a dia [MARSHALL, 2013].
2.5.1 World Wide Web Consortium (W3C)

O grupo W3C desenvolveu um documento com um conjunto das melhores prticas de
desenvolvimento voltado para web mvel, tendo como objetivo criar um padro internacional,
garantindo um bom desenvolvimento e a evoluo das aplicaes web para dispositivos mveis
[W3C BEST PRACTICES, 2014].
O documento consiste em 5 dicas essenciais para uma boa aplicao na web para
dispositivos mveis, so elas:
2.5.1.1
Design flexvel [W3C BEST PRACTICES, 2014]
As aplicaes web so executadas em diversos ambientes de dispositivos mveis.

Sendo flexvel, ser possvel abordar mais usurios com custo reduzido.
Mtodos de interao com a aplicao devero ser considerados quando se

projeta um interface, por existirem diversos tipos de dispositivos, os principais
mtodos que so utilizados, como o Cursor que navega por teclas que permite
controlar o cursor no ecr, Focus so os saltos de um elemento para o outro, e
o Toque que so os eventos gerados diretamente pelo toque nos dispositivos.
37
2.5.1.2
Fluxo de texto importante em telas pequenas, para que no seja necessrio a

utilizao do scroll horizontal, garantindo o enquadramento dos textos nas
alteraes do ecr.
Prefira deteco do lado do servidor quando possvel, para determinar as

propriedades do contexto de entrega e adaptar as respostas para o cliente antes
da transferncias, evitando assim a transferncia de dados desnecessrios ou
incompatvel.
Utilizar a deteco do lado do cliente quando no for possvel determinar as

propriedades do contexto de entrega do lado do servidor. Uma vez obtida as
informaes, poder ser utilizadas para adaptar a apresentao no momento ou
enviar pedidos de alternativa para o servidor.
Utilizar classificao do dispositivos para simplificar a adaptao do contedo,

tendo em vista desenvolver para um grande nmero de dispositivos. O ideal
classificar os dispositivos em classes e construir uma verso para cada classe.
Permitindo assim a explorar as capacidades de cada dispositivo com o mesmo
cdigo gerencivel.
Ter suporte a um ambiente no JavaScript, as aplicaes baseadas em script

XHR no so compatveis com todos os navegadores, ento considere a
possibilidade de utilizar uma verso em Synchronous FROM em vez de
solicitaes XHR.
Reduzir a utilizao da rede [W3C BEST PRACTICES, 2014]
Utilizar os recursos de protocolo web apropriados e mtodos para reduzir os gargalos

e latncia da rede.
Utilizar a compresso de dados para tornar a transmisso mais eficiente e

rpida.
Evitar utilizar os recursos externos, as aplicaes utilizam grandes quantidades

de recursos como imagens, scripts, entre outros.
Evitar os redirecionamentos de pedidos, normalmente so utilizados para

trocar informaes entre servidores. Os atrasos ocorridos pelos
redirecionamentos tem um maior impactos nas redes mveis.
Diminuir os dados e as aplicaes, removendo os espaos em brancos e

otimizando os cdigos das pginas, tornaro o trafego e a execues mais
rpidas e confiveis.
Evitar a utilizao dos cookies desnecessariamente, os recursos estticos no

necessitam de cookies, podendo tornar o desempenho melhor.
Armazenar em cache os dados Ajax que so solicitados pelo cliente, os dados

devero ser armazenado da mesma forma que outros contedos.
Utilizar o recurso de cache por referencias dos recursos que mudam

ocasionalmente, evitando que o navegador valide novamente o cabealho.
38
2.5.1.3
Utilizar com moderao os cookies, pois cada pedido ser enviado para o
servidor, usando uma quantidade de dados excessiva podero afetar
negativamente o desempenho, principalmente em um rede mvel.
Otimizar o tempo de resposta [W3C BEST PRACTICES, 2014]
Os mnimos detalhes so importantes em uma aplicao web, podendo melhorar

significativamente a experincia geral da utilizao dos usurios.
2.5.1.4
Agregar imagens estticas em um nico recurso composto, melhorar a

performance da aplicao. Muitas vezes as aplicaes dependem de imagens
estticas para montar cones, botes, etc.
Incluir as imagens de fundo no CSS para evitar requisies HTTP. Utilizando

a base64 aumenta cerca de 10% do tamanho da imagem aps a sua
compresso no gzip.
Manter o tamanho da memria para o Document Object Model (DOM)

razovel, por ter dispositivos com limitaes. As pginas grandes e complexas
podem exceder o seu limite e ocasionar erros imprevisveis.
Otimizar a inicializao da aplicao para que o usurio tenha uma experincia

agradvel no comeo. O HTML 5 oferece recursos para aplicaes web se
aproximarem das aplicaes nativas, no que diz respeito de inicializao
podendo ser utilizadas mesmo quando no h conexo com a rede.
Minimizar a percepo da latncia do utilizador um fator importante para

usabilidade geral da aplicao web.
Explorar funes especificas [W3C BEST PRACTICES, 2014]
Os dispositivos mveis tem funes especificas, que podero ser utilizadas pelas
aplicaes web.
Disponibiliza a opo de Click-to-Call para facilitar nas interaes da

aplicao com os dispositivos, algumas funes podem realizar chamadas,
enviar SMS, entre outras opes, dependendo das funcionalidades do
dispositivo.
Utilize as tecnologias mveis para inicializar aplicaes caso o dispositivo

tenha os mtodos. Os mtodos permitem enviar notificaes e atualizaes
sejam enviadas para o usurio, mesmo estando fora do contexto da aplicao.
Utilizar o elemento do navegador para obter o tamanho do ecr e exibir as

pginas desenhadas para desktop e redesenhar para as tela pequena. Isso pode
afetar as aplicaes que j foram otimizadas para as telas pequenas. O
viewport meta tag diz ao dispositivo em qual escala ir renderizar a pgina.
39
2.5.1.5
Utiliza tecnologias apropriadas para armazenar dados no lado do cliente. Se

tornou uma das melhores formas de garantir um bom tempo na inicializao e
na capacidade de resposta. Se o dispositivo suportar as APIs, fornecer
mecanismos para armazenar dados maiores do que os cookies.
Princpios do desenvolvimento web [W3C BEST PRACTICES, 2014]
Os dispositivos mveis so mais uma forma de acessar as aplicaes web. Os

princpios de desenvolvimento para web, so aplicveis para todos os dispositivos que acessam
as aplicaes web.
2.5.1.6
Replicar os dados locais para um servidor para garantir a segurana das

informaes caso acontea alguma coisa com o dispositivo e tambm para
tornar disponvel a outros utilizadores da mesma aplicao.
Evitar a execuo de dados JSON no confiveis, pois existem diversos cdigo

maliciosos que podero denegrir as informaes ou at mesmo apaga-las. A
tcnica JSON muito comum e til para enviar dados a um cliente, por
executar mais rapidamente do que alternativas da mesma.
Garantir a consistncia de estado entre os dispositivos, quando uma informao

atualizar em um dispositivo, devero ser visto da mesma forma em outro
dispositivo. Tornando assim uma nica informao consistente na aplicao.
Controle ao usurio [W3C BEST PRACTICES, 2014]
Os diapositivos mveis so utilizados em diversos contextos no dia a dia, indo do lazer

at tarefas importantes e urgentes de negcios. O controle do usurio informa as aes das
aplicaes no dispositivo.
Garantir aos usurios a informao sobre atualizaes de dados pessoais e do

dispositivo para evitar surpresas. Os usurios devero ser informados no
primeiro acesso na aplicao ou nas informaes acessadas.
Ativar o Sign-in automtico por ser mais difcil a introduo de texto em um

dispositivo mvel do que um computador de mesa. Com o Sign-in ativado,
as prximas sesses que sero iniciadas no iro solicitar a senha ao usurio.
Oferecer aos usurios a escolha de interface, as decoces automticas nem

sempre so eficazes para definir qual das verso da aplicao apropriada para
o dispositivo.
No alterar o focus das atualizaes dinmicas da sesso na aplicao, para

evitar a perca da leitura e criar confuso para o usurio. Um mtodo do
JavaScript oferece focus para mover a pgina na onde estava antes da
atualizao.
40
2.6 Consideraes finais

Desde do surgimento do HTML 5, os websites e aplicaes web esto sofrendo
diversas mudanas, proporcionando aos usurios e desenvolvedores uma experincia que no
se imaginava. Antes eram necessrio utilizar ferramentas de terceiros para certas
funcionalidades, recursos, entre outros. O HTML 5 est se tornando uma soluo rpida e eficaz
no processo de desenvolvimento, porm ainda existem barreiras a serem superadas, como a
dependncia dos usurios atualizarem os seus navegadores para verses mais recentes.
Podemos observar que muitas funcionalidades, recursos e APIs, j esto sendo
utilizadas e principalmente em aplicaes web ou websites, que tem como pblico alvo os
usurios de dispositivos mveis. No mercado encontramos vrios frameworks que j utilizam
das novas ferramentas do HTML 5, os principais so jQuery Mobile, Sencha Touch e AppMobi.
Os desenvolvedores devero estar atentos quanto a utilizao dos novos recursos, de
maneira que no prejudique ou comprometa a utilizao e a navegao dos usurios em seus
sistemas web ou sites.
41
IMPLEMENTAO DE UMA WEB APPS

Um dos objetivos deste projeto era desenvolver um prottipo de uma aplicao web
mvel, onde ser analisado algumas prticas, dicas e desafios que so encontrados no processo
de desenvolvimento, devido a sua dependncia com a internet. Sero utilizadas algumas dicas
e prticas presente no documento desenvolvido pelo grupo W3C, com as melhores prticas para
o desenvolvimento web mobile.
Com o intuito de facilitar e agilizar no processo de implementao do prottipo, sero
utilizados algumas ferramentas, mtodos e arquitetura, tais como o framework Sencha Touch,
API do Twitter, arquitetura MVC, entre outros.
Neste capitulo abordar o desenvolvimento do prottipo e descrever as principais
funcionalidades do mesmo e aplicar algumas tcnicas de otimizao tanto no lado do cliente
como no servidor.
3.1 MVC
MVC um padro de arquitetura de software, que trabalha em conjunto em uma
mesma estrutura, dividido em trs camadas, cada camada tem suas caractersticas e
responsabilidade especificas. Utilizando o padro possibilita utilizar diversas linguagens de
programao, permitindo que as equipes sejam distintas em suas atribuies. As camadas so
da arquitetura MVC so separadas da seguinte forma [PADRES DE PROJETO, 2009]:
Model (modelo): Representa os dados que sero acessados ou modificados pela

aplicao.
View (viso): Consiste em apresentar os dados aos usurios de forma que seja
possvel a interpretao e interao das informaes.
Controller (Controlador): Na camada do controlador so delegadas todas as

decises sobre o comportamento da interface, intermediando os dados
provindos da camada modelo com a camada da viso.
Na Figura 44, mostrado o relacionamento entre as camadas Model, View e

Controller, como foi descrito acima.
42
Figura 4 - Relacionamento entre os componentes da arquitetura MVC
Controller
View
Model
Fonte: PADRES DE PROJETO, 2009
3.1.1 MVC Sencha Touch

O Sencha Touch na verso 2.4 foi otimizado para a criao de aplicaes mveis, que
funcionaro em diversas plataformas. Com o intuito de tornar a implementao mais agradvel,
o framework fornece uma arquitetura simplificada, utilizando o padro de modelo MVC,
mantendo o cdigo fonte limpo, testvel, e de fcil manuteno. Na criao de uma aplicao
usando o modelo de arquitetura MVC, carregado os conjuntos Controller, View, Model, Store
e Profile.
Na Figura 55, mostrado a relao entre as camadas fornecidas pelo framework, com
a aplicao:
Figura 5 - Camadas fornecidas pelo framework Sencha Touch
Application
Controller
Profile
View
Store
Model
Fonte: SENCHA, 2014
43
As camada tem a suas caractersticas e importncia, abaixo segue a descrio delas:
Controller: so responsveis por responder a eventos que ocorrem na

aplicao. Os controladores monitora os eventos requeridos pela interface e
executa uma ao com base no evento.
View: embora os valores do aplicativo estarem nos modelos e controladores,

os usurios interagem diretamente com a viso. As vises so responsveis
pela exibio do dados para os usurios, utilizando os componentes do prprio
framework ou at mesmo criados na implementao.
Model: representa um tipo de objeto de dados na aplicao. Na maneira mais

simples o modelo apenas um conjunto de campos e seus dados. No modelo
possvel utilizar de formas diferentes, como proxy, associations, validations e
fields.
Store: uma parte muito importante da arquitetura, por ter a funo de carregar
a maior parte dos dados ligado a aplicao. Os dados carregados iro alimentar
os componentes, como listas, DataViews, entre outros.
Profile: pelo framework funcionar em uma grande variedade de dispositivos

mveis, com capacidades e tamanhos de telas deferentes, o profile permite
personalizar a interface da aplicao, dependendo do aparelho que o usurio
esteja utilizando, como tablets, smartphones, entre outros. Evitando ter que
desenvolver o aplicativo vrias vezes, apenas para fornecer uma interface para
o usurio deferente.
Como podemos observar acima, as camadas tem suas caractersticas e funcionalidades

especificas, na implementao de um web app. As camadas podem ser carregadas
separadamente, conforme as necessidades no processo de implementao.
3.2 Descrio da aplicao proposta

Atualmente diversas empresas e desenvolvedores questionam at que ponto as
recomendaes oferecidas pelo grupo W3C no documento, ajudam no desenvolvimento da
aplicao para dispositivos mveis na web.
Afim de analisar algumas recomendaes do documento, foi implementado uma
aplicao na web para dispositivos mveis, assim podendo apontar as importncias da utilizao
da boas prticas estabelecidas pelo W3C.
A aplicao que foi desenvolvida, consiste em utilizar como provedor de dados, as
publicaes realizadas pelos usurios de uma das maiores e mais utilizada rede social do
mundo, o microblog Twitter.
O Twitter disponibiliza uma API de servio, com diversas funcionalidades, onde o
44
servio totalmente gratuito e documentado. Na documentao pode-se encontrar vrios

exemplos de desenvolvimento em diferentes tipos de linguagens de programao.
Observando a documentao e as diversas funcionalidades disponveis na API, ser
utilizado a arquitetura REST no formato JSON, com o intuito de simplificar o trafego dos dados
provenientes do Web Service.
Visando simplificar o desenvolvimento, ser utilizado o framework Sencha Touch,
onde o mesmo dispe da arquitetura MVC e diversos recursos e funcionalidades, como citado
acima. A aplicao ser implementada em .Net utilizando a linguagem de programao
orientada a objetos C#.
O prottipo da aplicao web mobile foi composto por algumas caractersticas, tais
como:
Tela para acessar a aplicao, onde ir validar o acesso do usurio, e entrar

automaticamente. Nessa tela tero os campos, Login, Senha, uma opo de
ficar autenticado e o boto entrar.
Ter um fluxo adequado dos textos, publicados pelos usurios. (Fluxo de texto
e focus)
Carregar as imagens em lista do perfil dos usurios. (Carregamento de imagem

em lista)
Adequao dos componentes aos diversos tamanhos de telas dos dispositivos

mveis. (Designer flexvel)
Acesso a servios externo oferecidos pelo microblog Twitter. (Acesso a API

externas)
Gerar grfico adequado em formato de pizza, representado os dados. (Grficos

representando dados)
Lista com textos e imagens carregadas apenas quando solicitado. (Pool - Ser
atualizado apenas quando efetuar a busca)
Lista com textos e imagens carregadas automaticamente quando entrar na

aplicao.
3.3 Implementao da Aplicao

Com o intuito de facilitar o entendimento da aplicao, foi desenvolvida utilizando o
conceito da arquitetura MVC. O prottipo foi divido em pacotes conforme suas funes, tais
como Controller, Model, View, Store, Ext e Integraes. Cada pacote contm classes e as classes
contm seus mtodos e funes.
Na Figura 66 representado o diagrama de pacotes da aplicao.
45
Figura 6 - Diagrama de Pacotes da aplicao
O prottipo composto pelos pacotes Controller, Model, View, Store, Ext e

Integraes, estes pacotes sero apresentados mais detalhadamente abaixo.
3.3.1 Pacote Controller

No pacote controller foram criadas cinco classes, onde sero gerenciadas as
solicitaes das classes dos pacotes View e Store. As classes controller foram separadas com o
intuito de separar a parte visual da aplicao com a regra de negcios.
Na Figura 77 representa o diagrama de classes do pacote controller.
Figura 7 - Diagrama de classes do pacote Controller
46
3.3.2 Pacote Model

As classes que esto no pacote model sero utilizadas quando as informaes forem
consultadas pelas classes dos pacotes View e Store.
Na Figura 88 representa o diagrama de classes do pacote model.
Figura 8 - Diagrama de classes do pacote Model
3.3.3 Pacote View

O pacote view possui as classes que iro criar as interfaces visuais, utilizando as classes
do pacote Ext. As classes views foram separadas para deixar o cdigo mais limpo e permitindo
a separao entre as vises da aplicao.
Na Figura 99 representa o diagrama de classes do pacote view.
47
Figura 9 - Diagrama de classes do pacote View
3.3.4 Pacote Store

O pacote store possui as classes que carregam os dados da aplicao, permitindo a
conexo com as partes externas da aplicao.
Na Figura 100 representa o diagrama de classes do pacote store.
Figura 10 - Diagrama de classes do pacote Store
48
3.3.5 Pacote Ext

O pacote Ext, contm as classes que o framework Sencha Touch disponibiliza para
criao de uma web apps, tanto para parte de view, store, model, controller e profile.
Na Figura 111 representa o diagrama de classes do pacote store que so utilizados na
aplicao.
Figura 11 - Diagrama de classes do pacote Ext
3.3.6 Pacote Integraes

O pacote integraes ser responsvel por efetuar requisies externas a um
determinado web services como o do microblog Twitter.
Na Figura 122 representa o diagrama de classes do pacote.
Figura 12 - Diagrama de classes do pacote Integraes
49
3.4 Tcnicas de otimizao

A quantidade de usurios que acessa a internet por meio de dispositivos mveis,
cresceu demasiadamente nos ltimos anos. Porm os dispositivos mveis so diferentes do
computador de mesa, aos quais estamos acostumados a utilizar. Questes como usabilidade,
acessibilidade, flexibilidade, entre outras caractersticas, so diferentes quando se compara as
duas tecnologias.
Pensando nas diferenas e visando a performance das funcionalidades, vamos adotar
algumas estratgias e otimizaes que podero ser utilizadas na implementao de um website
e webapps. Sero utilizadas algumas prticas que esto no documento criado pelo grupo W3C,
(documento oferece as melhores prticas para o desenvolvimento voltado para web mvel).
3.4.1 Tcnicas na Autenticao do Usurio

Geralmente as aplicaes web mveis iniciam-se em uma tela de autenticao, para
que os usurios possam ser reconhecidos e suas informaes carregadas no webapps. Por a tela
de autenticao ser utilizada frequentemente quando acessamos uma aplicao, sero aplicadas
algumas boas prticas e tcnicas de otimizao, para facilitar e melhorar a performance das
funcionalidades.
Nos dispositivos mveis se torna mais complicada a insero de textos por serem
menores e a interao do usurio com o aparelho fica mais difcil. No prottipo desenvolvido
foi adicionada uma autenticao automtica, mais conhecida como Sing-in. Quando ativada
a autenticao automtica, as prximas sesses que sero iniciadas, no ir solicitar ao usurio
o login e a senha, tornando mais simples o processo de autenticao.
Na tela de autenticao tambm foram utilizadas algumas recomendaes do
documento W3C, visando ter um designer flexvel, que adequa a ecr ao tamanho da resoluo
do dispositivo mvel, garantindo o enquadramento adequado dos textos, componentes, entre
outros. Foi implementada utilizando o cache do navegador do dispositivo mvel para guardar
as informaes de autenticao.
3.4.2 Tcnica de carregamento

Os contedo das aplicaes mveis podem ser complexos ou simples, dependendo das
informaes a serem exibidas: textos, imagens, botes, entre outros. Geralmente essas
50
informaes apresenta-se em formato de lista vertical ou horizontal.

A lista como um modelo de interface, muito eficiente para exibir as informaes aos
usurios da aplicao. O processo de desenvolvimento se tornou muito eficaz, por utilizar um
modelo de navegao com diversas tcnicas de carregamento como: paginao, polling,
websockets, entre outras [LEE, VALENTINO, 2005].
As tcnicas de carregamento influenciam diretamente na satisfao de uso do usurio
com a aplicao, pela dependncia de ir ao servidor buscar as informaes. As tcnicas precisam
ser adequadas e otimizadas para que no se torne lento o processo do carregamento, evitando
assim a espera do usurio.
O prottipo desenvolvido foi implementado utilizando algumas tcnicas de
carregamento, como o carregamento Pull Refresh, onde o usurio vai ao incio da lista, puxa
para baixo e atualiza a lista com as informaes, esse tipo de carregamento manual e utiliza
uma conexo sncrona.
A tcnica de Polling tambm foi implementada. Essa tcnica baseada na
automatizao das atualizaes entre a aplicao e o servidor. Diferente da tcnica citada
anteriormente, esta no precisa da interao do usurio para atualizar as informaes, pois sua
ao realizada constantemente em um perodo de tempo estabelecido em uma funo na
aplicao.
Para troca de mensagens entre o cliente e o servidor foi utilizado o formato JSON, que
executa mais rapidamente do que as outros formatos. Um importante ponto para tornar a
usabilidade da aplicao mais agradvel, minimizar a percepo da latncia ao usurio.
As tcnicas citada acima que foram implementadas no prottipo, atendem algumas
recomendaes e boas prticas de desenvolvimento, onde visa tornar o carregamento mais
satisfatrio ao cliente.
3.4.3 Tcnica de entrada de dados

Nas aplicaes mveis, por no terem a mesma facilidade na insero de textos do que
um computador de mesa, torna-se muito importante aplicar algumas tcnicas e cuidar da
reduo dos campos a serem preenchidos.
Existem diversas tcnicas que podem beneficiar o usurio mobile com a utilizao de
componentes como: caixas drop-down, botes de opes, caixas de seleo, posio dos labels
e a personalizao do teclado virtual, onde aparecer o teclado perante as necessidades do
campo, tornando assim, a insero de dados mais fcil na aplicao [LEE, VALENTINO, 2005].
51
Visando atender algumas recomendaes de tcnicas e boas prticas, o prottipo

desenvolvido buscou garantir que os campos (text, textarea, labels, entre outros) do formulrio
estejam com enquadramento adequado ao ecr, eliminando a necessidade de utilizar o scroll
horizontal, garantindo tambm alteraes da orientao do dispositivo.
Outra tcnica aplicada tem como objetivo facilitar a insero dos dados, utilizando o
teclado virtual especifico para o tipo de campo, diferenciando por e-mail, nmeros, letras,
senha, entre outros. Um ponto importante que foi levado em considerao tambm, a
utilizao dos labels acima do campo. Por conta de os navegadores darem zoom
automaticamente ao campo do formulrio que est sendo preenchido, podendo ocasionar alguns
problemas quando os labels esto alinhados esquerda.
3.4.4 Otimizaes do lado do servidor (Otimizaes do servidor web)

As aplicaes para dispositivos mveis que dependem das redes web de dados como
2G, 3G, 4G, entre outras, so muito sensveis a qualidade da internet disponvel. Atualmente se
tornou muito importante a otimizao, tanto no lado do cliente como no servidor.
Nos servidores web possvel efetuar diversas configuraes importantes, com o
intuito de aumentar o desempenho e a performance das aplicaes ou websites que l esto, e
reduzir a quantidade de dados transferidos entre os mesmos.
Nesta seo foram aplicadas algumas otimizaes visando melhorar o desempenho e
a performance do servidor web. As tcnicas foram aplicadas em um servidor Windows 8.1 Pro,
utilizando o Internet Information Services (IIS) na verso 8.5.
3.4.4.1
GZIP
O Gzip uma das possibilidades mais importantes e significantes para a otimizao

de um site para dispositivo mveis. A compresso consiste em enviar os cdigos de um site
compactados, de forma que ocupem menos espao e sejam mais rpidos nas transmisses pela
rede, aumentando a velocidade do site.
A maneira mais comum de enviar um arquivo comprimido a configurao no
servidor web, onde est hospedo o site, seja ele ISS, Apache, entre outros sistemas. O Gzip
capaz de reduzir o tamanho das respostas em cerca de 70% dos sites. O compressor suportado
pela maioria dos navegadores disponveis atualmente [SOUDERS, 2008].
A tcnica de comprimir os dados foi implementada utilizando o Gzip do servidor
52
citado acima. A configurao da compactao foi realizada pelo prprio cdigo fonte, em um
arquivo chamado web.config, este arquivo gerado automaticamente por ser desenvolvido em
.NET. Abaixo segue na Figura 133 do cdigo que foi inserido para compactar os arquivos do
projeto.
Figura 13 - Cdigo fonte do arquivo web.config para compreso.
Como pode observar no cdigo fonte do arquivo web.config, foi implementado o

mtodo urlCompression que define a compactao dos arquivos da aplicao. Este mtodo
atualiza a configurao do IIS automaticamente, tirando a necessidade de configur-lo tambm
para compactar.
3.4.4.2
Web Cache
Os websites esto ficando cada vez mais robustos, o que significa a utilizao de mais
css, scripts, imagens, entre outros. Com isso a pgina pode realizar diversas solicitaes HTTP
desnecessrias. Ao utilizar o cache, poder reduzir o nmero e o tamanho das solicitaes
HTTP, tornando com que as pginas carreguem mais rapidamente e com muito menos
requisies.
Um servidor web utiliza uma data de expirao no cabealho da resposta HTTP para
informar aos navegadores quanto tempo aquele componente poder ser armazenado em cache.
Evita assim com que o componente no seja solicitado novamente, considerando o prazo de
validade estipulado pela aplicao [YAHOO DEVELOPER NETWORK, 2014].
A aplicao desenvolvida utilizou a tcnica de web cache, para que os arquivos que j
53
esto em cache no sejam transmitidos. Como citado acima, esta tcnica utilizar o mesmo
painel de configurao do IIS. A configurao do cache foi implementada no cdigo fonte,
como cita acima em um arquivo chamado web.config.
Abaixo segue na Figura 144 do cdigo fonte que foi inserido para colocar os
componentes do projeto em cache.
Figura 14 - Cdigo fonte do arquivo web.config para a utilizao do web cache.
No cdigo fonte do arquivo web.config, foi implementado o mtodo staticContent e

caching, onde define as configuraes dos arquivos que sero armazenados em cache. Estes
mtodos iro definir quais extenses de arquivos que sero armazenadas, e como sero
expirados, pela data definida ou por uma notificao de alterao. Este mtodo tambm atualiza
a configurao do IIS automaticamente, sem precisar da interveno no painel.
3.4.4.3
Minificar o JavaScript e CSS
Os cdigos fontes que esto seguindo as recomendaes e padres de documentaes,

nomes de variveis, indentao, entre outras, no iro influenciar nas execues dos scripts,
pois os navegadores no interpretam essas recomendaes e padres, servir apenas para o
desenvolvimento e a manuteno desses cdigo [SOUDERS, 2008].
Minificar o cdigo JavaScript e CSS, uma pratica que remove todos os caracteres
desnecessrios, tais como comentrios, linhas e espaos em branco, entre outros. Com isso
reduzir o seu tamanho e consequentemente o tempo de resposta ser melhorado.
Uma pesquisa realizada pela Yahoo Developer Network nos dez principais sites norteamericano, apurou que ao minificar um website, o seu tamanho poder ser reduzido em mdia
54
a 25% de seu tamanho original. Atualmente existem diversas formas de minificar o cdigo
fonte, sendo eles por softwares, sites, servios, entre outros. [YAHOO DEVELOPER
NETWORK, 2014].
Para minificar os cdigos JavaScript e CSS da aplicao, foram utilizadas duas
ferramentas criadas por uma organizao online. As ferramentas so disponibilizadas
gratuitamente e esto disponveis como servios ou no prprio websites, podendo ser acessadas
em dois endereos diferentes: para minificar os cdigos JavaScript acesse http://javascriptminifier.com e no caso do CSS acessar http://cssminifier.com. Ambas as ferramentas so muito
simples de se utilizar, basta copiar o cdigo fonte que deseja minificar no site e o mesmo
retornara-los minificados.
3.4.4.4
Cabealho Keep-Alive
Os servidores que utilizam no cabealho de resposta HTTP o Keep-Alive, melhora o

seu desempenho, pois ir reaproveitar as conexes abertas entre o cliente e o servidor. Ao abrir
uma conexo com o servidor, e no tenha sido finalizado, essa conexo reaproveitada para
trafegar outras requisies. Caso no utilizar, o servidor ir abrir uma conexo nova para cada
solicitao feita ao mesmo.
Abaixo segue na Figura 155 do cdigo fonte onde foi inserido para utilizar a funo
de Keep-Alive em suas conexes.
Figura 15 - Cdigo fonte do arquivo web.config para a utilizao do Keep Alive.
No cdigo fonte acima est no arquivo web.config, foi implementado utilizando o
55
mtodo httProtocol e definindo pelo allowKeepAlive, nela poder definir verdadeiro ou falso
para que utilize a configurao ou no. Este mtodo atualizar automaticamente as
configuraes do ISS, sem precisar configur-lo tambm.
56
RESULTADOS E ANLISES
Para mostrar as vantagens ou desvantagens da utilizao de tcnicas e boas prticas
para dispositivos mveis, testes foram realizados. Os testes foram realizados utilizando um
smartphone com acesso ao servidor e com ferramentas que analisam o desempenho da
aplicao web que foi proposta.
Neste captulo ser apresentada a anlise dos dados coletados e seus resultados.
4.1 Cenrio com Cache e sem Cache

Na aplicao desenvolvida foi implementado a tcnica de web cache com o intuito de
diminuir as transferncias entre o cliente e o servidor. Como na inicializao da aplicao web
carrega tudo de um vez, foi implementado no prprio cdigo fonte do arquivo web.config, as
configuraes de como ser utilizado o cache do cliente.
Aps ter aplicado as configuraes foram realizados alguns teste, utilizando a prpria
ferramenta de desenvolvedor disponvel no navegador Google Chrome. Foram realizados dois
testes, utilizando e sem utilizar a tcnica de cache, com isso pode-se fazer um comparativo do
uso desta tcnica.
Como a aplicao est utilizando um framework, pode-se observar que a maior carga
das requisies est logo no incio, por terem que ser carregados as classes do JavaScript, CSS,
entre outras. Com o intuito de realizar os teste mais eficiente, foram testados com trs tipos de
conexes, GPRS a 50 Kbps, 3G a 750 Kbps e por ltimo na Wi-Fi.
Na Tabela 4, foram realizados algumas comparaes relevantes, quando se trata de
aplicaes web desenvolvida para dispositivos mveis utilizando a rede GPRS.
Tabela 4 - Comparao da utilizao do cache na aplicao utilizando a rede GPRS.
Sem cache
Telas
Requisies
Login
30
Segundos
1.18,23
Com cache
KBytes Requisies
1.900
28
Segundos
45,13
KBytes
44,4
Na Figura 16 podemos observar um grfico que est representando os resultados dos

testes quando utilizado a tcnica de cache na rede GPRS.
57
Figura 16 - Grfico da utilizao do cache na rede GPRS
Grfico da utilizao do cache na rede GPRS

KBytes
1900
44,4
1855,6
118,23
45,13
33,1
Segundos
30
28
2
Requisies
0
200
400
600
800
1000
1200
1400
1600
1800
Sem cache
Requisies
30
Segundos
118,23
KBytes
1900
Com cache
28
45,13
44,4
Reduo
33,1
1855,6
2000
Utilizando a rede GPRS podemos observar que o tempo foi extremamente alto por
conta da baixa capacidade de transferncia de informaes do dispositivo mvel. J quando
utilizamos a rede 3G que mais comum entre os dispositivos mveis, notamos uma diminuio
desse tempo significante, com uma reduo de 77,88%. Na Tabela 5 podemos observar essa
diferena na reduo do tempo entre a utilizao das redes GPRS e 3G.
Tabela 5 - Comparao da utilizao do cache na aplicao utilizando a rede 3G.
Sem cache
Telas
Requisies
Login
30
Segundos
17,30
Com cache
KBytes Requisies
1.900
28
Segundos
4,12
KBytes
44,4

Na Figura 17 podemos observar um grfico que est representando os resultados dos testes quando
utilizado a tcnica de cache na rede 3G.
58
Figura 17 - Grfico da utilizao do cache na rede 3G
Grfico da utilizao do cache na rede 3G

KBytes
44,4
Segundos
17,3
4,12
13,18
1900
1855,6
30
28
2
Requisies
0
200
400
600
800
1000
1200
1400
1600
1800
Sem cache
Requisies
30
Segundos
17,3
KBytes
1900
Com cache
28
4,12
44,4
Reduo
13,18
1855,6
2000
A rede Wi-Fi no poder ser comparada com as redes anteriores GPRS e 3G, pois
depende muito da conexo que disponibilizada na LAN. Na Tabela 6 foram realizados as
comparaes utilizando a conexo Wi-Fi.
Tabela 6 - Comparao da utilizao do cache na aplicao utilizando a rede Wi-Fi.
Sem cache
Telas
Requisies
Login
30
Segundos
2,60
Com cache
KBytes Requisies
1.900
28
Segundos
1,08
KBytes
44,4

testes quando utilizado a tcnica de cache na rede Wi-Fi.
59
Figura 18 - Grfico da utilizao do cache na rede Wi-Fi
Grfico da utilizao do cache na rede Wi-Fi

KBytes
1900
44,4
Segundos
2,6
1,08
1,52
Requisies
30
28
2
0
1855,6
200
400
600
800
1000
1200
1400
1600
1800
Sem cache
Requisies
30
Segundos
2,6
KBytes
1900
Com cache
28
1,08
44,4
Reduo
1,52
1855,6
2000
Como podemos observar a rede mvel tem uma grande influncia no carregamento
das aplicaes web. Na tela de Login por ser a primeira quando acessamos a aplicao, tornouse perceptvel a importncia da utilizao dessa tcnica. Ela teve uma reduo de 6,66% das
quantidades de requisies e 97,66% na reduo do tamanho dos arquivos transferidos,
tornando surpreendente a reduo de 1.855,6 KBytes do seu tamanho, utilizando apenas do Web
Cache. As demais telas no houveram requisies, por serem carregadas ao acessar a aplicao
web mvel.
Com esta reduo significante, podemos observar que muito importante a utilizao
desta tcnica, para evitar o uso desnecessrio dos arquivos transferidos, e diminuindo o custo
de utilizao da bateria e da rede mvel. Com isso torna-se a experincia de uso do usurio
mais agradvel e eficiente, pois aplicao web ser carregada mais rapidamente e com menos
custos.
4.2 Cenrio com Gzip e sem Gzip

A compreenso de dados uma excelente tcnica de otimizao para aplicaes web
ou websites, alm de ser fcil e pratico a sua implementao. Porm no so todos os arquivos
que podem apresentar uma compactao adequada. As imagens e os vdeos no so
recomendados compactar.
60
No prottipo desenvolvido foi implementado a compresso gzip no arquivo

web.config, para que possa ser realizados testes na reduo de seu tamanho. Foram realizados
testes utilizando a ferramenta do desenvolvedor no navegador Google Chrome, nele foram
realizados dois testes, com e sem a compactao do gzip. Como j citado acima, estamos
utilizando um framework, onde torna-se o primeiro acesso a maior carga.
Na Tabela 7 foram realizado dois testes para comparar os benefcios da utilizao da
tcnica de compresso gzip.
Tabela 7 - Comparao entre a utilizao da tcnica Gzip.
Telas
Login
Sem Gzip
Com Gzip
KBytes
1.9
KBytes
1.399,92
Reduo
KBytes
500,08
Porcentagem
26,32 %

testes quando utilizado a tcnica de compresso gzip.
Figura 19 - Grfico da utilizao do Gzip
Grfico da utilizao do Gzip

1900
Kbytes
1399,92
500,08
200
400
600
800
1000
Sem Gzip
Kbytes
1900
Com Gzip
1399,92
Reduo
500,08
1200
1400
1600
1800
2000
Como a tela de Login a primeira quando acessamos a aplicao, podemos observar

uma reduo significante em seu tamanho, aps aplicar a compactao. Aplicando essa tcnica,
podemos observar que reduziu um quarto do seu tamanho, sendo 26,32% e 500,08 KBytes,
economizando assim na transferncia entre o cliente e o servidor.
Um outro ponto importante a ser observado, que a compactao dos arquivos foram
aplicadas apenas nos arquivos que esto sendo utilizando no prottipo como extenso
javascript, css e aspx. Mas caso tivesse outras extenses tambm poderiam ser compactadas, as
imagens, vdeos e arquivos menores que 1 KBytes no so recomendados utilizar essa tcnica,
pois no ter um efeito significativo. Com essa reduo podemos diminuir a transferncia entre
61
o cliente e o servidor cerca de 30%, simplesmente aplicando a tcnica de compactao dos

arquivos a serem transferidos.
4.3 Cenrio da minificar do JavaScript e do CSS

No prottipo desenvolvido foi aplicado a tcnica de minificar o cdigo, onde remove
os caracteres desnecessrios e com isso o tamanho reduz consideravelmente, melhorando o
desempenho do tempo de resposta.
A tcnica foi aplicada apenas nos arquivos JavaScript e CSS, onde os mesmos tiveram
uma boa reduo em seu tamanho. Os testes foram realizados utilizando a prpria ferramenta
do desenvolvedor disponvel nos navegadores do Google Chrome.
Na Tabela 8 mostrado os resultados dos testes realizados onde teve ganho de
desempenho que tivemos quando os processos de minificao so aplicados aos arquivos
JavaScript.
Tabela 8 - Comparao entre os arquivos JavaScript minificados.
Telas
Login
Tamanho
original
1.5 KBytes
Tamanho
reduzido
937,05 KBytes
Reduo
562, 95 KBytes
37,53 %

testes quando utilizado a tcnica de minificar o JavaScript.
Figura 20 - Grfico da utilizando a reduo do JavaScript
Grfico da utilizando a reduo do JavaScript

1500
Kbytes
937,05
562,95
0
200
400
600
800
Tam. Original
Kbytes
1500
Tam. Reduzido
937,05
Reduo
562,95
1000
1200
1400
1600
Como j citado acima a tela de Login por ser a primeira quando acessamos o prottipo,
onde tem a maior carga e onde podemos observar que teve uma reduo significante no seu
tamanho. Aps aplicado a tcnica nos arquivos JavaScript, eles tiveram uma reduo de um
62
tero do seu tamanho representando 562,95 KBytes e 37,53% do seu tamanho original.
Na Tabela 9 veremos os resultados quando aplicamos a tcnica nos arquivos CSS, onde
os mesmo tambm tiveram uma reduo interessante.
Tabela 9 - Comparao entre os arquivos CSS minificados.
Telas
Login
Tamanho
original
397 KBytes
Tamanho
reduzido
249 KBytes
Reduo
148 KBytes
37,27 %

testes quando utilizado a tcnica de minificar o CSS.
Figura 21 - Grfico da utilizando a reduo do CSS
Grfico da utilizando a reduo do CSS

397
Kbytes
249
148
0
50
100
150
200
250
Tam. Original
Kbytes
397
Tam. Reduzido
249
Reduo
148
300
350
400
450
As economia dos arquivos CSS geralmente so menores em comparao ao arquivos

JavaScript, pois nos CSS tem menos comentrios e menos espaos em brancos. No caso do
prottipo os arquivos tiveram uma reduo significante por estar utilizando um framework,
onde o mesmo dispe de uma documentao bem detalhada, tornando os arquivos maiores.
Os arquivos CSS do prottipo tiveram uma reduo de 148 KBytes representando
37,27% do seu tamanho original.
Recomenda-se que quando pretendemos reduzir o tamanho dos arquivos CSS
diminuir a quantidade de classes, e a utilizao de abreviaes, remoes de strings
desnecessrias, como ao definir um tamanho de um componente, ao invs de utilizar 10px
utilizar apenas 10, onde o efeito se torna o mesmo.
4.4 Cenrio de resolues diferentes de Tela

Um dos maiores desafios no desenvolvimento voltado para dispositivos mveis,
63
fazer com que as telas que so implementadas se enquadrem adequadamente as diversas

resolues dos aparelhos. Visando atender essa necessidade, o framework disponibiliza o
designer responsivo, onde enquadra todos os componentes da aplicao na resoluo da tela
que est sendo utilizada no momento.
Buscando realizar os testes adequados, no prottipo desenvolvido foram realizados
dois testes em dispositivos de tamanhos diferentes. Foi utilizado um simulador para realizar os
testes, sendo um smartphone Nexus One (3.7, 480x800 hdpi) e outro utilizando um tablet
WXGA (10.1, 1280x800 mdpi), testando os diferentes tipos de telas implementadas com vrios
componentes, tais como listas, campos, botes, imagens, textos, entre outros.
Na Figura 2222 ilustrado a tela de login onde est sendo feito uma comparao no
enquadramento dos componentes entre dois tamanhos.
Figura 22 - Tela de login (A) resoluo de 480x800 e (B) 1280x800.
Na tela de login podemos observar que temos dois campos, um sendo de texto e outro
de senha, tambm tem uma opo de ficar autenticado no sistema e um boto para entrar. Todos
os componentes se adequaram perfeitamente ao tamanho da resoluo.
Na Figura 2323 ilustrado a tela de Twitter, onde aparece uma lista com o assunto
pesquisado no Twitter.
64
Figura 23 - Tela do Twitter (A) resoluo de 480x800 e (B) 1280x800.
Na tela do Twitter tem alguns componentes, como o campos de pesquisa, o boto de

buscar e a lista que representa o retorno do assunto pesquisado. Na lista, temos textos, imagens
e hiperlink, onde os mesmos podem variar de tamanhos, pela quantidade de textos. Como
podemos observar todos os componentes se enquadraram adequadamente a resoluo do
dispositivo mvel. Na Figura 2424 ilustrado uma lista apenas com as imagens pesquisadas ao
devido assunto no Twitter.
Figura 24 - Tela de Imagens (A) resoluo de 480x800 e (B) 1280x800.
Como podemos observar essa tela bem parecida com a anterior. Temos alguns
componentes como campo para pesquisa, o boto para efetuar a busca e uma lista. Entretanto
na lista aparece apenas as imagens sem os textos e os hiperlinks. Todos os componentes se
enquadraram adequadamente a resoluo.
65
Na Figura 255 ilustrado um formulrio para contato, com diversos campos para
preenchimentos.
Figura 25 - Tela de Contato (A) resoluo de 480x800 e (B) 1280x800.
Ao observar a tela de Contato, conseguimos notar que existem diversos componentes

com entrada de dados como nome, telefone, e-mail e comentrio. Esses campos so
personalizados conforme suas caractersticas. Quando iniciamos a introduo do textos no
campo, o teclado aparecer conforme a necessidade do mesmo, sendo numrico, texto ou
endereo de e-mails. Na Figura 266 ilustrado uma tela com relatrio grfico em formato de
pizza, onde temos quatro divises.
Figura 26 - Tela de Relatrio (A) resoluo de 480x800 e (B) 1280x800.
A tela de relatrio tem um grfico no formato de pizza, onde foram divididos em quatro
categorias, sendo elas: timo, bom, regular e ruim. Podemos observar que o grfico diminuiu o
66
seu tamanho para se enquadrar adequadamente s duas resolues de tela.

O prottipo desenvolvido buscou atender as necessidades de se enquadrar
adequadamente a diversas resolues dos dispositivos mveis. Foram realizados os testes em
cima de duas resolues 480x800 e 1280x800 visando atender as duas pontas, uma resoluo
menor e uma maior.
4.5 Anlises e resultados

Atualmente existem diversas empresas que disponibilizam ferramentas automatizadas
para realizar anlises do carregamento dos sites, sistemas, entre outros. Essas ferramentas so
utilizadas com frequncia por quem busca um melhor desempenho, oferecendo dicas sobre o
que e como melhorar suas aplicaes web ou sites.
Nesta seo sero abordadas as duas ferramentas mais utilizadas no mercado,
fornecidas por duas empresas que se tornaram referncia no desenvolvimento web. A primeira
a PageSpeed que foi desenvolvida pela Google e a segunda a YSlow criada pela Yahoo!
4.5.1 YSLOW
A ferramenta YSlow tem como principal caracterstica, analisar o desempenho das
pginas web, examinado todos os componentes da pgina, incluindo os criados dinamicamente
usados pelo JavaScript. Alm de examinar ele oferece sugestes de como pode ser melhorada
a pgina [YSLOW, 2014].
A equipe de desenvolvimento da Yahoo! identificou 34 critrios que podem afetar
notavelmente o desempenho das pginas. Visando diminuir os problemas a equipe criou a
ferramenta YSlow, que se baseia em 23 dos 34 critrios. Esses critrios so listados em ordem
de importncia e eficcia [YSLOW, 2014].
O mtodo de anlise baseado em notas que vo da letra A ao F, e tambm em
pontuaes que vo do 0 ao 100, conforme a avaliao dos 23 critrios. Em uma pesquisas
realizada pela empresa Yahoo!, identificou que o tempo de resposta de uma pgina pode ser
melhorado entre 25% a 50%, seguindo os critrios [YSLOW, 2014].
YSlow pode ser instalado em alguns navegadores, como o Firefox, Chrome, Opera,
Safari, entre outros. Pode-se tambm realizar testes em dispositivos mveis, com a utilizao
do Bookmarklet integrando com o PhantomJS [YSLOW, 2014].
67
Resultados
Utilizamos o sistema YSlow no prottipo desenvolvido afim de analisarmos a nota
aps aplicados as tcnicas de otimizao de aplicaes web. Na Figura 277 mostrado a
pontuao obtida nos testes realizados pela ferramenta.
Figura 27 - Resultado obtido pela ferramenta YSlow.
A nota que a ferramenta apresentou sobre o prottipo, foi classe A que a maior nota
entre as letras, j na pontuao numrica obteve 91. As pontuaes no obtidas referem-se a
utilizao de arquivos do tipo javascript que esto separados por telas, divido a arquitetura
inicial do prottipo, a recomendao da ferramenta com que se reduza a quantidade de
arquivos para que o carregamento seja mais rpido.
4.5.2 PAGESPEED
O PageSpeed uma ferramenta desenvolvida pela Google, que segue a mesma linha
da ferramenta oferecida pela Yahoo!, avaliando o desempenho da pgina web. Porm o Google
foi mais alm em sua ferramenta, adicionando alguns critrios que ao analisarem a aplicao
68
ou site, serviro tanto para os computadores de mesa, como para os dispositivos mveis. E
utiliza apenas os critrios que so diretamente ligados as pgina, independentemente da
qualidade na conexo de rede [PAGESPEED, 2014].
A ferramenta tambm utiliza o mtodo de pontuao, para avaliar o desempenho das
pginas que podem variar entre 0 a 100. Pela ferramenta estar em constante atualizaes,
as pontuaes podero ser modificadas medida que so adicionados novos critrios ou
melhoria em suas anlises [PAGESPEED, 2014].
Inicialmente a PageSpeed foi desenvolvida como uma extenso para o navegador
Chrome, entretanto a Google percebeu uma necessidade de disponibilizar para outros
navegadores, abordando um maior nmero de pblico. Atualmente a PageSpeed fornece uma
anlise semelhante online, e com extenses a os navegadores Google Chrome e Firefox
[PAGESPEED, 2014].
Resultados
Utilizamos tambm a ferramenta PageSpeed para avaliarmos a aplicao
desenvolvida. Na Figura 288 mostrado o resultado obtido pela ferramenta desenvolvido pela
Google.
Figura 28 - Resultado obtido pela ferramenta PageSpeed.
A ferramenta PageSpeed tambm analisou o prottipo desenvolvido, onde obteve a

pontuao 100 que a mxima, na velocidade da pgina. A anlise contemplo 27 critrios
que indica se aplicao est adequada, tanto para computadores de mesa como para dispositivos
mveis, independente da conexo da rede.
69
4.6 Consideraes finais

Podemos observar que diversas tcnicas de otimizaes podem ser utilizadas nas
aplicaes, melhorando consideravelmente a performance de uso da mesma. Antes de aplicar
qualquer tcnica recomendado que se faam testes e analises para que seu uso no se torne
um equvoco, prejudicando assim a aplicao web mvel.
Neste capitulo demonstramos a aplicao de algumas tcnicas tanto no processo de
desenvolvimento da aplicao, como no prprio servidor, em busca de melhorar a performance
de uso do prottipo o mximo possvel.
Na Figura 29 ilustra a um comparativos aplicando as algumas tcnicas de otimizaes.
Figura 29 - Grfico de algumas tcnicas
Grfico das melhoras de algumas tcnicas

2000
1900
1855,6
1900
1900
1800
1600
1399,92
1400
1189,05
1200
1000
710,95
800
500,08
600
400
200
0
44,4
Cache
Gzip
Minificar
Sem aplicar
1900
1900
1900
Aplicando
44,4
1399,92
710,95
Resultados
1855,6
500,08
1189,05
Foram ilustrados tambm os impactos de algumas tcnicas aplicadas, utilizando

algumas ferramentas para mostrar a melhoria da performance. As Figuras 30 e 31 ilustrado a
diferena nas ferramentas quando aplicado as tcnicas.
70
Figura 30 - Comparao entre as otimizao na ferramenta PageSpeed, (A) No est

otimizado (B) Est otimizado.

Figura 31 - Comparao entre as otimizao na ferramenta YSlow, (A) No est otimizado
(B) Est otimizado.
Como podemos observar na imagem, tivemos uma melhoria considervel quando

aplicamos as tcnicas de otimizaes, tanto no lado do cliente como no lado do servidor. Foram
utilizadas duas ferramentas diferentes para mostrar os impactos que tiveram na aplicao.
Vimos que aplicando algumas tcnicas simples podemos melhorar consideravelmente
a satisfao de uso do usurio final em relao a aplicao desenvolvida para dispositivos
mveis.
71
CONCLUSO
medida que cresce o mercado de dispositivos mveis, aumenta tambm a variedade
dos aplicativos que so desenvolvidos. Empresas de desenvolvimento esto criando cada vez
mais aplicaes que necessitam de trocas de informaes pelas redes mveis. Entretanto, apesar
do avano tecnolgico na rea mvel, as transferncias de informaes via rede mvel se
tornaram um fator preocupante devido a suas limitaes.
No presente trabalho, foi iniciado um estudo sobre as tcnicas de otimizaes voltadas
para dispositivo mveis que tem como principal objetivo analisar o que o mercado, fruns e
instituies de pesquisas podem oferecer para ganharmos qualidade nos apps.
O prottipo implementado nesse trabalho teve como principal finalidade, aplicar
algumas das tcnicas recomentadas no documento do grupo W3C, esse documento busca criar
um padro internacional, garantindo um bom desenvolvimento na evoluo das aplicaes
voltadas para dispositivos mveis.
Ainda na fase de desenvolvimento, tambm foi utilizado o framework Sencha Touch,
onde busca aproximar a aplicao web com a nativa. Aps o termino da implementao do
prottipo, foram realizados testes de performance com as ferramentas PageSpeed e YSlow,
onde pontua a performance da aplicao.
Com base nos resultados dos testes e no documento da melhores prticas, verificou-se
a importncia de aplicar algumas otimizaes na aplicao. Como podemos observar nos
resultados obtidos pelas ferramentas, o prottipo teve uma avaliao com a pontuao alta
podendo chegar a pontuao mxima, apenas aplicando algumas tcnicas de otimizao.
Lembrando que no processo de implementao algumas medidas tero de ser bem
analisadas antes da criao de uma aplicao, pois as necessidades influenciam diretamente na
escolha da arquitetura, tecnologias, ferramentas, banco de dados, entre outros.
A principal concluso do projeto que podemos ressaltar, mensurar o quando que as
tcnicas que foram aplicadas puderam oferecer de ganho na eficincia e na performance da
aplicao web.
72
5.1 Trabalhos Futuros

Como continuidade das pesquisas realizadas no presente trabalho, possvel seguir
algumas direes que podero acrescentar mais valores nas pesquisas de otimizao de
aplicaes web para dispositivos mveis.
O documento dos grupo W3C dispe de diversas melhorias que podem ser utilizadas
no desenvolvimento de aplicaes, podendo ser implementadas com a utilizao de outros
frameworks que esto disponveis no mercado.
Uma implementao interessante que poder ser realizada, o carregamento por http
push mais conhecido por websockets, essa otimizao visa diminuir as requisies
desnecessrias das aplicaes web ao servidor.
Ao meu ver todas as pesquisas que se referem a anlise de boas prticas no
desenvolvimento web voltado para dispositivos mveis, so vlidas como trabalhos futuros,
pois as tecnologias esto em constante melhorias.
73
REFERNCIAS
ERICSSON.
Ericsson
Mobility
Report.
Disponvel
<http://hugin.info/1061/r/1790097/615436.pdf>. Acessado em junho de 2014.
em:
GOOGLE SERVICE. Nosso Planeta Mobile Brasil: Como entender o usurio de celular.
Disponvel em <http://services.google.com/fh/files/misc/omp-2013-br-local.pdf>. Acessado
em novembro de 2014.
APPLE. App Store Downloads Top 100 Million Worldwide. Disponvel em:
<http://www.apple.com/pr/library/2008/09/09App-Store-Downloads-Top-100-MillionWorldwide.html>. Acessado em maio de 2014.
GOOGLE.
Introducing
Google
Play
All
Your.
Disponvel
<http://googleblog.blogspot.com.br/2012/03/introducing-google-play-all-your.html>.
Acessado em maio de 2014.
em:
MSDN. Desenvolver aplicativos universais para Windows. Disponvel em:

<http://msdn.microsoft.com/pt-br/windows/apps/br229519>. Acessado em maio de 2014.
IBM. Dentro do Desenvolvimento de Aplicativo Mvel. Disponvel em: <http://www03.ibm.com/software/products/Pt/category/Mobile-Application-Development>. Acessado em
abril de 2014.
PHONEGAP. PhoneGap. Disponvel em: <http://phonegap.com>. Acessado em abril de 2014
KIVY. Kivy: cross-plataform framework. Disponvel em: <http://kivy.org>. Acessado em
abril de 2014.
TITANIUM. Titanium Mobile Application Development.
<http://www.appcelerator.com/Titanium>. Acessado em abril de 2014
Disponvel
em:
OEHLMAN, Damon; BLANC, Sbastien. Pro Android Web Apps. Develope for Android
using HTML5, CSS3, & Java script, Apress, 2011.
NOKIA. Arquitetura de aplicaes multiplataforma para dispositivos mveis. Disponvel
em:
<
http://developer.nokia.com/community/wiki/Arquitetura_de_aplicaes_multiplataforma_par
a_dispositivos_mveis>. Acessado em maio de 2014.
74
SENCHA. HTML5 App Development for Desktop and Mobile. JavaScript Frameworks
and Dev Tools from Sencha. Disponvel em: <http://www.sencha.com>. Acessado em abril
de 2014.
JQUERY. jQuery Mobile. Disponvel em: <http://jquerymobile.com>. Acessado em abril de
2014.
DOJO. Unbeatable JavaScript Tools - The
<http://dojotoolkit.org>. Acessado em abril de 2014.
Dojo
Toolkit.
Disponvel
em:
APPMOBI. appMobi - Cross Platform Push Messaging, In App Purchasing &

Moreappmobi. Disponvel em: <http://www.appmobi.com>. Acessado em abril de 2014.
SIX REVISIONS. Native App vs. Mobile Web App: A Quick Comparison. Disponvel em:
<http://sixrevisions.com/Mobile/Native>. Acessado em abril de 2014.
CECCATO, Leandro Martins. IBM Worklight - IBM Mobile Foundation Overview.
Disponvel em: <http://slideplayer.com.br/slide/352366>. Acessado em abril de 2014.
SALESFORCE. Native, HTML5, or Hybrid: Understanding Your Mobile Application
Development
Options.
Disponvel
em
<
https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_M
obile_Application_Development_Options>. Acessado em maio de 2014.
WEBMONKEY. How Do Native Apps and Web Apps Compare?. Disponvel em:
<http://www.webmonkey.com/2010/08/how-do-native-apps-and-web-apps-compare>.
CONSTINE, Josh. Zuckerberg Shows He's The Right Man For The Job. Now That Job
Needs Doing. Disponvel em: <http://techcrunch.com/2012/09/11/zuckerberg-the-leader>.
DREGE, Stuart. Financial Times: 'There Is No Drawback To Working In Html5'.
Disponvel em: <http://www.theguardian.com/media/appsblog/2013/apr/29/financial-timeshtml5-no-drawbacks>. Acessado em maio de 2014.
W3C. The Worldwideweb Browser. Disponvel em: <http://www.w3.org/people/bernerslee/worldwideweb.html>. Acessado em maio de 2014.
KIOSKEA. O Que Um Url. Disponvel em: <http://pt.kioskea.net/contents/288-url>.
Acessado em Junho de 2014.
75
VENKATESH, C. R. Venkatesh. Dot Com Infoway Releases Html5 Infographic. Disponvel

em: <http://www.dotcominfoway.com/blog/dot-com-infoway-releases-html5-infographic>.
W3C HTML 5. HTML 5 Curso W3c Escritrio Brasil. Disponvel em:
<http://www.w3c.br/pub/cursos/cursohtml5/html5-web.pdf>. Acessado em maio de 2014.
SOUDERS, Steve. High-performance web sites. Communications of the ACM, v. 51, n. 12,
p. 36-41, 2008.
Hypertext Transfer Protocol. Disponvel Em: <http://tools.ietf.org/html/rfc2616#page-108>.
Acessado em junho de 2014.
Fadino, Rodolfo. Cache + .Net: Cache Http (Aumente A Performance De Seu Site).
Disponvel em: <http://www.rodolfofadino.com.br/2013/10/cache-net-Cache-http-aumente-aperformance-de-seu-site>. Acessado em junho de 2014.
GOOGLE 2. Getting Started With The Youtube Data Api. Disponvel em:
<https://developers.google.com/youtube/v3/getting-started?hl=pt-br>. Acessado em junho de
2014.
CERT.br. Cartilha de Segurana para Internet, verso 4.0 / CERT.br So Paulo: Comit
Gestor da Internet no Brasil, 2012.
ANDRADE, Marcos Tadeu de. Mecanismos de autenticao e autorizao em redes sociais
virtuais: o caso futweet. Universidade Federal de Pernambuco, Apresentado em agosto de
2010.
MARSHALL, Sam. Creating Offline Web Applications. Using Html 5. Institute Of
Information And Mathematical Sciences Massey University, Albany. Apres maro 2013.
W3C BEST PRACTICES, Mobile Web Application Best Practices. Disponvel em:
<http://www.w3.org/tr/mwabp>. Acessado em junho de 2014.
PADRES DE PROJETO, Use a cabea Padres de Projeto 2 Edio Revisada, Alta
Books Editora Starlin Alta Con Com LTDA 2009 OReilly.
LEE, VALENTINO, Heather Schneider, and Robbie Schell. Aplicaes mveis: arquitetura,
projeto e desenvolvimento. Pearson Makron Books, 2005.
76
YAHOO DEVELOPER NETWORK, Best Practices for Speeding Up Your Web Site,
Disponvel em: <https://developer.yahoo.com/performance/rules.html>. Acessado em outubro
de 2014.
YSLOW, YSlow Official Open Source
<http://yslow.org>. Acessado em outubro de 2014.
Project
Website.
Disponvel
PAGESPEED,
Make
the
Web
Faster.
Disponvel
<https://developers.google.com/speed>. Acessado em outubro de 2014.
em:
em:
WARGO, J. M. (2012), Phonegap Essentials: Building Cross-Platform Mobile Apps, AddisonWesley Professional.
MUNRO, J. (2012), 20 Recipes For Programming Phonegap:
Development For Android And Iphone, O'reilly Media.
Cross-Platform Mobile
CROWLEY, Matthew. Pro Internet Explorer 8 And 9 Development: Developing Powerful

Applications Development, Appres November 2010.
Victor, Valdenir, Alexandre, Marconi Arouca Ribeiro, Tavares, Sztajnberg. Avaliao e
Reduo do Tempo de Resposta de Sistemas WEB. Universidade do Estado do Rio de Janeiro,
apresentado em Dezembro de 2012.
CASTLEDINE, Earle, Max Wheeler, and Myles Eftos. Build mobile websites and apps for
smart devices. Sitepoint, 2011.
SRGIO, Lopes. A Web Mobile: Programe para um mundo de muitos dispositivos. Caso do
Cdigo, 2013.
77

Análise de Boas Práticas para o Desenvolvimento de Web Wapps

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Análise de Boas Práticas para o Desenvolvimento de Web Wapps

Caricato da

Copyright:

Formati disponibili

FUNDAO DE ENSINO EURPIDES SOARES DA ROCHA

CENTRO UNIVERSITRIO EURPIDES DE MARLIA UNIVEM

CARLOS EDUARDO MARTINELLI BERGANTIN

ANLISE DE BOAS PRTICAS PARA O DESENVOLVIMENTO DE

CARLOS EDUARDO MARTINELLI BERGANTIN

ANLISE DE BOAS PRTICAS PARA O DESENVOLVIMENTO DE

Trabalho de Curso apresentado ao Curso de

Martinelli, Carlos Eduardo

Monografia (Bacharelado em Sistemas de Informao): Centro

Dedico esse trabalho primeiramente Deus

Primeiramente, Deus pelas foras concedidas, e pela oportunidade de concluir mais

Concentre-se nos pontos fortes, reconhea as fraquezas,

O verdadeiro perigo no que computadores comearo a pensar como homens,

LISTA DE ABREVIATURAS E SIGLAS

Triple Data Encryption Standard

Terceira Gerao de Tecnologia de Internet Mvel

Advanced Encryption Standard

Application Programming Interface

Cascading Style Sheets

Data Encryption Standard

Document Object Model

File Transfer Protocol

General Packet Radio Service

Global Positioning System

Hash-based message authentication code

Hypertext Markup Language

Hypertext Transfer Protocol

Integrated Development Environment

Internet Information Services

iPhone Operation System

JavaScript Object Notation

Local Area Network

Model View Controller

National Center for Supercomputing Applications

Personal digital assistant

Representational State Transfer

Software Development Kit

Secure Hash Algorithm 1

Short Message Service

Scalable Vector Graphics

Uniform Resource Locator

World Wide Web Consortium

Web Hypertext Application Technology Working Group

Tecnologia para transmisso de dados por rede sem fio

ESTUDO DE APLICAES MVEIS ....................................................................................... 19

Tipos de aplicaes mveis ................................................................................................... 20

Aplicaes nativas ......................................................................................................... 20

Aplicaes Hbridas ...................................................................................................... 22

Aplicaes Web (Web Apps) ........................................................................................ 23

Comparaes entre os tipos de aplicaes .................................................................... 25

Consideraes finais ...................................................................................................... 27

WEB MOBILE .............................................................................................................................. 28

Compatibilidade com os navegadores ........................................................................... 29

Novas funcionalidades do HTML 5 .............................................................................. 31

Hypertext Transfer Protocol (HTTP) .................................................................................... 32

Tecnologias para desenvolvimento de Web Apps................................................................. 33

jQuery Mobile ............................................................................................................... 34

Sencha Touch ................................................................................................................ 34

Comparativo entre as ferramentas ................................................................................. 35

Melhores Prticas para desenvolvimento de Aplicao Web Mobile ................................... 35

World Wide Web Consortium (W3C)........................................................................... 36

Consideraes finais .............................................................................................................. 40

IMPLEMENTAO DE UMA WEB APPS ............................................................................... 41