Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markdown conversion for pt-BR - Cleanup - Tutorials section #8478

Merged
merged 1 commit into from
Sep 14, 2022
Merged

Markdown conversion for pt-BR - Cleanup - Tutorials section #8478

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 7 additions & 93 deletions files/pt-br/web/tutorials/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,184 +24,113 @@ <h2 id="Para_nível_iniciante_da_Web">Para nível iniciante da Web</h2>

<dl>
<dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a Web </a></dt>
<dd><em>Iniciando com a Web</em> é uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. <span id="result_box" lang="pt"><span>Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples</span></span>.</dd>
<dd><em>Iniciando com a Web</em> é uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.</dd>
</dl>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais de HTML</h2>
<h2>Tutoriais de HTML</h2>

<h3 id="Nível_inicial">Nível inicial</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a></dt>
<dd>Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar <em>hiperlinks</em> e fazer uso do HTML para estruturar uma página da web.</dd>
<dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Element">Referência de Elementos HTML da MDN</a></strong></dt>
<dd>Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Criando uma Página Web simples com HTML</a></strong> (The Blog Starter)</dt>
<dd>Um guia HTML para iniciantes que inclui explicações de <em>tags</em> comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.</dd>
<dt><strong><a href="http://bit.ly/2z9xSS2">Guia do Iniciante em HTML</a> (Website Setup)</strong></dt>
<dd>Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.</dd>
<dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Desafio HTML</a> (Wikiversity)</strong></dt>
<dd>Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, <em>Eu devo usar um elemento &lt;h2&gt; ou um elemento &lt;strong&gt;?</em>), focando numa melhor produtividade.</dd>
</dl>
</div>
</div>

<h3 id="Nível_Intermediário">Nível Intermediário</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimídia e Incorporação</a></dt>
<dd><span lang="pt">Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.</span></dd>
</dl>
</div>

<div class="section">
<dl>
<dd>Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Tables">Tabelas em HTML</a></dt>
<dd><span lang="pt">Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos</span>.</dd>
<dd>Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms">Formulários em HTML (HTML forms)</a></dt>
<dd>Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.</dd>
<dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Dicas para criar páginas HTML de carregamento rápido</a></strong></dt>
<dd>Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.</dd>
</dl>
</div>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais CSS</h2>
<h2>Tutoriais CSS</h2>

<h3 id="Nível_inicial_2">Nível inicial</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Started">CSS Básico</a></dt>
<dd>CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. <em>CSS Básico</em> traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?</dd>
<dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt>
<dd>Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de <em>boxes</em> e <em>debug</em> em CSS.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilizando <em>Boxes</em></a></dt>
<dd>A seguir nós veremos em estilização <em>boxes</em> (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de <em>boxes</em>.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando texto</a></dt>
<dd>Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e <em>links</em>.</dd>
<dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Questões comuns de CSS</a></strong></dt>
<dd>Perguntas e respostas comuns para iniciantes.</dd>
</dl>
</div>
</div>

<h3 id="Nível_intermediário">Nível intermediário</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
<dd>Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à <em>viewport</em> e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no <em>layout</em> CSS, olhando para diferentes configurações de tela, métodos de <em>layout</em> tradicionais envolvendo flutuação e posicionamento e novas ferramentas de <em>layout</em> como o <em>flexbox</em>.</dd>
<dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referência CSS</a></strong></dt>
<dd>Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Grades Fluídas</a> (Uma lista a parte)</strong></dt>
<dd><em>Layouts</em> de <em>design</em> que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.</dd>
<dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafios CSS</a> (Wikiversity)</strong></dt>
<dd>Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado_2">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_transforms">Usando transformações CSS</a></strong></dt>
<dd>Aplique rotação, inclinação, escala e translação utilizando CSS.</dd>
<dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/CSS/CSS_transitions">CSS Transições</a></strong></dt>
<dd>Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia Rápido para implementar Fontes da Web com @font-face</a> (HTML5 Rocks)</strong></dt>
<dd>O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.</dd>
<dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Começando a escrever CSS</a> (David Walsh)</strong></dt>
<dd>Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.</dd>
</dl>
</div>
</div>

<div class="section">
<dl>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
<dd>Aprenda a desenhar gráficos usando <em>scripts</em> e usando o elemento <code>canvas</code>.</dd>
<dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt>
<dd>Artigos sobre o uso de HTML5.</dd>
</dl>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais Javascript</h2>
<h2>Tutoriais Javascript</h2>

<h3 id="Nível_iniciante">Nível iniciante</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt></dt>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt>
<dd>Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como <em>O que é JavaScript?</em>, <em>Com o que se parece?</em> e <em>O que se pode fazer com ele?</em> antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.</dd>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Construindo blocos com JavaScript</a></dt>
<dd>Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Começando com JavaScript</a></dt>
<dd>O que é JavaScript e como pode lhe ajudar?</dd>
<dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt>
<dd>Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.</dd>
</dl>
</div>
</div>

<h3 id="Nível_intermediário_2">Nível intermediário</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt>
<dd>Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.</dd>
<dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">APIs da web do lado do cliente</a></dt>
<dd>Quando se programa em JavaScript do lado do cliente (<em>client-side</em>) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.</dd>
</dl>
</div>

<div class="section">
<dl>
<dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma Reintrodução ao JavaScript</a></strong></dt>
<dd>Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.</dd>
<dt><strong><a href="http://eloquentjavascript.net/" rel="external">JavaScript Eloquente</a></strong></dt>
Expand All @@ -211,13 +140,9 @@ <h3 id="Nível_intermediário_2">Nível intermediário</h3>
<dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Padrões de Design Essenciais em JavaScript</a> (Addy Osmani)</strong></dt>
<dd>Uma introdução para padrões de design essenciais em JavaScript.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado_3">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide">Guia de JavaScript</a></dt>
<dd>Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.</dd>
Expand All @@ -227,28 +152,17 @@ <h3 id="Nível_avançado_3">Nível avançado</h3>
<dd>Documentação de partes mais peculiares do JavaScript.</dd>
<dt><strong><a href="http://exploringjs.com/es6/" rel="external">Explorando ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
<dd>Informações profundas e confiáveis sobre ECMAScript 2015.</dd>
</dl>
</div>

<div class="section"><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Padrões JavaScipt</a></strong>

<dl>
<dt><strong><a href="http://shichuan.github.io/javascript-patterns">Padrões JavaScipt</a></strong></dt>
<dd>Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.</dd>
<dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Como navegadores trabalham</a></strong></dt>
<dd>Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.</dd>
<dt><a href="https://github.com/bolshchikov/js-must-watch">Vídeos sobre JavaScript</a> (GitHub)</dt>
<dd>Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.</dd>
</dl>
</div>
</div>

<h3 id="Estendendo_o_desenvolvimento">Estendendo o desenvolvimento</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/Add-ons/WebExtensions">WebExtensions</a></dt>
<dd>WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a <a class="external-icon external" href="https://developer.chrome.com/extensions">API de extensão</a> suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome"> com poucas mudanças</a>. A API é também completamente compatível com <a href="https://developer.mozilla.org/pt-BR/Firefox/Multiprocess_Firefox">multiprocessos Firefox</a>.</dd>
</dl>
</div>
</div>