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
 2

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 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.
 3

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,
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,
 4

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>
 5

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 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>
 6

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:

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
 7

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
 8

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
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:
 9

1. seletor {
2. propriedade: valor;
3. }
4. seletor1, seletor2 {
5. propriedade: valor;
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 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; }
 10

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
 11

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.
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.
 12

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 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.
 13

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.
 14

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.

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:
 15

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
 16

plataforma. Três plataformas são voltadas para o desenvolvimento web, porém, o enfoque deste
trabalho será designado para o JEE e JSP.

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:
 17

1. public class exemploServlet extends HttpServlet{

2. public void service(HttpServletRequest requisição,
3. HttpServletResponse resposta){
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:

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
 18

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
 19

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
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
 20

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.

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.
 21

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.
 22

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
/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.