cefet_front_end

CSS parte 3

Fontes, Multimídia

Dica para prova - erros comuns (1/4)

Endereço absoluto vs relativo

Estrutura de pastas para demonstrar o endereço absoluto e relativo

Endereço Absoluto	End. Relativo
/ovelhas/racas/c.jpg	`c.jpg`
/ovelhas/racas/xpto/d.jpg	`xpto/d.jpg`
/ovelhas/b.jpg	`../b.jpg`
/a.jpg	`../../a.jpg`

Dica para prova - erros comuns (2/4)

Escreva uma (única) regra em CSS para colorir de vermelho apenas links que estejam dentro de tabelas. Os demais links não devem ser alterados.

Correto ✅:
```
table a {
  color: red;
}
```
Errado:
```
td a {
  color: red;
}
```
Errado:
```
.links {
   color: red;
}
```
Errado:
```
a[td href$=" "] {
  color: red;
}
```

Dica para prova - erros comuns (3/4)

Questão exibindo as 4 possíveis alternativas de respostas.

Regra CSS para fazer com que uma linha da tabela mude sua cor de fundo quando o mouse passar em cima dela (jsFiddle).

Dica para prova - erros comuns (4/4)

Lista de item dentro de um parágrafo
- O parágrafo deve possuir apenas elementos inline
Item de lista definido sem sua respectiva lista
Tags abertas e não fechadas:
- Sempre que abrir uma tag, feche-a
- Indente o código
- Lembrem-se de usar mais recursos do editor/navegador:
  - Ao criar um arquivo .html, na primeira linha, digite html e depois tab, ou
    - Pressione ! e em seguida pressione a tecla tab

Na última aula… (1/4)

Vimos que existem os elementos <div>...</div> e <span>...</span> que não possuem interpretação visual, mas servem para agruparmos e estilizarmos outros elementos ou texto

<body>
  <div id="topo-da-pagina">  
    <h1>Coelhos Vampiros</h1>
    <h2>De onde vêm, onde vivem ...</h2>
  </div>
  <p>Sexta-feira, no Globo Repórter</p>
</body>

Na última aula… (2/4)

Entendemos o Box Model (modelo da caixa) que é como o navegador enxerga os elementos
- Há espaço para conteúdo , padding , border e margin

Na última aula… (3/4)

Quando se define width ou height para um elemento, reserva-se aquele espaço para o conteúdo
- O tamanho total do elemento pode ficar maior que isso
Podemos alterar isso, dizendo que o valor definido para width ou height deve caber conteúdo + padding + border :
```
.produto {
  width: 50px;
  box-sizing: border-box; /* o padrão é content-box */
}
```

Na última aula… (4/4)

É possível que um elemento interrompa uma flutuação à esquerda (left), à direita (right) ou em ambos os lados (both) usando clear
- A propriedade clear pode ser:
  - left ou right: interrompe apenas as flutuações à esquerda ou à direita
  - both: interrompe ambos lados
  - none: não interrompe (valor padrão)

Hoje veremos

Formatos de imagens
Vídeo e Áudio
Web fonts

Formatos de imagens

Usando diferentes formatos

JPEG
GIF
PNG
SVG

Imagens

Usamos a tag <img src="...">, que é um elemento void
- Ou seja, não tem conteúdo nem tag de fechamento

Formato geral

<img src="imagens/nome-do-arquivo.jpg" alt="Descrição bacana">

Referência na Mozilla Developer Network

Mas que formatos de imagens existem?

Imagens: formato

Existem vários formatos de imagens suportados por navegadores:

JPEG (ou JPG)

bom para fotos tiradas do mundo real, que possuem muita variação de cor. Não possui transparência

GIF

transparência de 1 bit e suporta animações de quadros
apenas 256 cores na imagem (muito pouco!!)

PNG

transparência de 8 bits e suporta mais cores que GIF
bom formato para imagens com pouca variação de cor

SVG

imagens vetoriais que não perdem qualidade se ampliadas

Transparências: PNG vs GIF

GIF: Um pixel é totalmente transparente ou totalmente opaco

Exemplo de transparência usando GIF

PNG: Opacidade pode variar entre 0 (transparente) e 255 (opaco), ou 0% e 100%

Exemplo de transparência usando PNG

Imagens vetoriais (e.g., SVG)

Imagem bitmap (JPG, GIF, PNG) original (pequena) e aumentada (fica “estourada”)

Exemplo de transparencia usando PNG

Imagem vetorial (SVG) original (pequena) e aumentada (mantém a qualidade)

Exemplo de transparencia usando PNG

Vídeo e Áudio

Usando elementos multimídia

Vídeo
Áudio

Formatos de Vídeo

Existem diversos formatos de arquivo:
- AVI (.avi)
- WebM (.webm)
- MP4 (.mp4, .m4v)
- Ogg (.ogg)
- Flash Video (.flv)
- ASF (.asf)
Nem todo navegador consegue exibir todos os formatos!
- Às vezes, devemos disponibilizar mais de um formato do vídeo

O elemento video

Para exibir um vídeo, existe um elemento similar ao de imagem:
```
<video src="videos/fendadobiquini.mp4"></video>
```
Resultado:
- O <video> abre e fecha (i.e., </video>)
- O elemento <vídeo> surgiu no HTML5
- O que estiver dentro da tag <video>...</video> é exibido caso o navegador não consiga exibi-lo
- Por padrão, não há controles para o vídeo

Querida, onde está o controle?

O atributo controls associa um conjunto de controles ao <video>

<video src="videos/fendadobiquini.mp4" controls></video>

Resultado:
- Repare que controls é um atributo que não requer um valor
  - Isso se chama atributo booleano

Opções (atributos) de video

controls

mostra um conjunto de controles

autoplay

começa a executar o vídeo assim que a página carregar

muted

tira o som

preload="..."

começa a baixar o vídeo assim que a página carrega
preload="none": não pré-carrega
preload="metadata": pré-carrega apenas metadados
preload="auto": pré-carrega todo o vídeo

loop="x"

quantas vezes o vídeo deve ser executado (0 = infinitas)

poster="http://..."

URL de uma imagem mostrada antes do vídeo ser executado
Também há os atributos width="x" e height="y"

Suporte dos navegadores por formato

Nem todos navegadores suportam os mesmos formatos de vídeo

Assim, usamos uma outra forma do elemento <video>:

<video width="320" height="240" controls>
  <source src="bob-esponja.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="bob-esponja.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="bob-esponja.ogv" type="video/ogg; codecs=theora,vorbis">
  Seu navegador não suporta o elemento video.
</video>

O navegador tentará abrir o vídeo bob-esponja.mp4 (i.e., o primeiro)
- se não conseguir, tentará o arquivo bob-esponja.webm (2º)
- caso ainda não consiga, tentará o bob-esponja.ogv (3º)
- se, mesmo assim, não conseguir, será exibido o texto

Suporte hoje (formatos de vídeo)

Audio

<audio> funciona exatamente da mesma forma que <video>
- Referência na MDN
Formatos mais comuns: MP3 e OGG

Exemplo:

<audio src="banjo-kazooie.mp3" controls loop="0"></audio>

Web Fonts

Usando fontes não-instaladas

Formatos de fontes
A regra @font-face
Google Fonts

Web Fonts

Motivação:
- Utilizar fontes que não estão instaladas no computador
Passos:
1. Escolher a fonte
2. Gerar todos os formatos para que funcione em todos os principais navegadores
  - .ttf
  - .otf
  - .eot
  - .woff
  - .woff2
3. Publicar a fonte na Internet (ou no seu próprio site)

Web Fonts (cont.)

Descrever a fonte no arquivo CSS usando @font-face {...}:

@font-face {
  font-family: "Emblema One";    /* dando um nome à fonte */
  src: url("fonts/EmblemaOne-Regular.woff2") format('woff2'), /* 1º formato */
       url("fonts/EmblemaOne-Regular.woff")  format('woff'),  /* 2º formato */
       url("fonts/EmblemaOne-Regular.ttf")   format('ttf');   /* 3º formato */
}

Usar a fonte:
```
h1 {
  font-family: "Emblema One", sans-serif;
}
```
- Sempre coloque uma segunda opção (e.g., sans-serif)

Formatos de fonte e os navegadores

WOFF2 é até 50% menor que WOFF
TTF é suportado em todos navegadores

Usando fontes “mais facinho”

Gerar os formatos de fonte necessários pode dar trabalho
Outra alternativa é usar sites que provêem diversas fontes para serem usadas
- Exemplos:
- Além de ter vários formatos das fontes, eles fornecem o código CSS

Utilização do Google Fonts

Layouts no Photoshop

Designers usam editores de imagens (como o Photoshop) para criar páginas web bonitas

O Photoshop gera uma imagem, que precisa ser “cortada” e transformada em uma página HTML e código CSS
O designer tipicamente cria um (a) layout e uma (b) especificação da página, para orientar o programador
1. (a) Também chamada de comp ou comprehensive layout
2. (b) Também chamada de specs

Quebra de linha (tag `<br>`)

A tag <br> funciona para quebrarmos linha em um parágrafo
- <br> vem de break line
Utilize-a para quebrar linhas, porém, não para separar parágrafos ou outros elementos
Exemplo: escrevendo um poema

Box Model (na MDN)

O navegador enxerga todo elemento de conteúdo como uma “caixa”
A “caixa” é formada por:
- Espaço do conteúdo
- Espaço de preenchimento (padding)
- Bordas (border)
- Espaço externo (margin)

Box Model: largura e altura

Quando definimos a largura (width) ou altura (height) de um elemento, estamos definindo o tamanho do conteúdo da caixa, e não da caixa inteira

Alterando o box model

As margens de um elemento formam um espaçamento externo e não contam espaço dentro da caixa.

É possível alterar o significado da width e height que damos a um elemento
usando a propriedade box-sizing :
- box-sizing: content-box (valor padrão)
  - width = largura do conteúdo
- box-sizing: border-box
  - width = conteúdo + padding + border
  - Esta forma é mais intuitiva :thumbsup: :thumbsup: :thumbsup:

Referências

Capítulos 5 e 6 do livro

cefet_front_end

CSS parte 3

Fontes, Multimídia

Dica para prova - erros comuns (1/4)

Endereço absoluto vs relativo

Dica para prova - erros comuns (2/4)

Dica para prova - erros comuns (3/4)

Dica para prova - erros comuns (4/4)

Na última aula… (1/4)

Na última aula… (2/4)

Na última aula… (3/4)

Na última aula… (4/4)

Hoje veremos

Formatos de imagens

Usando diferentes formatos

Imagens

Imagens: formato

Transparências: PNG vs GIF

Imagens vetoriais (e.g., SVG)

Vídeo e Áudio

Usando elementos multimídia

Formatos de Vídeo

O elemento video

Querida, onde está o controle?

Opções (atributos) de video

Suporte dos navegadores por formato

Suporte hoje (formatos de vídeo)

Audio

Web Fonts

Usando fontes não-instaladas

Web Fonts

Web Fonts (cont.)

Formatos de fonte e os navegadores

Usando fontes “mais facinho”

Utilização do Google Fonts

Layouts no Photoshop

Quebra de linha (tag <br>)

Box Model (na MDN)

Box Model: largura e altura

Alterando o box model

Referências

Quebra de linha (tag `<br>`)