chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Adicionar um texto alternativo em imagens para acessibilidade de deficientes visuais
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 16628
|
||||
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você provavelmente já viu um atributo `alt` em uma tag `img` em outros desafios. O texto do atributo `alt` descreve o conteúdo da imagem, dando a ela um texto alternativo. Um atributo `alt` ajuda nos casos onde a imagem não carrega ou não pode ser vista pelo usuário. Os mecanismos de busca também a utilizam para compreender o que uma imagem contém para a incluir nos resultados de pesquisa. Aqui está um exemplo:
|
||||
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
Pessoas com deficiências visuais dependem de leitores de tela para converter conteúdo da web em uma interface de áudio. Eles não vão obter informações se elas forem apresentadas apenas visualmente. Para imagens, os leitores de tela podem acessar o atributo `alt` e ler seu conteúdo para fornecer informações importantes.
|
||||
|
||||
Um bom texto no atributo `alt` fornece ao leitor uma breve descrição da imagem. Você sempre deve incluir um atributo `alt` na sua imagem. Segundo a especificação do HTML5, isso agora é considerado obrigatório.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat é tanto um ninja do código quanto um ninja de verdade. Ele está construindo um site para compartilhar seu conhecimento. A foto de perfil que ele quer usar mostra suas habilidades e deve ser apreciada por todos os visitantes do site. Adicione um atributo `alt` na tag `img` que explique que o Camper Cat está fazendo caratê. (O `src` da imagem não aponta para nenhum arquivo, então você deve ver o texto do `alt` na tela.)
|
||||
|
||||
# --hints--
|
||||
|
||||
A tag `img` deve ter um atributo `alt` e o texto dele não deve estar vazio.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Adicionar um seletor de data acessível
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||
forumTopicId: 301008
|
||||
dashedName: add-an-accessible-date-picker
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Formulários frequentemente incluem o campo `input`, que pode ser usado para criar diferentes tipos de inputs no formulário. O atributo `type` nesse elemento indica qual tipo de elemento `input` deve ser criado.
|
||||
|
||||
Você deve ter notado os tipos de input `text` e `submit` em desafios anteriores. O HTML5 introduziu uma opção para especificar um campo `date`. Dependendo do suporte do navegador, o seletor de data aparece dentro do `input` quando este está em foco, o que deixa o preenchimento do formulário mais fácil para todos os usuários.
|
||||
|
||||
Em navegadores antigos, o tipo será convertido para o padrão `text`, o que ajuda a mostrar aos usuários o formato da data esperado no texto da `label` ou do `placeholder`.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<label for="input1">Enter a date:</label>
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat está organizando um campeonato de Mortal Kombat e quer perguntar para os competidores qual a melhor data. Adicione uma tag `input` com um atributo `type` com o valor `date`, um atributo `id` com o valor `pickdate` e um atributo `name` com o valor `date`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve adicionar uma tag `input` para o campo seletor de data.
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
A tag `input` deve ter um atributo `type` com o valor `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
A tag `input` deve ter um atributo `id` com o valor `pickdate`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
A tag `input` deve ter um atributo `name` com o valor `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: >-
|
||||
Evitar problemas de daltonismo escolhendo cuidadosamente as cores informativas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
dashedName: >-
|
||||
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Existem várias formas de daltonismo. Elas variam de uma sensibilidade reduzida de uma frequência de luz até a incapacidade de ver qualquer cor. A forma mais comum é uma sensibilidade reduzida em detectar cores verdes.
|
||||
|
||||
Por exemplo, se duas cores verdes semelhantes são a cor de primeiro plano e de fundo do seu conteúdo, um usuário daltônico pode não ser capaz de distingui-las. Cores parecidas são vizinhas no círculo cromático e essas combinações devem ser evitadas quando se está transmitindo informações importantes.
|
||||
|
||||
**Observação:** algumas ferramentas de seletores de cores on-line incluem simuladores visuais de como as cores aparecem para diferentes tipos de daltonismo. São ótimos recursos que complementam as calculadoras de verificação de contraste.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat está testando diferentes estilos para um botão importante, mas `background-color` em amarelo (`#FFFF33`) e `color` em verde (`#33FF33`) são cores próximas e virtualmente indistinguíveis para alguns usuários daltônicos. (O brilho dessas duas cores é semelhante, o que faz com que essa combinação não passe no teste de taxa de contraste). Mude a propriedade `color` do texto para um azul escuro (`#003366`) para resolver os dois problemas.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve mudar a propriedade `color` do texto do `button` para um azul escuro.
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Evitar problemas de daltonismo usando o contraste suficiente
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
forumTopicId: 301012
|
||||
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A cor é uma grande parte do design visual, mas a sua utilização introduz duas questões de acessibilidade. Primeiro, a cor, por si só, não deve ser usada como a única maneira de transmitir informações importantes, pois usuários de leitores de tela não vão vê-la. Em segundo lugar, as cores de fundo e de primeiro plano precisam ter contraste suficiente para que os usuários daltônicos possam distingui-las.
|
||||
|
||||
Os desafios anteriores abordaram alternativas textuais para resolver o primeiro problema. O último desafio introduziu ferramentas de verificação de contraste para ajudar com o segundo. A proporção de contraste recomendada pelas WCAG, de 4.5:1, aplica-se para uso de cores, bem como de combinações da escala de cinza.
|
||||
|
||||
Usuários daltônicos têm problemas para distinguir algumas cores - geralmente em tonalidade mas, às vezes, também em luz. Lembre-se que a relação de contraste é calculada usando os valores da luminosidade das cores de primeiro plano e de fundo.
|
||||
|
||||
Na prática, a relação 4.5:1 de contraste pode ser alcançada adicionando preto à cor mais escura e adicionando branco à cor mais clara. As tonalidades mais escuras do círculo cromático são consideradas a partir de azuis, violetas, magentas e vermelhos, enquanto que tonalidades claras são laranjas, amarelos, verdes e verdes-azulados.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat está experimentando usar cores no texto e no fundo do seu blog, mas sua combinação atual de verde para `background-color` e marrom para `color` tem uma relação de contraste de 2.5:1. Você pode facilmente ajustar a luz das cores, pois ele as declarou usando a propriedade CSS `hsl()` (que significa hue – tonalidade –, saturation – saturação –, lightness – luz –). Para isso, altere o terceiro argumento. Aumente o valor da luz em `background-color` de 35% para 55% e diminua o valor da luz em `color` de 20% para 15%. Isso melhora o contraste em 5.9:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve apenas mudar o valor da luz para a propriedade `color` do texto para o valor 15%.
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
O código deve mudar apenas o valor do brilho na propriedade `background-color` para o valor de 55%.
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Dar significado aos links usando textos descritivos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os usuários de leitores de tela têm várias opções para o tipo de conteúdo que o seu dispositivo lê. Essas opções incluem pular para (ou sobre) elementos de referência, pular para o conteúdo principal ou obter um resumo da página a partir dos títulos. Outra opção é apenas ouvir os links disponíveis na pagina.
|
||||
|
||||
Leitores de tela fazem isso lendo o texto do link, ou o que estiver entre as tags (`a`). Ter uma lista de links com textos do tipo "clique aqui" ou "leia mais" não ajuda muito. Em vez disso, você deve usar um texto pequeno, mas descritivo, entre as tags `a` para fornecer mais significado para os usuários.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O texto do link que o Camper Cat está usando não é muito descritivo sem um contexto. Mova a tag (`a`) para que ela envolva a frase `information about batteries` ao invés de `Click here`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seu código deve mover a tag `a` das palavras `Click here` para que envolva as palavras `information about batteries`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/^(information about batteries)$/g)
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `a` deve ter um atributo `href` com o valor de uma string vazia `""`.
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
O elemento `a` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Melhore a acessibilidade de áudios com o elemento audio
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
forumTopicId: 301014
|
||||
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O elemento `audio` do HTML fornece significado semântico quando é utilizado para envolver conteúdo relacionado a reprodução de áudio. O conteúdo do áudio também precisa de uma alternativa em texto para ser acessível a pessoas surdas ou com deficiência auditiva. Isso pode ser feito com um texto próximo na página ou um link para uma transcrição.
|
||||
|
||||
A tag `audio` suporta o atributo `controls`. Este atributo exibe os controles de reprodução, pausa e outras funcionalidades, além de oferecer suporte ao teclado. Este é um atributo booleano, o que significa que não precisa de um valor. Sua presença na tag ativa a configuração.
|
||||
|
||||
Um exemplo:
|
||||
|
||||
```html
|
||||
<audio id="meowClip" controls>
|
||||
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||
<source src="audio/meow.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
**Observação:** os conteúdos multimídia geralmente são compostos por partes visuais e auditivas. É preciso legendas sincronizadas e uma transcrição para que usuários com deficiência visual e/ou auditiva possam acessá-lo. Geralmente, um desenvolvedor Web não é responsável por criar as legendas ou transcrições, mas precisa saber como incluí-las.
|
||||
|
||||
# --instructions--
|
||||
|
||||
É hora de fazer uma pausa com o Camper Cat e conhecer o colega Zersiax (@zersiax), um campeão de acessibilidade e também usuário de leitor de tela. Para ouvir um clipe de seu leitor de tela em ação, adicione um elemento `audio` após o elemento `p`. Inclua o atributo `controls`. Em seguida, coloque uma tag `source` dentro da tag `audio` com o atributo `src` definido como `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e o atributo `type` definido como `"audio/mpeg"`.
|
||||
|
||||
**Observação:** o clipe de áudio pode parecer rápido e difícil de entender, mas é uma velocidade normal para usuários de leitores de tela.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
O elemento `audio` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/audio>/g).length === 1 &&
|
||||
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||
);
|
||||
```
|
||||
|
||||
A tag `audio` deve ter o atributo `controls`.
|
||||
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
O código deve ter uma tag `source`.
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
A tag `source` deve estar dentro das tags `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
O valor do atributo `src` na tag `source` deve ser exatamente igual ao link nas instruções.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('source').attr('src') ===
|
||||
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||
);
|
||||
```
|
||||
|
||||
O código deve incluir um atributo `type` na tag `source` com um o valor de "audio/mpeg".
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Melhore a acessibilidade de gráficos com o elemento figure
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
forumTopicId: 301015
|
||||
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML5 introduziu o elemento `figure`, juntamente com o `figcaption`. Usados juntos, esses elementos envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto de sua legenda. Isso aumenta a acessibilidade em duas partes, agrupando semanticamente o conteúdo relacionado e fornecendo uma alternativa textual que explica a imagem contida em `figure`.
|
||||
|
||||
Para a visualização de dados na forma de gráficos, a legenda pode ser usada para registrar de modo sucinto as tendências ou conclusões para usuários com deficiência visual. Outro desafio abrange como mover uma versão dos dados contidos em uma tabela de um gráfico para fora da tela (usando CSS) para usuários de leitores de tela.
|
||||
|
||||
Um exemplo: observe que o elemento `figcaption` vai dentro da tag `figure` e pode ser combinada com outros elementos:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||
<br>
|
||||
<figcaption>
|
||||
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat está trabalhando a sério na criação de um gráfico de barras empilhadas que mostra o tempo por semana que ele deve passar nos treinamentos de furtividade, combate e armas. Ajude-o a estruturar melhor sua página alterando a tag `div` para a tag `figure`. Altere também a tag `p`, que envolve a legenda, para uma tag `figcaption`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
O código deve ter uma tag `figcaption`.
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `p`.
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
A tag `figcaption` deve ser filha da tag `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
O elemento `figure` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/figure>/g) &&
|
||||
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Melhorar a acessibilidade de campos de formulário com o elemento label
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
forumTopicId: 301016
|
||||
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Melhorar a acessibilidade com a marcação semântica HTML se aplica ao uso de nomes de tag e atributos apropriados. Os desafios a seguir mostram alguns cenários importantes quanto ao uso de atributos em formulários.
|
||||
|
||||
A tag `label` envolve o texto que será associado a um campo de input no formulário. Isso dá significado ao campo de input e torna o formulário mais legível. O atributo `for` em uma tag `label` associa explicitamente esse `label` ao campo de input no formulário e é usado por leitores de tela.
|
||||
|
||||
Você aprendeu sobre botões de opção (radio buttons) e seus rótulos (labels) em uma lição na seção HTML básico. Naquela lição, envolvemos o elemento de opção dentro de um elemento `label` junto com o texto do rótulo para tornar o texto clicável. Outra maneira de conseguir isso é usando o atributo `for`, conforme explicado nesta lição.
|
||||
|
||||
O valor do atributo `for` deve ser igual ao valor do atributo `id` contido no campo de input. Exemplo:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat espera que muita gente se interesse pelas postagens em seu blog e deseja incluir um formulário de inscrição por e-mail. Adicione um atributo `for` no `label` do e-mail, cujo valor corresponda ao valor do `id` do elemento `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter um atributo `for` na tag `label` que não seja vazio.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
O valor do atributo `for` deve corresponder ao valor do `id` no `input` de e-mail.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Melhore a legibilidade com textos de alto contraste
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
forumTopicId: 301017
|
||||
dashedName: improve-readability-with-high-contrast-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O baixo contraste entre as cores do primeiro plano e do fundo pode dificultar a leitura do texto. Contraste suficiente melhora a legibilidade do seu conteúdo, mas o que significa "suficiente"?
|
||||
|
||||
As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) recomendam uma relação de contraste de, pelo menos, 4,5 para 1 para texto normal. A proporção é calculada comparando os valores de luminância (brilho) entre duas cores. Isso varia de 1: 1, para a mesma cor (ausência de contraste), até 21: 1 para branco em contraste com preto, o mais forte. Existem muitas ferramentas de verificação de contraste disponíveis on-line que calculam essa relação para você.
|
||||
|
||||
# --instructions--
|
||||
|
||||
A escolha do Camper Cat de texto cinza claro em um fundo branco para sua postagem recente no blog tem uma relação de contraste de 1,5:1, dificultando a leitura. Altere a propriedade `color` do texto de um cinza claro (`#D3D3D3`) para um cinza mais escuro (`#636363`) para melhorar a taxa de contraste para 6:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve alterar a propriedade `color` do texto dentro do `body` para um cinza mais escuro.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
O código não deve alterar a propriedade `background-color` do `body`.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Saltar para o conteúdo diretamente usando o elemento main
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
forumTopicId: 301018
|
||||
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML5 introduziu uma série de novos elementos que fornecem aos desenvolvedores mais opções, ao mesmo tempo em que incorporam recursos de acessibilidade. Essas tags incluem `main`, `header`, `footer`, `nav`, `article` e `section`, entre outros.
|
||||
|
||||
Por padrão, um navegador torna esses elementos semelhantes ao elemento `div`. No entanto, usá-los onde eles forem apropriados fornece um significado adicional ao código. O nome da tag, sozinho, pode indicar o tipo de informação que esta contém, o que adiciona significado semântico a esse conteúdo. As tecnologias assistivas podem acessar essas informações para fornecer um resumo melhor da página ou opções de navegação para seus usuários.
|
||||
|
||||
O elemento `main` é usado para envolver (você adivinhou) o conteúdo principal, e deve haver apenas um por página. O objetivo é envolver as informações relacionadas ao tópico central da página. Ele não tem como objetivo incluir itens que se repetem nas páginas, como links de navegação ou banners.
|
||||
|
||||
A tag `main` também possui um recurso de referência incorporado que a tecnologia assistiva pode usar para navegar rapidamente até o conteúdo principal. Se você já viu um link "Ir para o conteúdo principal" no topo de uma página, usar a tag `main` automaticamente fornece essa funcionalidade aos dispositivos assistivos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat tem grandes ideias para a página de armas ninja que ele criou. Ajude-o a configurar o código adicionando tags de abertura e fechamento `main` entre o `header` e o `footer` (abordados em outros desafios). Mantenha a tag `main` vazia por enquanto.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
A tag `main` deve estar entre a tag de fechamento `header` e a tag de abertura `footer`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Saber quando o texto alternativo (alt) deve ser deixado em branco
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
dashedName: know-when-alt-text-should-be-left-blank
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
No último desafio, você aprendeu que incluir o atributo `alt` ao usar tags `img` é obrigatório. No entanto, às vezes, as imagens são agrupadas com uma legenda que já as descreve ou são usadas apenas para decoração. Nestes casos, o texto `alt` pode parecer redundante ou desnecessário.
|
||||
|
||||
Em situações em que uma imagem já é explicada com conteúdo de texto ou não adiciona significado a uma página, o `img` ainda precisa de um atributo `alt`, mas pode ser definido como uma string vazia. Exemplo:
|
||||
|
||||
```html
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
As imagens de fundo também costumam ser classificadas como "decorativas". No entanto, elas são normalmente aplicadas usando CSS e, portanto, não fazem parte do processo de leitura de tela por tecnologias assistivas.
|
||||
|
||||
**Observação:** para imagens com legenda, você ainda pode querer incluir o texto `alt`, pois ajuda os mecanismos de busca a catalogar o conteúdo da imagem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat codificou o esqueleto da página do blog do site dele. Ele está planejando adicionar uma quebra visual entre os dois artigos com uma imagem decorativa de uma espada de samurai. Adicione o atributo `alt` à tag `img` e defina-o como uma string vazia. (Observe que o `src` da imagem não aponta para um arquivo real - não se preocupe se não houver espadas aparecendo na tela.)
|
||||
|
||||
# --hints--
|
||||
|
||||
A tag `img` deve ter um atributo `alt`.
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
O atributo `alt` deve ser definido como uma string vazia.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Tornar elementos visíveis apenas para leitores de tela usando CSS personalizado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||
forumTopicId: 301020
|
||||
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você notou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso mostra a importância de um esboço lógico do documento e do uso de tags semanticamente significativas em torno de seu conteúdo antes de introduzir o aspecto do design visual.
|
||||
|
||||
No entanto, a magia do CSS também pode melhorar a acessibilidade da página quando você deseja ocultar visualmente o conteúdo destinado apenas a leitores de tela. Isso acontece quando as informações estão em formato visual (como um gráfico), mas os usuários de leitores de tela precisam de uma apresentação alternativa (como uma tabela) para acessar os dados. O CSS pode ser usado para posicionar os elementos destinados somente ao leitor de tela fora da área visual da janela do navegador.
|
||||
|
||||
Um exemplo de código CSS que realiza isso:
|
||||
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
**Observação:** as abordagens com CSS a seguir NÃO farão a mesma coisa:
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> ou <code>visibility: hidden;</code> oculta o conteúdo para todos, incluindo usuários de leitores de tela</li>
|
||||
<li>Valores de zero para tamanhos de pixel, como <code>width: 0px; height: 0px;</code> removem esse elemento do fluxo do seu documento, o que significa que os leitores de tela vão ignorá-lo.</li>
|
||||
</ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat criou um gráfico de barras empilhadas muito legal para a página de treinamento e colocou os dados em uma tabela para os usuários com deficiência visual. A tabela já tem uma classe `sr-only`, mas o código CSS ainda não foi criado. Dê a `position` um valor `absolute`, a `left` um valor `-10000px` e a `width` e `height` o valor `1px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve definir a propriedade `position` da classe `sr-only` com um valor de `absolute`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
O código deve definir a propriedade `left` da classe `sr-only` com um valor de `-10000px`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
O código deve definir a propriedade `width` da classe `sr-only` com um valor de `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
O código deve definir a propriedade `height` da classe `sr-only` com um valor de `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Faça com que os links fiquem navegáveis com chaves de acesso HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 301021
|
||||
dashedName: make-links-navigable-with-html-access-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML oferece o atributo `accesskey` para especificar uma tecla de atalho para ativar ou levar o foco para um elemento. Usar o atributo `accesskey` pode tornar a navegação mais eficiente para aqueles que usam somente o teclado.
|
||||
|
||||
O HTML5 permite que este atributo seja usado em qualquer elemento, mas ele é particularmente útil quando usado com elementos interativos. Isso inclui links, botões e inputs de formulário.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat quer que os links em torno dos títulos dos dois artigos do blog tenham atalhos de teclado para que os usuários de seu site possam navegar rapidamente para a história completa. Adicione um atributo `accesskey` a ambos os links e defina o primeiro como `g` (para Garfield) e o segundo como `c` (para Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve adicionar um atributo `accesskey` à tag `a` com o `id` de `first`.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
O código deve adicionar um atributo `accesskey` à tag `a` com o `id` de `second`.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
O código deve definir o atributo `accesskey` na tag `a` com o `id` de `first` para `g`. Observe que letras maiúsculas e minúsculas diferem.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
O código deve definir o atributo `accesskey` na tag `a` com o `id` de `second` para `c`. Observe que maiúsculas e minúsculas diferem.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Facilitar a navegação do leitor de tela com o ponto de referência footer
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Semelhante a `header` e `nav`, o elemento `footer` possui um recurso de ponto de referência integrado que permite que dispositivos auxiliares naveguem rapidamente até ele. Essa tag é usada principalmente para conter informações de direitos autorais ou links para documentos relacionados, que geralmente ficam na parte inferior de uma página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
A página de treinamento do Camper Cat está avançando bem. Altere a `div` que ele usou para envolver suas informações de copyright na parte inferior da página para o elemento `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `footer`.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
O código deve ter uma tag de abertura e fechamento `footer`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Facilite a navegação do leitor de tela com o ponto de referência header
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
forumTopicId: 301023
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O próximo elemento HTML5 que adiciona significado semântico e melhora a acessibilidade é a tag `header`. Ela é usada para envolver informações introdutórias ou links de navegação e funciona bem em torno do conteúdo que é repetido no topo em várias páginas.
|
||||
|
||||
O elemento `header` compartilha o recurso de referência incorporado que você viu em `main`, permitindo que tecnologias de assistência naveguem rapidamente até esse conteúdo.
|
||||
|
||||
**Observação: ** o elemento `header` deve ser usado na tag `body` do seu documento HTML. É diferente do elemento `head`, que contém o título da página, metadados, etc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat está escrevendo ótimos artigos sobre treinamento de ninjas e deseja adicionar uma página para eles no site. Altere a `div` superior que atualmente contém o `h1` para uma tag `header`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `header`.
|
||||
|
||||
```js
|
||||
assert($('header').length == 1);
|
||||
```
|
||||
|
||||
A tag `header` deve envolver o `h1`.
|
||||
|
||||
```js
|
||||
assert($('header').children('h1').length == 1);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
O elemento `header` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/header>/g) &&
|
||||
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Facilite a navegação do leitor de tela com o ponto de referência nav
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
forumTopicId: 301024
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O elemento `nav` é outro item HTML5 com o recurso de ponto de referência integrado para facilitar a navegação do leitor de tela. Essa tag destina-se a envolver os principais links de navegação em sua página.
|
||||
|
||||
Se os mesmos links se repetirem tanto no cabeçalho quanto no rodapé da página, não é necessário marcar os links do rodapé com uma tag `nav` também. Usar um `footer` (abordado no próximo desafio) é suficiente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat incluiu links de navegação no topo da página de treinamento, mas os envolveu em uma `div`. Altere a `div` para uma tag `nav` para melhorar a acessibilidade da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `nav`.
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
A tag `nav` deve envolver o `ul` e os itens de lista.
|
||||
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
O elemento `nav` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/nav>/g) &&
|
||||
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Padronize o tempo com o atributo datetime no HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando com o tema da data, o HTML5 também introduziu o elemento `time` junto com um atributo `datetime` para padronizar os tempos de data e hora. O elemento `time` é um elemento inline que pode envolver a data ou a hora na página. Um atributo `datetime` mantém um formato válido dessa data. O valor atribuído a este atributo será acessado por dispositivos assistivos. Isso ajuda a evitar confusão ao declarar uma versão padronizada de um horário, mesmo que seja escrito de maneira informal ou coloquial no texto.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Os resultados da pesquisa do jogo Mortal Kombat do Camper Cat chegaram! Envolva uma tag `time` em torno do texto `Thursday, September 15<sup>th</sup>` e adicione um atributo `datetime` definido com o valor de `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter um elemento `p` que inclui o texto `Thank you to everyone for responding to Master Camper Cat's survey.` e inclua um elemento `time`.
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
```
|
||||
|
||||
A tag `time` que você adicionou deve estar ao redor do texto `Thursday, September 15<sup>th</sup>`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
timeElement.length &&
|
||||
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
A tag `time` que você adicionou deve ter um atributo `datetime` que não pode estar vazio.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr.length);
|
||||
```
|
||||
|
||||
O atributo `datetime` adicionado deve ser um conjunto de valores no formato `2016-09-15`.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = $("article > p")
|
||||
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||
const datetimeAttr = $(timeElement).attr("datetime");
|
||||
</script>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Usar títulos para criar relações hierárquicas de conteúdo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Títulos (elementos `h1` até `h6`) são tags que ajudam a fornecer estrutura e rotulagem ao seu conteúdo. Os leitores de tela podem ser configurados para ler apenas os cabeçalhos de uma página para que o usuário obtenha um resumo. Isso significa que é importante que as tags de título em seu código tenham significado semântico e se relacionem umas com as outras. Também é importante que não sejam escolhidas apenas pelo tamanho da fonte que essas tags fornecem.
|
||||
|
||||
*Significado semântico* significa que a tag que você usa em torno do conteúdo (do texto) indica o tipo de informação que a tag contém.
|
||||
|
||||
Se você estivesse escrevendo um artigo com uma introdução, um corpo e uma conclusão, não faria muito sentido colocar a conclusão como uma subseção do corpo. A conclusão deve ter sua própria seção. Da mesma forma, as tags de título em uma página da web precisam estar em ordem e indicar as relações hierárquicas de seu conteúdo.
|
||||
|
||||
Títulos com classificação igual (ou superior) iniciam novas seções, títulos com classificação inferior começam subseções dentro da seção pai.
|
||||
|
||||
Por exemplo: uma página com um elemento `h2` seguido por várias subseções rotuladas com tags `h4` confundiria um usuário de leitor de tela. Como o HTML5 oferece 6 opções de títulos, pode ser tentador usar uma dessas tags apenas pelo tamanho da fonte que elas oferecem, mas você pode usar o CSS para alterar estes tamanhos.
|
||||
|
||||
Uma última observação, cada página deve sempre ter um (e apenas um) elemento `h1`, que é o assunto principal do seu conteúdo. Este e outros cabeçalhos são usados em parte pelos mecanismos de pesquisa para entender o tópico da página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat quer uma página no site dedicada a como se tornar um ninja. Ajude-o a corrigir os títulos para que o código tenha significado semântico e mostre as relações pai-filho de forma adequada entre as seções. Altere todas as tags `h5` para o nível de cabeçalho apropriado para indicar que são subseções das tags `h2`. Use a tag `h3` para esse propósito.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter 6 tags `h3`.
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
O código deve ter 6 tags de fechamento `h3`.
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `h5`.
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag de fechamento `h5`.
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex para adicionar foco a um elemento usando o teclado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O atributo HTML `tabindex` tem três funções distintas relacionadas ao foco de um elemento utilizando o teclado. Quando ele está em uma tag, indica que o elemento pode receber foco. O valor (um número inteiro positivo, negativo ou zero) determina o comportamento.
|
||||
|
||||
Certos elementos, como links e inputs de formulário, recebem foco automaticamente quando um usuário aperta a tecla tab em uma página. O foco acompanha a ordem em que os elementos aparecem na tela. Essa mesma funcionalidade pode ser dada a outros elementos, como `div`, `span` e `p`, colocando um atributo `tabindex="0"` neles. Exemplo:
|
||||
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Observação:** um elemento `tabindex` com valor negativo (normalmente -1) indica que um elemento está focado, mas não será acessado pelo teclado. Este método é geralmente usado para trazer o foco para o conteúdo programaticamente (como quando um `div` usado para uma janela pop-up é ativado) e está além do escopo desses desafios.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat criou uma nova pesquisa para coletar informações sobre os usuários. Ele sabe que os campos de entrada obtêm o foco do teclado automaticamente, mas ele quer ter certeza de que os usuários do teclado façam uma pausa nas instruções enquanto percorrem os itens. Adicione um atributo `tabindex` à tag `p` e defina o valor como `0`. Bônus - usar `tabindex` também permite que a pseudoclasse CSS `:focus` funcione na tag `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve adicionar um atributo `tabindex` à tag `p` que contém as instruções do formulário.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
O código deve definir o atributo `tabindex` na tag `p` com um valor de 0.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Usar tabindex para especificar a ordem do foco em vários elementos usando o teclado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O atributo `tabindex` também especifica a ordem em que a tecla tab percorrerá os elementos. Isso é obtido quando o valor do atributo é definido como um número positivo (1 ou acima).
|
||||
|
||||
Definir um `tabindex="1"` fará com que o foco seja levado para esse elemento quando o usuário apertar a tecla tab pela primeira vez. Em seguida, o foco passará ao próximo elemento que tem um `tabindex` maior que o anterior. Quando não existirem mais itens para receberem foco, ele volta ao valor inicial - `tabindex="0"`.
|
||||
|
||||
É importante observar que quando a ordem da tecla tab é definida dessa forma, ela sobrescreve a ordem padrão (que se baseia no código HTML). Isso pode confundir os usuários que esperam iniciar a navegação do topo da página. Esta técnica pode ser necessária em algumas circunstâncias, mas, em termos de acessibilidade, tome cuidado antes de aplicá-la.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat tem um campo de pesquisa em sua página Citações Inspiradoras, o qual ele planeja posicionar no canto superior direito com CSS. Ele deseja que os controles de formulário search `input` e submit `input` sejam os dois primeiros itens na ordem das guias. Adicione um atributo `tabindex` definido como `1` para o `search` `input` e um atributo `tabindex` definido como `2` para o `submit` `input`.
|
||||
|
||||
Outra questão a ser observada é o fato de que alguns navegadores podem colocar você no meio da ordem de navegação via tecla "tab" quando um elemento é clicado. Um elemento foi adicionado à página que garante que você sempre iniciará no início de sua ordem ao pressionar a tecla tab.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve adicionar um atributo `tabindex` à tag `input` de id `search`.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
O código deve adicionar um atributo `tabindex` à tag `input` de id `submit`.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
O código deve definir o atributo `tabindex` na tag `input` de id `search` para um valor de 1.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
O código deve definir o atributo `tabindex` na tag `input` de id `submit` para um valor de 2.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Envolva conteúdos usando o elemento article
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
dashedName: wrap-content-in-the-article-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O `article` é outro dos novos elementos HTML5 que adiciona significado semântico à sua marcação. `article` é um elemento de seção e contém informações independentes. A tag funciona bem com resumos de postagens de blog, postagens de fóruns ou artigos de notícias.
|
||||
|
||||
Determinar se o conteúdo pode ser independente, geralmente, é uma questão de julgamento, mas existem alguns testes simples que você pode usar. Pergunte-se: se eu remover todo o contexto ao redor, esse conteúdo ainda faria sentido? Da mesma forma para textos, o conteúdo se manteria se estivesse em um feed RSS?
|
||||
|
||||
Lembre-se de que as pessoas que usam tecnologias assistivas contam com uma marcação organizada e semanticamente significativa para entender melhor seu trabalho.
|
||||
|
||||
**Observação:** o elemento `section` também é novo no HTML5 e tem um significado semântico ligeiramente diferente do `article`. Um `article` é para conteúdo autônomo e uma `section` é para agrupar conteúdo relacionado por temas. Um podem ser usado dentro um do outro e vice-versa, conforme necessário. Por exemplo, se um livro é um `article`, cada capítulo é uma `section`. Quando não há relação entre grupos de conteúdo, use uma `div`.
|
||||
|
||||
`<div>` - agrupa conteúdo `<section>` - agrupa conteúdo relacionado `<article>` - agrupa conteúdo independente
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat usou a tag `article` para envolver as postagens do blog, mas se esqueceu de usá-las em outra parte da página. Altere a tag `div` por uma tag `article`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter três tags `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Envolva botões de opção em um elemento fieldset para melhor acessibilidade
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O próximo tópico sobre formulários aborda a acessibilidade dos botões de opção (radio buttons). Cada opção recebe um `label` com um atributo `for`, que será vinculado ao `id` do item correspondente, conforme abordado no último desafio. Como os botões de opção geralmente fazem parte de um grupo em que o usuário deve escolher um, há uma maneira de mostrar semanticamente que as opções fazem parte de um conjunto.
|
||||
|
||||
A tag `fieldset` envolve todo o grupo de botões de opção para fazer isso. Frequentemente, usa-se uma tag `legend` para fornecer uma descrição para o agrupamento, que é lida por leitores de tela para cada opção no elemento `fieldset`.
|
||||
|
||||
O wrapper `fieldset` e a tag `legend` não são necessários quando as escolhas são autoexplicativas, como uma seleção de gênero. Usar um `label` com o atributo `for` para cada botão de opção é suficiente.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one of these three items:</legend>
|
||||
<input id="one" type="radio" name="items" value="one">
|
||||
<label for="one">Choice One</label><br>
|
||||
<input id="two" type="radio" name="items" value="two">
|
||||
<label for="two">Choice Two</label><br>
|
||||
<input id="three" type="radio" name="items" value="three">
|
||||
<label for="three">Choice Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
O Camper Cat quer informações sobre o nível ninja dos usuários quando eles se inscrevem em sua lista de e-mail. Ele adicionou um conjunto de botões de opção e aprendeu em nossa última lição a usar tags `label` com atributos `for` para cada opção. É isso aí, Camper Cat! No entanto, o código ainda precisa de uma revisão. Altere a tag `div` ao redor dos botões de opção para uma tag `fieldset` e altere a tag `p` dentro dela para uma `legend`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma tag `fieldset` ao redor do grupo de botões de opção.
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
O elemento `fieldset` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
O código deve ter uma tag `legend` ao redor do texto perguntando em que nível ninja o usuário está.
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
O código não deve ter nenhuma tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
O código não deve mais ter uma tag `p` ao redor do texto perguntando em que nível ninja o usuário está.
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
Reference in New Issue
Block a user