Revision 489887 of Tutoriais

<div class="row topicpage-table">
 <div class="section">
  <p>Os links nesta página conduzem a uma variedade de tutoriais e materiais de treinamento. Quer você esteja apenas começando, aprendendo os básicos, ou é uma velha mão em desenvolvimento web, você pode encontrar recursos úteis aqui para melhores práticas. Estes recursos são criados por companias de ideias avançadas e desenvolvedores web que têm adotados padrões abertos e melhores práticas para desenvolvimento web e que proporcionam ou permitem traduções, conteúdo autorizado contínuo e aberto tal como Creative Commons.</p>
  <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais de HTML</h2>
  <h3 id="Introductory_level">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introdução ao HTML</a></dt>
   <dd>
    O que é HTML, o que ele faz, sua história em breve, e o que a estrutura de um documento HTML se parece. Os artigos que seguem esse primeiro olhar em cada parte individual de HTML são em profundidade muito maior.</dd>
   <dt>
    <a href="https://reference.sitepoint.com/html/page-structure" rel="external">Estrutura Básica de uma Página da Web</a> (SitePoint)</dt>
   <dd>
    Aprenda como elementos de HTML cabem juntos dentro da maior imagem.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Elemento de Referência da MDN em HTML</a></dt>
   <dd>
    Uma referência compreensiva de elementos HTML, e como os diferentes navegadores os suportam.</dd>
   <dt>
    <a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Desafios HTML</a> (Wikiversity)</dt>
   <dd>
    Use estes desafios para afiar suas habilidades em HTML (por exemplo, "Eu deveria usar um elemento &lt;h2&gt; ou um elemento &lt;strong&gt;?"), focando em um avanço significativo.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    Code Avengers é a diversão, forma efetiva para aprender a codificar aplicativos web e jogos com HTML, CSS e JavaScript.</dd>
  </dl>
  <h3 id="Advanced_level">Nível avançado</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Dicas para autorar páginas HTML de rápido carregamento</a></dt>
   <dd>
    Otimize páginas web para prover um site mais responsivo para visitantes e reduzir o carregamento em seu servidor web e conexão com a Internet.</dd>
   <dt>
    <a href="https://www.html5rocks.com/tutorials/" rel="external">Tutoriais de HTML5</a> (HTML5 Rocks)</dt>
   <dd>
    Leve um tour guiado através do código que usa características de HTML5.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantica em HTML5</a> (Uma Lista À Parte)</dt>
   <dd>
    Aprenda com um aumento significativo que é extensível e recuado- e avançado- compatível.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Tutorial de Canvas</a></dt>
   <dd>
    Aprenda como desenhar gráficos usando scripting usando o elemento canvas.</dd>
   <dt>
    <a href="https://html5doctor.com/" rel="external">Doutor HTML5</a></dt>
   <dd>
    Artigos sobre o uso do HTML5 agora mesmo.</dd>
   <dt>
    <a href="https://www.elated.com/articles/html5-audio/" rel="external">A Alegria do Som HTML5</a> (Elevado)</dt>
   <dd>
    Aprenda como usar o som HTML5 em suas páginas da web facilmente. Vários exemplos de códigos estão incluídos no tutorial.</dd>
  </dl>
  <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais de JavaScript</h2>
  <h3 id="Introductory_level">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="https://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
   <dd>
    Codecademy é a forma mais fácil de aprender como codificar em JavaScript.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Começando com JavaScript</a></dt>
   <dd>
    O que é JavaScript e como ele pode ajudar você?</dd>
   <dt>
    <a href="https://dev.opera.com/articles/view/javascript-best-practices/" rel="external">Melhores práticas em JavaScript</a><a href="https://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="https://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
   <dd>
    Aprenda sobre alguns dos óbvios e (nem tanto) melhores práticas óbvias quando escrevendo JavaScript.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    Code Avengers é a diversão, forma efetiva de aprender a codificar aplicativos web e jogos com HTML, CSS e JavaScript.</dd>
  </dl>
  <h3 id="Intermediate_level">Nível intermediário</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Uma reintrodução ao JavaScript</a></dt>
   <dd>
    Uma recapitulação da linguagem de programação JavaScript visando o nível de desenvolvedores intermediários.</dd>
   <dt>
    <a href="https://eloquentjavascript.net/contents.html" rel="external">JavaScript Eloquente</a></dt>
   <dd>
    Um guia compreensivo para metodologias intermediárias e avançadas de JavaScript.</dd>
   <dt>
    <a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Padrões de Design em JavaScript Essencial</a> (Addy Osmani)</dt>
   <dd>
    Uma introdução aos padrões de desing em JavaScript essenciais.</dd>
  </dl>
  <dl>
   <dt>
    <a href="https://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">A Linguagem de Programação em JavaScript</a> (Blog YUI)</dt>
   <dd>
    Douglas Crockford explora a linguagem como ela é hoje, e como ela veio a ser.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introdução ao Objeto Orientado de JavaScript</a></dt>
   <dd>
    Aprenda sobre o modelo de objeto de JavaScript.</dd>
  </dl>
 </div>
 <div class="section">
  <h3 id="Advanced_level">Nível avançado</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">Guia de JavaScript</a></dt>
   <dd>
    Uma guia compreensiva regularmente atualizada de JavaScript para todos os níveis de aprendizado desde o iniciante ao avançado.</dd>
   <dt>
    <a href="https://ejohn.org/apps/learn/" rel="external">Aprendendo JavaScript Avançado</a> (John Resig)</dt>
   <dd>
    Guia de John Resig para JavaScript avançado.</dd>
   <dt>
    <a href="https://www.elated.com/articles/javascript-dom-intro/" rel="external">Introduzindo o JavaScript DOM</a> (Elevado)</dt>
   <dd>
    O que é o Documento de Objeto Modelo, e porque ele é útil? Este artigo dá a você uma suave introdução a esta poderosa característica do JavaScript.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Uma API Incoveniente: A teoria do DOM</a> (Blog YUI)</dt>
   <dd>
    Douglas Crockford explica o Documento de Objeto Modelo.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">JavaScript Avançado</a> (Blog YUI)</dt>
   <dd>
    Douglas Crockford olha de perto o código padrão da qual programadores de JavaScript podem escolher em autorar suas aplicações.</dd>
   <dt>
    <a href="https://bonsaiden.github.com/JavaScript-Garden/" rel="external">Jardim do JavaScript</a></dt>
   <dd>
    Documentação das partes mais peculiares de JavaScript.</dd>
   <dt>
    <a href="https://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Qual Framework do JavaScript</a> (StackOverflow)</dt>
   <dd>
    Atenção na escolha de uma framework do JavaScript.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Downloads de JavaScript Sem Bloqueio</a> (Blog YUI)</dt>
   <dd>
    Dicas na melhora da performance do download de páginas contendo JavaScript.</dd>
  </dl>
  <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais CSS</h2>
  <h3 id="Introductory_level">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">Começando no CSS</a></dt>
   <dd>
    Este tutorial te introduz no Cascading Style Sheets (CSS). Ele te guia através das características básicas de CSS com exemplos práticos que você pode tentar sozinho em seu próprio computador.</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">Seletor de Classes CSS</a> (Wikiversity)</dt>
   <dd>
    Qual são as classes em CSS?</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">CSS Externo</a> (Wikiversity)</dt>
   <dd>
    Usando CSS de um "sheet style" externo.</dd>
   <dt>
    <a href="https://www.w3.org/MarkUp/Guide/Style" rel="external">Adicionando um Estilo de Toque</a> (W3C)</dt>
   <dd>
    Uma guia de iniciante breve para estilizar páginas web com CSS.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Perguntas Comuns de CSS</a></dt>
   <dd>
    Perguntas e respostas comuns para iniciantes.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    Code Avengers é a diverção, efetiva forma de aprender a codificar aplicativos web e jogos com HTML,CSS e JavaScript.</dd>
  </dl>
  <h3 id="Intermediate_level">Nível intermediário</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referência CSS</a></dt>
   <dd>
    Referência completa de CSS, com detalhes de ajuda por Firefox e outros navegadores.</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafios de CSS</a> (Wikiversity)</dt>
   <dd>
    Flexione suas habilidades de CSS, e veja onde você precisa praticar mais.</dd>
   <dt>
    <a href="https://www.html.net/tutorials/css/" rel="external">Conceitos Intermediários de CSS</a> (HTML.net)</dt>
   <dd>
    Agrupamento, pseudo-classes e mais.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/css-positioning-101/" rel="external">101 Posicionamento CSS</a> (Uma Lista À Parte)</dt>
   <dd>
    Usando posicionamento para compilação padrão, layout table-free.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Aprimoramento Progressivo com CSS</a> (Uma Lista À Parte)</dt>
   <dd>
    Integre aprimoramento progressivo em páginas web com CSS.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/fluidgrids/" rel="external">Grades Fluídas</a> (Uma Lista À Parte)</dt>
   <dd>
    Design layouts que fluidamente redimencionam com a janela do navegador, enquanto ainda usando uma grade tipográfica.</dd>
  </dl>
  <h3 id="Advanced_level">Nível avançado</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Usando Transformações de CSS</a></dt>
   <dd>
    Aplique Rotação, distorção, escala, e tradução usando CSS.</dd>
   <dt>
    <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">Transições CSS</a></dt>
   <dd>
    Transições CSS, parte do rascunho da especificação de CSS3, provê uma forma de animar mudanças nas propriedades de CSS em vez de ter as mudanças tomando efeito imediatamente.</dd>
   <dt>
    <a href="https://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia Rápido de Implementação de Fontes da Web com @font-face</a> (HTML5 Rocks)</dt>
   <dd>
    A característica @font-face do CSS3 permite que você use typefaces personalizadas na web em uma acessível, manipulável e escalável forma.</dd>
   <dt>
    <a href="https://davidwalsh.name/starting-css" rel="external">Começando a Escrever em CSS</a> (David Walsh)</dt>
   <dd>
    Uma introdução das ferramentas e metodologias para escrever mais sucinta, sustentável e escalavelmente em CSS.</dd>
  </dl>
 </div>
</div>
<p>&nbsp;</p>