E1_IDFE (3)

Prévia do material em texto

Caique Pereira
INTERFACES 
DIGITAIS: 
FRONT-END
E-book 1
Neste E-Book:
INTRODUÇÃO ���������������������������������������������� 3
CONCEITOS DE FRONT-END ������������������4
Diferença de Front-End e Back-End ������������������������7
Ferramentas disponíveis �������������������������������������� 11
Conceitos de frameworks ������������������������������������ 18
CONSIDERAÇÕES FINAIS ���������������������� 23
SÍNTESE �������������������������������������������������������24
2
INTRODUÇÃO
Vamos começar fazendo uma reflexão. Você con-
segue imaginar quantas páginas na internet foram 
acessadas somente hoje?
Com o avanço da tecnologia, todas as pessoas 
já acordam conectadas à internet, seja por meio 
de seus smartphones, tablets ou computadores� 
Sabendo disso, cada vez mais, os programadores 
web ganham importância dentro do mercado de tra-
balho� A grande responsabilidade de tornar os sites 
agradáveis e responsivos para os seus visitantes, nos 
mais diversos tamanhos de tela, é dos desenvolve-
dores de front-end� Neste módulo, vamos entender 
os conceitos iniciais e essenciais que envolvem o 
desenvolvimento de interfaces front-end�
3
CONCEITOS DE 
FRONT-END
Quando falamos de front-end em um desenvolvi-
mento de sistema para internet, estamos falando 
de toda a parte visual, ou seja, toda a interface que 
será visualizada pelo usuário assim que acessar o 
sistema�
As interfaces têm o objetivo de trazer uma boa ex-
periência de navegação aos usuários dentro de um 
sistema, daí sua grande importância� (SEGURADO, 
2015)
Uma característica marcante do front-end é a exe-
cução do lado do cliente, ou seja, seu código é inter-
pretado diretamente em um navegador, não sendo 
necessário um servidor ou um interpretador de lin-
guagem� Para entendermos esse importante con-
ceito, precisamos conhecer um pouco mais sobre 
as linguagens do tipo client-side, ou seja, do lado do 
cliente� As linguagens client-side podem ser definidas 
como scripts processados no próprio cliente, ou seja, 
no próprio navegador do usuário que acessa o site� 
São exemplos de linguagens client-side: HTML, CSS 
e Javascript em suas diversas versões�
A linguagem HTML (HyperText Markup Language), ou 
linguagem de marcação de hipertexto, é responsável 
por toda a estrutura de uma página web, e é uma das 
principais linguagens utilizadas, quando falamos de 
desenvolvimento de interfaces front-end� Por meio 
4
dessa linguagem de marcação, criamos tags – como 
são conhecidos os códigos da linguagem – e essas 
tags são responsáveis por trazer elementos para 
nossa página, por exemplo: textos, imagens, tabelas, 
links, entre outros�
Já a linguagem CSS (Cascading Style Sheets), ou 
folhas de estilo em cascata, é utilizada em conjunto 
com o HTML e, através dela, criamos as estilizações 
necessárias� Geralmente é muito utilizada para adi-
cionar cores, fontes, espaçamentos, posicionamento, 
etc�
A linguagem JavaScript é uma linguagem utilizada 
para controlar e manipular os comportamentos dos 
arquivos HTML e CSS. Por exemplo, para fazer com 
que um submenu seja ativado ao passarmos do mou-
se por cima do menu principal�
FIQUE ATENTO
Apesar de o nome ser parecido, a linguagem Ja-
vaScript não tem nenhum “grau de parentesco” 
com a linguagem Java; as duas são totalmen-
te diferentes� JavaScript é front-end e Java é 
back-end�
Podcast 1 
Na Figura 1 podemos observar o funcionamento das 
linguagens client-side – também conhecidas como 
páginas estáticas�
5
https://famonline.instructure.com/files/917487/download?download_frd=1
Navegador faz a requisição da 
página HTML com CSS e 
Javascript
Servidor responde requisição 
da página com o conteúdo em 
HTML com CSS e Javascript
Figura 1: Funcionamento das linguagens client-side. Fonte: Elaboração 
própria.
SAIBA MAIS
O que faz um desenvolvedor de front-end? 
Para saber mais sobre isso, assista ao ví-
deo disponível em: https://www.youtube.com/
watch?v=ZY3-MFxVdEw�
Vamos fazer uma pausa para refletir sobre uma si-
tuação prática. Navegar pela internet se tornou uma 
tarefa rotineira� Basta ter uma dúvida, uma curiosi-
dade, que já recorremos a um mecanismo de busca� 
E, dentre os vários serviços oferecidos na internet, 
os sites que apresentam dados de previsão meteo-
rológica são dos mais requisitados. Pense em um 
usuário acessando um desses sites – que utilizam 
o modelo de arquitetura de computadores do tipo 
cliente-servidor. O usuário quer verificar a previsão 
do tempo para sua cidade, que é um conteúdo desse 
site� Sua tarefa será descrever, passo a passo, todas 
as etapas que ocorrem nesse processo de comuni-
cação entre a máquina cliente (usuário) e a máquina 
servidor (site)�
6
https://www.youtube.com/watch?v=ZY3-MFxVdEw
https://www.youtube.com/watch?v=ZY3-MFxVdEw
1. Máquina Cliente: o navegador chama a URL refe-
rente ao site. Nesse processo, são envolvidos diver-
sos recursos computacionais, como os protocolos 
de comunicação, os meios de transmissão e o har-
dware da rede, que envolve diversos equipamentos 
e softwares�
2. Máquina Cliente: é enviada uma requisição do 
tipo HTTP para o Servidor, isso quer dizer que vamos 
utilizar o protocolo de transferência de páginas de 
internet para nos ajudar com o acesso�
3. Máquina Servidor: recebemos uma requisição do 
tipo HTTP vinda da máquina Cliente�
4. Máquina Servidor: enviamos uma resposta via 
protocolo HTTP com a página que a máquina Cliente 
quer acessar�
5. Máquina Cliente: recebe a resposta via protocolo 
HTTP da máquina Servidor�
6. Máquina Cliente: faz o download da página rece-
bida e apresenta o resultado, que será uma página 
de web com conteúdo multimídia, como imagens, 
vídeos, links, textos, etc.
Diferença de Front-End e 
Back-End
Como estudamos no item anterior, quando falamos 
de front-end, estamos falando de tudo o que está 
à frente em nossos sistemas web, ou seja, toda a 
7
parte visual de interfaces� Agora, vamos aprender a 
diferenciar as tecnologias de front-end e back-end� 
Ao contrário do front-end, a tecnologia do back-end 
é o que está por trás de nosso sistema, ou seja, são 
as rotinas que fazem todas as ações funcionarem�
Resumidamente, as linguagens de back-end também 
podem ser chamadas de linguagens server-side, e 
são scripts que serão processados no servidor. São 
exemplos de linguagens server-side: PHP, Java, C#, 
etc�
Na Figura 2 podemos observar o funcionamento da 
linguagem PHP, que é uma linguagem server-side – 
também conhecidas como páginas dinâmicas�
Navegador faz a requisição 
da página em PHP
Processamento 
do conteúdo em 
PHP
Servidor responde 
requisição com o conteúdo 
em HTML
Figura 2: Funcionamento das linguagens server-side. Fonte: 
Elaboração própria.
Conforme observamos, a requisição feita na lingua-
gem PHP é processada dentro do servidor e volta 
para o cliente como conteúdo em HTML, em um pro-
cesso totalmente dinâmico�
Agora vamos comparar os fluxos de respostas de 
páginas estáticas e dinâmicas�
8
Utilizando o editor sublime, que será apresentado 
no próximo tópico, foi criada uma página estática 
com HTML para que possamos analisar seu fluxo 
de resposta e compará-lo com o fluxo de resposta 
das páginas dinâmicas�
Figura 3: Exemplo de client-side. Fonte: Elaboração própria.
Quando executamos uma página estática, sua saída 
será exatamente a mesma do código criado, confor-
me podemos observar na Figura 4�
Figura 4: Exemplo de client-side. Fonte: Elaboração própria.
9
De maneira diferente do que aconteceu anteriormente, 
o comportamento das páginas dinâmicas faz com 
que o código original seja processado e sua saída 
seja totalmente diferente do arquivo original, ou seja, 
os códigos dinâmicos em PHP são traduzidos para 
HTML, conforme podemos observar nas Figuras 4 e 5�
Figura 5: Exemplo de server-side. Fonte: Elaboração própria.
Figura 6: Exemplo de server-side. Fonte: Elaboração própria.
10
Para ilustrar melhor o processo que ocorreu no exem-
plo anterior, vamos imaginar que estamos fazendo o 
login em nossarede social favorita, e ela foi desen-
volvida em PHP. Você consegue imaginar o fluxo de 
funcionamento por trás dessa simples ação?
Navegador
(Cliente)
Servidor 
Apache
Resultado 
HTML
Script PHP
Arquivo/
Documento
Servidor de Banco 
de Dados
Javascript
jQuery, Ajax
HTML
Multimídia
Página Web
Imagens
E-Mail
Formulário
Interpretador 
PHP
Requisição 
HTTP/HTTPS
Figura 7: Fluxo de funcionamento server-side. Fonte: Elaboração 
própria.
Na Figura 7 podemos observar todo o caminho per-
corrido pela nossa requisição de login até a resposta 
que chega ao nosso navegador�
Ferramentas disponíveis
Para se trabalhar com desenvolvimento de interfaces 
front-end precisamos de poucos recursos, apenas 
11
conhecer os códigos que, em grande parte, são co-
mandos da linguagem HTML (também conhecidos 
como tags) e um computador com requisitos míni-
mos. Por exemplo, se estivermos utilizando o sistema 
operacional Windows, podemos utilizar o “bloco de 
notas” (notepad)�
No bloco de notas, devemos criar o nosso código 
em HTML e salvá-lo com a extensão “.html”. Feito 
isso, só precisamos abrir via navegador para visua-
lizar nossa página. Observe a sequência de Figuras 
a seguir:
Figura 8: Utilizando o bloco de notas para desenvolvimento front-end. 
Fonte: Elaboração própria.
Após a criação de nosso código, devemos ir até o 
menu “Arquivo” e, depois, na opção “Salvar Como...” 
(que também pode ser acionada pelo atalho de te-
clado “Ctrl + Shift + S”), conforme podemos observar 
na Figura 9�
12
Figura 9: Utilizando o bloco de notas para desenvolvimento front-end. 
Fonte: Elaboração própria.
Após escolher a opção “Salvar Como...”, será aberta 
uma caixa de diálogo na qual devemos adicionar a 
extensão “.html”, ao fim de nosso arquivo, e salvar 
com o nome e local de nossa preferência, conforme 
pode-se observar na Figura 10�
Figura 10: Utilizando o bloco de notas para desenvolvimento front-end. 
Fonte: Ela Elaboração própria.
13
Feito isso, podemos abrir via navegador e visualizar 
o resultado de nosso desenvolvimento� Observe a 
Figura 11�
Figura 11: Utilizando o bloco de notas para desenvolvimento front-end. 
Fonte: Elaboração própria.
Além do simples bloco de notas, nativo do sistema 
operacional Windows, podemos utilizar outros edi-
tores mais sofisticados que facilitam o desenvol-
vimento, completando comandos, trazendo cores 
mais amigáveis e adicionando numeração às linhas.
SAIBA MAIS
Você pode fazer o download da versão atual do 
Sublime Text no link: https://www.sublimetext.
com/3�
Você pode fazer o download da versão atual do 
VS Code no link: https://code.visualstudio.com/
download�
Você pode fazer o download da versão atual 
do HTML-Kit no link: http://www.htmlkit.com/
download�
14
https://www.sublimetext.com/3
https://www.sublimetext.com/3
https://code.visualstudio.com/download
https://code.visualstudio.com/download
http://www.htmlkit.com/download
http://www.htmlkit.com/download
Podemos observar na Figura 12 a diferença do editor 
Sublime Text, que é muito popular no desenvolvi-
mento de interfaces, front-end e do bloco de notas�
Figura 12: Utilizando o Sublime Text para desenvolvimento front-end. 
Fonte: Elaboração própria.
Outra opção bastante popular é o VS Code, que também 
traz estilos personalizados, e o seu grande atrativo é a 
possibilidade de instalar plug-ins que reconhecem as 
mais variadas linguagens de programação. Podemos 
observar um exemplo de sua utilização na Figura 13.
Figura 13: Utilizando o VS Code para desenvolvimento front-end. 
Fonte: Elaborada pelo autor.
15
O navegador Google Chrome é um dos mais popu-
lares do mundo e ele também oferece recursos in-
teressantes para nós, desenvolvedores�
SAIBA MAIS
Você pode fazer o download da versão atual do 
Google Chrome no link:
https://www.google.pt/intl/pt-PT/chrome/?bra-
nd=CHBD&gclid=CjwKCAiAvonyBRB7EiwAadauq-
UzsRw66njrEIGxP117LkoH2B1MtiS3qGkdrMpa-1b
CVWG4BkG6qYxoCEH0QAvD_BwE&gclsrc=aw.ds
Um dos recursos do navegador Google Chrome mais 
utilizados por desenvolvedores é a Ferramenta de 
Desenvolvedor� Essa ferramenta pode ser acessa-
da via menu “Mais Ferramentas” e “Ferramenta de 
Desenvolvedor” ou apenas por meio do atalho, pres-
sionando a tecla “F12”. Nessa ferramenta é possível 
inspecionar os elementos presentes em uma página 
web e enxergar o seu código, o que a torna muito útil 
para testes e para verificar como nosso código foi in-
terpretado, conforme podemos observar na Figura 14�
Figura 14: Utilizando a Ferramenta de Desenvolvedor do Google 
Chrome. Fonte: Elaboração própria.
16
https://www.google.pt/intl/pt-PT/chrome/?brand=CHBD&gclid=CjwKCAiAvonyBRB7EiwAadauqUzsRw66njrEIGxP117LkoH2B1MtiS3qGkdrMpa-1bCVWG4BkG6qYxoCEH0QAvD_BwE&gclsrc=aw.ds
https://www.google.pt/intl/pt-PT/chrome/?brand=CHBD&gclid=CjwKCAiAvonyBRB7EiwAadauqUzsRw66njrEIGxP117LkoH2B1MtiS3qGkdrMpa-1bCVWG4BkG6qYxoCEH0QAvD_BwE&gclsrc=aw.ds
https://www.google.pt/intl/pt-PT/chrome/?brand=CHBD&gclid=CjwKCAiAvonyBRB7EiwAadauqUzsRw66njrEIGxP117LkoH2B1MtiS3qGkdrMpa-1bCVWG4BkG6qYxoCEH0QAvD_BwE&gclsrc=aw.ds
https://www.google.pt/intl/pt-PT/chrome/?brand=CHBD&gclid=CjwKCAiAvonyBRB7EiwAadauqUzsRw66njrEIGxP117LkoH2B1MtiS3qGkdrMpa-1bCVWG4BkG6qYxoCEH0QAvD_BwE&gclsrc=aw.ds
Na Figura 15 inspecionamos o texto que aparece na 
página e a ferramenta nos mostra que ele foi criado 
com a tag “<p>”.
Outro recurso interessante é que podemos inspecio-
nar elementos de qualquer site acessado e, assim, 
ter uma ideia de como determinado elemento foi 
desenvolvido. Para testar essa ferramenta, você pode 
acessar o site da FAM e inspecionar um elemento, 
conforme observado na Figura 14�
Figura 15: Utilizando a Ferramenta de Desenvolvedor do Google 
Chrome. Fonte: Elaboração própria.
FIQUE ATENTO
Existem várias ferramentas disponíveis para de-
senvolvimento de interfaces front-end� Até mes-
mo um editor de texto como o bloco de notas 
(notepad) pode ser considerado uma ferramenta, 
porém, há editores mais sofisticados, como: Su-
blime Text, VS Code e HTML-Kit. Além disso, po-
demos utilizar até IDE’s mais completas, como: 
17
Eclipse, Netbeans e Visual Studio� Portanto, quan-
do falamos em front-end, temos uma vasta gama 
de opções em ferramentas para nos auxiliar!
Conceitos de frameworks
Um framework pode ser definido de diversas formas. 
O que todas essas definições têm em comum? Todas 
elas apontam, como principal característica de um 
framework, o reúso de códigos dentro dos projetos� 
Então, podemos definir o framework como um pacote 
ou biblioteca de códigos prontos que trazem solu-
ções para problemas recorrentes em uma abordagem 
genérica do desenvolvimento de software. Por exem-
plo, se todas as aplicações precisam de um botão 
de “Enviar” formatado com bordas arredondadas, na 
cor verde, e estilizado, por que cada desenvolvedor 
deve criar o seu a cada aplicação? Assim, existem 
frameworks que trazem, conforme mencionado neste 
exemplo, o tal botão verde pronto para ser utilizado 
nas mais diversas aplicações�
Com a utilização de frameworks, o desenvolvimento 
de sistemas – que poderia levar dias – consegue 
uma otimização de tempo para até menos da metade 
do tempo gasto sem a utilização dos frameworks� 
Para o mercado de trabalho é essencial que os de-
senvolvedores conheçam frameworks, pois é muito 
difícil encontrar uma empresa que trabalhe, seja com 
linguagens de front-end ou de back-end, que não utili-
ze frameworks em sua rotina de trabalho ou projetos�
Quando falamos de frameworks para desenvolvi-
mento de interfaces front-end, o principal, que não 
18
podemos esquecer, é o Bootstrap� Esse framework 
é utilizado para facilitar o desenvolvimento de com-
ponentes para interfaces de site� Ele utiliza HTML, 
CSS e JavaScript, e seu principal objetivo é melhorar 
a experiência visual do usuário. Para fazer isso ele 
utiliza várias técnicas de design e está sempre sendo 
atualizado e modernizado� Outro framework bastante 
utilizado é o jQuery�
O jQuery é uma biblioteca JavaScript rápida, 
pequena e rica emrecursos. Isso simplifica 
muito o processo de passagem e manipula-
ção de documentos HTML, manipulação de 
eventos, animação e Ajax com uma API fácil 
de usar que funciona em vários navegadores. 
Com uma combinação de versatilidade e ex-
tensibilidade, o jQuery mudou a maneira como 
milhões de pessoas escrevem JavaScript. 
(JQUERY, 2020)
SAIBA MAIS
Você pode fazer o download da versão atual 
do Bootstrap no link: https://getbootstrap.com/
docs/4.4/getting-started/download� 
Você pode estudar a documentação do Boots-
trap no link:
h t t p s : // g e t b o o t s t r a p . c o m / d o c s / 4 . 4 /
getting-started/introduction� 
Você pode fazer o download da versão atual do 
jQuery no link:
https://jquery.com/download� 
19
https://getbootstrap.com/docs/4.4/getting-started/download
https://getbootstrap.com/docs/4.4/getting-started/download
https://getbootstrap.com/docs/4.4/getting-started/introduction/
https://getbootstrap.com/docs/4.4/getting-started/introduction/
https://jquery.com/download/
Você pode estudar a documentação do jQuery no 
link:
https://api.jquery.com� 
Seguindo o modelo da documentação do Bootstrap, 
uma das maneiras de adicionar esse framework à 
nossa página é fazer referência a ele de forma on-
-line, trazendo-o diretamente de seu site, por meio da 
seguinte instrução adicionada ao cabeçalho (head) 
de nosso arquivo HTML:
<link rel=”stylesheet” href=”https://stackpath.boots-
trapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css” integrity=”sha384-Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” 
crossorigin=”anonymous”>
Seguindo um exemplo básico, para adicionar o fra-
mework em um arquivo com um título feito com a 
tag “<h1>” e um parágrafo com a tag “<p>”, temos o 
seguinte código, representado na Figura 16�
Figura 16: Utilizando o framework Bootstrap. Fonte: Elaboração pró-
pria.
20
https://api.jquery.com
Quando executamos o código representado pela 
Figura 16, já conseguimos notar a diferença no estilo 
de nosso texto, mesmo sem realizar nenhuma cha-
mada de funções existentes no Bootstrap. É possível 
observar sua saída na Figura 17�
Figura 17: Utilizando o framework Bootstrap. Fonte: Elaboração pró-
pria.
Agora retiramos o Bootstrap, mantendo o código que 
traz o título e o parágrafo, e já podemos notar uma 
grande diferença no estilo da página, conforme pode 
ser observado na Figura 18�
 
Figura 18: Página sem o framework Bootstrap. Fonte: Elaboração 
própria.
21
Portanto, a utilização do Bootstrap facilita muito 
o desenvolvimento de interfaces para front-end� 
Conhecendo mais a fundo suas classes – criadas 
para acelerar o desenvolvimento –, ele pode ser um 
recurso interessante que torna o desenvolvimento 
muito produtivo�
Podcast 2 
22
https://famonline.instructure.com/files/917488/download?download_frd=1
CONSIDERAÇÕES FINAIS
Agora você já é capaz de identificar os tipos de siste-
mas web, destacando quando são front-end e back-
-end� Quando falamos de front-end, estamos apon-
tando todas as tecnologias responsáveis pela parte 
visual de nosso sistema; já o back-end é responsável 
por tudo o que ocorre distante dos nossos olhos, 
por trás da parte visual, ou seja, toda a programação 
que faz com que as rotinas e funções funcionem no 
sistema web�
Você também conheceu algumas ferramentas que 
podem auxiliar no processo do desenvolvimento de 
interfaces front-end, como os editores Sublime Text e 
VS Code, e, também, a Ferramenta de Desenvolvedor 
do navegador Google Chrome, um dos mais popula-
res do mundo�
Além disso, você aprendeu o conceito de framework 
e sua importância no dia a dia do desenvolvedor� Um 
framework é um pacote ou biblioteca de códigos com 
várias rotinas que são recorrentes no cotidiano do 
desenvolvedor de forma genérica� Com sua utiliza-
ção, os projetos são otimizados e desenvolvidos de 
maneira mais rápida. Você foi apresentado a dois 
frameworks populares: o Bootstrap e o jQuery�
23
SÍNTESE
NOÇÕES BÁSICAS DE INTERFACE 
FRONT-END
INTERFACES DIGITAIS: 
FRONT-END
• Quando falamos de desenvolvimento de interfaces front-end, 
estamos falando de toda parte visual de nossos sistemas� As 
linguagens mais utilizadas para desenvolvimento de interfaces 
web são: HTML, CSS e JavaScript�
• As linguagens podem ser definidas como de front-end e 
back-end� Linguagens de front-end são focadas na parte visual e 
também são conhecidas como páginas estáticas� Já as 
linguagens de back-end são focadas na parte de programação 
para realizar ações e funções por trás da parte visual; também é 
conhecida como páginas dinâmicas�
• Existem várias ferramentas disponíveis que podem ser 
utilizadas no desenvolvimento de interfaces front-end� A mais 
simples é o bloco de notas (notepad) do sistema operacional 
Windows� Porém, existem editores mais sofisticados que 
auxiliam ainda mais no desenvolvimento, numerando linhas, 
colorindo comandos e até autocompletando comandos� Por 
exemplo: Sublime Text, VS Code e HTML-Kit�
• Quando falamos de desenvolvimento de interfaces front-end 
não podemos esquecer os frameworks – que são soluções 
criadas para facilitar o desenvolvimento de aplicações� Os 
frameworks são pacotes ou bibliotecas com códigos rotineiros e 
genéricos que podem ser utilizados em diversos projetos�
Referências Bibliográficas 
& Consultadas
ALVES, W� P� Java para Web: desenvolvimento 
de aplicações. São Paulo: Érica, 2015. [Minha 
Biblioteca]
DEITEL, P� J�; DEITEL, H� M� Ajax, Rich Internet 
Applications e desenvolvimento web para progra-
madores. São Paulo: Pearson Prentice Hall, 2008. 
[Minha Biblioteca]
FLANAGAN, D� JavaScript: o guia definitivo. 6� ed� 
Porto Alegre: Bookman, 2013. [Minha Biblioteca]
JQUERY� What is jQuery? Disponível em: https://
jquery.com� Acesso em: 10 de fev� 2020�
LEE, V�; SHNEIDER, H�, SCHELL, R� Aplicações 
móveis: arquitetura, projetos e desenvolvimento� 
São Paulo: Pearson Education do Brasil, 2006. 
[Biblioteca Virtual]
LEMAY, L� Aprenda a criar páginas web com 
HTML e XHTML em 21 dias. São Paulo: Pearson 
Education do Brasil, 2002� [Biblioteca Virtual]
MILETTO, E�; BERTAGNOLLI, S� Desenvolvimento 
de software II: introdução ao desenvolvimen-
to HTML, CSS, JavaScript e PHP� Porto Alegre: 
Bookman, 2014� [Minha Biblioteca]
SHARMA, V�; SHARMA, R� Desenvolvendo sites de 
e-commerce: como criar um eficaz e lucrativo site 
de e-commerce, passo a passo. São Paulo: Makron 
Books, 2001� [Biblioteca Virtual]
SEGURADO V� S� Projeto de interface com o usuá-
rio. São Paulo: Pearson, 2015. [Minha Biblioteca]
	Introdução
	Conceitos de Front-end
	Diferença de Front-End e Back-End
	Ferramentas disponíveis
	Conceitos de frameworks
	Considerações finais
	Síntese