Skip to content

Commit

Permalink
Fix typos and grammar errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@rwillrich
rwillrich committed Jul 24, 2015
1 parent e0beeef commit cd0bc86
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 63 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ A corret path to front-end development - http://www.frontendpath.com

## Contributing

Besides being large, the web also evolves constantly. Therefore, this project has a long way to go.The guide's content is in the folder [source/guia](https://github.com/fernahh/frontendpath/tree/master/source/guia).
Besides being large, the web also evolves constantly. Therefore, this project has a long way to go. The guide's content is in the folder [source/guia](https://github.com/fernahh/frontendpath/tree/master/source/guia).

Soon I will open issues for collaboration.

Expand Down Expand Up @@ -59,7 +59,7 @@ This project was developed in a static generator, the [Middleman](https://middle
Without these references, no doubt the guide could not be possible. Thanks to all the authors.
- Introduction
+ High Performance Web Sites, *by Steve Sounders*
+ High Performance Web Sites, *by Steve Souders*
+ HTML5: Up and Running, *by Mark Pilgrim*.
- Semantic
+ About HTML semantics and front-end architecture, *by Nicolas Gallagher*.
Expand Down
22 changes: 11 additions & 11 deletions source/guia/a-acessibilidade.html.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ Para ser sincero, acho que a linguagem utilizada pela W3C possa ser algo que cri

Os **princípios** têm a finalidade de prospectar requisitos para uma página ou aplicação web ser acessível. Caminhando ao lado deles, existem as **diretrizes**, que nada mais são que objetivos básicos para se desenvolver conteúdo acessível na web. Para que o essas diretrizes sejam atingidas, existem **critérios de sucesso** e **técnicas de tipo suficiente e aconselhadas**.

Vamos ver aqui os princípios estabelidos pela W3C.
Vamos ver aqui os princípios estabelecidos pela W3C.

### Princípio perceptível

Como o próprio nome diz, toda informação que a aplicação dispõe, deve ser **percebida por todos os sentidos** do seu usuário. Além disso, toda e qualquer alteração ou ação na interface deve ser percebida pelos sentidos do usuário da aplicação.
Como o próprio nome diz, toda informação que a aplicação dispõe, deve ser **percebida por todos os sentidos** do seu usuário. Além disso, toda e qualquer alteração ou ação na interface deve ser percebida pelos sentidos do usuário da aplicação.

Por exemplo, no uso de imagens, deve ser usado o atributo `alt` para descrever uma alternativa ao usuário que tem problema de visão.

Expand All @@ -48,7 +48,7 @@ Por exemplo, no uso de imagens, deve ser usado o atributo `alt` para descrever u

Todas as operações que o usuário precisa fazer para ter acesso a uma informação devem ser acessíveis. Uma interface não pode depender de uma operação que um usuário com certa deficiência não consiga realizar.

Um exemplo disso, é que toda operação deve ter um tempo suficiente para o usuário completá-la, seja usando o mouse ou o teclado.
Um exemplo disso, é que toda operação deve ter um tempo suficiente para o usuário completá-la, seja usando o mouse ou o teclado.

Exemplificando, através de CSS podemos fazer uma navegação mais básica de forma simples ao usuário, permitindo que o mesmo possa navegar pela aplicação com o teclado:

Expand All @@ -63,9 +63,9 @@ a:focus {

Esse princípio diz que a aplicação deve ter seu conteúdo de forma compreensível, assim como seu funcionamento.

A maioria dos usuários que possuem algum tipo de deficiência visual, usam leitores de tela para navegar na web.
A maioria dos usuários que possuem algum tipo de deficiência visual, usam leitores de tela para navegar na web.

Uma boa prática, além de manter um bom desenvolvimento semântico, é por exemplo, indicar o idioma que está escrito na página com o atributo `lang`. Perceba que dentro do conteúdo outro idiomá é utilizado.
Uma boa prática, além de manter um bom desenvolvimento semântico é, por exemplo, indicar o idioma que está escrito na página com o atributo `lang`. Perceba que dentro do conteúdo outro idioma é utilizado.

```html
<!DOCTYPE html>
Expand All @@ -77,28 +77,28 @@ Uma boa prática, além de manter um bom desenvolvimento semântico, é por exem
<body>
<p>Essa página está em pt <span lang="en">and in english</span></p>
</body>
</html>
</html>
```

### Princípio robusto

O princípio robusto diz que toda aplicação deve-se manter com conteúdo acessível tanto para usuários sem necessidades especiais, quanto para tecnologias assistivas, mesmo com a evolução das tecnologias isso possa se tornar defasado.
O princípio robusto diz que toda aplicação deve-se manter com conteúdo acessível tanto para usuários sem necessidades especiais, quanto para tecnologias assistivas, mesmo que com a evolução das tecnologias isso possa se tornar defasado.

Uma forma de manter esse princípio é sempre desenvolver de acordo com padrões validados pela W3C.

Na prática, o *web design responsivo* (RWD), pode ajudar a entregar conteúdo acessível independente do dispositivo que o usuário está usando.
Na prática, o *web design responsivo* (<abbr title="Responsive Web Design">RWD</abbr>), pode ajudar a entregar conteúdo acessível independente do dispositivo que o usuário está usando.

## Enriquecendo a acessibilidade com WAI-ARIA

Vivemos em uma época em que a web é uma das principais plataformas para desenvolvimento de aplicações, quiçá a principal.

O conteúdo entregue ao usuário nem sempre é entregue de forma simples de texto. Conteúdos dinâmicos cada vez mais fazem parte do ciclo de vida de uma aplicação web. Levando esse dentre outros aspectos, a semântica básica do HTML não cobre todas as lacunas que precisamos para tornar uma aplicação moderna acessível. Pensando nisso temos uma recomendação da W3C chamada WAI-ARIA *(WAI - Web Acessibility Initiative, ARIA - Acessible Rich Internet Applications)*.
O conteúdo entregue ao usuário nem sempre é entregue na forma de texto simples. Conteúdos dinâmicos cada vez mais fazem parte do ciclo de vida de uma aplicação web. Levando esse dentre outros aspectos, a semântica básica do HTML não cobre todas as lacunas que precisamos para tornar uma aplicação moderna acessível. Pensando nisso temos uma recomendação da W3C chamada WAI-ARIA *(WAI - Web Acessibility Initiative, ARIA - Acessible Rich Internet Applications)*.

### Atributos aria-* e Roles

Os atributos `aria-*` são responsáveis por extender a semântica de elementos HTML. Dessa forma, leitores de tela podem compreender melhor a interação de uma interface.
Os atributos `aria-*` são responsáveis por extender a semântica de elementos HTML. Dessa forma, leitores de tela podem compreender melhor a interação de uma interface.

Existem [inúmeros tipos de atributos](http://www.w3.org/TR/wai-aria/states_and_properties) para representação de estados e propriedades.
Existem [inúmeros tipos de atributos](http://www.w3.org/TR/wai-aria/states_and_properties) para representação de estados e propriedades.

E na prática, como fica? Vamos ver o exemplo de uma barra de progresso, que apesar de ser escrita uma tag `<div>`, que não possui valor semântico, é acessível:

Expand Down
26 changes: 13 additions & 13 deletions source/guia/a-semantica.html.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Uma página é formada de elementos básicos necessários para seu funcionamento
```

### DOCTYPE
O *Document Type Defination* (DTD ou Doctype) é quem informa ao navegador a versão do HTML que está sendo utilizada, ele vem antes de qualquer outro elemento do documento, até mesmo antes do `<html>`. Antes da especificação HTML 5 existiram várias notações para o `<doctype>`. Por exemplo:
O *Document Type Definition* (DTD ou Doctype) é quem informa ao navegador a versão do HTML que está sendo utilizada, ele vem antes de qualquer outro elemento do documento, até mesmo antes do `<html>`. Antes da especificação HTML 5 existiram várias notações para o `<doctype>`. Por exemplo:

```html
<!DOCTYPE html
Expand All @@ -49,9 +49,9 @@ Na quinta versão, o `<doctype>` ficou menor e melhor.
<!DOCTYPE html>
```

#### O elemento `<html>`
#### O elemento `<html>`

Uma analogia constante em relação ao HTML é que ele é composto por uma série de elementos estruturado como uma árvore. Levando isso em conta, o elemento `<html>` é a raiz de nossa árvore. Todos os elementos estarão dentro dele.
Uma analogia constante em relação ao HTML é que ele é composto por uma série de elementos estruturados como uma árvore. Levando isso em conta, o elemento `<html>` é a raiz de nossa árvore. Todos os elementos estarão dentro dele.

O principal atributo desse elemento é o `lang`, que especifica a língua da página HTML.

Expand All @@ -62,7 +62,7 @@ O principal atributo desse elemento é o `lang`, que especifica a língua da pá
Especificar um valor para o atributo `lang` é muito importante. É através deles que leitores de telas definem em qual idioma que irão ler o conteúdo para o usuário.

### O elemento `<head>`
O elemento `<head> ` não mudou nada desde sua primeira versão. Ele contém uma coleção de informações (metadados) sobre a página HTML. Dentro dele é que especificamos manifestos e arquivos que mudaram a forma com que a página será renderizada.
O elemento `<head> ` não mudou nada desde sua primeira versão. Ele contém uma coleção de informações (metadados) sobre a página HTML. Dentro dele é que especificamos manifestos e arquivos que mudarão a forma com que a página será renderizada.

#### Metadados
O elemento `<meta>` tem a missão de representar dados que não são expressíveis com outros elementos, como `<link>` e `<title>`.
Expand All @@ -73,9 +73,9 @@ Existem inúmeros atributos disponíveis para `<meta>` , entre eles o `charset`
<meta charset="utf-8" />
```

#### Elemento `<link>`
O elemento `<link>` (não confunda com o `<a>`!) pode ser usado para referenciar outro recurso.
Usando o atributo `rel`, temos *link relations*, que é uma maneira de explicar a referência que o mesmo contém. Por exemplo, se o atributo `rel` conter o valor `stylesheet`, significa que o *link* possui uma referência para uma folha de estilo.
#### Elemento `<link>`
O elemento `<link>` (não confunda com o `<a>`!) pode ser usado para referenciar outro recurso.
Usando o atributo `rel`, temos *link relations*, que é uma maneira de explicar a referência que o mesmo contém. Por exemplo, se o atributo `rel` conter o valor `stylesheet`, significa que o *link* possui uma referência para uma folha de estilo.

```html
<link rel="stylesheet" type="text/css" href="style.css">
Expand All @@ -93,7 +93,7 @@ O elemento `<script>` funciona para referenciar e permitir escrita de códigos *
</script>
```

Uma regra básica para decidir onde carregar uma *tag script*: se influi na renderização do documento (como *shiv* do HTML 5), carregue no `<head>`, senão, carregue no `<body>`.
Uma regra básica para decidir onde carregar uma *tag script*: se influi na renderização do documento (como *shiv* do HTML 5), carregue no `<head>`, senão, carregue no `<body>`. Carregar scripts que influenciam na renderização do documento no `<head>` evita o <abbr title="Flash of unstyled content">FOUC</abbr>, que faz com que o conteúdo sem estilo apareça por um momento, antes do estilo final ser aplicado.

### O elemento `<body>`

Expand Down Expand Up @@ -134,7 +134,7 @@ Tentamos representar a maioria dos elementos semânticamente, mas obviamente nã
##### `<em>`, `<small>` e `<strong>`
Podemos expressar diferentes ênfases em um texto usando essas tags. Com a tag `<em>` indicamos um conteúdo acentuado. Com `<strong>` deixamos o texto mais "forte". Já com a tag `<small>` podemos diminuir a ênfase para um conteúdo não tão importante em um texto.

É importante lembrar que todas essas tags geralmente os navegadores adicionam um estilo diferente.
É importante lembrar que os navegadores adicionam estilos diferentes para essas tags.

##### `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` e `<h6>`
As tags *headings* são usadas para representar os títulos de uma página. O `<h1>` representa o maior valor, sendo `<h6>` o título de menor importância. Em um exemplo prático, o título de uma página é seria escrito com `<h1>` e um subtítulo com `<h2>`.
Expand All @@ -151,7 +151,7 @@ Possuímos três tipos de listas para trabalharmos. `<ol>` e `<ul>` possuem apen

Para representar um item de uma lista, usamos a tag `<li>`.

Diferentemente das duas primeiras tags que mostramos, temos um tipo de lista para definir itens semânticamente. Podemos declarar repespectivamente termo e definição. Por exemplo:
Diferentemente das duas primeiras tags que mostramos, temos um tipo de lista para definir itens semânticamente. Podemos declarar respectivamente termo e definição. Por exemplo:

```html
<dl>
Expand All @@ -167,7 +167,7 @@ Diferentemente das duas primeiras tags que mostramos, temos um tipo de lista par
A tag `<p>` representa um parágrafo qualquer dentro de uma página web. Sem dúvidas é a tag que mais usamos no desenvolvimento de um web site.

#### `<section>`
Uma tag `<section>` pode ser usada para agrupar conteúdos e assim representar algo na web. Em um exemplo prática, essa tag pode agrupar em um site de notícia, as próprias notícias. Exemplo:
Uma tag `<section>` pode ser usada para agrupar conteúdos e assim representar algo na web. Em um exemplo prático, essa tag pode agrupar em um site de notícias, as próprias notícias. Exemplo:

```html
<section id="news-section">
Expand All @@ -193,7 +193,7 @@ O `<footer>` receberá um grupo de elementos que representará, geralmente, info

## Melhorando a semântica com microdata

Já vimos que na última versão do HTML tivemos um grande esforço para melhorar a representação de dados na web. Além das tags, também temos o *microdata*. Eles funcionam como atributos em nosso documento, onde podemos expressar de melhorar forma o conteúdo para robos (sim, como o Google!).
Já vimos que na última versão do HTML tivemos um grande esforço para melhorar a representação de dados na web. Além das tags, também temos o *microdata*. Eles funcionam como atributos em nosso documento, onde podemos expressar de melhorar forma o conteúdo para robôs (sim, como o Google!).

Para usar, o primeiro passo é pensarmos no escopo do conteúdo. Precisamos de uma tag para representá-lo, que terá o atributo `itemscope` e o seu tipo, representado pelo atributo `itemtype`. Se fossemos representar o álbum de um artista, nosso primeiro passo seria o seguinte:

Expand Down Expand Up @@ -236,6 +236,6 @@ Existem inúmeras representações, você pode encontrá-las no [Schema.org](htt

Hoje em dia com uma rápida busca na internet você encontra validadores, editores que ajudam a escrever HTML mais rápido (conheça o [Emmet](http://emmet.io/)!), entre outros facilitadores. Mas o ponto principal que você precisa entender: **não há como automatizar um bom trabalho**.

A semântica deve ser feita de humanos para máquinas. Precisamos fazer com que algoritmos entando nosso código. Dessa forma todo mundo ganha, incluindo seu produto, os buscadores, o mercado e a web.
A semântica deve ser feita de humanos para máquinas. Precisamos fazer com que algoritmos entendam nosso código. Dessa forma todo mundo ganha, incluindo seu produto, os buscadores, o mercado e a web.

Tudo pronto. Vamos ser mais semânticos?
Loading

0 comments on commit cd0bc86

Please sign in to comment.