From 5973242fbfc2fc8e65dfcecf977ec20e34a3397c Mon Sep 17 00:00:00 2001 From: iluminnatti <55792132+iluminnatti@users.noreply.github.com> Date: Sun, 31 Oct 2021 11:20:37 -0300 Subject: [PATCH] Portuguese translation of Terrarium (base README and 1-intro-to-html) (#476) * I've created the portuguese of the README archive (The main on the terrarium folder) into the translations folder * I've created the README.pt.md archive into the 1-intro-to-html/translations folder, a portuguese transation for README.md archive into 1-intro-to-html * I've created the assignment.pt.md archive, a portuguese translation for assignment.md, created into the 1-intro-to-html/translations folder * just correcting errors * just solving some mistakes * solved some mistakes and linked the main README.pt-BR.md (ROOT archive of te project) to my translations (1-intro-to-html) * changed the name of some archives (my portuguese translation's archives to specify their language (pt-BR) Co-authored-by: iluminnatti --- 3-terrarium/1-intro-to-html/assignment.md | 2 +- .../translations/README.pt-BR.md | 231 ++++++++++++++++++ .../translations/assignment.pt-BR.md | 11 + 3-terrarium/translations/README.pt-BR.md | 31 +++ translations/README.pt-BR.md | 2 +- 5 files changed, 275 insertions(+), 2 deletions(-) create mode 100644 3-terrarium/1-intro-to-html/translations/README.pt-BR.md create mode 100644 3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md create mode 100644 3-terrarium/translations/README.pt-BR.md diff --git a/3-terrarium/1-intro-to-html/assignment.md b/3-terrarium/1-intro-to-html/assignment.md index d74b60b4..349b6b06 100644 --- a/3-terrarium/1-intro-to-html/assignment.md +++ b/3-terrarium/1-intro-to-html/assignment.md @@ -8,4 +8,4 @@ Imagine you are designing, or redesigning, your personal web site. Create a grap | Criteria | Exemplary | Adequate | Needs Improvement | | -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed | \ No newline at end of file +| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed | diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md new file mode 100644 index 00000000..b57d52b2 --- /dev/null +++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md @@ -0,0 +1,231 @@ +# Projeto terrario Parte 1: Introdução a HTML + +![Introdução a HTML](/sketchnotes/webdev101-html.png) +> Esboço por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-aula + +[Quiz pré-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) + +### Introdução + +HTML, ou Linguagem de Marcação de Hypertexto, é o 'esqueleto' da web. Se CSS 'veste' o seu HTML e JavaScript o dá vida, HTML é o corpo de sua aplicação web. A própria sintaxe HTML reflete isso, ao passo que ela inclui tags "head" (cabeça), "body" (corpo), e "footer" (rodapé). + +Nesta lição, usaremos HTML para fazer o layout do 'esqueleto' da interface do nosso terrário virtual. Terá um título e três colunas: uma coluna à direita e outra à esquerda, onde vivem as plantas arrastáveis, e uma área central que será o verdadeiro terrário de aspecto de vidro. Ao final desta lição, você poderá ver as plantas nas colunas, mas a interface parecerá um pouco estranha; não se preocupe, na próxima seção você adicionará estilos CSS à interface para torná-la mais bonita. + +### Tarefa + +Em seu computador, crie uma pasta chamada 'terrario' e, dentro dela, um arquivo chamado 'index.html'. Você pode fazer isso no Visual Studio Code depois de criar sua pasta terrarium, abrindo uma nova janela do VS Code, clicando em 'abrir pasta' e navegando até sua nova pasta. Clique no pequeno botão 'arquivo' no painel do Explorer e crie o novo arquivo: + +![explorer no VS Code](../images/vs-code-index.png) + +Ou + +Use esses comando no seu git bash: +* `mkdir terrarium` +* `cd terrarium` +* `touch index.html` +* `code index.html` ou `nano index.html` + +> Os arquivos index.html indicam a um navegador que ele é o arquivo padrão em uma pasta; URLs como `https://anysite.com/test` podem ser construídas usando uma estrutura de pasta incluindo uma pasta chamada` test` com `index.html` dentro dela; `index.html` não precisa ser mostrado em uma URL. + +--- + +## O DocType e as tags HTML + +A primeira linha de um arquivo HTML é seu DocType. É um pouco surpreendente que você precise ter essa linha bem no topo do arquivo, mas ela diz aos navegadores mais antigos que o navegador precisa renderizar a página em um modo padrão, seguindo a especificação HTML atual. + +> Dica: no VS Code, você pode passar o mouse sobre uma tag e obter informações sobre seu uso nos guias de referência do MDN. + +A segunda linha deve ser a tag de abertura da tag ``, seguida agora por sua tag de fechamento ``. Essas tags são os elementos-raiz da sua interface. + +### Tarefa + +Adicione essas linhas ao topo do seu arquivo `index.html`: + +```HTML + + +``` + +✅ Existem alguns modos diferentes que podem ser determinados definindo o DocType com uma string de consulta: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Esses modos costumavam suportar navegadores muito antigos que não são normalmente usados ​​hoje em dia (Netscape Navigator 4 e Internet Explorer 5). Você pode seguir a declaração doctype padrão. + +--- + +## A 'cabeça' do documento + +A área do 'cabeçalho' do documento HTML inclui informações cruciais sobre sua página da web, também conhecidas como [metadados] (https://developer.mozilla.org/docs/Web/HTML/Element/meta). No nosso caso, informamos ao servidor da web para o qual esta página será enviada para ser renderizada, estas quatro coisas: + +- o título da página +- metadados da página, incluindo: + - o 'conjunto de caracteres', informando sobre qual codificação de caracteres é usada na página + - informações do navegador, incluindo `x-ua-compatible`, que indica que o navegador IE = edge é compatível + - informações sobre como a janela de visualização deve se comportar quando é carregada. Definir a janela de visualização para ter uma escala inicial de 1 controla o nível de zoom quando a página é carregada pela primeira vez. + +### Tarefa + +Adicione um bloco 'head' ao seu documento entre a tag `` inicial e a final. + +```html + + Bem-vindo ao meu terrário virtual + + + + +``` + +✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). + +--- + +## O `corpo` do documento + +### Tags HTML + +Em HTML, você adiciona tags ao seu arquivo .html para criar elementos de uma página da web. Cada tag geralmente possui uma tag de abertura e de fechamento, como esta: `

olá

` para indicar um parágrafo. Crie o corpo da sua interface adicionando um conjunto de tags `` dentro do par de tags ``; sua marcação agora se parece com isto: + +### Tarefa + +```html + + + + Bem-vindo ao meu terrário virtual + + + + + + +``` + +Agora, você pode começar a construir sua página. Normalmente, você usa tags `
` para criar os elementos separados em uma página. Vamos criar uma série de elementos `
` que conterão imagens. + +### Imagens + +Uma tag html que não precisa de uma tag de fechamento é a tag ``, porque ela tem um elemento `src` que contém todas as informações que a página precisa para processar o item. + +Crie uma pasta em seu aplicativo chamada `images` e nela, adicione todas as imagens da [pasta de código fonte](../solution/images); (são 14 imagens de plantas). + +### Tarefa + +Adicione essas imagens de plantas em duas colunas entre as tags ` `: + +```html +
+
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+
+``` + +> Nota: Spans vs. Divs. Divs são considerados elementos de 'bloco' e Spans são 'embutidos'. O que aconteceria se você transformasse esses divs em spans? + +Com essa marcação, as plantas agora aparecem na tela. Parece muito ruim, porque eles ainda não foram estilizados usando CSS, e faremos isso na próxima lição. + +Cada imagem possui um texto alternativo que aparecerá mesmo se você não puder ver ou renderizar uma imagem. Este é um atributo importante a ser incluído para acessibilidade. Aprenda mais sobre acessibilidade em aulas futuras; por enquanto, lembre-se de que o atributo alt fornece informações alternativas para uma imagem se um usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela). + +✅ Você notou que cada imagem tem a mesma tag alt? Esta é uma boa prática? Por que ou por que não? Você pode melhorar este código? + +--- + +## Marcação semântica + +Em geral, é preferível usar 'semântica' significativa ao escrever HTML. O que isso significa? Isso significa que você usa tags HTML para representar o tipo de dados ou interação para a qual foram projetadas. Por exemplo, o texto do título principal em uma página deve usar uma tag `

`. + +Adicione a seguinte linha logo abaixo da tag `` de abertura: + +```html +

Meu Terrário

+``` + +Usar marcação semântica, como ter cabeçalhos `

` e listas não ordenadas renderizadas como `
    `, ajuda os leitores de tela a navegar por uma página. Em geral, os botões devem ser escritos como `

`: + +```html +
+
+
+
+
+
+
+
+
+``` + +✅ Mesmo que você tenha adicionado essa marcação à tela, você não vê absolutamente nada renderizado. Porque? + +--- + +## 🚀Desafio + +Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas de brincar, embora você não deva usar tags obsoletas, como [essas tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) na sua marcação. Ainda assim, você pode usar a velha tag `` para fazer o título h1 rolar horizontalmente? (se o fizer, não se esqueça de removê-lo depois) + +## Quiz Pós-aula + +[Quiz pós-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) + +## Revisão e autoestudo + +HTML é o sistema de blocos de construção 'testado e comprovado' que ajudou a construir a web no que ela é hoje. Aprenda um pouco sobre sua história estudando algumas tags antigas e novas. Você consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Quais tags podem ser introduzidas no futuro? + +Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa). + + +## Atribuiçao + +[Pratique seu HTML: Construa uma maquete de blog](assignment.pt-BR.md) diff --git a/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md b/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md new file mode 100644 index 00000000..36b465ea --- /dev/null +++ b/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md @@ -0,0 +1,11 @@ +# Pratique seu HTML: Construa uma maquete de blog + +## Instruções + +Imagine que você está projetando ou redesenhando seu site pessoal. Crie uma maquete gráfica do seu site e anote a marcação HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizá-lo ou usar o software de sua escolha, apenas certifique-se de codificar manualmente a marcação HTML. + +## Rubrica + +| Critérios | Exemplar | Adequado | Necessidades Melhoria | +| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação exibidos | Um layout de blog é representado visualmente com no máximo 3 elementos de marcação exibidos | diff --git a/3-terrarium/translations/README.pt-BR.md b/3-terrarium/translations/README.pt-BR.md new file mode 100644 index 00000000..84b0a4ac --- /dev/null +++ b/3-terrarium/translations/README.pt-BR.md @@ -0,0 +1,31 @@ +# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação DOM usando JavaScript 🌵🌱 + +Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, esilizá-la, e adiconar uma interação. + +![Meu Terrário](../images/screenshot_gray.png) + +# Lições + +1. [Introdução à HTML](../1-intro-to-html/translations/README.pt-BR.md) +2. [Introdução à CSS](../2-intro-to-css/README.md) +3. [Introdução à DOM e fechamentos JS](../3-intro-to-DOM-and-closures/README.md) + +## Créditos + +Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper) + +O terrário criado via CSS foi inspirado na jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). + +A arte do curso foi desenhada à mão por [Jen Looper](http://jenlooper.com) using Procreate. + +## Implante o seu Terrário + +Você pode implantar ou publicar seu terrario na web usando o Azure Static Web Apps. + +1. Fork este repositório + +2. Pressione este botão + +[![Implemente para o botão Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL. diff --git a/translations/README.pt-BR.md b/translations/README.pt-BR.md index f919f670..45d39674 100644 --- a/translations/README.pt-BR.md +++ b/translations/README.pt-BR.md @@ -75,7 +75,7 @@ Também podem ser acessados localmente pela pasta `quiz-app`. | 05 | Básico de JS | Funções e métodos | Aprenda sobre Funções e métodos para gerenciar o fluxo de lógica de uma aplicação | [Funções e métodos](/2-js-basics/2-functions-methods/translations/README.pt.md) | Jasmine e Christopher | | 06 | Básico de JS | Tomando decisões com JS | Aprenda como criar condições em seu código usando métodos de tomada de decisão methods | [Tomando decisões](/2-js-basics/3-making-decisions/translations/README.pt.md) | Jasmine | | 07 | Básico de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](/2-js-basics/4-arrays-loops/translations/README.pt.md) | Jasmine | -| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | +| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](/3-terrarium/1-intro-to-html/translations/README.pt-BR.md) | Jen | | 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico de inclusão CSS fazendo a página responsiva | [Introdução a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Terrarium](/3-terrarium/solution) | JavaScript closures, DOM manipulation | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar / soltar, focando em fechamentos e manipulação de DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Typing Game](/4-typing-game/solution) | Construa um jogo de digitação | Aprenda a usar eventos de teclado para conduzir a lógica de seu aplicativo JavaScript | [Programação Orientada a Eventos](/4-typing-game/typing-game/README.md) | Christopher |