Abelhas 🐝 e suas Castas 🍯

Uma página sobre abelhas e suas castas.

Atividade

Crie um pequeno website com 4 páginas informativas sobre as abelhas e suas castas. Dos 4 arquivos HTML que formam o website das abelhas, 3 já estão prontinhos e o 4º será criado por você. Além disso, você deve personalizar a aparência das páginas usando CSS. Procure evitar alterar o HTML da página, para exercitar os conhecimentos dos seletores CSS (a menos que o exercício diga o contrário).

Ao fazer este exercício, fique conferindo, no navegador, como a página está ficando. Se quiser parar a música, veja como fazê-lo no FAQ.

Exercício 0: Estilização inicial

Crie um arquivo estilos.css na pasta raiz do site e o inclua na página index.html
- Lembre-se que, neste arquivo, apenas código CSS é permitido
  - Ou seja, não é necessário (nem pode) usar tags, como <style>...</style>
- Ele deve ser incluído dentro do <head>...</head>, preferencialmente depois do <title></title>
Configure o corpo da página
- Coloque um fundo em gradiente (escolha as cores)
  - Lembre-se que um gradiente não é o valor para um background-color, mas para background-image (slides sobre gradientes)
  - Escolha as cores e a direção do gradiente de forma a deixar a página bonita, sem atrapalhar sua legibilidade
- Aumente o tamanho da fonte para algo como 20px
- Coloque uma margem lateral diferente de 0
- Remova a margem vertical (ie, defina como 0)
  - Isso é necessário porque, por padrão, o body tem margin: 8px
- Faça com que a página ocupe toda a altura disponível (para evitar que o fundo não ocupe todo o espaço)
Alinhe o texto de todos os parágrafos de forma justificada (justify)
Centralize a logomarca (a primeira imagem, lá no alto)
- É um bom caso para criar um id (use nome descritivo, em minúsculas e substituindo espaços por tracinhos)
  - Para lembrar como estilizar um único elemento, veja a explicação sobre seletor de tag vs seletor de id
  - E também relembre como centralizar imagens

Até este ponto, a página inicial deve estar mais ou menos assim:

Exercício 1: Estilizando as "curiosidades"

A página index.html possui dois parágrafos com a classe curiosidade. Vamos usar isso para poder estiliza-los de forma diferente dos outros parágrafos.

Queremos deixá-los assim:

Configure a imagem de fundo dos favos de mel (ie, favos-de-mel.png dentro de imgs/)
Coloque uma borda de 1px, sólida, com a cor dos contornos dos favos de mel
- Como descobrir uma cor? Veja no FAQ
Deixe a borda arredondada
- A propriedade para deixar a borda arredondada é border-radius e ela recebe 1 tamanho, que pode ser expresso como 5px (por exemplo)
Coloque um espaçamento interno (padding) para que o texto não fique grudado na borda

Além do parágrafo, há uma imagem de interrogação dentro do parágrafo. Repare que essa imagem aparece duas vezes na página index.html e também aparece nos outros arquivos, mas ela não possui uma classe que nos permita estilizar dessa forma. Contudo, é possível usar um seletor de descendente (ou de filho direto) para estilizá-la. Sendo assim, estilize "imagens dentro de .curiosidade" de forma que elas:

Flutuem à esquerda
Tenham um espaçamento externo (i.e., margem) à direita para que o texto não fique grudado nelas

Exercício 2: As páginas `operarias.html` e `zangoes.html`

Agora vamos aproveitar que escrevemos o código CSS em um arquivo separado e vamos simplesmente incluí-lo nas páginas operarias.html e zangoes.html.

Essas duas páginas possuem uma imagem de uma casta de abelha logo antes do primeiro parágrafo. Vamos estilizar as duas de forma que elas fiquem arredondadas e com uma bordinha bacana:

Veja se as duas imagens possuem uma classe que podemos usar para estilizar ambas (<img src="..." class="???">). Então, crie uma regra e:
1. Arredonde as bordas mas, em vez de colocar um valor em pixels, coloque 50%
  - Isto fará com que a imagem fique circular 😉
2. Coloque uma bordinha marota. Eu usei 5px double COR sendo que COR foi a mesma usada para a borda de .curiosidade (exercício anterior)

Agora, vamos colocar a imagem flutuando, para que o texto fique ao redor dela. Queremos que, na página das operarias.html, a imagem flutue à esquerda e, na página dos zangoes.html, ela flutue à direita. Além da flutuação, coloque também uma margem à direita ou à esquerda (depende do caso) para que o texto não fique grudado na imagem:

Dica: você pode (a) criar um id para cada uma das duas imagens, ou então (b - melhor) colocar uma segunda classe em cada imagem (e.g., <img src="..." class="casta-de-abelha esquerda"> e <img src="..." class="casta-de-abelha direita">) e estilizar usando essas novas classes, e.g.:

.esquerda {
  float: left;
  margin-right: 20px;
}

Por fim, se você ficar incomodado com o texto do parágrafo não acompanhar o formato circular da imagem flutuante, há uma propriedade do CSS3 que nos permite resolver isso: é a shape-outside. Veja a página da MDN (Mozilla Developer Network) sobre a propriedade shape-outside.

Exercício 3: Topo da página principal

Vamos estilizar a parte superior da página inicial dando a ideia de um "cabeçalho" da página. Para isso, altere index.html para colocar a <img src="imgs/logomarca.png"> dentro de algum elemento que vimos recentemente e que é usado para agrupar outros elementos e/ou estilização apenas (não possui semântica). Deve ser um elemento block. Dê um id pra ele e estilize-o com:

Cor de fundo: branco bem transparente (slides sobre cores transparentes)
Sombra de leve: box-shadow: 4px 4px 4px #0003
Espaçamento interno: 30px

Exercício 4: Outras estilizações

Usando o que foi visto sobre diversos seletores CSS, estilize:

Os hyperlinks em seus 4 estados diferentes:
- Sugestão: variar as propriedades color e/ou text-decoration: underline (sublinhado) e text-decoration: none (sem sublinhado)
- Obs: apenas um subconjunto das propriedades CSS pode ser usado ao estilizar hyperlinks em seus 4 estados. Veja o motivo.
Links externos
- Coloque uma cor de fundo nos hyperlinks que apontam para URLs externas
  - Dica: o que define um hyperlink para uma URL externa? É um elemento <a ...>...</a> que aponta (atributo href) para um endereço que começa com http
    - Volte nos slides sobre seletores e veja que existem os seletores de atributos, que se encaixam direitinho neste caso
Último parágrafo alinhado à direita
- Crie uma regra CSS para que o último parágrafo da página seja sempre alinhado à direita
  - Há um ou dois seletores bem específicos pra "último elemento" ou "último filho"
  - Lembre-se de como alinhar texto de um parágrafo
Imagens sem atributo alt (desafiozinho)
- Crie uma regra para mostrar se alguma imagem da página está sem o atributo alt
  - Naquelas que se enquadrarem, coloque uma borda vermelha
  - A ideia é fazer isso pra ajudar a detectar imagens sem alt
  - Você vai querer usar o seletor de negação para isso
- Depois, você mesmo deve escrever um atributo alt bem descritivo para a imagem encontrada

Exercício 5: Criando a página `rainha.html`

Crie a página que está faltando, rainha.html, contendo:

Título de primeiro nível Rainha
Imagem imgs/rainha.png
1 parágrafo:
- A função da rainha é pôr ovos e manter a ordem social na colmeia. A larva da rainha é criada num alvéolo modificado, bem maior que os das larvas de operárias e zangões, de formato cilíndrico, denominado realeira, sendo alimentada pelas operárias com a geléia real, produto rico em proteínas, vitaminas e hormônios sexuais. A rainha adulta possui quase o dobro do tamanho de uma operária e é a única fêmea fértil da colmeia, apresentando o aparelho reprodutor bem desenvolvido.
1 curiosidade:
- Você sabia?? Se nascem duas rainhas ao mesmo tempo, elas lutam até que uma morra.
1 parágrafo:
- A vida reprodutiva da rainha inicia-se com o voo nupcial para sua fecundação que ocorre, aproximadamente, 5 a 7 dias depois de seu nascimento. A fecundação ocorre com a congregação com Zangões. Aí existem de centenas a milhares de zangões voando à espera de uma rainha, conferindo assim uma grande variedade genética no acasalamento.
1 curiosidade:
- Você sabia?? A abelha rainha vive até dois anos, enquanto as operárias não duram mais que um mês e meio.
Parágrafo com link para voltar

A imagem da abelha rainha deve flutuar à esquerda, assim como a imagem das operárias.

Observação: dependendo da largura da janela, pode acontecer de p.curiosidade ficar com o fundo atrás da imagem da rainha (por ela estar flutuando).

Para garantir que isso não aconteça, estilize essa "curiosidade" (pode dar um id a ela) para "cancelar a flutuação" que esteja ocorrendo. Lembre-se de como cancelar a flutuação nos slides.

Exercício 6: Incluindo `abelhinhas.js`

Descubra como fazer incluir um arquivo JavaScript e inclua o abelhinha.js na página. Alunos curiosos podem querer apertar +/- para fazer algo acontecer.

FAQ

FAQ é uma sigla para Frequently Asked Questions que, em Português, traduz em Perguntas Feitas com Frequência. A seguir, veja algumas questões que podem surgir ao fazer este exercício, bem como as suas respostas.

Como faço para parar a música????

Na página index.html há um elemento <audio></audio> dentro do corpo. Você pode remover o atributo autoplay, ou então colocar um novo atributo controls.

No primeiro caso (atributo autoplay), a música continuará lá, mas não iniciará automaticamente. No segundo caso (atributo controls), sugirão controles para parar/pausar/iniciar a música dentro da página. Faça o teste!

Como descobrir uma cor?

Você pode usar um editor de imagens como Paint.NET, Pinta, Gimp, Photoshop. Ou então, você pode abrir as "ferramentas do desenvolvedor" do navegador (e.g., Chrome, Firefox) e escolher uma cor por lá.

Veja como isso pode ser feito. Clique no ícone de conta-gotas para poder selecionar a cor em um certo pixel.

Estados dos hyperlinks

Hyperlinks podem ser estilizados de maneira diferente em diferentes situações (quem chamamos de "estados"). Veja explicação nos slides. Para tal, existem os seletores de estado, que são os seguintes:

a:link - um link que nunca foi visitado. Exemplo:
```
a:link {
   color: black;
}
```
a:visited - um link que o usuário já visitou. Exemplo:
```
a:visited {
   color: orange;
}
```
a:hover - um link quando o mouse está em cima dele. Exemplo:
```
a:hover {
   color: silver;
}
```
a:active - um link no exato momento em que é "clicado". Exemplo:
```
a:active {
   color: yellow;
}
```

cabral2/cefet-web-bees