2017619 DesenvolverappmultiplataformacomHTML5

(https://pt.yeeply.com/)

Pgina inicial (https://pt.yeeply.com/blog/) Entrevistas (https://pt.yeeply.com/blog/entrevistas/)

Desenvolver app com HTML5

Evelyn Neka em Entrevistas (https://pt.yeeply.com/blog/entrevistas/)

15 dezembro, 2015

Desenvolver app com HTML5

J falamos muitas vezes sobre desenvolvimento de app neste blog

(https://pt.yeeply.com/blog/5-conselhos-de-como-desenvolver-app-para-celular/).
Sobre desenvolvimento Android e iOS, tambm sobre aplicativos responsivos e
nativos. Sobre monetizao desses projetos de apps mveis. At mesmo o design
dos apps j foi tema do dia no nosso blog. Mas nunca esclarecemos
sucientemente como desenvolver aplicativos multi-plataforma com HTML5.

Para aqueles que acabaram de chegar ao mundo dos apps, a diferena entre
aplicativos nativos e multi-plataformas que os primeiros so escritos em suas
prprias linguagens de programao de apps. Enquanto os aplicativos multi-
plataforma tm um cdigo nico que interpretado e ajustado aos dispositivos,
diramos que so praticamente sinnimo de aplicativos web que falamos em vrias
ocasies.

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 1/10
2017619 DesenvolverappmultiplataformacomHTML5

Dentro desta categoria existem 2 ramos de aplicativos multi-plataforma: a primeira

sobre WebView (utilizando HTML5, CSS3, JavaScript, que vamos falar neste artigo)
(https://pt.yeeply.com/)
(https://pt.yeeply.com/blog/10-formas-de-desenvolver-apps-para-android-sem-
java/); e Xamarin, outro tipo que voc escreve o cdigo apenas uma vez em uma
linguagem comum e ele traduz para cada uma das plataformas.

HTML5 uma das linguagens que precisamente nos permite criar apps multi-
plataforma, que so acessveis a partir de qualquer dispositivo com um
desenvolvimento nico. Vamos ver um pouco mais em profundidade o que :

O que HTML5?

HTML5 uma linguagem markup que usada para estruturar e exibir o contedo
na web. Ele fornece suporte para aplicativos multimdia avanados, incluindo udio
e vdeo. Mas tambm nos permite modicar o layout de uma pgina e, portanto,
modicar sua aparncia.

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 2/10
2017619 DesenvolverappmultiplataformacomHTML5

Neste sentido, como que os desenvolvedores de aplicativos podem aproveitar

essa linguagem? O especialista pode desenvolver app interativo com HMTL5 que
(https://pt.yeeply.com/)
ser visto atravs do browser de qualquer dispositivo. HTML5 exatamente uma
das lnguas mais verstil para o desenvolvimento de aplicativos web e o mais
utilizado amplamente para criar apps no-nativos.

Porqu programar apps com HTML5?

Em primeiro lugar, devemos destacar que o HTML5 uma linguagem de

programao generalizada. Na verdade tornou-se na programao web padro
desde outubro de 2014, sendo assim , sempre vamos encontrar muitos recursos
sobre o assunto. Alm disso, a World Wide Web Consortium (W3C) colocou o seu
selo de Recomendado para a quinta verso da linguagem.

Inovaes trazidas em relao a verses anteriores do HTML e outras linguagens

a incluso nativa de vdeo e udio e tambm implementar design responsivas
automaticamente.

A importncia do HTML5

J deixamos claro porque a linguagem de programao importante em todo o

mundo e para programadores convencionais. Mas voc conhece sucientemente
as caractersticas desta linguagem para se tornar numa das melhores opes para
desenvolver app multi-plataforma? Ns vamos te expor as vantagens de usar HTM5
para criar aplicativos mveis.

Primeiro e mais importante a sua universalidade, quer dizer que ele

funciona em todos os navegadores, seja em dispositivos mveis ou do

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 3/10
2017619 DesenvolverappmultiplataformacomHTML5

computador tradicional. O cdigo interpretado e exibido por todos os

navegadores (Chrome, Safari, Firefox, Internet Explorer).
(https://pt.yeeply.com/)

uma linguagem com vocao audiovisual. Permite que voc inclua

nativamente tanto udio como vdeo. Aposta em mostrar e incluir contedo
multimdia nas criaes.

mobile friendly (https://pt.yeeply.com/blog/conheca-o-novo-algoritmo-

mobile-friendly-do-google/). Uma das vantagens de programao de
aplicativos com o HTML5 que esta linguagem pretende ser responsivo,
adaptado para a tela na qual o contedo exibido. Portanto, torna-se perfeito
criar sites que sero vistos como (ou seja, web apps) aplicativos. De acordo
com a empresa de anlise Vision Mobile, mais de 50% de aplicativos mveis
usam HTML5 junto com JavaScript e CSS.

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 4/10
2017619 DesenvolverappmultiplataformacomHTML5

Para oramentos mais limitados, uma escolha muito boa, pois mais barato
do que outros alternativos nativos. Ou at mesmo para iniciar uma verso
(https://pt.yeeply.com/)
beta do nosso negcio ou jogo mvel, com uma verso em HTML5 possvel
ver se funciona e se existe mercado pode signicar grande ajuda. Jogos do
estilo Candy Crush (puzzles) comearam com esta tecnologia e mais tarde
passou para o nativo.

E nalmente, mas no menos importante, a linguagem HTML5 aberta: ou

seja, qualquer um pode modicar, melhorar, expandir ou inventar novos
servios em aplicativos j desenvolvidos.

Vantagens e problemas de desenvolver app multiplataforma

Continuando com o que dissemos na seo anterior, as maiores vantagens da

criao de apps multi-plataforma com HTML5 e outras lnguas por ela ser para
aqueles que vm de desenvolvimento Web. Programador Web pode usar seus
conhecimentos para o desenvolvimento de aplicativos facilmente. Outra vantagem
que no falta o dobro ou o triplo de recursos para fazer o mesmo app para
Android, iOs e Windows Phone, acrescenta Jose Antonio Llopis, diretor tcnico na
Yeeply.

Como desvantagens, incluem a velocidade do aplicativo, que seriamente

reduzida. Da mesma forma o acesso ao hardware do dispositivo limitado para os
plugins disponveis. Outra desvantagem que apesar de garantir que o aplicativo
ir funcionar em qualquer plataforma, isso no corresponde totalmente a verdade.
Na prtica, voc tem que ir vericando o desenvolvimento em todas as plataformas
para conrmar que tudo esta bem.

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 5/10
2017619 DesenvolverappmultiplataformacomHTML5

lembre-se que apesar de ser aplicativo multi-plataforma, deve gerar um apk (para
dispositivos Android) ou ipa nativo (para dispositivos iOS) para que ele possa ser
(https://pt.yeeply.com/)
lido e exibido em dispositivos mveis. Por esta razo precisamos dos SDK de cada
plataforma. (https://pt.yeeply.com/blog/desenvolva-sua-plataforma-online-com-a-
ajuda-de-corona-sdk/) Como alternativa, voc pode usar um servio que no gera
automaticamente como Adobe (https://build.phonegap.com/).

Ferramentas para desenvolvimento multi-plataforma

As ferramentas mais utilizadas para desenvolver app WebView so as que

apresentamos abaixo:

Apache Cordova (https://cordova.apache.org/): um framework para o

desenvolvimento de aplicativos mveis de propriedade da Adobe Systems
que permite aos programadores desenvolver aplicativos para dispositivos
mveis usando ferramentas genricas da web como JavaScript, HTML5 e
CSS3, resultando em aplicativos hbridas.

AngularJS: (https://angularjs.org/) um framework de JavaScript de cdigo

aberto, mantido pelo Google, que usado para criar e manter aplicativos da

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 6/10
2017619 DesenvolverappmultiplataformacomHTML5

web em uma nica pgina.

(https://pt.yeeply.com/)
Ionico: (http://ionicframework.com/) uma ferramenta, gratuita e de
cdigo aberto para desenvolvimento de aplicativos hbridos baseado em
HTML5, CSS e JS. Ela construda com Sass e otimizado com AngularJS.

Embora a qualidade de tais aplicativos no a melhor que pode ser encontrado

em um desenvolvimento nativo, ele funciona muito bem para projetos de
pequenos e mdias empresas que no precisam de muitos recursos ou um
desempenho muito elevado. Na verdade, o primeiro aplicativo do Facebook foi
desenvolvido com este tipo de tecnologia at que foi decidido para programao
de aplicativos nativos.

Agora sua vez. Sabe como programar apps multi-plataforma? Que

ferramentas voc usa? O que esquecemos de acrescentar no artigo?

(https://pt.yeeply.com/publicar-projeto)

a Facebook
(https://www.facebook.com/sharer/sharer.php?
u=https://pt.yeeply.com/blog/desenvolver-app-com-html5/&t=Desenvolver app
multi-plataforma com HTML5&redirect_uri=https://pt.yeeply.com/blog?sharing-
thankyou=yes)
d Twitter

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 7/10
2017619 DesenvolverappmultiplataformacomHTML5

f Google+(https://plus.google.com/share?
url=https://pt.yeeply.com/blog/desenvolver-app-com-html5/)
(https://pt.yeeply.com/)
k LinkedIn
(http://www.linkedin.com/shareArticle?
mini=true&ro=true&trk=EasySocialShareButtons&title=Desenvolver app multi-
plataforma com HTML5&url=https://pt.yeeply.com/blog/desenvolver-app-com-
html5/)

ESCRITO POR TAGS

Evelyn Neka aplicativos web

Desenvolvedora de
negcio internacional
Economista por
vocao, amante de tecnologia e viciada
em informaes.
Responsvel pelos negcios da Yeeply
para mercado brasileiro e portugus.
Contato: +55 11 4950 5980
Siga-me no: Google Plus
(https://plus.google.com/u/0/105297818794735154840)
e Twitter (https://twitter.com/yeeply_pt).
(https://pt.yeeply.com/blog/tag/aplicativos-
web/)
criar aplicativos
(https://pt.yeeply.com/blog/tag/criar-
aplicativos/)
Desenvolvimento de aplicativos
(https://pt.yeeply.com/blog/tag/desenvolvimento-
de-aplicativos/)
Website
(https://pt.yeeply.com/blog/tag/website/)

COMENTRIOS

Comentrios esto desabilitados para este

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 8/10
2017619 DesenvolverappmultiplataformacomHTML5

Comentrios esto desabilitados para este

post
(https://pt.yeeply.com/)

HISTRIAS RELACIONADAS

Artigos semelhantes

(https://pt.yeeply.com/blog/conheca-
(https://pt.yeeply.com/blog/9-
(https://pt.yeeply.com/blog/subcontratar-
(https://pt.yeeply.com/blog/desenvolvimento-
(https://pt.yeeply.com/blog/tipos-
o-novo- dicas-de- aplicativo-para- de-aplicacoes- desenvolvimento-
algoritmo- desenvolvimento- smartphone/) web-como- de-aplicativos-
mobile-friendly- de-aplicativos- Subcontratar o promover-um- web/)
do-google/) web/) desenvolvimento web-app/) 6 Diferentes tipos
Conhea o novo 9 dicas de de um aplicativo Desenvolvimento de
algoritmo mobile- desenvolvimento para smartphone de aplicaes desenvolvimento
friendly do de aplicativos (https://pt.yeeply.com/blog/subcontratar-
Web: como de aplicativos
Google web aplicativo-para- promover um web
(https://pt.yeeply.com/blog/conheca-
(https://pt.yeeply.com/blog/9-
smartphone/) web app? (https://pt.yeeply.com/blog/tipos-
o-novo- dicas-de- (https://pt.yeeply.com/blog/desenvolvimento-
desenvolvimento-
algoritmo- desenvolvimento- de-aplicacoes- de-aplicativos-
mobile-friendly- de-aplicativos- web-como- web/)
do-google/) web/) promover-um-
web-app/)

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 9/10
2017619 DesenvolverappmultiplataformacomHTML5

(https://pt.yeeply.com/blog/seguranca-
(https://pt.yeeply.com/blog/dicas-
(https://pt.yeeply.com/blog/aplicativos-
(https://pt.yeeply.com/blog/programacao-
(https://pt.yeeply.com/blog/app-
mobile-no- desenvolvedor- para- de-aplicativos- design-voce-
(https://pt.yeeply.com/)
desenvolvimento- android/) smartphone- diversicando- deve-evitar-
de-apps/) 6 Dicas para um aspetos-legais/) se/) esses-erros/)
Segurana Mobile desenvolvedor Aplicativos para Programao de App design
no Android smartphone e aplicativos: Ser voc deve evitar
desenvolvimento principiante seus aspetos especialista no esses erros!
de apps: (https://pt.yeeply.com/blog/dicas-
legais desenvolvimento (https://pt.yeeply.com/blog/app-
Permisses de desenvolvedor- (https://pt.yeeply.com/blog/aplicativos-
suciente? design-voce-
acesso android/) para- (https://pt.yeeply.com/blog/programacao-
deve-evitar-
(https://pt.yeeply.com/blog/seguranca- smartphone- de-aplicativos- esses-erros/)
mobile-no- aspetos-legais/) diversicando-
desenvolvimento- se/)
de-apps/)

POPULAR POSTS

App design: como fazer um prottipo de app (https://pt.yeeply.com/blog/app-

design-como-fazer-um-prototipo-de-app/)
465 views

10 formas de desenvolver apps para Android sem Java

(https://pt.yeeply.com/blog/10-formas-de-desenvolver-apps-para-android-sem-java/)
365 views

Como escrever um bom projeto de aplicativo mvel

(https://pt.yeeply.com/blog/como-escrever-um-bom-projeto-de-aplicativo-movel/)
336 views

Desenvolvimento de aplicativos: Qual a vantagem econmica dos apps?

(https://pt.yeeply.com/blog/desenvolvimento-de-aplicativos-qual-e-a-vantagem-
economica-dos-apps/)
201 views

https://pt.yeeply.com/blog/desenvolverappcomhtml5/ 10/10