Cookies e Bibliotecas

Desenvolvimento
Front-End
13ª Aula
Prof. Lorrany Marim

Cookies

2

O que são Cookies?

⬢

Os cookies são pequenos arquivos criados por sites em que o usuário visitou;

⬢

São salvos no computador do usuário, por meio do Browser;

⬢

Eles contêm informações que são usadas para identificar o visitante;

⬢

Pode ser usado para personalizar a página de acordo com o perfil;

⬢

Também podem facilitar o transporte de dados entre as páginas de um

mesmo site;

⬢

Cookies também são comumente relacionados a casos de violação de

privacidade em sites web;

Cookies

3

O que são Cookies?

⬢

Essa tecnologia existe desde seu início da internet doméstica, nos anos 1990;

⬢

Foi criada para atender às demandas do E-commerce, mas foi ganhando

diferentes propósitos ao decorrer dos anos;

⬢

A lei LGPD Regulamenta a transparência das informações fornecidas ao site

pelo usuário e obriga a exibição de um aviso sobre a política de cookies

adotada pelo site;

⬢

Os cookies podem ser divididos em duas categorias principais, com muitos

subconjuntos:

Cookies

4

COOKIES DE SESSÃO

⬢

São cookies que permanecem no

navegador e mantêm as informações

do usuário até que as sessões sejam

fechadas;

⬢

Se uma nova janela do navegador é

aberta, o mesmo usuário é tratado

como um novo visitante e deve

inserir suas credenciais de login.

Cookies

5

COOKIE PERSISTENTE

⬢

Os cookies persistentes têm uma vida útil determinada e permanecem no

navegador até o período decorrido, ou até que seja excluído manualmente;

⬢

Os sites que usam cookies persistentes lembram os usuários mesmo

depois de fecharem o navegador;

⬢

Esse tipo de cookie ativa recursos como carrinhos de comprar persistentes,

que retém produtos adicionados ao carrinho entre sessões;

⬢

O cookie em si é apenas uma pequena linha de texto;

Cookies

6

COOKIE PERSISTENTE

⬢

Nos cookies normalmente contém a URL do site que colocou o cookie;

⬢

Um número único gerado exclusivamente para aquele acesso e a data de

validade do cookie;

⬢

Os tipos de sites que usam essa tecnologia são:

E-Commerce (Comércio eletrônico) , Login e Privacidade e Segurança;

Cookies

7

E-COMMERCE

⬢

No comércio eletrônico essa estratégia serve para manter itens adicionados

a um carrinho de compras mesmo que o usuário mude de página;

⬢

Sem o uso dos cookies, os sites não seriam capazes de manter informações

salvas no meio do caminho.

⬢

Os cookies funcionam como uma espécie de identificador do computador.

⬢

Personalizar anúncios e destaques a serem exibidos para os usuários, com

base no histórico de visitas anteriores.

Cookies

8

E-COMMERCE

⬢

Os sites de E-commerce usam uma combinação de cookie de sessão e

cookie persistentes para criar uma experiência perfeita no carrinho de

compras.

⬢

Caso o usuário abandone o carrinho, os cookies persistentes fazem a

recuperação de suas seleções do banco de dados na próxima vez que ele

visitar, ou até mesmo permite a criação de campanhas personalizadas de

redirecionamento que incentivem o usuário a revisitar o carrinho.

⬢

Esse recurso é de grande ajuda para incentivar as conversões para vendas.

Cookies

9

LOGIN

⬢

A recuperação de algo que foi digitado pelo usuário pode ser feita pelo uso

de cookies no seu site;

⬢

Usando esse recurso, nomes, endereços, dados de cadastro em formulários

ou até mesmo termos de busca usados em campos de pesquisa podem ser

restaurados.

⬢

Os cookies funcionam para lembrar que um usuário está logado em um

determinado site.

Cookies

10

LOGIN

⬢

Ao entrar em um serviço que exija senha, a autenticação fica ativa mesmo

após atualizar a página ao navegar nos endereços internos.

⬢

Sem o uso dos cookies, sites como Youtube, Netflix, Amazon Prime ou

qualquer outro com conta de usuário vinculadas precisaria de um novo

login toda vez que um vídeo for carregado.

Cookies

11

Privacidade e Segurança

⬢

Para melhorar a experiência de navegação, os cookies pedem em troca a

privacidade do usuário.

⬢

Esses sites podem usar as informações disponibilizadas pelos usuários

nesses arquivos para compor um padrão de identificação na web do

usuário.

⬢

Com o uso dessa prática, uma loja pode conhecer o padrão de consumo do

usuário mesmo que ele nunca tenha visitado o site.

⬢

A segurança é muito importante ao usarmos a política de cookies.

Cookies

12

Privacidade e Segurança

⬢

Hackers mal-intencionados podem aproveitar as informações presentes em

cookies para aplicar golpes na web.

⬢

Um dos ataques mais conhecidos é aquele que fazem uso dos dados de

validação de login e senha para navegar em uma determinada loja virtual,

assim comprando produtos no nome da vítima.

Multiple Choice

O que são cookies?

• Arquivos de som que são salvos no computador do usuário.

• Pequenos arquivos criados por sites em que o usuário visitou e que são salvos no computador do usuário.

• Senhas utilizadas para fazer login em sites.

• Informações que são compartilhadas publicamente pelos usuários.

Multiple Choice

O que são cookies de sessão?

• Cookies que permanecem no navegador até o período decorrido ou até mesmo sejam excluídos manualmente.

• Cookies que permanecem no navegador e mantêm as informações até que as sessões sejam fechadas.

• Cookies que ativam recursos como carrinhos de comprar persistentes.

• Cookies que lembram os usuários mesmo depois de fecharem o navegador.

Multiple Choice

O que são cookies persistentes?

• Cookies que permanecem no navegador até o período decorrido ou até mesmo sejam excluídos manualmente.

• Cookies que permanecem no navegador e mantêm as informações até que as sessões sejam fechadas.

• Cookies que ativam recursos como carrinhos de comprar persistentes.

• Cookies que lembram os usuários mesmo depois de fecharem o navegador.

Multiple Choice

Qual é a finalidade dos cookies nos sites de E-commerce?

• Exibir anúncios aleatórios.

• Lembrar o histórico de visitas anteriores dos usuários.

• Manter informações salvas no carrinho de compras, mesmo que o usuário mude de página.

• Personalizar o layout do site para cada usuário.

Multiple Choice

Qual é a finalidade dos cookies no login?

• Restaurar nomes, endereços, dados de cadastro em formulários ou até mesmo termos de busca usados em campos de pesquisa.

• Exibir anúncios aleatórios.

• Personalizar o layout do site para cada usuário.

• Lembrar o histórico de visitas anteriores dos usuários.

Bibliotecas

13

O que são bibliotecas?

⬢

Biblioteca é um arquivo que organiza código pré-definido para uso em

aplicações;

⬢

São uma coleção de recursos usados por programas de computador e

podem incluir:

⬡

Dados de configuração

⬡

Documentação

⬡

Procedimentos

⬡

Classes

⬡

Funções

Bibliotecas

14

⬡

Templates

⬡

Especificações de tipos

⬡

Entre outros recursos

Por que usar bibliotecas?

⬢

Funções comuns são pré-definidas para programação modular;

⬢

Rapidez no desenvolvimento da aplicação;

⬢

Implementação reuso de código em aplicações;

⬢

Com as bibliotecas podemos escrever códigos menores e mais

organizados;

Bibliotecas

15

⬢

Facilitam a atualização do programa;

⬢

Ao usar uma biblioteca, um programa passa a ser capaz de executar suas

funções sem que seja necessário implementá-las no programa em si;

⬢

Centenas de bibliotecas estão disponíveis para uso de aplicações;

⬡

NumPy – Utilizada na linguagem Python

⬡

jQuery – Utilizada na linguagem JavaScript

⬡

Matplotlib – Utilizada na linguagem Python

⬡

D3.js – Utilizada em JavaScript

⬡

Processing.js – Utilizada no JavaScript

⬡

STL – C++ Standard Library – Utilizada no C++

Bibliotecas

16

Bibliotecas Padrão

⬢

Disponibilizadas por Padrão nas implementações de uma linguagem de

programação;

⬢

Geralmente descritas na especificação da linguagem à qual pertencem;

⬢

Tratada como parte da linguagem em si, mesmo sendo uma entidade

separada;

⬢

Traz funções gerais, como acesso a disco, a manipulação de strings,

entrada e saída etc.

Bibliotecas

17

Bibliotecas Padrão

⬢

Exemplos de Bibliotecas Padrão:

⬡

Biblioteca Padrão C

⬡

JCL – Java Class Library

⬡

Python Standard Library

⬡

FCL – Framework Class Library (.NET Framework)

⬡

C++ Standard Library

Bibliotecas

18

Vinculação de Bibliotecas

⬢

As Bibliotecas podem ser vinculadas e acessadas em dois momentos

distintos, dependendo da linguagem e bibliotecas empregadas:

⬡

Ligadas ao programa durante o processo de compilação: Bibliotecas

Estáticas

Bibliotecas

19

Vinculação de Bibliotecas

⬡

Acessadas somente durante a execução do programa (em runtime):

Bibliotecas Dinâmicas ou ainda Bibliotecas Compartilhadas.

Bibliotecas

20

⬢

Não confunda uma biblioteca com um arquivo de cabeçalho. O head é

um arquivo que contém referências a bibliotecas em uma linguagem.

⬢

Traz, por exemplo, listas de nomes e funções (protótipos) e como

chamar essas funções, além de tipos de dados e constantes usadas

pelas bibliotecas. Sendo assim, trata-se de uma interface para uma

implementação – a biblioteca em si.

Multiple Choice

O que é uma biblioteca de programação?

• Um arquivo que contém referências a outras bibliotecas.

• Um arquivo que contém funções e recursos pré-definidos para uso em programas de computador.

• Um arquivo que contém apenas documentação sobre uma linguagem de programação.

• Um arquivo que contém apenas especificações de tipos de dados.

Multiple Choice

Quais são algumas vantagens de usar bibliotecas de programação?

• Diminuir a velocidade de desenvolvimento de aplicativos.

• Aumentar a complexidade do código em um aplicativo.

• Permitir a reutilização de código em diferentes programas.

• Tornar a atualização de programas mais difícil.

Multiple Choice

Qual é uma das bibliotecas mais conhecidas para a linguagem de programação Python?

• NumPy

• jQuery

• D3.js

• STL

Multiple Choice

O que são bibliotecas padrão?

• Bibliotecas que só podem ser acessadas durante a execução do programa.

• Bibliotecas que estão disponíveis em todas as implementações de uma linguagem de programação.

• Bibliotecas que só podem ser usadas em um determinado sistema operacional.

• Bibliotecas que só podem ser vinculadas durante o processo de compilação.

Multiple Choice

Quais são as duas maneiras distintas de vincular bibliotecas em um programa?

• Bibliotecas compartilhadas e bibliotecas estáticas.

• Bibliotecas padrão e bibliotecas não-padrão.

• Bibliotecas C++ e bibliotecas Java.

• Bibliotecas Python e bibliotecas JavaScript.

Multiple Choice

Um arquivo de cabeçalho contém apenas documentação sobre uma linguagem de programação.

• Uma biblioteca de programação contém apenas referências a outras bibliotecas.

• Um arquivo de cabeçalho não é importante

• Um arquivo de cabeçalho é uma interface para uma implementação - a biblioteca em si.

• Uma biblioteca de programação contém apenas tipos de dados e constantes.

Bibliotecas

21

BIBLIOTECA/FRAMEWORK

⬢

O JavaScript é uma linguagem muito usada na web, juntamente com o

HTML e o CSS;

⬢

Dão vida e interatividade a boa parte dos sites;

⬢

Assim como as outras linguagens, ao longo dos anos o JavaScript foi sendo

aperfeiçoado e ganhando cada vez mais notoriedade no meio web;

⬢

Dessa forma foi sendo criados vários plugins/frameworks/bibliotecas para

se usar o JavaScript;

⬢

Com o objetivo de facilitar o uso da linguagem em tarefas comuns do nosso

cotidiano de desenvolvimento web;

Bibliotecas

22

BIBLIOTECA/FRAMEWORK

⬢

A maioria desses frameworks bibliotecas são compartilhados de forma

gratuita na internet e open Source;

⬢

Alguns desses frameworks, devido ao grande poder que possuem, acabam

se destacando e tornando-se fundamental para o desenvolvimento web;

⬢

Bibliotecas são um conjunto de códigos prontos, esses códigos podem

conter classes, instruções, funções e rotinas que podem ser implementadas

em diversas aplicações web;

⬢

Framework é um conjunto de bibliotecas em um formato padrão;

Bibliotecas

23

BIBLIOTECA/FRAMEWORK

⬢

Podemos inserir o nosso próprio código e/ou um código já existente no

framework;

⬢

Mas o seu código tem que respeitar as regras do framework;

⬢

A desvantagem de se trabalhar com framework, é que seu código fica

“amarrado” a ele;

⬢

Por isso é mais funcional o uso de bibliotecas devido a facilidade de

utilização e implementação nos códigos;

Bibliotecas

24

Bibliotecas e Frameworks mais conhecidas:

⬢

jQuery:

⬡

É a principal biblioteca JavaScript atualmente, ela foi criada em 2006;

⬡

Algumas estimativas indicam que o jQuery é usado em mais de 50%

dos sites ativos hoje.

⬡

Uma das vantagens do jQuery é a compatibilidade com os

navegadores;

⬡

Uma das desvantagens é que podem ocorrer conflitos entre scripts

dificultando a depuração em alguns casos;

Bibliotecas

25

Bibliotecas e Frameworks mais conhecidas:

⬢

D3.JS:

⬡

É uma biblioteca JavaScript ideal para se trabalhar com dados;

⬡

Essa biblioteca é uma ótima ferramenta para visualizações

personalizadas;

⬡

Serve tanto para gráficos simples em formato e complexos;

⬡

Uma das vantagens do D3.js é que tem um rico conjunto de

ferramentas para visualização de dados;

⬡

Uma das desvantagens é a falta de privacidade caso os dados sejam

sigilosos;

Bibliotecas

26

Bibliotecas e Frameworks mais conhecidas:

REACT:

⬢

É uma das principais bibliotecas usadas hoje em dia;

⬢

Sendo uma biblioteca de código aberto apoiada pelo Facebook, o react é

usado para ajudar no desenvolvimento de aplicativos web;

⬢

Ele usa componentes, que ajudam a encapsular código e estado;

⬢

O uso de componentes facilita a construção de interfaces de usuário mais

complexos;

⬢

Uma das vantagens do react é que ele é muito fácil para aprender e utilizar;

Bibliotecas

27

Bibliotecas e Frameworks mais conhecidas:

REACT:

⬢

Uma das desvantagens é que ela abrange apenas uma camada da interface

do usuário sendo necessário a utilização de outra tecnologia como

complemento para a parte de visualização.

Bibliotecas

28

Bibliotecas e Frameworks mais conhecidas:

GLIMMER.JS

⬢

É uma biblioteca JavaScript com componentes de UI (User Interface –

Interface do Usuário) ;

⬢

Focado em rapidez e leveza para web;

⬢

O objetivo dos fundadores, foi desenvolver algo menor e mais leve que o

Ember.js (outra biblioteca JavaScript);

⬢

Uma das vantagens dessa biblioteca é que ela faz a diferenciação entre

elementos estáticos e dinâmicos;

⬢

Uma das desvantagens é que ela depende do Ember.js para o seu uso.

Multiple Choice

Qual é a principal biblioteca JavaScript atualmente?

• D3.js

• React

• Glimmer.js

• jQuery

Multiple Choice

Qual é a vantagem do jQuery em relação a compatibilidade entre navegadores?

• Ele permite a visualização de dados sigilosos

• Ele possui um rico conjunto de ferramentas para visualização de dados

• Ele "entende" que nem todos os navegadores podem possuir os mesmos recursos iguais

• Ele facilita a construção de interfaces de usuário mais complexos

Multiple Choice

Qual biblioteca JavaScript é ideal para trabalhar com dados e visualizações personalizadas?

• React

• Glimmer.js

• D3.js

• jQuery

Multiple Choice

Qual é a desvantagem de se trabalhar com frameworks?

• Não há desvantagens

• Os códigos ficam "amarrados" ao framework

• Os códigos ficam mais fáceis de implementar

• Os códigos ficam mais leves

Multiple Choice

Qual é uma das vantagens do React em relação ao desenvolvimento de interfaces de usuário?

• Ele é fácil para aprender e utilizar

• Ele abrange apenas uma camada da interface do usuário

• Ele faz a diferenciação entre elementos estáticos e dinâmicos

• Ele é destinado a ser usado prioritariamente no Ember