Scribd
Carregar
157 visualizações7 páginas

20 - Mini-Projeto Cordel

1) Este documento apresenta um mini-projeto para criar um site sobre literatura de cordel usando conceitos de HTML e CSS; 2) O projeto incluirá efeito parallax em imagens de fundo e adaptação dinâmica do tamanho da fonte de acordo com o tamanho da tela; 3) O conteúdo do site será um poema de cordel sobre tecnologia escrito por Milton Duarte.

Enviado por

Samael Melo
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
157 visualizações7 páginas

20 - Mini-Projeto Cordel

1) Este documento apresenta um mini-projeto para criar um site sobre literatura de cordel usando conceitos de HTML e CSS; 2) O projeto incluirá efeito parallax em imagens de fundo e adaptação dinâmica do tamanho da fonte de acordo com o tamanho da tela; 3) O conteúdo do site será um poema de cordel sobre tecnologia escrito por Milton Duarte.

Enviado por

Samael Melo
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 7

Curso Informática para Internet

DevWeb
Capítulo 20

Mini-projeto
Cordel

Vamos começar agora mais um


mini-projeto onde será possível
aplicar conceitos importantes que
vimos até o momento. Será um
projeto rápido, mas vai incluir o
efeito parallax às imagens de fundo
e uma adaptação dinâmica do
tamanho da fonte de acordo com o
tamanho da tela. E o conteúdo que
vamos dar vida, transformando em
um site é um belo cordel.

Você tem todo o direito de usar esse material para seu


próprio aprendizado. Professores também podem ter acesso
a todo o conteúdo e usá-los com seus alunos. Porém todos o
que usarem esse material - seja para qual for a finalidade -
deverão manter a referência ao material original, criado pelo Prof.
Gustavo Guanabara e disponível no endereço do seu repositório público
https://github.com/gustavoguanabara/. Este material não poderá ser
utilizado em nenhuma hipótese para ser replicada - integral ou parcialmente
- por autores/editoras para criar livros ou apostilas, com finalidade de obter
ganho financeiro com ele.

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 1 de 7


A cultura da Literatura de Cordel
O Brasil é realmente um país múltiplo quando se fala em cultura, principalmente
quando falamos de cultura popular. Uma dessas manifestações populares é a
literatura de cordel. Ela tem esse nome pois os pequenos folhetos com os poemas
são impressos ficam presos em cordas para a exposição.

A ideia dos folhetos não surgiu no Brasil e sim em Portugal, mas foi aqui que
ganharam uma forma peculiar ao estampar as capas usando xilogravuras, formato
muito popular em cidades do nordeste brasileiro.

Outra característica dos folhetos de cordel é ter poesias escritas em forma de versos
que podem ser recitados de forma melodiosa e cadenciada, geralmente
acompanhadas de uma música tocada com instrumentos tipicamente nordestinos.

UM DOS MAIS FAMOSOS: Quer conhecer um pouco mais sobre os


cordéis? Acompanhe aqui um dos mais populares, que versa sobre o
a história de Virgulino Ferreira, vulgo cangaceiro Lampião.

Causos de Cordel: https://youtu.be/56zDjaM1iLg

E se você está lendo essa introdução e se perguntando “o que tem a ver cordel com
HTML e CSS?”, tenho um recado sincero pra você: a cultura faz parte da nossa
identidade como seres humanos. Nunca desmereça a cultura, amplie seus
conhecimentos e valorize sempre os movimentos nacionais. Você não perdeu tempo
lendo tudo isso, você ganhou culturalmente. De nada!

Levantei esse assunto aqui, pois escolhi um poema em forma de cordel de Milton
Duarte chamado “Cordel Moderno - Tecnologia do agora” que fala de Tecnologia (olha
aí o assunto!) de uma maneira bem simpática e atual. Esse será o conteúdo do site
que vamos criar.

Download do pacote básico


Os arquivos básicos que usaremos para criar nosso site já estão disponíveis no nosso
repositório oficial do GitHub. Comece acessando o endereço a seguir:

https://github.com/gustavoguanabara/html-css/tree/master/desafios/d012

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 2 de 7


Agora faça o download do arquivo pacote-d012.zip e descompacte os arquivos,
colocando todo o conteúdo na sua pasta de desafios, dentro da sub-pasta d012.

Dentro desse arquivo compactado, você vai encontrar:

• Duas imagens que aplicaremos ao site, adicionando o efeito parallax a elas


• O texto original, criado por Milton Duarte e disponível no Recanto das Letras

O projeto pronto
Para ver o projeto desse capítulo funcionando completamente, basta acessar o
endereço https://professorguanabara.github.io/projeto-cordel/ no seu
navegador, mas não vale ficar olhando e copiando o código, pois esse é mais um
desafio.

Acesse, role por todo o conteúdo, aumente e diminua o tamanho da janela


(principalmente na largura) e veja como ele vai se comportar.

Organizando o conteúdo em
seções
Agora vamos começar a organizar o conteúdo em seções, que serão formatadas para
intercalar áreas brancas com áreas de imagens. Você pode usar qualquer técnica, mas
a que eu achei mais coerente semanticamente foi dividir tudo em <section> com um
ou dois parágrafos e usando quebras de linha para organizar as estrofes.

Como criar um texto que aumenta


ou diminui dinamicamente?
Nesse exercício também usamos um recurso que faz com que o texto aumente ou
diminua de acordo com o tamanho (mais especificamente a largura) da janela do
navegador.

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 3 de 7


A dica aqui é usar as medidas relativas das CSS,
como vh e vw. Basicamente vh significa viewport
height e vw significa viewport width.

Mas que diabos é viewport?, você pode


perguntar. Bem, de forma resumida a viewport é a
área visível de uma janela. No início de um
documento HTML, dentro da área <head>, nós
fizemos a configuração básica do tamanho de uma
viewport usando uma tag <meta> desde o nosso
primeiro exercício.

Na linha 5 do nosso código base, definimos que a viewport terá a largura máxima
baseada na largura do dispositivo e que vai usar uma escala (zoom) inicial da tela
para o valor padrão 1.0 (zoom de 100%).

Sendo assim, vamos considerar uma tela de celular popular como o Samsung Galaxy
S9, que tem uma viewport de 360x740 pixels ou um iPhone X com 375x812 pixels.
Isso significa que - com o celular na posição vertical - a largura da tela é de 300 e
poucos pixels disponíveis para exibir o nosso site.

Para usar uma medida fixa do tamanho de um título, podemos declarar:

O que vai fazer com que a fonte fique 5 vezes maior que o seu tamanho base
(aproximadamente 16px, dependendo do navegador). E esse tamanho será mantido,
tanto para telas pequenas quanto para telas grandes.

Mas e se quisermos adaptar o tamanho da fonte ao tamanho da tela? Aí podemos


mudar um pouco a declaração acima e usar:

Isso vai significar que o tamanho da fonte será adaptado para que ocupe 10% da
largura da viewport, ou seja, em uma tela do Galaxy, com 360px de largura, o
tamanho da fonte será 36px. Mas basta deitar o celular para que a largura da tela vá
para 740px, fazendo com que a fonte seja mudada para tamanho 74px, o que significa
10% da nova dimensão.

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 4 de 7


Esse recurso fica ainda mais visível quando estamos em um computador e
modificamos o tamanho da janela do navegador. Faça seus testes usando medidas de
fontes configuradas com em e depois mude para vw.

USE COM MODERAÇÃO! Esse recurso de tamanho dinâmico de


fontes deve ser usado apenas em pontos muito específicos do nosso
site. Não exagere e aplique isso em todos os textos, pois seu site vai
acabar difícil de adaptar a telas. Se quiser um recurso melhor,
estudaremos as Media Queries mais para frente.

O que é o efeito parallax?


Em vários pontos durante esse capítulo, eu citei esse efeito e provavelmente você
percebeu um comportamento diferente nas imagens do site do projeto que te
apresentei anteriormente. Elas se
movem de um jeito diferente. Vou te
explicar esse fundamento com uma
situação do dia-a-dia.

Você já deve ter percebido que quando


estamos em movimento (em um carro,
ônibus ou trem) e olhamos para a
paisagem na janela lateral, aquilo que
está mais perto de você parece se mover
muito mais rápido e o que está mais
longe tem um deslocamento muito mais
lento? Pois isso é o que chamamos de
efeito parallax.

Podemos simular esse mesmo princípio em sites criando diferenças de


posicionamentos na rolagem do conteúdo. Em um site comum, imagine que temos um
bloco de texto seguido de uma imagem, seguida novamente por um texto. Se não
fizermos nenhuma configuração adicional, a rolagem da tela acontecerá da seguinte
maneira:

Note que a imagem do balão vai subindo juntamente com os blocos de texto. Agora,
quando aplicamos o efeito parallax, a rolagem fica um pouco diferente:

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 5 de 7


Agora o conteúdo vai sendo rolado pela tela, enquanto a imagem vai sendo revelada
em pedaços diferentes, dando a impressão de que o bloco com texto está mais perto
e a imagem está mais distante.

Talvez o impacto visual gerado por esse efeito não seja 100% percebido enquanto eu
tento te explicá-lo em forma de um texto em uma página, mas com certeza você
percebeu quando abriu o site do projeto. E se você ainda não abriu, aí vai outra
oportunidade. Acesse o link a seguir, ou abra o app de câmera e aponte seu celular
para o código QR:

https://professorguanabara.github.io/projeto-cordel/

Para obter esse efeito, vamos dar um id à <section> que vai conter a imagem e
realizar as seguintes configurações:

Todas as declarações acima foram vistas no capítulo anterior, quando falamos sobre
aplicação de imagens em background.

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 6 de 7


Tenho desafios pra você!
Lá no repositório, além do material em PDF e dos códigos dos
exercícios 100% disponíveis, também disponibilizamos alguns
desafios que devem ser resolvidos. Esses desafios não
incluem o código original e você deve tentar chegar à resposta
sem copiar nenhum código.

Com todo o conteúdo que vimos até essa aula, você já pode
resolver o desafio d012. Acesse o repositório público, abra a
área do curso de HTML+CSS e clique no link de acesso aos
desafios. Manda ver! Só não fica pedindo a resposta! Você
consegue resolver isso sozinho(a)!

Repositório em: https://gustavoguanabara.github.io

Eu já falei sobre isso no YouTube?


Eu sei que às vezes as pessoas gostam mais de assistir
vídeos do que ler livros, e é por isso que eu lanço há anos
materiais no canal Curso em Vídeo no YouTube. O link que
vou compartilhar contigo tem o conteúdo explicado como
você leu aqui, só que de forma mais ilustrada. Reserve um
tempo dos seus estudos para assistir esse vídeo todo.

https://www.youtube.com/playlist?
Curso em Vídeo:
list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o

#DevWeb - Capítulo 20 prof. Gustavo Guanabara Página 7 de 7

Você também pode gostar

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy