1

TECNOLOGIAS PARA DESENVOLVIMENTO WEB

Kesley de Oliveira Silva ¹

Flávio Oliveira Dias ²

RESUMO

Esta pesquisa tem como objetivo apresentar uma gama de tecnologias presentes na plataforma web que serão
utilizadas no projeto prático, fazendo comparativos entre outras semelhantes no mercado, apresentando suas
demandas. Será tratado o aglomerado de tecnologias focadas no front-end, desde a estilização de páginas ao
dinamismo das mesmas. Além das tecnologias, será abordado o conceito de arquitetura em 3 camadas que
fornece uma divisão de funções de uma aplicação, distribuindo-se em apresentação (tela), regra de negócio
(fluxo de dados, manipulação e controle), que por sua vez será aplicada ao projeto prático complementar a esta
pesquisa.

Palavras-chave: Tecnologias. Web. Projeto. Páginas.

ABSTRACT

This research aims to present a range of technologies present on the web platform that will be used at the end of
practical project, making comparisons between similar market, presenting their demands. It will be treated the
agglomerate of technologies focused on the front end, from the stylization of pages to the dynamism of the same.
In addition to the technologies, it will address the concept of architecture in 3 layers that provides a division of
an application functions, distributing up in presentation (display), business rule (data flow, manipulation and
control), which in turn is applied to the practical complement to this research project.

Keywords: Technologies. Web. Project. Pages.

INTRODUÇÃO

O principal objetivo da Web em seu surgimento, era manter uma troca de informações
e de conteúdos estáticos entre postos militares, estas primeiras páginas continham apenas
textos, imagens e animações, ambos descritos em uma estrutura da tecnologia HTML
(HyperText Markup Language), um formato de arquivo textual que deveria ser armazenado
em uma ​
¹ Aluno do Curso Superior de Tecnologia em Redes de Computadores da Universidade Estadual de Goiás
² Professor do Curso Superior de Tecnologia em Redes de Computadores da Universidade Estadual de Goiás
22

máquina servidora, e acessado por navegadores web para sua visualização. Contudo, depois
de sua popularização provocada por Tim Berners-Lee nos anos 90, a Web passou ter outras
características, com um imenso potencial de comunicação e interação entre usuários de
diversas partes. O ecossistema que engloba a Web é extremamente vasto, compreendido por
diversas metodologias e tecnologias semelhantes, desde sua estruturação básica, ao
dinamismo de conteúdo que é possível se criar, utilizando métodos atuais. Com o crescente
aumento de pessoas tendo acesso à internet, seja por computadores, celulares, tabletes ou
TV’s, a web tomou proporções grandiosas, mas para manter essas páginas funcionando em

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 1 de 15
 perfeito estado, devemos projetar uma página ou sistema, considerando as melhores
tecnologias disponíveis para tal, estudando as arquiteturas e técnicas para um bom
desenvolvimento e garantir um projeto final de qualidade. Este projeto foi elaborado através
de pesquisas bibliográficas em diversos livros, artigos, apostilas, buscando por atualizações
em tutorias e aprofundado através de cursos especializados nas tecnologias aplicadas no
projeto prático.

1. FALANDO UM POUCO SOBRE FRONT-END

Ao acessar qualquer página web, o que nos é mostrado são telas bem desenhadas,
diversos conteúdos bem agrupados e subdivididos, onde todos os recursos presentes na página
são bem redimensionados e bem-dispostos, com cada imagem e texto colocados em seus
devidos lugares. Em uma página simples da web ou em um sistema de pequeno/grande porte,
a parte visual trata-se da camada de apresentação da arquitetura de 3 camadas, conhecida
como front-end. Segundo Mazza (2010, p.2)

Seja um sistema interno de um banco, uma rede social, um grande portal de notícias
ou sites para campanhas de publicidade, o meio comum hoje em dia é a web, e é
bastante interessante ter uma ótima base de conhecimento sobre desenvolvimento
front-end (um dos termos usados para se referenciar a interface de uma aplicação)
para contribuir para o sucesso dos projetos que você estiver participando.

O front-end se desmembra da regra de negócio, do fluxo de dados, e do processamento

das informações entre banco de dados e middleware, sendo apenas a parte visual da página.
Para desenvolver uma interface para web, ou seja, trabalhar no front-end, um dos
conhecimentos básicos exigidos são as tecnologias HTML, CSS, JavaScript, JQuery e Ajax.
Além destas tecnologias citadas acima, existe um framework multi-plataforma
conhecido como Adobe Flex, destinado a aplicações RIA (aplicações ricas, com
características de softwares tradicionais). Esta por sua vez trabalha com arquivos .SWF, ou
seja, arquivos em flash, que atualmente caiu em desuso por diversos quesitos. Esta tecnologia
demanda um processamento mais pesado, sobrecarregando o navegador, portanto, Adobe
Flex se tornou uma tecnologia morta, não sendo recomendada para desenvolvimento na
plataforma web.
Como alternativa ao Adobe Flex, temos os Appelts, que são programas escritos na
linguagem Java e inseridos dentro de páginas web, porém possui como desvantagens a
lentidão de processamento pelo navegador, possuíam espaço limitado dentro das páginas e
não conseguiam se misturar aos elementos HTML, assim como faz o JavaScript. Ainda
possuíam inúmeras falhas de segurança que comprometiam este plug-in da Oracle, sendo
também descontinuado pela organização.

1.1 HTML DA CABEÇA AOS PÉS

HTML (HyperText Markup Language – Linguagem de Marcação de Hipertexto),

inicialmente desenvolvida em meados dos anos 90 por Tim Berners-Lee junto com o
estudante Robert Cailliau, sendo criada como um ambiente para publicação de trabalhos, que
juntamente foi criado o protocolo HTTP (Protocolo de Transferência de Hipertexto), dando
origem a WWW (World Wide Web) que é padronizada pelo órgão W3C (World Wide Web
Consortium). HTML não é linguagem de programação, mas, de codificação e estruturação de
conteúdo para desenvolvimento de websites. Esta tecnologia é de suma importância, por ser a
base da internet, possuindo fácil entendimento por humanos e por máquinas (atual HTML5 –
a web semântica).
Com a popularização das primeiras páginas web criadas, surgiram os navegadores,
programas que interpretavam um documento com formato HTML, criando a estrutura e
exibindo os conteúdos. Em 1991 surgiu a primeira página web acessível em navegador,

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 2 de 15
 composta apenas por textos e links que levavam para outros arquivos, essa era a proposta
inicial de documentos estruturados com HTML.
A linguagem de marcação possui diversas versões, que foram ou não implementadas,
algumas apenas tratadas como correções de versões anteriores. Sua primeira versão herdou
diversas TAGS de outra tecnologia, a SGML, o HTML diferencia-se apenas pelo atributo href
da TAG <a>, que permite criar links para outras páginas sendo a base da web. O HTML 2.0
surgiu apenas com correções de padrões não oficias da versão anterior. Em sua terceira
versão, foram implementados recursos como criação de tabelas, elementos matemáticos e
textos contornando outros elementos, porém, não foi implementado devido à falta de suporte
dos navegadores da época, dando lugar para a versão 3.2 do HTML, que manteve os padrões
da versão anterior e ainda adicionou suporte aos Applets.
Sua quarta versão trouxe diversos elementos anteriores, porém vários obsoletos,
tornando o processo evolutivo do HTML complexo, cedendo lugar a uma tecnologia
possivelmente superior, o XHTML. Contudo, no ano de 1999, foi publicada a versão 4.01 do
HTML, sendo compatível com todas as suas versões anteriores. Em 2008, a W3C publica a
quinta versão desta tecnologia que permanece em uso até os dias atuais, dando uma
característica semântica a Web 3.0, cujo foco é a organização, definição e distinção dos
conteúdos apresentados, onde sistemas de buscas como (Google, BING, Yahoo!) consigam
encontrar resultados mais precisos com base nas buscas feitas pelos usuários.
Esta linguagem é composta por elementos chamados TAGS (metadados, marcações),
utilizadas para demarcar o que cada coisa é, e em sua quinta versão passou a dar sentido ao
conteúdo de uma página, delimitando as informações que compõe o website. Como exemplo,
para dar ênfase ao título de uma página, é utilizada a TAG heading de marcação <h1>’Meu
título’</h1>, para indicar que o texto trata-se de um título de nível 1. As headings são
utilizadas para cabeçalhos, possuindo 6 níveis de marcação, iniciando com TAG <h1> de
maior importância até a <h6> com menor precedência.
Contudo, essa marcação não serve apenas para indicar ao usuário que se trata de um
título mais importante, mas serve principalmente para indicar aos buscadores trechos de maior
relevância dentro do conteúdo da página.
De forma análoga, diz-se que o HTML é semelhante a um esqueleto, sendo a estrutura
de sustentação para todo o restante das tecnologias. Todo documento segue essa estrutura
básica do código abaixo segundo a organização W3C:

1. <!DOCTYPE html>
2. <html lang="pt-br">
3. <head>
4. <title>Título da página</title>
5. <meta charset="utf-8">
6. </head>
7. <body>
8. Aqui vai o código HTML que fará seu site aparecer.

9. </body>
10. </html>
O DOCTYPE não se trata de um elemento, mas sim uma instrução que diz ao
navegador que abaixo estão escritos códigos de marcação HTML e em qual versão será
escrito, sendo declarado obrigatoriamente no início de todas as páginas. Na marcação do
HEAD, o cabeçalho da página recebe configurações de controle do documento, criação de
scripts e vinculação com outros arquivos. Única configuração neste trecho que se torna visível
para o usuário, é o conteúdo demarcado entre as TAG <title> </title>, que exibe o nome da
página na aba do navegador.
No desenvolvimento front-end, a área mais trabalhada pelo codificador se encontra
demarcada entre a TAG <body> </body>, ou seja, o corpo da página no qual se encontra
todo o conteúdo que os usuários têm acesso. Compondo toda a interface visual do sistema,
mostrando informações legíveis para o leitor do documento, não se limitando apenas em
textos, podendo ser composto por imagens, áudios, vídeos, jogos e até mini aplicativos
embutidos neste trecho. Ao se tratar de um sistema web, entradas e saídas de dados

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 3 de 15
 informadas ou não pelos usuários, são exibidos no corpo da página.
Contudo, o corpo é composto por diversas outras marcações, umas que permaneceram
de versões anteriores ao HTML5, e novas que surgiram nesta última versão, as quais compõe
o conceito de web semântica. Evitando a escrita repetitiva de divisões (TAG <div> </div>),
passando a receber nomes com significados não para o usuário final, mas sim, para sistemas
avançados de busca, que analisam toda a estrutura do documento. As marcações semânticas
surgiram para delimitar e distinguir cada parte do conteúdo escrito em um website, deixando a
codificação mais legível e de fácil interpretação. Adicionando à estrutura básica as seguintes
marcações dentro do corpo (<body> </body>):

1. <header> </header>
2. <aside>
3. ​<nav> </nav>
4. </aside>
5. <main>
6. ​<article>
7. ​ ​<section> </section>

8. ​</article>
9. </main>
10. <footer> </footer>

O grupo W3C que regulamenta os padrões da web, define a marcação <header>

</header> como cabeçalho para conteúdo, a <section></section> define seções no
documento que podem ter um cabeçalho e um rodapé na/nas seções definidas, o <nav>
</nav> sendo destinado aos menus de navegação do site, o <main> </main> define o
conteúdo principal de uma página não podendo ter mais que uma marcação, já o <article>
</article> trata-se de uma parte, um artigo da página que recebe diversas composições.
Quanto se tem informações pertinentes ao conteúdo mostrado, ou que queira chamar a
atenção do usuário, <aside></aside> demarca estes trechos, agregando informações ao
conteúdo principal da página. Como o próprio nome diz, o <footer></footer> serve para
criar o rodapé de uma seção ou da própria página do site. Sendo assim, para criar um website
seja utilizando um framework front-end ou começando tudo do zero, faz-se necessário estudar
as marcações, recomendações e indentação do código que facilita a leitura do mesmo.

1.1.1 Dom (Document Object Model)

Trata-se de uma plataforma criada pelo W3C, que serve para representar as estruturas
de marcações de arquivos HTML, XTML e XML, mostrando como estas estruturas são
interpretadas pelos navegadores. No entanto, DOM serve de base para o que realmente o
navegador monta na tela, a Árvore de Renderização. Segue uma representação da árvore
DOM:

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 4 de 15
 Figura 1 - Representação do DOM como é reconhecido pelos
navegadores

Esta estrutura é composta por propriedades, eventos e métodos que compõe as páginas
web, que no processo de interpretação feito pelo navegador, cria-se esta árvore de hierarquias
dos elementos, as quais podem ser manipuladas por linguagens de scripts, como é o caso do
JavaScript, que manipulam os comportamentos destes elementos.
Numa visão mais ampla, o DOM possui um nó principal chamado Node.h que é a base
deste modelo, contudo, ainda existem outros três nodos relevantes para a renderização das
páginas web, o document, element e text. No qual document é o nó mais importante abaixo do
node.h, responsável pelo documento em si. Enquanto o element trata todas as marcações do
documento, que são transformadas em elementos a serem manipulados. E o text, responsável
pelo conteúdo das TAGS, como por exemplo, um texto entre a marcação de parágrafo <p>
</p>. Estes elementos são manipulados por métodos que retornam seus respectivos valores,
no código a seguir, nota-se que o método .getElementsByTagName(“P”) aplicado ao
documento em si, retornará todas as TAGS de parágrafo, que serão mostradas no método
alert().

1. paragraphs = document.getElementsByTagName("P");
2. // paragraphs[0] é o primeiro elemento <p>
3. // paragraphs[1] é o segundo elemento <p>, etc.
4. alert(paragraphs[0].nodeName);

1.2 CRIANDO ESTILO NA ESTRUTURA HTML COM CSS3

O princípio inicial dos documentos HTML era apenas publicar textos tornando-os
públicos, sem qualquer tipo de formatação e sem mídias. Mas, devido a crescente
popularização desta tecnologia, foram surgindo algumas ideias para incrementar os
documentos mais simples, como mudar a cor da fonte, seu tamanho, colocar alguma cor de
fundo da página ou inserir uma imagem. Para fazer essa estilização básica, foram criadas
novas TAGS e alguns atributos para elas, contudo, se tornou um problema para os
desenvolvedores front-end por não manter uma padronização de conteúdos em todas as
páginas, pois cada navegador da época interpretava de uma forma, sendo necessário fazer as
modificações manualmente em cada uma, tornando o HTML mais complexo e difícil de
manter.
​Diante deste problema, em 1994 Håkon Wium Lie e Bert Bos começaram a
desenvolver o projeto da linguagem CSS (Cascading Style Sheets – Folha de Estilo em
Cascata) para formatação e estilização de informações. No ano seguinte, o projeto chamou a
atenção do grupo W3C que criou uma equipe dando continuidade ao projeto que, por
conseguinte, em 1996 a associação lançou a recomendação oficial do CSS Level 1 (CSS1).
Esta primeira versão veio parar separar o conteúdo de sua estilização, permitindo
adicionar cores, diferentes estilos de fontes e modelo de layout. Com isso, o HTML voltou a
ter sentido apenas de marcação e delimitador de conteúdo, deixando os estilos concentrados
em arquivos CSS. Por se tratar de um arquivo a parte, ele precisa ser referenciado dentro do

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 5 de 15
 documento em que se deseja aplicar os estilos, dentro da TAG de cabeçalho é inserida a
marcação <link rel=”stylesheet” type=”text/css” href=”estilos.css”>, onde link trata-se do
nome da TAG, o atributo rel informação a relação entre a página atual com a qual está criando
o link, já o type define que tipo de arquivo se trata e por último o atributo href que informa o
caminho e o arquivo que se deseja aplica na página.
A segunda versão lançada em 1998, passou a ser suportada por quase todos os
navegadores da época, fornecendo meios mais poderosos para associar os estilos aos
elementos. Permitindo a utilização de espaços para definir mais de um elemento na regra,
foram criadas pseudo-classes para definir estados especiais aos elementos, passou a permitir a
seleção de elemento através da combinação atributo e valor entre diversas outras
possibilidades (vide documentação da W3C).
Atualmente esta tecnologia está em sua terceira versão, a qual ainda passa por
processo de estruturação final, e até o momento, todos os navegadores não são 100%
compatíveis com todas as regras CSS. Sendo possível selecionar os primeiros e últimos
elementos, aplicar efeito gradiente nos textos e elementos, as bordas passaram a suportar
arredondamento, manipulação da opacidade, aplicar rotação nos objetos, trabalhar com
perspectiva e animações, entre outros tipos de regras presentes nesta atual versão.
CSS é um aglomerado de regras, sendo estas aplicadas aos elementos (TAG) do
HTML, que podem receber diversas definições, como aplicação de cores de fonte, cor de
background, estilos de fonte, bordas e seus estilos, definir sombreamentos, efeitos de
transição usado na versão 3, transformar um elemento em outro, redimensionar imagens,
trabalhar a adaptação das páginas para diversos tamanhos de tela (conceito de responsividade)
e diversas outras regras presentes nesta tecnologia que estão em prol da estilização dos
documentos. Por tratar as regras de estilo, esta tecnologia é considerada a mais poderosa para
designers web.
As regras possuem um padrão de escrita, onde é definido o seletor (elemento HTML),
entre chaves ({ }) tem-se as declarações de propriedades e seus respectivos valores,
finalizando a linha com ponto e vírgula (;). Como pode-se notar no código a seguir:

1. seletor {
2. ​propriedade: valor;
3. }
4. seletor1, seletor2 {
5. ​ ropriedade: valor;
p

6. ​propriedade: valor;
7. }
8. seletor1 seletor2 {
9. ​propriedade: valor;
10. }

Porém, definir todas as regras necessárias em um projeto de grande porte se tornar

cansativo e improdutivo, pois os arquivos CSS vão se expandindo consideravelmente, a
repetição de regras e sobrescritas das mesmas se tornam comuns ao longo da codificação de
estilização da página. Diante este grande problema, surgiram ferramentas que auxiliam os
desenvolvedores de front-end, os pré-processadores e frameworks de codificação CSS3 que
adicionam funcionalidades, flexibilidade e permitem o reuso de códigos, sendo os mais
conhecidos LESS, Sass e Stylus. Estas ferramentas criam arquivos com extensões próprias,
contendo códigos e particularidades entendidas apenas na ferramenta, pois os navegadores
interpretam apenas CSS puro, os arquivos criados são compilados e gerados códigos de CSS.
LESS trata-se de uma linguagem dinâmica baseada no CSS que trabalha juntamente
com o JS (JavaScript), permitindo o uso de variáveis, operações matemáticas, possibilita o
uso de mixins e ainda permite criação de funções. As variáveis possibilitam o reuso de
código, evitando repetições e facilitando no processo de alteração do estilo, enquanto as
operações permitem manipular as propriedades e cores através das operações básicas de
matemática, enquanto as mixins dá o poder de adicionar todas as propriedades de uma classe

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 6 de 15
 a outra classe, apenas informando o nome desta como propriedade em outra, já as funções são
mixins que recebem argumentos. Segue um exemplo de codificação em utilizando LESS,
comparando-se com o CSS gerado pela ferramenta após a compilação do arquivo:

1. // LESS ​ ​ ​/* CSS Compilado */

2. @color: #4D926F;

3. #header { ​ ​ ​#header {
4. color: @color; ​ ​color: #4D926F;
5. } ​ ​ ​ ​}
6. h2 { ​ ​ ​ ​h2 {
7. color: @color; } ​ ​color: #4D926F; }
O pré-processador SASS é bastante semelhante ao LESS, porém, sendo mais utilizado
em ambientes de desenvolvimento Ruby, ou seja, para utilizá-lo é necessário a instalação de
um programa no computador. Mas, possui duas versões de sintaxes diferentes, a SASS que é
mais voltada para a indentação do código e a SCSS bem semelhante ao CSS original.
Ainda dentro das ferramentas que facilitam o desenvolvimento front-end, temos o
Stylus, sendo mais adaptável e trabalha com a sintaxe padrão do CSS, para se trabalhar com
esta ferramenta, é necessário a instalação de outra, conhecida como NodeJS. Diferenças
notáveis entre este e as tecnologias anteriores, é não ser obrigatório a utilização de chaves e
de ponto e vírgula, a definição de uma variável muda entre ambas, em LESS usa-se o @, em
SASS o $, quanto no Stylus não existem um padrão.

1.3 JAVASCRIPT, A MANIPULAÇÃO DAS PÁGINAS WEB

Documentos HTML e suas estilizações com CSS são estáticos, não possuem
interatividade com o usuário final, ou seja, os navegadores apenas vão interpretando a
codificação e exibindo na tela uma interface simples e estática. Para que fosse possível elevar
os websites para um novo nível, Brendan Eich desenvolveu no ano de 1995 quando
trabalhava na NetScape, a linguagem de script mais utilizada na web (lado do cliente) até os
dias atuais, a conhecida JavaScript ou JS. Porém, no início do projeto, a linguagem se
chamava Mocha, que posteriormente passou a se chamar de LiveScript, e finalmente levou o
nome de JavaScript por uma jogada de marketing da época com o tradicional Java. Mas, a
verdadeira nomenclatura desta tecnologia é ECMAScript, pois JavaScript é mantida por esta
associação que padroniza sistemas de informação e detém toda sua documentação. Segundo
Douglas Crockford [2001], citado por Plínio Balduino [2014]:

A maioria das pessoas que escreve código em JavaScript não é de programadora.

Lhes falta o treinamento e a disciplina para escrever bons programas. JavaScript tem
é uma linguagem tão poderosa que ainda assim eles conseguem fazer algo útil. Isso
deu ao JavaScript a reputação de ser usada unicamente por amadores, e que não
serve
para programação profissional. Isso simplesmente não é verdade.

Vale ressaltar que JS e Java não são complementares, e muito menos diretamente
relacionadas, ou seja, Java é Java e JavaScript é JavaScript, ambas com suas particularidades
e funcionalidades diferentes. JavaScript trata-se de uma linguagem multiplataforma pequena e
leve de scripts, sendo interpretada pelos navegadores para manipulação dos modelos de
objetos de documento (DOM), podendo criar jogos e adicionar comportamentos ás páginas
web, por exemplo, passando o mouse sobre o menu, um submenu se expande apresentando
outros itens.

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 7 de 15
 A interatividade que se tem da página com o usuário, se dá por eventos ocasionados
pelos próprios usuários, sendo conhecidos como cliques em botões, arrastar de mouse, os
preenchimentos de campos de um formulário e seu devido envio, dando assim, um aspecto
inteligente para a página.
Sendo assim, desenvolvedores front-end que buscam trabalhar websites profissionais,
bem desenhados, respondendo aos eventos causados pelos usuários e que se deseja manipular
seus formulários, faz-se necessário conhecer a fundo esta linguagem, rica em recursos e tão
requisitada pelo mercado atualmente.
Com esta tecnologia é possível alterar as características já criadas no documento
mesmo depois de apresentadas ao usuário, ter controle sob o navegador carregando novos
documentos, exibir diferentes páginas de acordo com o navegador do usuário, identificar os
navegadores, controlar e validar as informações informadas nos formulários, salvar dados do
usuário em cookies entre diversas outras possibilidades de manipulação dos elementos
HTML.
Em JavaScript diferentemente do Java, as variáveis criadas possuem tipagem
dinâmica, ou seja, não possui uma definição exata do tipo de valor a ser armazenado. Todas
são declaradas apenas como var nomedavariavel=valor, que durante sua execução, o tipo de
valor a ser inserido que irá definir seu tipo.
Os tipos de dados suportados pelas variáveis JS possuem três cadeias, os tipos
primários que são: boolean para true e false, number para representar valores numéricos e
com pontos flutuantes, string para armazenar textos e um novo tipo presente na definição
ECMAScript 6, o symbol para dados únicos e imutáveis. Os tipos de dados especiais: null
para valores nulos e undefined para valores desconhecidos da linguagem, e por último, a
cadeia de dados compostos: object para qualquer tipo de valor (tudo em JS é um objeto) e
array para armazenar uma cadeia de valores separados por referências de posição.
A inserção de um script nos documentos se faz de duas formas, pela marcação <script
type=”text/javascript”> </script> própria do HTML, onde, entre a marcação ficará os
códigos de programação e por meio de arquivos externos informados no atributo src da
mesma TAG, <script type=”text/javascript” src=”/arquivo.js”></script>. Programadores
desta linguagem recomendam a marcação de script antes do fechamento da TAG de corpo,
pois ao encontrar esta marcação, o navegador para a renderização da página
processando/carregando o código.
1.4 FACILITANDO A ESCRITA DE JS COM jQUERY

Por mais que JavaScript seja simples, escrever diversas funções para manipular toda
uma estrutura de um website ou até um sistema, se torna cansativo e estressante. E como
existem diversos projetos que visam facilitar a vida dos desenvolvedores, eis que surge uma
nova ferramenta, a biblioteca jQuery, que por ironia, toda escrita na linguagem a qual veio
para facilitar. Vih Damarques (2012) diz, “jQuery é apenas JavaScript, e não é capaz de fazer
nada que o JavaScript não possa fazer”.
jQuery simplifica toda e qualquer manipulação de documentos HTML, assim como
seus eventos, interações com outras tecnologias, como o AJAX por exemplo, manipulação de
estilização, ainda traz diversas animações e graças a toda sua simplicidade, essa biblioteca
passou ser a mais utilizada no desenvolvimento front-end.
Por ser JS, os códigos devem ser escritos seguindo a mesma marcação para scripts em
HTM e todos os comandos utilizando esta biblioteca, devem iniciar com o nome da mesma,
ou utilizando o alias $(“elemento”). Para se ter certeza que todo documento (DOM) esteja
carregado, para então iniciar o processamento do jQuery, devemos selecionar o segundo nó –
document - principal da estrutura de modelo de objetos do documento, utilizando o seguinte
exemplo:

1. $(document).ready(function){}

O código acima também exemplifica a sintaxe básica do jQuery, a qual se resume em

definir o $, seguindo a escolha do seletor de elemento HTML, e por último, o método que
será executado, e qual ação a ser tomada.
A maior vantagem de se utilizar esta biblioteca, é por ser conhecida como cross-
browser, que é a capacidade do script suportar diversos navegadores, evitando assim, escritas

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 8 de 15
 repetidas para cada browser específico. Garantindo assim, que os scripts funcionem nos
principais softwares usados e em suas diversas versões.
Outra possibilidade presente nesta tecnologia é o uso de plugins, cada qual com suas
funções específicas, alguns exigindo a digitação de códigos extras para sua configuração.

1.4.1 Incrementando jQuery com jQueryUI

​ ​
Em conjunto com o jQuery básico, surge outra ferramenta muito utilizada criada sob o
núcleo da própria jQuery, a jQueryUI. Permitindo um maior nível de interação com o usuário,
adicionando diversas animações ao front-end, repleta de elementos gráficos para maximizar o
poder de sua antecessora. Permitindo ao desenvolvedor baixar componentes prontos para
incrementar a interface de sua página, alterando cores de fonte e de fundo, estilos de fonte,
bordas e ícones para menus por exemplo.
Possibilita trabalhar com efeitos de clicar com o mouse sobre um objeto e arrastá-lo
pra outro local, conhecido como Drag and Drop. Permite a criação de caixas de diálogos
flutuantes, chamadas de Modal Dialog, exibindo título, conteúdo, botões, alças para arrastar e
soltar, etc.
Portanto, unindo estas duas tecnologias, desenvolver um front-end intuitivo e bem
interativo se torna mais fácil, pois já foram criados por outros desenvolvedores que passaram
pela mesma necessidade e não existir algo que o fazia.

1.5 AJAX, OTIMIZANDO AS REQUISIÇÕES

AJAX (Asynchronous JavaScript e XML) não é uma linguagem de programação,

sendo uma junção de requisição XMLHttpRequest (solicitando dados do servidor),
trabalhando com JavaScript e o DOM do HTML. Tratando o carregamento paralelo em
segundo plano de requisições ao servidor, sem recarregar todo o documento HTML.
Existem vários sistemas famosos que implementam esta prática, por exemplo, Gmail
que é o sistema de e-mails do Google, o Youtube para transmissão de vídeos e algumas partes
da rede social Facebook. jQuery fornece vários métodos para se trabalhar com estas
requisições, entre eles, o load(), para carregamento de uma URL solicitada na requisição.
Por trabalhar com requisições, conhecer os métodos POST e GET que as fazem é
necessário. Portando, ao informar o tipo POST, envia as informações dentro do pacote de
dados a ser trafegado no HTTP, não armazenando cache destes valore, se submetendo a um
processamento específico. Enquanto o GET pega as informações e as insere na própria URL,
requisitando dados ao servidor, este permite o uso de cache dos dados informados pelo
usuário.

Figura 2 - Representação de como o AJAX trabalha

Na imagem anterior, segue a exemplificação de como AJAX trabalha. No qual o

primeiro passo é o disparar de um evento, que executa um XMLHttpRequest via JS, este por
sua vez envia uma solicitação de processamento ao servidor, o servidor responde a esta
requisição enviando uma resposta para a página web, esta resposta retorna ao JS e é lida e em
seguida é feita a ação necessária.

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 9 de 15
 2. O TRABALHO DO BACK-END

Enquanto o front-end é responsável por deixar o layout da página bem estruturado, e

estilizado da melhor forma possível, a renderização de páginas, validações de campos de
formulários ou programações com JS são feitas a nível de navegador trabalhando com as
tecnologias client-side. Enquanto o dinamismo, processamento de uma massa maior de dados
e preenchimento de informações no front-end são feitos a nível de servidor (back-end). O
back-end fica encarregado de fazer todo o processamento pesado requeridos pelo cliente,
nesta parte são envolvidas uma gama de tecnologias poderosas, para tratar o que é
requisitado.
Segundo Roger Pressman e Bruce Maxim (2016, pag. 11), “[...]back-end inclui
servidores e recursos de computação relacionados, sistema de armazenamento de dados (por
exemplo, bancos de dados), aplicativos residentes no servidor[...]”. Uma diferenciação
simples feita entre tela e regra de negócio, é mostrada a seguir:

Figura 3 - Diferença entre front-end e back-end

Dente as tecnologias, temos o PHP, Java, JSP, ASP, Ruby, dentre outras presentes
neste vasto ambiente de desenvolvimento. Tecnologias estas que tratam o dinamismo das
páginas que antes eram estáticas, retornando valores quando se faz uma busca e preenchendo
uma tabela com informações vindas do banco de dados, por exemplo.

2.1 A PLATAFORMA JAVA

Entre as tecnologias citadas anteriormente, a que possui maior índice de procura e está
sendo utilizada em maior escala no mercado de trabalho, é o Java, linguagem criada pela Sun
MicroSystems e pertencente a Oracle atualmente. Sendo considerada além de uma linguagem
de programação, como uma plataforma de desenvolvimento, graças a sua característica
multiplataforma é possível desenvolver para TV’s, desktop, celulares, trabalhar o back-end de
um site, entre outras.
A grande sacada desta tecnologia é suportar outras linguagens sem ser JAVA, como
Phyton, RUBY e Groovy sendo compatível ainda com qualquer sistema operacional existente,
que se torna tão compatível através do uso de sua máquina virtual para compilação dos
bytecodes.
Esta tecnologia é considerada como uma plataforma de desenvolvimento por seguir
algumas linhas de aplicabilidade, como o JSE (Java Standard Edition) sendo voltara para
aplicações desktop, o JME (Java Micro Edition) para sistemas embarcados e móveis, JEE
(Java Enterprise Edition) usada para aplicações web, JSP (Java Server Pages) que trabalha a
dinâmica dos dados dentro do HTML, JSF (Java Server Faces) é um framework designado
para desenvolver a cama de visão de um sistema e o Java Card que é voltado para
desenvolvimento de cartões inteligentes. Perante estas características, é possível notar o poder
de fogo desta plataforma. Três plataformas são voltadas para o desenvolvimento web, porém,
o enfoque deste trabalho será designado para o JEE e JSP.

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 10 de 15
 2.1.1 JAVA EE, CODIFICAÇÃO DAS REGRAS DE NEGÓCIO

Plataforma voltada para o desenvolvimento a nível de servidor, tratando-se de um

conjunto de regras e especificações que auxiliam no desenvolvimento de aplicações web.
Tendo como diferencial aplicações distribuídas, escaláveis que suportam grande
processamento, seguras e com baixo custo de implementação e manutenção. Tornando-a um
grande atrativo aos desenvolvedores back-end. Inicialmente era padronizada para atender
requisitos de grandes e robustas aplicações, isso mudou desde sua versão 6, passando a ser
uma plataforma adaptável a qualquer tamanho e complexidade do sistema.
Fornecendo um conjunto de serviços e protocolos que permitem a funcionalidade de
aplicativos em multicamadas na web, incluindo diversos recursos presentes na plataforma
Java SE. Esta tecnologia é composta por APIs (rotinas e padrões) que fornecem uma interface
de programação seguindo padrões estabelecidos, e por frameworks que são implementações
de bibliotecas compostas por diversas APIs, tudo para facilitar o desenvolvimento de
aplicações com reuso de códigos garantindo uma maior produtividade.
A especificações esclarecem a aplicabilidade da persistência de dados (base de dados),
validações dos dados, trata as transações entre front-end e back-end e processa as requisições
através do protocolo HTTP, otimizando o funcionamento das regras de negócio do sistema a
ser desenvolvido. Quando a Sun MicroSystems desenvolveu esta especificação, ela garantiu
que Java EE suportaria outras tecnologias de outros fabricantes, eliminando o problema
conhecido como vendor lock-in, sendo expressão utilizada para dizer que o desenvolvedor
fica preso a uma tecnologia de um único fabricante. Servlets e JSP, são especificações com
maior presença atualmente, focados totalmente no desenvolvimento web.
Servlets são classes Java que tratam as requisições feita pelo cliente, obedecendo uma
estrutura bem definida, capturando os parâmetros informados e efetuando os processamentos
necessários. Exemplo de uma classe Java que implementa um Servlet com o método que
recebe as requisições:

1. public class exemploServlet extends HttpServlet{

2. ​public void service(HttpServletRequest requisição,
3. ​ ttpServletResponse resposta){
H

4. ​ }

5. }

​JSP surgiu para contornar alguns problemas apresentados nos Servlets, evitando a
criação de diversas Servlets para trabalhar o dinamismo das páginas, com ele a programação
fica separada da tela, permitindo uma mistura de marcações HTML com códigos de Java,
assemelhando-se as tecnologias ASP e PHP. Nos permite aplicar condicionais, laços de
repetição e criação de varáveis, todo código Java inserido no documento deve vir dentro da
TAG <% %>, formando os códigos conhecidos como scriptlet (código pequeno). Mark
Szolkowski (2003, pag. 36) diz:

A JSP em si deve ser escrita por um desenvolvedor. Uma JSP desse tipo é uma
mistura de tags HTML estáticas, tags JSP e código Java, todos os quais são textos e,
portanto, podem ser escritos em qualquer editor de textos que você escolher.

A seguir um exemplo básico de JSP:

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 11 de 15
 1. <body>
2. ​Meu endereço IP é: "<%= request.getRemoteAddr() %>"

3. </body>

Diferenciando-se do JS que é executado no navegador, o JSP é tratado no servidor,

portanto no código <% System.out.println(“OK”) %>, a mensagem OK é exibida dentro do
console do servidor web utilizado. Servidores web tratam de aceitar requisições HTTP feitas
pelos navegadores e posteriormente retornar as respostas também através do protocolo, que
no caso que páginas web dinâmicas, elas são processadas pelo servidor criando os conteúdos
e despachando-os para o browser. Dentre os principais, encontram-se o Apache Tomcat que
trabalha com Java, JSP e Servlets, o XAMPP usado para ambientes de testes que suporta o
Apache, o banco MariaDB, o PHP e PERL, enquanto o Apache que também suporta PHP e
Jboss voltado para o Java EE como o Tomcat.
Mas, ficar escrevendo scriptlets se torna cansativo e improdutivo além de causar certa
poluição de Java com HTML, que dependendo do tamanho do projeto, se torna complexo sua
posterior manutenção. Para suprir este outro problema, a Sun desenvolveu outra metodologia
para reduzir códigos JSP, as conhecidas Expression Language, que são interpretados pelo
módulo de servlets container dos servidores web, dando um certo aspecto elegante a página
JSP.

2.2 OS RIVAIS DO JAVA

Amplamente utilizada para desenvolvimento web, a plataforma Java EE não é a única

especificação existente para tal. Temos tecnologias como o PHP (Personal Home Page, ou,
atualmente conhecido como Hypertext Preprocessor), uma linguagem de scripts semelhante
ao JSP, pois sua codificação é feita juntamente com o HTML, porém, processada no back-end
da aplicação. Sua delimitação de marcação é feita entre <?php ?>, os códigos escritos entre
essa marcação não são visíveis o código fonte da página HTML, dando um certo grau de
segurança na aplicação. PHP faz quase tudo que o Java EE possibilita, possuindo algumas
ressalvas a seu favor, como a facilidade em escrever seus códigos, funções complexas já
prontas, entre outras, porém, não totalmente orientada a objetos assim como Java EE é, sua
implementação peca neste quesito.
PHP é simples, leve, open source e possui um desenvolvimento razoavelmente rápido
em relação ao Java, já que esta última depende de uma máquina virtual para sua execução.
Esta tecnologia está começando a ganhar destaque no mercado, mas ainda engatinha em
comparação ao Java, esta está consolidada no mercado a muito mais tempo, e empresas
maiores e antigas possuem sistemas desenvolvidos neste ambiente.
Active Server Pages conhecida como ASP e desenvolvida pela Microsoft, trata-se de
uma implementação semelhante as anteriores, porém há custo de implementação na
comercialização de um sistema. Assim como no JSP, a marcação para a escrita dos scripts é
feita entre <% %>, diferenciando no tipo de extensão do arquivo, ou seja, documentos
HTML puros e estáticos possuem extensão .html, JSP tem extensão .jsp e ASP segue o
mesmo raciocínio, possuindo extensão .asp. A linguagem utilizada dentro das páginas podem
ser o Visual Basic ou Jscript (mesmo JavaScript da ECMAScript), e o servidor de aplicação
web destinado para páginas nesta estrutura, também é desenvolvido pela Microsoft, o IIS
(Internet Information Services).
Finalizando a listagem de tecnologia, temos o Ruby On Rails, um framework focado
na extrema produtividade e facilidade, escrito na linguagem Ruby (descrita a seguir). Visando
a facilidade de desenvolvimento, implementação e manutenção de sistemas web, através de
três filosofias descritas:

1. Não fique repetindo: composto com métodos prontos que abstraem o

desenvolvimento, resolvendo problemas básicos e evitando a reescrita de
códigos;
2. Convenção acima de configuração: para não perder tempo com configurações

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 12 de 15
 de ambiente de desenvolvimento, recomenda-se estudar a fundo todas as suas
especificações;
3. Menos software: utilizar menos códigos, menos estruturas complexas, menos
bugs através do maior uso de suas convenções.

Sua base é composta por três bibliotecas especializadas para auxiliar o

desenvolvimento, como a Active Record que faz o trabalho com o banco de dados, a Action
View gera documentos dinâmicos HTML e a Action Controller, manipulando as duas
anteriores.
Yukihiro Matsumoto (2011), criador da linguagem Ruby descreve sua tecnologia
como: “O Ruby é simples na aparência, mas muito complexo no interior, tal como o corpo
humano”. Sua analogia condiz com o poder apresentado por essa linguagem multiplataforma,
originando-se através do que há de melhor de outras cinco linguagens (Smalltalk, Perl, Eiffel,
Ada e Lisp), seu criador buscava algo simples, mas poderoso. Sendo interpretada e totalmente
orientada a objetos, pois, tudo em Ruby é tratado como um objeto recebendo suas próprias
ações e características.
Ruby é visto como uma tecnologia bem flexível, deixando de lado certas restrições aos
programadores, permitindo que seja alterada ou removida partes essenciais da linguagem.
Possui uma sintaxe extremamente simples, dispensando o uso de ponto e vírgulas (;), de
chave ({}) ou colchetes ([]) e um dos atrativos a mais desta tecnologia é a ferramenta para
instalação e atualização de bibliotecas desejadas em seu projeto, através do Ruby Gems.

CONSIDERAÇÕES FINAIS

Levando em consideração todos os aspectos das tecnologias apresentadas no decorrer

deste trabalho, entende-se que o desenvolvimento na plataforma web vem ganhando cada vez
mais espaço, e nos dias atuais tem se tornado um grande requisito mercadológico, graças a
evolução e tendências que nos é apresentada. Para ambas as áreas das tecnologias, seja front-
end ou back-end, existem dedicação e bastante estudo por parte do pessoal, levando em
consideração que não se deve conhecer de tudo um pouco, mas sim, se tornar excelente em
algo. Para iniciantes na web, é necessário ter pelo menos um projeto em seu portfólio, para
que se ganhe espaço neste nicho de tecnologias.
A gama de possibilidades é vasta, mas o codificador ou programador web deve saber
“falar a linguagem da web”, estar sempre atualizado com as melhores práticas, ferramentas e
tendências de mercado. Todas as tecnologias aqui apresentadas, deste o layout de tela até a
regra de negócio, possuem um grande histórico de usabilidade, e ainda estão presentes em
grandes projetos.
Desenvolver para a web não é obrigatoriamente ser codificador e desenvolvedor,
podem ser trabalhadas separadamente, contudo, saber front-end e conhecer back-end ou vice-
versa, se torna um diferencial a mais no currículo. Empresas já consolidadas, possuem seus
sistemas já em funcionamento e com equipe para garantir tal, cabendo aos novatos uma
adaptação aos padrões estabelecidos nos projetos, não bastando apenas conhecer a/as
tecnologias, por trás dessas linguagens e ferramentas, existem convenções de utilização que
garantem maior chance de sucesso quando aplicadas que devem ser estudadas.

REFERÊNCIAS

About jQuery UI. Disponível em: <http://jqueryui.com/about/>. Acesso em: 13 de outubro

de 2016.

ADRIEL, Wendell. Sass vs. LESS vs. Stylus: Batalha dos Pré-processadores. Disponível
em: <http://tableless.com.br/sass-vs-less-vs-stylus-batalha-dos-pre-processadores/>. Acesso
em: 1 de outubro de 2016.

BALDUÍNO, Plínio. Dominando JavaScript com jQuery. São Paulo: Casa do Código,
2014.

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 13 de 15
 CAVALCANTI, Lucas. VRaptor Desenvolvimento ágil para web com Java. São Paulo:
Casa do Código, 2013.

CSS CURSO W3C ESCRITÓRIO BRASIL. Disponível em: <http://www.w3c.br/pub/

Cursos/CursoCSS3/css-web.pdf>. Acesso em: 18 de setembro de 2016.
EIS, Diego. Guia Front-End: O caminho das pedras para ser um dev Front-End. São
Paulo: Casa do Código, 2015.

EIS, Diego. O básico: O que é HTML? Disponível em: <http://tableless.com.br/o-que-html-

basico/>. Acesso em: 10 setembro de 2016.

FRANKLIN, Alysson. Tenha o DOM. Disponivel em: <http://tableless.com.br/tenha-o-

dom/>. Acesso em: 22 de setembro de 2016.

FERREIRA, Elcio; EIS, Diego. HTML5 Curso W3C Escritório Brasil. Disponível em:
<http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em: 16 setembro de
2016.

FILHO, Almir et al. Coletânea Front-end: Uma antologia da comunidade front-end

brasileira. São Paulo: Casa do Código, 2014.

FITZMACKEN, Tom. Introdução a páginas da Web ASP.NET. Disponível em: <https://

www.asp.net/web-pages/overview/getting-started/introducing-aspnet-web-pages-2/getting-
started>. Acesso em: 08 de novembro de 2016.

HTML & CSS. Disponível em: <https://www.w3.org/standards/webdesign/htmlcss>. Acesso

em: 19 de setembro de 2016.

LOPES, Sérgio. CSS fácil, flexível e dinâmico com LESS. Disponivel em: <http://blog.caelu
m.com.br/css-facil-flexivel-e-dinamico-com-less/>. Acesso em: 2 de outubro de 2016.

NIEDERAUER, Juliano. Web interativa com Ajax e PHP. São Paulo: Novatec Editora,
2007.

MAUJOR, Mauricio. Ruby on Rails Primeiros passos. Disponível em: <http://www.maujor

.com/railsgirlsguide/>. Acesso em: 12 de novembro de 2016.

MAZZA, Lucas. HTML5 e CSS3 Domine a web do futuro. São Paulo: Casa do Código,
2014.

MDN. O que é JavaScript? Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web

/JavaScript/Guide/Introduction>. Acesso em: 8 de outubro de 2016.

O que é client-side e server-side? Disponível em: <http://tableless.github.io/iniciantes/manu

al/obasico/o-que-front-back.html>. Acesso em: 18 de outubro de 2016.

O que é o PHP? Disponível em: <https://secure.php.net/manual/pt_BR/intro-whatis.php>.

Acesso em: 05 de novembro de 2016.

PRESCOTT, Preston. Programando em JavaScript. Tradução por: ÁVILA, Mayara.

Babelcube, 2016

SOUZA, Natan. CSS menos sofrido com Sass. Disponivel em: <http://blog.caelum.com.br

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 14 de 15
 /css-menos-sofrido-com-sass/>. Acesso em: 2 de outubro de 2016.

SOUZA, Diogo. Explorando o jQuery UI. Disponível em: <http://www.devmedia.com.br

/explorando-o-jquery-ui/30316>. Acesso em: 13 de outubro de 2016.

SOUSA, Jailton. O que é Back-End ? - 05 Tudo que você precisa saber antes de estudar
programação. Dispoível em: <https://www.youtube.com/watch?v=JWUfoTARCtI>. Acesso
em: 18 de outubro de 2016.

SOUZA, Alberto. Java EE: Aproveite toda a plataforma para construir aplicações. São
Paulo: Casa do Código, 2015.

TEMPLE, André et al. Programação Web com Jsp, Servlets e J2EE. Disponível em:
<http://conteudo.icmc.usp.br/pessoas/mello/livro-j2ee.pdf>. Acesso em: 25 de outubro de
2016.

W3schools. The HTML DOM (Document Object Model). Disponível em: <http://www.
w3schools.com/js/js_htmldom.asp>. Acesso em: 23 de setembro de 2016.

ZEMEL, Tárcio. CSS Eficiente: Técnicas e ferramentas que fazem a diferença nos seus
estilos. São Paulo: Casa do Código, 2014.
¹ Aluno do Curso Superior de Tecnologia em Redes de Computadores da Universidade Estadual de Goiás
² Professor do Curso Superior de Tecnologia em Redes de Computadores da Universidade Estadual de Goiás

https://s3.amazonaws.com/academia.edu.documents/60665…21fa12b3788a2c57997299cc7d9fcdea391f6cb49186ea1f810f 03/05/2020 14:23

Página 15 de 15