APLICATIVOS HÍBRIDOS: NOVO MERCADO PARA O WEB-DESIGNER 

 

. Guilherme Rodrigues Mayer 

. Acadêmico da disciplina Tecnologia de Negócios na Internet do Curso de Análise e Desenvolvimento de 
Sistemas da Universidade Luterana do Brasil Campus Guaíba. Mail: mayergr@outlook.com. 

.. Docente do Curso de Análise e Desenvolvimento de Sistemas e da Universidade Luterana do Brasil Campus 
Guaíba e orientador deste trabalho. 

.. Marco Aurélio Schünke 

 

RESUMO 

 

Recentemente os smartphones tornaram-se o principal método de acesso à internet no Brasil, 
ultrapassando os computadores. Neste contexto, os cursos profissionalizantes instruem o 
desenvolvimento web tradicional, voltado para desktops ou notebooks, sem oportunizar o 
profissional a aprendizagem voltada ao desenvolvimento mobile. Este artigo tem como 
objetivo apresentar métodos para o web-designer desenvolver aplicativos híbridos, utilizando-
se de frameworks. 

 

Palavras-chave: Web-designer. Aplicativos híbridos. Frameworks. 

 

INTRODUÇÃO 

 

 No ano de 1994 a internet no Brasil passou a ser comercializada em grande escala, 
graças a criação da Rede Nacional de Pesquisa (RPN) em 1990. Com a chegada da internet no 
país, foi necessário a qualificação de profissionais para construírem web-páginas, voltadas aos 
usuários de PC (Personal Computer) e posteriormente notebooks. Atualmente existem 
diversas escolas de informática habilitadas a formar web-designers, geralmente o curso é 
realizado em torno de 240 horas. 

 Quase paralelamente ao desenvolvimento da internet no Brasil, surgia o primeiro 
telefone celular com acesso à internet. Em 1996, graças a tecnologia GSM (Global System for 
Mobile) o celular conectou-se a rede mundial de computadores. Durante anos foi aprimorada 
a tecnologia, para posteriormente a conexão de internet móvel 2G se estabelecer de forma 
abrangente no território mundial. No início da década passada o cenário começou a mudar 


quando os celulares com PDA’s (Personal Data Assistent) começaram a perder espaço para os 
smartphones, posteriormente surgiram os sistemas operacionais Android e iPhone. 
Atualmente os smartphones dispõem de conexão de internet rápida 3G/4G, processadores de 
dois ou mais núcleos e grande capacidade de armazenamento. 

 O presente artigo foca, na adaptação de linguagens web já conhecidas (HTML, CSS e 
Java Script) para construção de aplicativos híbridos. Possibilitando ao Web-Designer a 
inclusão no mercado mobile. 

 A metodologia consiste em desenvolver um estudo elencando as novidades presentes 
nas atuais versões das principais linguagens web. No passo seguinte, listar os frameworks 
mais completos para adaptação das mesmas, no intuito de nortear o web-designer para criar 
seu próprio aplicativo híbrido. 

 

HTML5: HYPER TEXT MARKUP LANGUAGE 

 

 A versão HTML5 chegou 11 anos depois de sua antecessora, trazendo tardiamente 
novos elementos: de mídia embutida, de interatividade e segmentação. Estes novos recursos 
possibilitam criar sem utilizar plug-ins para áudio e vídeo. 

 

ELEMENTOS DE MÍDIA EMBUTIDA 

 

A versão anterior permitia inserir imagens através de tag <img src>, mas existia 
limitação para inserir outras mídias. No caso do áudio ou vídeo, era necessário utilizar plug-
ins externos. Segundo o site (AGÊNCIA MESTRE, 2009) no HTML5 é possível inserir 
áudios e vídeos, através das tags <audio> e <video> respectivamente. 

 

ELEMENTOS DE INTERATIVIDADE 

 

A versão atual do HTML, traz a possibilidade de organizar menus e esconder conteúdo 
na página, podendo oculta-los e exibindo-os de acordo com a vontade do usuário através das 
tag’s <details> e <menu>. 

 


ELEMENTOS DE SEGMENTAÇÃO 

 

Na versão 5, o layout da página tornou-se mais completo e compatível com a “web 
2.0”. A figura 1, mostra algumas tags inseridas, tais como: header, hgroup, article, section, 
aside, nav e footer. 

 Figura 1 - Layout com HTML5 

 

html5_structure1 Fonte: www.agenciamestre.com 

 

CSS3: CASCADING STYLE SHEETS 

 

A versão atual do CSS permite a adaptação de layout, de acordo com a resolução do 
dispositivo. Basicamente ao entrar no site, o CSS através de media queries reconhece o 
tamanho da tela do dispositivo e exibe o conteúdo de acordo com os pixels. 

 

MEDIA QUERIES 

 

De acordo com (MAZZA, 2012), as media queries são utilizadas para definir o device 
(dispositivo) e o CSS a ser utilizado. Ao acessar o conteúdo com um dispositivo de 480x800, 
o CSS é carregado de acordo com a resolução, afim de, exibir o conteúdo na integra, sem 
necessidade de utilizar zoom. Geralmente o layout não utiliza medidas absolutas, utiliza-se 
porcentagens. 

 

 


LINGUAGENS INTERATIVAS 

 

As linguagens HTML e CSS, são utilizadas apenas para marcação, outras linguagens 
serão necessárias para interação avançada com usuário, as mais conhecidas do web-designer 
são: PHP (Personal Home Page ou Hypertext Preprocessor) e Java Script. Estas linguagens 
tornarão viável o aplicativo a ser desenvolvido. Além destas, outras linguagens podem ser 
utilizadas. 

 

FRAMEWORKS 

 

Frameworks são softwares que reúnem diversos recursos e linguagens para auxilio no 
desenvolvimento. Existem alguns frameworks para desenvolvimento híbrido: Intel XDK, 
Adobe Phonegap Build, Ionic Framework, entre outros. 

 

INTEL XDK 

 

Um software intuitivo desenvolvido pela Intel, dispensa instalar softwares 
embarcados. Ao criar o projeto existe a opção entre, HTML simples, ou somado ao Cordova. 
Existe opções de menus, mídia, formulários e botões, com layout semelhante aos aplicativos 
comuns disponíveis na loja virtual Play Store. Ao evoluir no projeto é possível simular o 
projeto em telas de smartphones conhecidos, dentro do próprio aplicativo. Ao concluir o 
projeto pode-se escolher o sistema operacional a ser convertido: Android, IOS ou Windows. 

O aplicativo promete ainda, a possibilidade de desenvolver jogos utilizando HTML5 
como base. Inclusive existem templates prontas. 

 

ADOBE PHONEGAP BUILD 

 

 Um software online desenvolvido pela Adobe, o mesmo trabalha com as linguagens 
web conhecidas: HTML, CSS e Java Script. O aplicativo a ser desenvolvido é compatível 
com iOS, Android, Windows Phone, BlackBerry, Symbian e WebOS. De acordo com 
(TECHTUDO, 2012) A interface do Adobe Phonegap Build é simples e organizada. 




IONIC FRAMEWORK 

 

 O Ionic Framework foi concebido em 2013 pela Ionic. Esta empresa tem foco especifico 
no seguimento híbrido. Para instalar o software exige tecnologias embarcadas, sendo 
necessário ter instalado anteriormente o Node.JS no computador. Segundo a (IONIC, 2016) o 
programador precisa somente conhecer as linguagens HTML, CSS e Java Script e ainda 
aprenderá a linguagem AngularJS enquanto desenvolve o aplicativo. 

 

CONSIDERAÇÕES FINAIS 

 

 Levando em consideração a grande capacidade de hardware dos smartphones, 
quantidade de usuários e qualidade da conexão com a internet, tornou-se necessário um olhar 
especial do web-designer para o mercado mobile. As inovações desta década, tornaram 
possível desenvolver aplicativos para smartphones sem a necessidade de aprender novas 
linguagens. 

 Este artigo apresentou as atualizações recentes das principais linguagens para 
desenvolvimento web. Posteriormente apresentou alguns frameworks para conversão do 
projeto em aplicativo híbrido. Com estes frameworks o web-designer é capaz de desenvolver 
aplicativos utilizando tão somente, as linguagens aprendidas nos cursos profissionalizantes. 

 

 

 

 

 

 

 

 

 

 

 


REFERÊNCIAS 

. AGÊNCIA MESTRE. HTML 5 e SEO: quais são as novidades? Disponível em: 
<http://www.agenciamestre.com/seo/html-5-seo/>. Acesso em: 04 out. 2016. 
. IONIC. Create incredible apps. Disponível em: <http://ionicframework.com/>. Acesso 
em: 10 out. 2016. 
. MAZZA, Lucas. HTML5 e CSS3: Domine a web do futuro. 1 ed. [S.L.]: Casa do 
Código, 2012. 177 p. 
. ROSA, Dioni Da; SILVA, Teresinha Letícia Da. Adaptação de interfaces para 
dispositivos móveis com HTML5. EATI, Frederico Westphalen, v. 4, n. 249, p. 1-5, 
nov. 2013. Disponível em: 
<http://www.eati.info/eati/2013/assets/anais/artigo249.pdf>. Acesso em: 04 out. 2016. 
. TECMUNDO. 20 anos de internet no brasil: aonde chegamos? Disponível em: 
<http://www.tecmundo.com.br/internet/8949-20-anos-de-internet-no-brasil-aonde-
chegamos-.htm>. Acesso em: 04 out. 2016. 
. TECMUNDO. Qual foi o primeiro celular do mundo com internet? Disponível em: 
<http://www.tecmundo.com.br/celular/85491-primeiro-celular-mundo-internet-
video.htm>. Acesso em: 04 out. 2016. 
. TECHTUDO. Adobe Phonegap Build. Disponível em: 
<http://www.techtudo.com.br/tudo-sobre/adobe-phonegap-build.html>. Acesso em 10 
out. 2016. 


 

 

 

 

 


