cefet_web

HTML parte 3

Ferramentas, Metadados, Multimídia e DIV/SPAN

Na última aula… (1/4)

Na última aula… (2/4)

Na última aula… (3/4)

Na última aula… (4/4)

Hoje veremos

  1. Editores de texto
  2. Metadados das páginas
  3. Elementos Multimídia
  4. Elementos DIV e SPAN

Editores de texto

Ferramentas para edição e melhoria da produtividade

Como ser mais produtivo

Sugestão do professor: VS Code 🌟

Tela do VS Code

Abrindo uma pasta inteira

Digitando sem erros

Atualização automática ao salvar

Metadados

Informação sobre a página

Meta tags

<html>
  <head>
    <meta charset="utf-8">
    <title>Aprendendo sobre as meta tags</title>
    <meta name="author" content="Flávio">
    <meta name="description" content="Textão explicativo">
    <meta name="keywords" content="web,css,html,js">
    ⋮
  </head>

Meta tag: keywords e description

  1. <meta name="description" content="...">
    • Sumário do conteúdo da página
    • Navegador pode usar como a descrição da página quando adicionada aos favoritos 
      <meta name="description" 
    content="Meet the global face of [...]">
      • Trecho de ign.com

Meta tags: author e robots

Meta tag: refresh

Meta tag: viewport

Meta tag: theme-color e color-scheme

    • Sugere cor predominante
    • Navegadores mobile podem colorir o entorno

Compartilhamento em mídias sociais

  1. ::: figure

    <meta property="twitter:card" content="summary">
<meta property="twitter:title" 
      content="Programação Web">
<meta property="twitter:description"
      content="Slides...">
<meta property="twitter:image" 
      content="https://site.com/capa-1x1.webp">
<meta property="twitter:image:alt"
      content="Capa dos slides...">
    Twitter

    :::

Rich Snippets em buscadores (visitar exemplo)

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "Faye Small Leather Shoulder Bag",
  "category": "Handbags",
  "brand": {
      "@type": "Brand", "name": "Chloé"
  },
  "image": "https://images.bloomingdalesassets...",
  "productID": "1273751",
  "url": "https://www.bloomingdales.com/shop/...",
  "description": "Shop Faye Small Leather...",
  "offers": [
    {
      "@type": "Offer",
      "itemOffered": {
        "@type": "Product",
        "color": "Black/Gold/Silver"
      },
      "price": "1450.00", "priceCurrency": "USD",
      "url": "https://www.bloomingdales.com/...",
      "availability": "http://schema.org/InStock"
    }
  ],

Codificação Unicode e UTF-8

Codificação em uma página web

  1. Uma página web com caracteres não reconhecidos devido a um problema de codificação ⬅️ Caso haja divergência de codificação, alguns caracteres podem não aparecer corretamente

DOCTYPE - Versão do HTML

Valores do DOCTYPE

HTML 4.01 ~ ```html <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>


XHTML 1.1
~ ```html
  <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5 ~ ```html <!DOCTYPE html>


Hoje em dia usamos sempre HTML5 😉 <!-- {.flex-align-center} -->

---
<!-- {"layout": "section-header", "hash": "multimidia"} -->
# Multimídia
## Elementos não-textuais

- Imagem
- Vídeo
- Áudio
<!-- {ul:.content} -->

---
## Imagens

- Há três _tags_ relacionadas a imagens:
  1. **`<img>`**
  1. `<figure>`
  1. `<picture>` <!-- {ol:.multi-column-list-3} -->
- A tag `<img>` (mais tradicional e comum) é um **elemento _void_**
  - Ou seja, não tem conteúdo nem tag de fechamento
  - Formato geral:
    ```html
    <img src="imagens/nome-do-arquivo.jpg" alt="Descrição bacana">
    ```
    - [Referência na Mozilla Developer Network][mdn-img]
- Mas que **formatos** <!-- {.underline.upon-activation} --> de imagens podem ser usados?

[mdn-img]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

---
## Imagens: **formato** <small>(1/2)</small>

- Existem vários formatos de imagens suportados por navegadores: <!-- {.bullet} -->

**JPEG** (ou JPG) <!-- {strong:.alternate-color} -->  <!-- {dl:.bulleted} -->
~ bom para **fotos** tiradas do mundo real, que possuem muita variação de cor. Não possui
  transparência

**GIF** <!-- {strong:.alternate-color} -->
~ **transparência** de 1 bit e suporta **animações** de quadros
~ apenas 256 cores na imagem (muito pouco!!)

**PNG** <!-- {strong:.alternate-color} -->
~ **transparência** de 8 bits e suporta **mais cores** que GIF
~ bom formato para imagens com pouca variação de cor

**SVG** <!-- {strong:.alternate-color} -->
~ imagens **vetoriais** que não perdem qualidade se **ampliadas**

**WebP AVIF APNG**
~ recentes, veremos mais adiante

*[JPEG]: Joint Photographic Experts Group
*[GIF]: Graphics Interchange Format
*[PNG]: Portable Network Graphics
*[SVG]: Scalable Vector Graphics
*[WebP]: Web Picture Format
*[AVIF]: AV1 Image File Format
*[APNG]: Animated PNG

---
<!-- {"layout": "2-column-content-zigzag"} -->
## Transparência: PNG _vs_ GIF

**GIF** <!-- {dl:.width-20} -->
~ Um pixel é totalmente transparente ou totalmente opaco

::: figure .no-margin
![Exemplo de transparência usando GIF](/cefet_web/images/gif-transparency-2.gif) <!-- {p:.center-aligned} -->
![Exemplo de transparência usando GIF](/cefet_web/images/gif-transparency.gif)
:::

**PNG** <!-- {dl:.width-20} -->
~ Opacidade pode variar entre 0 (transparente) e 255 (opaco), ou
0% e 100%

::: figure .no-margin
![Exemplo de transparência usando PNG](/cefet_web/images/png-transparency-2.png) <!-- {p:.center-aligned} -->
![Exemplo de transparência usando PNG](/cefet_web/images/png-transparency.png)
:::

---
<!-- {"layout": "2-column-content-zigzag"} -->
## Imagens **vetoriais** (_e.g._, SVG)

Imagem _bitmap_ (JPG, GIF, PNG) original (pequena) e aumentada
(fica "estourada")

::: figure .no-margin
![Exemplo de transparencia usando PNG](/cefet_web/images/imagem-bitmap.png) <!-- {p:.center-aligned} -->
![Exemplo de transparencia usando PNG](/cefet_web/images/imagem-bitmap.png)<!-- {style="width: 100px"} -->
:::

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

::: figure .no-margin
![Exemplo de transparencia usando PNG](/cefet_web/images/imagem-vetorial.svg) <!-- {p:.center-aligned} -->
![Exemplo de transparencia usando PNG](/cefet_web/images/imagem-vetorial.svg)<!-- { style="width: 100px"} -->
:::

---
## Imagens: **formato** (2/2)

**APNG**  <!-- {dl:.width-10.full-width style="margin-bottom: 0.5em"} -->
~ Semelhante ao formato PNG, mas com suporte a animações
~ Melhor que PNG e GIF, menos eficiente que AVIF e WebP

**WebP**
~ Melhor que PNG e JPG, suporte a animação (sem rend. progres.)
~ ~26% menor que PNG, ~25-35% menor que JPG ([comparações][comparacoes-webp])

**AVIF**
~ Similar a WebP, mas ainda melhor (~50% menor que JPG)
~ Sem suporte para renderização progressiva

- <!-- {ul:.layout-split-3.no-padding.no-bullets.no-margin} -->
  <div class="caniuse push-right" data-feature="apng"></div> 
- <div class="caniuse push-right" data-feature="webp"></div> 
- <div class="caniuse push-right" data-feature="avif"></div> 

[comparacoes-webp]: https://developers.google.com/speed/webp/gallery1

*[WebP]: Web Picture Format
*[AVIF]: AV1 Image File Format
*[APNG]: Animated PNG

---
<!-- {"layout": "2-column-content", "slideStyles": {"grid-template-columns": "1fr auto", "grid-template-rows": "auto auto 1fr"}, "hash": "elemento-picture"} -->
## Elemento `<picture></picture>` <small>(1/2)</small>

```html
<picture>
  <source srcset="philosoraptor.avif" type="image/avif">
  <source srcset="philosoraptor.webp" type="image/webp">
  <img src="philosoraptor.jpg" id="retrato" alt="...">
</picture>

::: result

Um raptor filósofo

:::

Elemento <picture></picture> (2/2)

Elemento <figure></figure>

<figure>
  <figcaption>Filosofia</figcaption>
  <img src="philosoraptor.jpg">
</figure>
<figure>
  <p>Cavei cavei cavei<br>
     Não é um poema<br>
     Mas é profundo.
  </p>
  <figcaption>Ademar</figcaption>
</figure>

::: result .layout-split-2 justify-content: space-around;

Filosofia

Cavei cavei cavei
Não é um poema
Mas é profundo.

Ademar

:::

Vídeo

O elemento <video></video>

Querida, onde está o controle?

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 deve ser executado (0 = infinitas)

poster="http://..." ~ imagem mostrada antes do vídeo ser executado

autopictureinpicture ~ coloca em modo PiP quando muda de aba

Suporte dos navegadores por formato

Suporte hoje (formatos de vídeo)

Áudio

div e span

Agrupando outros elementos HTML

#comofaz?

  1. E se quisermos estilizar de forma que o título e subtítulo ficassem com o mesmo fundo…

1ª tentativa

h1, h2 {
  background: url(coelho.png) #ff6d6d;
  background-repeat: no-repeat;
  background-position: right top;
}

O jeito certo :star2:

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


#topo-da-pagina {
  background: url(coelho.png) #ff6d6d;
  background-repeat: no-repeat;
  background-position: right top;
}

Div (na MDN)

É um mecanismo genérico que nos permite criar uma estrutura ou agrupamento de elementos quando não há outro elemento HTML mais apropriado, e ela pode ser estilizada usando CSS ou manipulada com JavaScript Containers genéricos na W3C

Div (exemplo)

Span (na MDN)

::: figure .figure-slides.no-margin.flex-align-center.invert-colors-dark-mode :::

Referências

  1. Capítulos 9 (parcial), 10 e 11 (parcial) do livro
  2. Mozilla Developer Network (MDN)