e-book 4

Prévia do material em texto

Caique Pereira
INTERFACES 
DIGITAIS: 
FRONT-END
E-book 4
Neste E-Book:
INTRODUÇÃO ���������������������������������������������� 3
WEB SITES RESPONSIVOS ����������������������4
Limites de resolução para site �������������������������������9
JavaScript Avançado: ES6 ������������������������������������ 11
React e Redux �������������������������������������������������������� 15
CONSIDERAÇÕES FINAIS �����������������������21
SÍNTESE ������������������������������������������������������� 22
2
INTRODUÇÃO
Neste módulo vamos falar sobre sites responsivos� 
Você já acessou um site tanto pelo computador quan-
to pelo celular e percebeu que ele se comportou de 
maneira diferente? Isso é ser responsivo: o site se 
ajustar a diversas resoluções� Além disso, vamos co-
nhecer o ECMAScript 6, a nova versão do JavaScript, 
e a utilização da biblioteca React� Pronto para iniciar 
os estudos? Vamos lá!
3
WEB SITES RESPONSIVOS
Atualmente, a maior parte dos usuários acessam 
sites em seus dispositivos móveis, dispositivos mul-
timídias, como televisões, consoles de videogame, 
projetores, entre outros� Para cada um desses apare-
lhos há um tamanho ou resolução de telas diferente� 
Já pensou como nossos sites podem ser adaptar a 
toda essa diversidade de resoluções? Os sites res-
ponsivos são aqueles que se adaptam ao tamanho 
das suas páginas, alterando assim seu layout original 
para se ajustar ao tamanho das telas em que estão 
sendo exibidos – por exemplo, como mencionado 
anteriormente, as telas de celulares e de tablets�
Portanto, quando utilizamos o conceito de respon-
sivo, até mesmo os menus aparecem de forma di-
ferente nas versões para telas menores, em que as 
principais opções ficam disponíveis de maneira que 
facilite o acesso�
FIQUE ATENTO
Um site responsivo deve mudar a sua aparência 
e posicionamento dos elementos com base no 
tamanho da tela em que o site é acessado� Por-
tanto, se o usuário faz seu acesso em uma tela 
pequena, todos os elementos presentes na pági-
na se reorganizam para que as coisas principais 
sejam exibidas em primeiro plano�
4
O framework Bootstrap, estudado anteriormente, 
tem algumas classes que facilitam nosso trabalho, 
quando falamos de páginas responsivas�
Uma das principais classes que auxiliam no processo 
do site responsivo é a grid� Trata-se de um sistema 
que é formado por um conjunto de linhas e colunas, 
semelhantes a uma tabela� Esse sistema de grid é 
formado por 12 colunas, que são divididas de for-
ma diferente, de acordo com o tamanho da tela do 
dispositivo que faz o acesso� Essa divisão entre as 
colunas é o que possibilita ao Bootstrap a responsi-
vidade aplicada a nossas páginas�
Por exemplo, em grandes telas podemos exibir as 12 
colunas� Já em uma tela de celular, essas 12 colunas 
serão divididas em 3 linhas com 4 colunas�
Para que possamos utilizar o sistema de grid, todas 
as linhas devem estar dentro de um elemento com 
a classe container� Esse elemento pode ser uma 
simples div, e isso é necessário para que ocorra o 
correto alinhamento� Quando queremos criar uma 
linha, utilizamos um elemento HTML com a classe 
row – esse também pode ser uma div� Todo conteúdo 
correspondente deve estar dentro de colunas e elas 
devem ser os únicos elementos filhos de uma linha 
(row)� Cada coluna é criada com um elemento HTML 
com a classe col-<tamanho_tela>-<numero_colunas>, 
em que <tamanho_tela> é a abreviação referente ao 
tamanho da tela que está sendo usada para acessar 
o site, e <numero_colunas> é o número de colunas 
que o elemento deve ocupar�
5
No Bootstrap os tamanhos de tela são xs (extra 
small), que são telas muito pequenas, como de celu-
lares; sm (small), que são telas de tablets na vertical; 
md (medium), que são telas de tablets na horizontal; 
e lg (large), que são as telas de computadores�
Outro fator importante é que a quantidade de colunas 
em uma linha deve somar sempre 12� Por exemplo, 
se quisermos criar um layout com 2 colunas, deve-
remos criar dois elementos que ocupem 6 colunas, 
totalizando 12� Se quisermos um novo layout com 3 
colunas, utilizamos 3 elementos ocupando 4 colunas, 
totalizando 12�
Agora, para exemplificar o sistema de grids e páginas 
responsivas, vamos observar o código presente na 
Figura 1 e seu comportamento nas figuras seguintes.
Figura 1: Página responsiva com Bootstrap. Fonte: Elaboração própria.
6
Fizemos a inclusão da biblioteca Bootstrap de forma 
on-line, somente utilizando o caminho de referência 
presente no site oficial.
A primeira linha de nossa página terá sempre 12 colu-
nas, independentemente do dispositivo utilizado para 
o acesso� Para garantir a responsividade de nossa 
página, utilizamos o tamanho xs� As duas linhas se-
guintes serão iguais em dispositivos de tela grande, 
sendo assim, mostraremos 3 colunas� Portanto, para 
dispositivos menores, a nossa segunda linha será 
dividida, mostrando uma coluna abaixo da outra� Isso 
acontece porque usamos a classe col-md-4, que faz 
com que a nossa div ocupe o espaço correspondente 
a 4 colunas em dispositivos de telas grande e média, 
como tablets e computadores� Também utilizamos 
a classe col-sm-12, que faz com que, em dispositi-
vos pequenos e muito pequenos (como celulares), 
o elemento ocupe a linha inteira�
Na Figura 2 podemos observar o comportamento 
de nossa página sendo exibida em um computador 
com a resolução 1366 x 768 – muito comum em 
notebooks�
Figura 2: Saída de página responsiva com Bootstrap em notebook. 
Fonte: Elaboração própria.
7
Vamos agora testar o comportamento de nossa pá-
gina aplicado a telas menores� Para isso, podemos 
utilizar a ferramenta de desenvolvedor do navegador 
Google Chrome; ela pode ser acessada pelo atalho 
CTRL + SHIFT + I� Após sua abertura, vamos utilizar 
mais um atalho para simular a exibição de nossa 
página com a resolução que desejamos� Esse atalho 
é o CTRL + SHIFT + M� Observe, na Figura 3, o que 
ocorreu�
Figura 3: Saída de página responsiva com Bootstrap em telas meno-
res. Fonte: Elaboração própria.
Podemos também, através da mesma ferramenta, 
utilizar a resolução de celular que já vem predefinida 
para alguns modelos de dispositivos móveis� Em 
nosso caso, selecionamos o dispositivo “Pixel 2”, 
como verificamos na Figura 4.
8
Figura 4: Saída de página responsiva com Bootstrap em celulares. 
Fonte: Elaboração própria.
SAIBA MAIS
Utilizando a biblioteca Bootstrap também pode-
mos tornar qualquer imagem de nossa página 
responsiva� Para isso, devemos adicionar a clas-
se “img-responsive” à tag <img>� Isso fará com 
que os estilos CSS max-width: 100% e height: 
auto sejam adicionados� Portanto, qualquer ima-
gem presente na página será redimensionada de 
forma proporcional ao tamanho da tela�
Limites de resolução para site 
Em um mundo ideal, nosso site deveria ser configu-
rado para suportar todas as resoluções possíveis� 
Porém, existem inúmeros tamanhos de telas e reso-
luções e é praticamente impossível suportar todas 
9
elas em nossas páginas� Para solucionar parcial-
mente esse tipo de problema, devemos definir um 
tamanho mínimo e máximo para que o layout seja 
exibido sem nenhum problema, em outras palavras, 
sem “quebrar”� Para isso, devemos efetuar testes e 
utilizar as propriedades CSS min-width e max-width, 
com nosso limite mínimo e máximo�
Por exemplo, digamos que desenvolvemos um site e 
que seu layout não fica satisfatório em telas meno-
res que 200px e nem em telas maiores que 2000px� 
Para sanar esse problema e fazer com que ele seja 
responsivo, é preciso limitar nosso site tanto no mí-
nimo (min-width) quanto no máximo (max-width)� 
Na Figura 5 há um exemplo de CSS que soluciona o 
problema descrito�
Figura 5: Limites de resolução para site. Fonte: Elaboração própria.
Podcast 1 
10
https://famonline.instructure.com/files/917497/download?download_frd=1
JavaScript Avançado: ES6
O ECMAScript 6 é uma evolução da linguagem 
JavaScript, que também é conhecida como ES6 e 
ECMAScript 2015� Algumas pessoas chamam de 
JavaScript6� Neste tópico vamos compreender al-
guns dos novos recursos do ES6�
O primeiro recurso que iremos estudar é o recurso 
chamado let� Por meio dele podemos fazer com que 
uma variável tenha um valor diferente de seu valor 
inicial em determinado bloco de código e, depois, 
retorne ao seu valor normal�
Para ilustrar esse novo recurso, vamos observar o 
exemplo de código da Figura 6�
Figura 6: Utilizando a variável let. Fonte: Elaboração própria.
11
Agora podemos verificar que, em determinado trecho 
de nosso código, a variável “x” passa a valer 2, porém, 
quando a utilizamos, ela volta a valer 10, pois está em 
outro contexto� Sua saída está ilustrada na Figura 7�
Figura 7: Saída do exemplo utilizando a variável let. Fonte: Elaboração 
própria.
Outro novo recurso é o const, que torna possível criar 
variáveis do tipo constante� Ou seja, esse tipo de va-
riável não pode ter seu valor alterado� O valor que foi 
declarado fica fixo nesse tipo de variável. Na Figura 
8 podemos observar um simples código que mostra 
como é feita a declaração de constantes�
Figura 8: Utilizando a variável const. Fonte: Elaboração própria.
12
Agora vamos verificar o resultado? Figura 9:
Figura 9: Saída do exemplo utilizando a variável const. Fonte: 
Elaboração própria.
Outra grande novidade do ES6 são as funções de seta 
(arrow) que permitem uma sintaxe curta para escrever 
expressões de função� Não precisamos mais utilizar a 
palavra-chave function, nem a palavra-chave return e 
os colchetes para criarmos nossas funções� Tudo isso 
é substituído por setas, representadas pelos sinais 
de igual e maior que ( => )� Na Figura 10 temos um 
exemplo da nova função de seta e o comparativo de 
como as funções eram feitas através do JavaScript 5�
Figura 10: Utilizando a função de seta. Fonte: Elaboração própria.
13
Na Figura 11 observamos a interpretação de nosso 
código em ES6:
Figura 11: Saída do exemplo utilizando a função de seta. Fonte: 
Elaboração própria.
A maior novidade encontrada no ES6 é a introdução 
de classes� Uma classe é um tipo de função, mas, em 
vez de usar a função de palavra-chave para iniciá-la, 
usamos a classe de palavra-chave e as propriedades 
são atribuídas dentro de um método chamado cons-
tructor()� Use a palavra class como palavra-chave 
para criar uma classe e sempre adicione um método 
construtor� O método construtor é chamado sempre 
que o objeto de classe é inicializado�
Podemos observar um exemplo de declaração e 
utilização de classes na Figura 12, em que criamos 
uma classe chamada Aluno, que tem como atributo 
o nome do aluno� Através do construtor criamos um 
novo aluno e recebemos seu nome, que será utilizado 
na manipulação de elementos�
14
Figura 12: Exemplo de classe. Fonte: Elaboração própria.
Podemos visualizar a saída do código na Figura 13�
Figura 13: Saída do exemplo de classe. Fonte: Elaboração própria.
React e Redux
O React é uma biblioteca JavaScript e pode ser con-
siderada uma das mais populares� Trata-se de um 
projeto de código aberto criado pelo Facebook e 
15
é utilizado para criar interfaces de usuário (UI) no 
front-end�
Um dos aspectos mais importantes do React é o 
fato de que você pode criar componentes, como ele-
mentos HTML reutilizáveis personalizados, para criar 
interfaces de usuário de maneira rápida e eficiente. O 
React também simplifica a maneira como os dados 
são armazenados e manipulados�
O modo mais fácil que temos para trazer o React ao 
nosso documento HTML é fazer uma referência ex-
terna, como fizemos no jQuery e Bootstrap. Observe 
a Figura 14:
Figura 14:  Adicionando o React. Fonte: Elaboração própria.
Estamos carregando as últimas versões estáveis das 
bibliotecas até o momento� A biblioteca React é a API 
de nível superior do React; já a biblioteca React DOM 
adiciona métodos específicos do DOM e, por último, 
a biblioteca Babel é um compilador JavaScript que 
nos permite usar o ES6 + em navegadores antigos� 
Agora, vamos escrever nosso primeiro bloco de có-
16
digo do React� Para isso, vamos utilizar os conceitos 
de classes do ES6 para criar um componente React 
chamado App�
Na Figura 15 podemos observar nosso bloco de có-
digo React�
Figura 15: Exemplo com React. Fonte: Elaboração própria.
Criamos uma classe por meio do ES6 que herda o 
componente da biblioteca React; além disso, através 
do método render(), renderizamos uma mensagem em 
HTML� Depois, o elemento HTML de id “root” foi ma-
nipulado por meio da biblioteca ReactDOM� Podemos 
observar a saída desse exemplo na Figura 16�
Figura 16: Saída do exemplo com React. Fonte: Elaboração própria.
17
SAIBA MAIS
Você pode conferir mais detalhes dessa rica e 
popular biblioteca chamada React em sua docu-
mentação oficial:
Disponível em: https://pt-br.reactjs.org�
O Redux é uma tecnologia de contêiner para aplica-
tivos em JavaScript� Ele ajuda a escrever aplicativos 
que se comportam de maneira consistente, execu-
tados em diferentes ambientes (cliente, servidor e 
nativo) e são fáceis de testar� Além disso, o Redux 
fornece uma ótima experiência para o desenvolve-
dor, como edição de código ao vivo, combinada com 
um depurador que viaja no tempo� Você pode usar o 
Redux junto com o React ou com qualquer outra bi-
blioteca de visualizações� É pequeno (2 kB, incluindo 
dependências), mas tem um grande ecossistema de 
complementos disponíveis�
Para que possamos praticar com exemplos do Redux, 
usamos o CodeSandbox, um editor on-line que per-
mite que você jogue com os exemplos on-line, pela 
facilidade do ambiente pré-configurado.
Nesse exemplo temos uma tela toda feita em React 
com Redux, com quatro botões, que são responsáveis 
por incrementar e decrementar um número exibido 
na tela mediante o clique� Podemos observar sua 
saída na Figura 17�
18
https://pt-br.reactjs.org
Figura 17: Saída do exemplo com React e Redux. Fonte: Elaboração 
própria.
Para a visualização do código fonte, devemos abrir 
o exemplo através do CodeSandbox, que traz já hos-
pedado esse exemplo inicial do Redux com React� 
Você pode acessar em:
https://codesandbox.io/s/github/reduxjs/redux/tree/
master/examples/counter-vanilla 
Figura 18: Código-fonte via CodeSandbox – exemplo com React e 
Redux. Fonte: Elaboração própria.
Um ponto importante a ser destacado é o Redux tra-
balhando com eventos; conforme observamos no 
código-fonte, o Redux identifica os eventos que ocor-
rem na página, por exemplo, o clicar em um botão e 
19
https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter-vanilla
https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter-vanilla
acabar acionando uma função por conta disso� Todos 
os elementos são manipulados através de seu “id”� 
Assim, podemos verificar como é o funcionamento 
do React em conjunto com a biblioteca Redux�
Podcast 2 
20
https://famonline.instructure.com/files/981415/download?download_frd=1
CONSIDERAÇÕES FINAIS
Agora você já sabe a importância de todos os sites 
serem responsivos e, também, como configurar um 
limite de resolução em suas páginas� Além disso, 
você aprendeu alguns novos recursos da linguagem 
ES6, que é a evolução do JavaScript. Por fim, apren-
deu a utilizar a biblioteca React e o Redux, e agora 
já conhece uma das bibliotecas mais populares do 
mundo, quando o assunto é JavaScript�
21
SÍNTESE
INTERFACES DIGITAIS: FRONT-END
INTERFACES DIGITAIS: 
FRONT-END
• De acordo com a grande variedade de tamanhos e resoluções 
de telas, ter sites responsivos acaba sendo essencial para seu 
bom funcionamento� Um site responsivo significa que ele 
consegue se ajustar aos mais diversos tipos de tela e, até mesmo, 
modificar seu layout para que suas principais funcionalidades 
sejam acessíveis�
• Com a evolução da linguagem JavaScript versão 5, ela passou 
a ser chamada de ECMAScript6 ou ES6� Com essa evolução, 
novas funcionalidades tornaram a linguagem mais rica de 
recursos para os desenvolvedores� Alguns de seus novos 
recursos são let, const, arrow function eclasses�
• A biblioteca React é uma das mais populares, quando falamos 
em JavaScript; pois ela nos permite uma grande eficácia e 
agilidade para o desenvolvimento de interfaces dinâmicas�
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]
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]
	_GoBack
	Introdução
	Web sites responsivos
	Limites de resolução para site 
	JavaScript Avançado: ES6
	React e Redux
	Considerações finais
	Síntese