diff options
Diffstat (limited to 'files/pt-br/mdn')
38 files changed, 3900 insertions, 0 deletions
diff --git a/files/pt-br/mdn/about/index.html b/files/pt-br/mdn/about/index.html new file mode 100644 index 0000000000..431d0bf6a5 --- /dev/null +++ b/files/pt-br/mdn/about/index.html @@ -0,0 +1,118 @@ +--- +title: Sobre o MDN +slug: MDN/About +tags: + - Colaboração + - Comunidade + - Guia(2) + - Licenças + - MDN Meta +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/pt-BR/docs/MDN")}}</div> + +<p>A Rede de Desenvolvedores da Mozilla (MDN) é uma plataforma de aprendizagem em evolução para tecnologias da Web e o software que alimenta a Web, incluindo:</p> + +<ul> + <li>Padrões web como <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, e <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open Web app development</a> </li> + <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Firefox add-on development</a></li> +</ul> + +<h2 id="Nossa_missão">Nossa missão</h2> + +<p>A missão da MDN é simples: prover uma completa, exata e <span class="short_text" id="result_box" lang="pt"><span class="hps">útil documentação para tudo sobre a open Web</span></span>, <span id="result_box" lang="pt"><span class="hps">sendo ele construído, </span><span class="hps">suportado</span> <span class="hps">ou não pela Mozilla</span><span class="hps">.</span> <span class="hps">Se é</span> <span class="hps">uma tecnologia aberta</span> <span class="hps">e </span><span class="hps">Web</span><span>, queremos</span> <span class="hps">documentá-lo</span><span>.</span></span></p> + +<p>Além disso, podemos fornecer a documentação sobre como <a href="/en-US/docs/Mozilla">desenvolver e contribuir com os projetos da Mozilla</a>, <a href="/en-US/Firefox_OS">Firefox OS</a> e <a href="/en-US/Apps">desenvolvimento de Web app</a>.</p> + +<p>Se você não tem certeza se um tópico específico deve ser abordado no MDN leia: <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Isso pertence ao MDN?</a></p> + +<h2 id="Como_você_pode_ajudar">Como você pode ajudar</h2> + +<p>Você não precisa ser capaz de programar - or escrever - para poder ajudar a MDN! Nós temos muitos caminhos por onde você pode ajudar, de uma revisão de artigos para ter certeza que fazem sentido, até contribuindo com texto, adicionando códigos de exemplo. Na verdade existem tantas formas de ajudar que nós temos uma <a href="/en-US/docs/MDN/Quick_start">ferramenta para ajudá-lo a escolher tarefas para ajudar</a>, baseada em seus interesses e na sua quantidade de tempo livre.</p> + +<h2 id="A_comunidade_MDN">A comunidade MDN</h2> + +<p>Nossa comunidade é global! Nós temos contribuidores incríveis ao redor do mundo todo, em muitos idiomas. Se você gostaria de descobrir mais sobre nós, ou se precisa de qualquer tipo de ajuda com a MDN, fique livre para checar nosso fórum de discussões ou canal IRC!</p> + +<h2 id="Licenças_e_cópias_de_direito">Licenças e cópias de direito</h2> + +<p>Os documentos wiki da MDN foram preparados com as contribuições de muitos autores, de dentro e de fora da Mozilla Foundation. A menos que seja indicado, o conteúdo está disponível sob os termos da <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 ou qualquer versão mais recente. Por favor, atribua "Mozilla Contributors" e inclua um hyperlink (online) ou URL (impresso) para a página da wiki específica do conteúdo referenciado. Por exemplo, para atribuir a este artigo, você pode escrever: </p> + +<blockquote><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> por <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> está licenciado sob <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote> + +<p>Note que nesse exemplo, "Mozilla Contributors" leva para a história da página citada. Veja <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> para explicações mais detalhadas.</p> + +<div class="note"> +<p><strong>Nota:</strong> Veja <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> para informações sobre como reutilizar e atribuir conteúdo da MDN naquele site.</p> +</div> + +<p>Amostras de código adicionadas a esta wiki antes de 20 de agosto de 2010 estão disponíveis sob a <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>; você deveria inserir a seguinte informação de atribuição no template MIT: "© <data da última revisão da página da wiki> <nome da pessoa que a inseriu na wiki>".</p> + +<p>Amostras de código adicionadas no dia 20 de agosto de 2010 ou depois estão no <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. Não é necessário um aviso de licença, mas se você precisa de um, você pode utilizar: "Qualquer direito de cópia é dedicado ao Domínio Público. http://creativecommons.org/publicdomain/zero/1.0/".</p> + +<p>Se você deseja contribuir para esta wiki, você deve tornar sua documentação disponível pela licença Attribution-ShareAlike (ou ocasionalmente uma licença alternativa já especificada pela página que você está editando), e suas amostras de código disponívels sob a <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (uma dedicação de Domínio Público). Acrescentar a esta wiki significa que você concorda que suas contribuições serão feitas sob estas licenças.</p> + +<p>Alguns conteúdos mais antigos foram disponibilizados sob uma licença diferente das citadas acima; estas são indicadas no final de cada página em um <a class="internal" href="/Project:en/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p> + +<div class="warning"> +<p><strong>Importante:</strong> Nenhuma nova página deve ser criada usando licenças alternativas.</p> +</div> + +<p>Os direitos de cópia para materiais de contribuição permanecem com o(a) autor(a), a menos que ele(a) os atribua a outra pessoa.</p> + +<p>Se você tem perguntas ou dúvidas sobre algo exposto aqui, por favor contate <a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p> + +<hr> +<p>Os direitos das marcas, logos, marcas de serviço da Mozilla Foundation, bem como o visual e estrutura deste site, não estão licenciados pela Creative Commons, e enquanto são trabalhos autorais (como logos e design gráfico), eles não estão inclusos no trabalho que está licenciado nesses termos. Se você utilizar o texto de documentos, e quiser também usar qualquer um destes direitos, ou se tem outras perguntas sobre cumprir com nossos termos de licença para esta coleção, você deve contatar a Mozilla Foundation aqui: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> + +<h2 id="Baixar_conteúdo">Baixar conteúdo</h2> + +<p>Você pode baixar o conteúdo de uma página individual na MDN adicionando <a href="/en-US/docs/Project:MDN/Kuma/API#Document_parameters">document parameters</a> à URL para especificar qual formato deseja.</p> + +<p>Se você quiser baixar um dump SQL completo e anonimizado da base de dados da MDN -- isto é, uma cópia da base de dados com todas as informações privadas de usuários removidas, nós também fornecemos isso. Esse dump é atualizado no primeiro dia de todo mês.</p> + +<p>Existem três arquivos que compreendem o dump mensal anonimizado da MDN:</p> + +<dl> + <dt><code><date>.sanitized.devmo_sanitize.sql.gz</code></dt> + <dd>O dump de banco de dados MySQL sanitizado de todo o conteúdo da MDN, registros de datas, e assim por diante. Inclui todo o conteúdo de artigos, registros de histórico, e assim por diante. Todas as informações pessoais de usuários são retiradas (como endereços de email).</dd> + <dt><code>attachments-<date>.tar.gz</code></dt> + <dd>Esse arquivo contém todos os uploads de arquivos anexos feitos para a wiki.</dd> + <dt><code>uploads-<date>.tar.gz</code></dt> + <dd>Esse arquivo (muito grande!) contém os uploads de arquivos para o Demo Studio. Se você tem interesse apenas no conteúdo da wiki, você não precisa baixar isso.</dd> +</dl> + +<p><a href="https://developer.allizom.org/landfill/">Visite o aterro da MDN</a> para baixar esses arquivos.</p> + +<h3 id="Ferramentas_de_terceiros">Ferramentas de terceiros</h3> + +<p>Você também pode visualizar o conteúdo da MDN via ferramentas de terceiros como o <a href="http://kapeli.com/dash">Dash</a> (para Mac OS) e <a href="http://zealdocs.org/">Zeal</a> (para Linux e Windows).</p> + +<h2 id="Informando_problemas_com_a_MDN">Informando problemas com a MDN</h2> + +<p>De vez em quando, você pode encontrar problemas usando a MDN. Seja um problema com a infraestrutura do site ou um erro no conteúdo da documentação, você pode tentar consertar sozinho ou reportar o problema. Enquanto a primeira opção é preferida, a última é às vezes o melhor que você consegue fazer, e tudo bem com isso também.</p> + +<h3 id="Erros_na_documentação">Erros na documentação</h3> + +<p>Obviamente, já que a MDN é uma wiki, a melhor coisa que você pode fazer é consertar problemas que você encontrar sozinho. Mas talvez você não saiba a resposta, ou esteja no meio de uma correria para o hospital ou algo assim, e precise anotar o problema pra que alguém possa olhar depois.</p> + +<p>Como tudo o que é Mozilla, você pode reportar um problema na documentação registrando um bug. É aí que entra o registro de um <a href="https://bugzilla.mozilla.org/form.doc">documentation request bug</a>. Nosso útil formulário de solicitação de documentação reunirá as informações necessárias para que possamos começar a consertar o problema.</p> + +<p>Naturalmente, nossa comunidade de escrita é atarefada, então às vezes a forma mais rápida de ver um problema de documentação resolvido é consertá-lo você mesmo. Veja <a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages" title="/en-US/docs/Project:MDN/Contributing/Creating_and_editing_pages">Criando e editando páginas</a> para detalhes.</p> + +<h3 id="Bugs_do_site_ou_solicitar_recursos">Bugs do site ou solicitar recursos</h3> + +<p><a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a>, a plataforma desenvolvida pela Mozilla usada para o web site da MDN, está em um constante estado de desenvolvimento. Nossos desenvolvedores—assim como vários contribuidores voluntários—estão constantemente fazendo melhorias. Se você encontrar um bug, ou tiver um problema com o site, ou ainda tiver uma sugestão para algo que poderia tornar o software mais incrível, você pode usar o <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/form.mdn">Kuma bug form</a> para preencher um relatório.</p> + +<h2 id="História_da_MDN">História da MDN</h2> + +<p>O projeto Mozilla Developer Network (a.k.a. Mozilla Developer Center (MDC), a.k.a. <em>Devmo</em>) começou no início de 2005, quando a <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> obteve uma licença da AOL para utilizar o conteúdo original <a href="/Project:en/DevEdge" title="Project:en/DevEdge">DevEdge</a>. Os materiais ainda úteis foram extraídos do conteúdo DevEdge, e então migrados por voluntários para essa wiki, pra que a manutenção e atualização fossem mais fáceis.</p> + +<p>Desde então, o projeto continuou a crescer e agora forma um nexo central para toda a documentação para desenvolvedores relacionada ao Mozilla Project e tecnologias abertas da web. Em 2010, o nome mudou para Mozilla Developer Network; 2011 viu a adição do <a class="external" href="http://developer.mozilla.org/en-US/demos" title="https://developer.mozilla.org/en-US/demos/">Demo Studio</a> para desenvolvedores web compartilharem e exibirem seu código, e páginas <a class="external" href="http://developer.mozilla.org/en-US/learn" title="https://developer.mozilla.org/en-US/learn">Learning</a> para fornecer links de tutoriais. (O nome MDC ainda vive como "MDN Doc Center" para a seção de documentação.) A tempo, espera-se que a Mozilla Developer Network se torne um recurso que web designers, desenvolvedores de aplicações, e escritores de extensões e temas visitam regularmente. </p> + +<h2 id="Sobre_a_Mozilla">Sobre a Mozilla</h2> + +<p><span id="result_box" lang="pt"><span>Se você quer saber mais sobre quem somos, como fazer parte da Mozilla ou apenas onde nos encontrar, você veio ao lugar certo.</span> <span>Para descobrir o que nos impulsiona e nos torna diferentes, visite nossa página de <a href="http://www.mozilla.org/en-US/mission/">missão</a>.</span></span></p> diff --git a/files/pt-br/mdn/comunidade/index.html b/files/pt-br/mdn/comunidade/index.html new file mode 100644 index 0000000000..5157192748 --- /dev/null +++ b/files/pt-br/mdn/comunidade/index.html @@ -0,0 +1,42 @@ +--- +title: Participe da comunidade MDN +slug: MDN/Comunidade +tags: + - Comunidade + - Guia(2) + - Iniciando +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div class="summary"> +<p>A Documentação Web da MDN é mais que uma wiki: É uma comunidade de desenvolvedores trabalhando juntos para fazer do MDN um excelente material para desenvolvedores que usam as tecnologias abertas da Web.</p> +</div> + +<p>Adoraríamos se você contribuísse com o MDN, mas adoraríamos ainda mais se participasse da comunidade MDN. Veja como se conectar, em três passos fáceis:</p> + +<ol> + <li><a href="/pt-BR/docs/MDN/Contribute/guia/Create_an_MDN_account">Crie uma conta no MDN.</a></li> + <li><a href="/pt-BR/docs/">Participe das conversas.</a></li> + <li><a href="/pt-BR/docs/MDN/Comunidade/Whats_happening">Siga o que está acontecendo.</a></li> +</ol> + +<h2 id="Como_a_comunidade_funciona">Como a comunidade funciona</h2> + +<p>A seguir, mais artigos que descrevem a comunidade MDN.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="">Cargos da comunidade</a></dt> + <dd class="landingPageList">Existem vários cargos dentro da comunidade MDN com responsabilidades específicas.</dd> + <dt class="landingPageList"><a href="">Sprints de documentação</a></dt> + <dd class="landingPageList">Este é um guia para organizar uma sprint de documentação. Ele contém recomendações e dicas de pessoas que já organizaram sprints de documentação, para te ajudar a organizar uma também.</dd> + <dt class="landingPageList"><a href="">Siga o que está acontecendo</a></dt> + <dd class="landingPageList">A MDN chega até você através da <a class="external" href="">comunidade da Rede de Desenvolvedores da Mozilla</a>. Aqui estão algumas formas das quais nós compartilhamos informações sobre o que fazemos.</dd> +</dl> + +<dl> +</dl> +</div> +</div> diff --git a/files/pt-br/mdn/comunidade/roles/index.html b/files/pt-br/mdn/comunidade/roles/index.html new file mode 100644 index 0000000000..af709a0228 --- /dev/null +++ b/files/pt-br/mdn/comunidade/roles/index.html @@ -0,0 +1,8 @@ +--- +title: Community roles +slug: MDN/Comunidade/Roles +translation_of: MDN/Community/Roles +--- +<div>{{MDNSidebar}}</div> + +<p>Há muitos cargos dentro da comunidade MDN, cada um com responsabilidades específicas.{{LandingPageListSubPages()}}</p> diff --git a/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html b/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html new file mode 100644 index 0000000000..38d851532d --- /dev/null +++ b/files/pt-br/mdn/comunidade/trabalhando_em_comunidade/index.html @@ -0,0 +1,100 @@ +--- +title: Trabalhando em comunidade +slug: MDN/Comunidade/Trabalhando_em_comunidade +translation_of: MDN/Community/Working_in_community +--- +<div>{{MDNSidebar}}</div> + +<p>Uma importante parte de contribuir com a documentação da MDN em qualquer escala significativa é saber como trabalhar como parte da comunidade MDN. Esse artigo oferece dicas sobre como você pode tirar o melhor proveito das suas interações com outros escritores e outros times de desenvolvimento.</p> + +<h2 id="Dicas_gerais_de_etiqueta">Dicas gerais de etiqueta</h2> + +<p>Aqui estão algumas dicas gerais de conduta quando trabalhando na comunidade Mozilla.</p> + +<ul> + <li>Seja educado! Mesmo em discordância, todos nós temos a mesma missão: melhorar a Web.</li> + <li>Peça, não exija. As pessoas estarão muito mais dispostas a ajudar de forma responsiva quando você educadamente pedir ajuda em vez de exigi-la. Ainda que o trabalho de documentação seja importante, e nossa comunidade de desenvolvimento saiba disso, o instinto humano tende a fazer com que as pessoas sejam abrasivas e difíceis de lidar se você não tratá-las com o devido respeito.</li> + <li>Equilibre sua necessidade de informação juntamente com a urgência da documentação e o tempo que os outros na sua discussão tem para dedicar a ajudá-lo. Não fique pedindo mais e mais detalhes, a ponto de deixar loucos os outros envolvidos na conversa, se realmente não forem necessários nesse momento.</li> + <li>Tenha em mente que seu pedido toma tempo valioso das pessoas com as quais você entrou em contato, então tenha certeza de fazer bom uso do tempo delas.</li> + <li>Considere diferentes culturas. Mozilla é uma multinacional e possui uma equipe multicultural, então quando contatar alguém cuja cultura é, ou pode ser, diferente da sua, seja claro e mantenha em mente isto enquanto se comunica.</li> + <li>Inicie uma nova conversa em vez de reutilizar uma conversa existente. Não insira suas questões dentro de uma conversa não relacionada ao assunto principal somente porque as pessoas nas quais você precisa falar estão prestando atenção nisto. Embora isso pareça ser conveniente para você, isso pode irritar as pessoas que você está tentando conversar, e ocasiona um resultado abaixo do ideal.</li> + <li>Evite a {{interwiki("wikipedia", "Lei da trivialidade")}}. Não deixe seu entusiasmo virar pedantice chata. Isso faz com que as conversas fiquem cansativas e percam o foco.</li> +</ul> + +<h2 id="Tenha_sensatez">Tenha sensatez</h2> + +<p>Sempre seja sensato e respeitoso quando se comunicar com os outros.</p> + +<h3 id="Gentilmente_aponte_os_erros">Gentilmente aponte os erros</h3> + +<p>Se seu propósito em contatar alguém é para pedi-los para fazer alguma coisa diferentemente, ou apontar enganos que eles estão cometendo (especialmente se eles repetidamente estão fazendo isto), inicie sua mensagem com um comentário positivo. Isto suaviza o impacto, por assim dizer, e demonstra que você está tentando ser prestativo, ao invés de definir você como o cara mau.</p> + +<p>Por exemplo, se um novo contribuidor tiver criado muitos páginas sem tags, e você gostaria de pontuar esse problema, sua mensagem para eles podem ser desta forma (o que você precisa mudar para cada caso está sublinhado):</p> + +<blockquote> +<p>Oi, <u>MrBigglesworth</u>, eu tenho que notificar suas contribuições para a <u>documentação da </u> <u><em>Wormhole</em> API</u> e isto é fantástico ter sua ajuda! Eu particularmente gosto <u>do modo que você equilibra seu nível de detalhes com legibilidade</u>. Dito isto, contudo, você poderia fazer estes artigos sempre melhores e mais pertinentes se <u>adicionar as corretas tags para as páginas </u>enquanto você elabora.</p> + +<p><u>Veja o MDN guia de etiquetas (https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente) para detalhes.</u></p> + +<p>Obrigado novamente, e aguardo suas futuras contribuições!</p> +</blockquote> + +<h2 id="Compartilhe_conhecimento">Compartilhe conhecimento</h2> + +<p>Assim que você participa do projeto MDN, é útil saber o que está acontecendo, e interagir com outros membros de sua comunidade. Para conversar com outros em nossa comunidade, você pode seguir e compartilhar ideias, status atualizado, e mais. Nós também temos ferramentas e informações que podem ajudar você a saber o que está sendo feito, e por quem.</p> + +<h3 id="Canais_de_comunicação">Canais de comunicação</h3> + +<p>Há muitos caminhos que você pode engajar como membro da comunidade (como desenvolvedor ou como escritor), cada um tem algumas regras particulares de etiqueta.</p> + +<h4 id="Bugzilla">Bugzilla</h4> + +<p>Quando escrever documentação para cobrir mudanças implementadas como um resultado de um bug no Bugzilla, você frequentemente interagirá com pessoas envolvidas naquele projeto. Seja claro para continuar o guia de <a href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">etiqueta Bugzilla</a> em mente em todas às vezes!</p> + +<h4 id="E-mail">E-mail</h4> + +<p>Algumas vezes, uma troca de e-mail privado entre você e uma ou mais pessoas, é o caminho para seguir, se você possuir os endereços de e-mails deles.</p> + +<div class="note"> +<p><strong>Nota:</strong> Como regra geral, <span id="result_box" lang="pt"><span>se alguém postou o endereço de e-mail pessoal em documentos sobre a tecnologia que você está documentando</span></span>, ou deu a você o endereço de e-mail pessoal, <span id="result_box" lang="pt"><span>ou geralmente tem um endereço de e-mail bem conhecido, então o e-mail torna-se uma abordagem aceitável como "primeiro contato"</span></span>. <span id="result_box" lang="pt"><span>Se você precisa "escavar" mais sobre o assunto, provavelmente você deve tentar obter aguma permissão no Matrix ou em uma lista de discussão primeiro, a menos que você tenha esgotado todas as outras tentativas de entrar em contato.</span></span></p> +</div> + +<h3 id="Ferramenta_de_status_de_conteúdo">Ferramenta de status de conteúdo</h3> + +<p>Nós temos muitas ferramentas úteis que fornecem informações sobre o status do conteúdo da documentação.</p> + +<dl> + <dt><a href="/dashboards/revisions">Painel de Controle (<em>Dashboard</em> ) para revisão</a></dt> + <dd>O painel de controle para revisão providencia uma ferramenta fantástica para revisar mudanças feitas para o conteúdo do MDN. Você pode ver as histórias recentes, ou escolher um período de tempo para vê-las, e filtrar resultados com base em características como localidade, nome de contribuidores, e tópicos. Uma vez que você está olhando para um conjunto de revisões, você pode ver as mudanças feitas em cada revisão, <span id="result_box" lang="pt"><span>abrir rapidamente a página, ver um histórico completo ou até reverter as alterações (se você tiver esses privilégios)</span></span>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Visão geral do status da documentação </a></dt> + <dd><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Nossa visão geral do status da documentação</a> página providencia uma lista de todas as áreas do MDN que você tem configurado pela trilha de status, com informações sobre como muitas páginas são necessárias diferentes tipos de trabalho feito. Clique através de um particular tópico de área para ver detalhadas listas de conteúdo que necessitam trabalhar, tais como páginas que não tem tags, ou são tags com indicadores que certos tipos de trabalhos necessários para ser feito. Você pode mesmo ver listas de páginas que não tem sido atualizado em um longo tempo e pode se desatualizado, tão bem quanto uma lista de bugs que tem sido sinalizado como impactante na documentação daquela área.</dd> + <dt><a href="/en-US/docs/MDN/Plans">Documentação dos planos de projetos</a></dt> + <dd>Nós temos um número de projetos escritos que estão no estágio de planejamento, ou são largos e em progresso, para o qual nós temos escrito documento de planejamento para ajudar-nos a guardar a trilha daquilo que nós precisamos fazer.</dd> + <dt><a href="https://trello.com/b/HAhl54zz/status">MDN Trello board</a></dt> + <dd>The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read <a href="/en-US/docs/MDN/Contribute/Community/Trello">this page</a>.</dd> +</dl> + +<h3 id="A_comunidade_de_desenvolvimento">A comunidade de desenvolvimento</h3> + +<p>Possivelmente o mais importante relacionamento para desenvolver e manter, como um membro da comunidade de escrita do MDN, são aqueles que você desenvolve e sustenta com os desenvolvedores. Eles criam o software que nós estamos desenvolvendo, mas eles são também os mais usuais recursos de informações que nós temos. É crucial que nós mantenhamos bons relacionamentos com os desenvolvedores, pois são como você, vão responder suas questões rapidamente, precisamente, e completamente!</p> + +<p>Em adição, você representa a comunidade de escrita MDN.</p> + +<p>Por favor ajude a garantir que nós mantenhamos nosso excelente relacionamento de trabalho com a equipe dev para fazer toda a interação entre eles e a equipe de escrita seja ótima.</p> + +<p>Em uma nota de relato, um grande caminho para encontrar a pessoa certa para falar olhe nas <a href="https://wiki.mozilla.org/Modules">listas dos responsáveis dos módulos.</a></p> + +<h2 id="A_comunidade_de_escrita">A comunidade de escrita</h2> + +<p>A comunidade de escrita é muito grande. Enquanto o número de frequentes extremos, ou contribuidores de grande escala é relativamente pequeno, Há muitas dezenas ou centenas de pessoas que contribuem de vez em quando. Felizmente, estas são grandes pessoas maravilhosas com um genuíno amor da web, Mozilla, e/ou documentação, e interagem com eles e quase sempre muito bonito.</p> + +<p>Veja o artigo <a href="/en-US/docs/MDN/Community">una a comunidade</a> para mais informações sobre a comunidade MDN.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contribuindo para o MDN</a></li> + <li><a href="/pt-BR/docs/Project:MDN/Contributing/Join_the_community" title="/pt-BR/docs/Project:MDN/Contributing/Join_the_community">Comunidade MDN</a></li> + <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">Como enviar e responder um e-mail</a></li> + <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">Como ser um<em> Mozillian</em></a></li> +</ul> diff --git a/files/pt-br/mdn/comunidade/whats_happening/index.html b/files/pt-br/mdn/comunidade/whats_happening/index.html new file mode 100644 index 0000000000..93783e777f --- /dev/null +++ b/files/pt-br/mdn/comunidade/whats_happening/index.html @@ -0,0 +1,37 @@ +--- +title: Siga o que está acontecendo +slug: MDN/Comunidade/Whats_happening +translation_of: MDN/Community/Whats_happening +--- +<div>{{MDNSidebar}}</div><p>MDN is brought to you by Mozilla's <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement" title="https://wiki.mozilla.org/Engagement/Developer_Engagement">Developer Engagement</a> community. Here are some ways to that we share information about what we're doing.</p> + +<h2 id="Blogs">Blogs</h2> + +<dl> + <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> + <dd>News about and in-depth coverage of Web and Mozilla technologies and features.</dd> + <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> + <dd>Promoting activity and discussion amongst the community involved in Developer Relations at Mozilla.</dd> +</dl> + +<h2 id="Streams_of_ephemera">Streams of ephemera</h2> + +<ul> + <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks"><span id="cke_bm_286S" style="display: none;"> </span>@MozHacks</a>: Tweets about new web technologies, great HTML5 apps, and Firefox features.</li> + <li><a href="https://twitter.com/NewOnMDN" title="https://twitter.com/NewOnMDN">@NewOnMDN</a>: Curated feed of new pages, significant updates, and other news about Mozilla Developer Network.</li> + <li><a href="https://plus.google.com/+MozillaDeveloperNetwork" title="https://plus.google.com/+MozillaDeveloperNetwork">+MozillaDeveloperNetwork</a></li> + <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> + <li><a href="https://twitter.com/mozhacks/moz-developer-engagement" title="https://twitter.com/mozhacks/moz-developer-engagement">Moz Developer Engagment</a>: People on Twitter who are actively involved in Developer Engagement for Mozilla.</li> +</ul> + +<h2 id="Status_boards_and_dashboards">Status boards and dashboards</h2> + +<p>The MDN documentation team maintains a <a href="https://trello.com/b/HAhl54zz/status">Trello board</a> on which our projects are tracked. This board is read-only but will let you see what's being worked on and what we hope to do soon, and may help you figure out where you can help.</p> + +<p>In addtion, take a look at the <a href="/en-US/docs/MDN/Doc_status">Documentation status</a> pages to see what's going on across the full breadth of MDN content. You'll be able to see what articles need to be written or updated, what topics need the most help, and much, much more.</p> + +<h2 id="MDN_community_meetings">MDN community meetings</h2> + +<p>Community meetings occur every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> channel. See the <a href="https://wiki.mozilla.org/MDN/Community_meetings" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN community meetings</a> wiki page for agendas and notes from past meetings.</p> + +<p>The <a class="external text" href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html" rel="nofollow">MDN Events</a> calendar contains MDN community meetings, doc sprints, and other MDN-related events.</p> diff --git a/files/pt-br/mdn/contribute/collaboration_tactics/index.html b/files/pt-br/mdn/contribute/collaboration_tactics/index.html new file mode 100644 index 0000000000..22b22715be --- /dev/null +++ b/files/pt-br/mdn/contribute/collaboration_tactics/index.html @@ -0,0 +1,65 @@ +--- +title: Táticas de colaboração intra equipe para documentação +slug: MDN/Contribute/Collaboration_tactics +tags: + - Documentação + - Guia(2) + - Guía + - MDN + - Projeto MDC +translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Uma coisa que aprendemos na MDN é que quando equipes de desenvolvimento e documentação de um dado projeto, API ou tecnologia trabalham próximas uma da outra—e juntas— a documentação ganha uma qualidade inacreditável. Este guia sugere algumas táticas para que equipes de desenvolvimento e documentação trabalhem de mãos dadas.</span></p> + +<div class="note"> +<p><strong>Nota:</strong> Este artigo é um trabalho em progresso, um documento aberto. Caso você conheça outras maneiras de integrar equipes de desenvolvimento e documentação, convidamos você à dividi-las conosco aqui!</p> +</div> + +<h2 id="Integrando-se">Integrando-se</h2> + +<p>Idealmente, quando o desenvolvimento de uma nova tecnologia ou projeto são concebidos, a equipe de desenvolvimento avisa a equipe de documentação que algo novo está à caminho e precisará ser documentado. Algumas vezes não é isso que acontece, e a equipe MDN monitora a Bugzilla observando todo trabalho que precisará ser documentado, porém em um mundo perfeito, nós receberemos um aviso prévio de maneira mais direta.</p> + +<p>A melhor maneira de notificar a equipe MDN sobre um novo projeto o qual precisamos ficar cientes é <a href="https://bugzilla.mozilla.org/form.doc">preenchendo uma requisição de documentação de defeito</a>. Fornecer uma lista de contatos em conjunto com as respectivas dúvidas é uma ótima maneira de ajudar! Incluir links para os defeitos relacionados ao projeto também é uma grande ajuda.</p> + +<h2 id="Compartilhando_informação">Compartilhando informação</h2> + +<p>Existem diversas maneiras úteis e diferentes de compartilhar informação. Apresentamos algumas sugestões a seguir.</p> + +<h3 id="Defeitos">Defeitos</h3> + +<p>Certificar-se de que a equipe de documentação está ciente dos defeitos que refletem na documentação é de grande ajuda. O uso adequado das palavras-chaves de documentação e desenvolvimento e das tags de comentários leva tempo. Consulte <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated">Atualizando documentação</a> para mais informações.</p> + +<h3 id="Reuniões">Reuniões</h3> + +<p>Equipes de desenvolvimento realizam reuniões frequentemente. Sempre que possível e necessário(e muitas vezes é bastante necessário), a equipe MDN tenta enviar alguém para assistir estas reuniões. Esta é uma boa maneira de saber o que esta acontecendo, como os horários estão dispostos, e assim por diante.</p> + +<p>Além disso, os profisionais que trabalham em grandes áreas de documentação, tais como documentação de APIs Web, muitas vezes realizam reuniões para acompanhar a evolução da documentação. Estes profissionais adoram ter um desenvolvedor à disposição para participar de tais reuniões; acaba sendo incrivelmente útil para todos os envolvidos.</p> + +<p>Estas reuniões geralmente são curtas e possuem uma agenda similar a esta:</p> + +<ol> + <li>Atualizações sobre o andamento das atividades de documentação.</li> + <li>Perguntas/atualizações da equipe de desenvolvimento para a equipe de documentação: pode incluir perguntas sobre a evolução de documentos específicos, informações sobre conteúdo específico que é urgentemente necessário, notas sobre problemas com conteúdo já existente, e assim por diante.</li> + <li>Perguntas/atualizações da equipe de documentação para a equipe de desenvolvimento: esta é uma oportunidade para a equipe de documentação perguntar sobre possíveis bugs, se alguém pode se disponibilizar para revisar algum documento específico, se há um engenheiro em específico que esteja disponível para responder perguntas sobre uma determinada API, esse tipo de coisa.</li> +</ol> + +<p><a href="https://wiki.mozilla.org/MDN/WebAPI_documentation_meetings">Reuniões de documentação de APIs Web</a> têm sido realizadas por meses em Vidyo, com grande sucesso. Cada semana, a equipe de desenvolvimento da API Web têm pelo menos um membro (e muitas vezes dois) para a reunião, e temos sido extremamente produtivos, realizando as reuiniões em 15 minutos ou menos.</p> + +<h3 id="Semanas_de_trabalho">Semanas de trabalho</h3> + +<p>Convide os responsáveis pela documentação para acompanhar a equipe de desenvolvimento em uma semana de trabalho ou reunião. Isto tem muitas vantagens, incluindo:</p> + +<ul> + <li>Melhora na comunicação pois a equipe de documentação sabe das mudanças em primeira mão.</li> + <li>Melhora na convivência entre os membros da equipe de desenvolvimento e documentação pois cada uma se conhecerá melhor.</li> + <li>Os membros da equipe de documentação encontram as pessoas corretas com quem falar de forma mais cômoda e acessível.</li> + <li>Oferece uma oportunidade especial para responder perguntas ou solucionar problemas em uma conversa um-para-um.</li> +</ul> + +<p>Se você não sabe se existe um membro para documentação atribuído ao tópico da sua área acompanhando sua semana de trabalho, não hesite em <a href="mailto:eshepherd@mozilla.com?subject=Writer%20for%20work%20week">enviar um e-mail para o líder da equipe de documentação</a>, Eric Shepherd, e ele buscará saber se alguém poderá auxiliar. Ele buscará alguém lá (ou melhor, buscará um membro exlusivo para documentação no seu projeto)! Tenha em mente, porém, que a equipe de documentação é pequena, então encontrar alguém para acompanhar uma semana de trabalho em um curto prazo é uma tarefa complicada.</p> + +<h3 id="Páginas_de_estado_de_documentação">Páginas de estado de documentação</h3> + +<p>Grandes projetos de documentação na MDN agora utilizam páginas de estados a fim de acompanhar o que falta ser feito, e o que já foi feito, para conseguir realizar o trabalho. Tais páginas fornecem uma lista de tarefas a serem realizadas, bem como o estado de cada tarefa.</p> diff --git a/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html b/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html new file mode 100644 index 0000000000..85f02f9231 --- /dev/null +++ b/files/pt-br/mdn/contribute/criando_e_editando_paginas/index.html @@ -0,0 +1,147 @@ +--- +title: Criando e editando páginas +slug: MDN/Contribute/criando_e_editando_paginas +tags: + - Colaborando + - Colaborar + - Contribuindo + - Criando + - Editando + - MDN + - nova pagina +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +<div>{{MDNSidebar}}</div> + +<p>As duas tarefas mais básicas sobre MDN que quase todo contribuinte MDN irá eventualmente executar são para editar uma página já existente ou criar uma nova. Este artigo aborda os conceitos básicos de como fazer cada uma delas.</p> + +<h2 id="Editando_uma_página_existente"><a id="Editando uma págia existente" name="Editando uma págia existente">Editando uma página existente</a></h2> + +<p>É fácil editar:</p> + +<ul> + <li>Clique no botão editar próximo ao topo na direita no canto da página.</li> + <li>A página recarregará com opções de formatação, assim, você pode adicionar ou deletar informação diretamente na página.</li> + <li>Você pode adicionar parágrafos, deletar texto, inserir cabeçalhos, e mais das tarefas básicas que envolvem edição de textos.</li> +</ul> + +<h3 id="Ver_mudanças">Ver mudanças</h3> + +<p>Para ver como suas mudanças ficaram:</p> + +<ul> + <li>Clique no botão "Visualizar mudanças" (dentro da função de editar) acima do título da página.</li> + <li>Isso abre uma páǵina de pré-visualização que inclui sua revisão em uma nova janela ou aba.</li> + <li>Cada vez que você clica nesse botão, ele recarrega sua página de pré-visualização com as últimas mudanças feitas.</li> +</ul> + +<p>Tenha cuidado! Pré-visualizar uma página <em>não salva</em> as alterações, sendo assim, se lembre de não fechar a página que você está editando sem salvar o conteúdo.</p> + +<h3 id="Revisão_de_comentário">Revisão de comentário</h3> + +<p>Depois que você pré-visualizou suas mudanças, você deve querer salvar sua revisão. Antes de salvar, procure pela caixa de comentários de revisão abaixo da sessão de título da página e deixe um comentário para informar a outros voluntários o que você mudou e o motivo. Por exemplo, você pode ter adicionado uma nova sessão, mudado algumas palavras para fazer a terminologia mais consistente, reescrito um parágrafo para esclarecer o idioma, ou removido informação porque é redundante.</p> + +<h3 id="Tags">Tags</h3> + +<p>Você pode adicionar ou remover tags que descrevam o conteúdo da página. Veja <a href="/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente">como adicionar tags às páginas corretamente</a> para mais informações em que as tags se aplicam.</p> + +<h3 id="Precisa_de_revisão">Precisa de revisão?</h3> + +<p>Se você quiser que um contribuidor experiente revise suas edições, você pode requisitar uma revisão técnica (para códigos, APIs, ou tecnologias), uma revisão editorial (textual, de gramática ou conteúdo), ou uma revisão de template (para código KumaScript) se certificando que a caixa está marcada, antes que você salve.</p> + +<h3 id="Anexar_arquivos">Anexar arquivos</h3> + +<p>Se você quiser anexar um arquivo a uma página para adicionar uma ilustração ou tornar o conteúdo mais claro, o anexo pode ir no final da página.</p> + +<h3 id="Salve_descarte_ou_continue_editando">Salve, descarte ou continue editando</h3> + +<p>Quando você termina uma edição com seu preview, você pode salvar seu trabalho e comentários clicando no botão verde "Salvar alterações" à direita do título da página. Se você mudar de ideia, pode descartar suas edições clicando no botão vermelho "Descartar alterações", também à direita do título da página.</p> + +<p>Pressionar <strong>Enter</strong> no comentário da revisão é equivalente a clicar em "Salvar e continuar editando".</p> + +<h2 id="Criando_uma_nova_página">Criando uma nova página</h2> + +<p>Se você não sabe onde colocar seu artigo, <strong>não se preocupe sobre isso!</strong> Coloque-o em qualquer local e nós vamos encontrá-lo e movê-lo para onde ele pertence, ou mesclá-lo em conteúdo existente se for mais apropriado. Você também não precisa se preocupar sobre deixar tudo perfeito. Nós temos gnomos ajudantes felizes que vão ajudá-lo deixar seu conteúdo lindo.</p> + +<p>Há algumas maneiras de criar uma nova página:</p> + +<ul> + <li><a href="#link-para-pagina-inexistente">Link para "página inexistente"</a></li> + <li><a href="#nova-pagina-sem-link">Nova página sem link</a></li> + <li><a href="#subpagina-de-uma-pagina-existente">Subpágina de uma página existente</a></li> + <li><a href="#clone-de-uma-pagina-existente">Clone de uma página existente</a></li> + <li><a href="#link-para-uma-pagina-existente">Link para página existente</a></li> +</ul> + +<h3 id="Link_para_uma_página_inexistente"><a id="link-para-pagina-inexistente" name="link-para-pagina-inexistente">Link para uma página inexistente</a></h3> + +<p>Como na maioria das wikis, na MDN é possível criar links para uma página que ainda não existe. Por exemplo, um autor pode criar uma lista de todos os membros de uma API, antes de criar as páginas para esses membros. Na MDN, links para página inexistentes geralmente são exibidos em vermelho.</p> + +<p>Para criar um link para uma "página inexistente":</p> + +<ol> + <li>Certifique-se que você está logado na MDN. (Se você não estiver, vai receber um erro 404).</li> + <li>Clique no link "página inexistente". O <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">MDN Editor UI</a> abrirá, pronto para você criar a página inexistente.</li> + <li>Escreva o conteúdo da página e salve-a.</li> +</ol> + +<h3 id="Nova_página_sem_link"><a name="nova-pagina-sem-link">Nova página sem link</a></h3> + +<p><em>Para criar uma nova página sem linkar de outra página</em>, informe o nome único de uma página na barra de endereços do seu navegador. Por exemplo, se você inserir:</p> + +<pre class="language-html">https://developer.mozilla.org/en-US/docs/FooBar</pre> + +<p>O MDN cria uma nova página com o título "FooBar" e abre o editor para você inserir o conteúdo nessa página. Veja a sessão "<a href="#Editando uma págia existente">Editando uma página existente</a>" nesse artigo para ver como usar o editor.</p> + +<h3 id="Subpágina_de_uma_página_existente"><a id="subpagina-de-uma-pagina-existente" name="subpagina-de-uma-pagina-existente">Subpágina de uma página existente</a></h3> + +<p>Para criar uma subpágina que você quer que seja filha de uma página existente:</p> + +<ol> + <li>Na página "pai", clique no menu <strong>Avançado</strong> (o ícone de engrenagem na barra de ferramentas) e clique em <strong>Nova subpágina</strong>.</li> + <li>Digite um título para o documento no campo <strong>Título</strong>.</li> + <li>Mude o <strong>Slug</strong> se necessário (por exemplo, se o título for muito longo e você quiser um título menor). Esse campo é gerado automaticamente pelo editor, substituindo underlines por espaços no título. Nesse caso, você pode mudar apenas a última parte da URL do documento.</li> +</ol> + +<h3 id="Clone_de_uma_página_existente"><a id="clone-de-uma-pagina-existente" name="clone-de-uma-pagina-existente">Clone de uma página existente</a></h3> + +<p>Se houver uma página existente cujo formato você quer usar numa página nova, você pode clonar essa página e mudar seu conteúdo</p> + +<ol> + <li>Na página original, clique no menu <strong>Avançado</strong> (o ícone de engrenagem na barra de ferramentas) e clique em <strong>Clonar essa página</strong>. O editor vai abrir para que você mude seu conteúdo.</li> + <li>Mude o <strong>Título</strong> da página conforme apropriado. O campo <strong>Slug</strong> é atualizado automaticamente quando você muda o campo <strong>Título</strong>.</li> + <li>Se necessário, mude o caminho do campo <strong>Slug</strong> para colocar o documento em uma parte diferente da hierarquia dele.</li> + <li>No campo <strong>TOC</strong>, selecione os níveis de cabeçalho que você quer que sejam automaticamente exibidos na tabela de conteúdo da página, ou "Sem tabela de conteúdos" se a página não precisar de uma.</li> + <li>Escreva o conteúdo da página e salve suas alterações. Veja a sessão "<a href="#Editando uma págia existente">Editando uma página existente</a>" nesse artigo para ver como usar o editor.</li> +</ol> + +<h3 id="Link_para_uma_página_existente"><a name="link-para-uma-pagina-existente">Link para uma página existente</a></h3> + +<p>Esse método é um pouco híbrido. Você pode criar um link em outra página, e clicar no link que você inseriu, para criar a nova página.</p> + +<ol> + <li>Digite o nome da página nova em qualquer lugar (que faça sentido) no texto de uma página existente.</li> + <li>Selecione o nome e clique no <strong>ícone de link (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png">)</strong> na barra de ferramentas do editor. A caixa de diálogo para "<strong>Atualizar Link"</strong> vai abrir com o texto selecionado no campo "<strong>Linkar para</strong>".</li> + <li>"/pt-BR/docs/" é inserido por padrão no começo do campo URL. Insira o nome da página depois de "/pt-BR/docs/". (O nome da página não tem de ser o mesmo texto do link).</li> + <li>Clique em OK para criar e inserir o link.</li> +</ol> + +<p>Se a página já não existir, o link é mostrado em vermelho. Se a página já existir, o link é mostrado em azul. Se você quiser criar uma nova página mas o título da página que você quer já estiver sendo usado, verifique primeiro se não faz mais sentido ajudar a editar o conteúdo existente. Senão, pense num título diferente para sua nova página e crie um link para ela. Veja o <a href="/pt-BR/docs/MDN/Contribute/Content/Style_guide">guia para nomear páginas</a>.</p> + +<p>Para adicionar conteúdo para sua nova página, clique no link vermelho que você acabou de criar (depois de salvar e fechar o editor). A nova página abre no modo de edição, assim você pode começar a editar o conteúdo. Veja a sessão "<a href="#Editando uma págia existente">Editando uma página existente</a>" nesse artigo para ver como usar o editor.</p> + +<h2 id="Atualizando_o_conteúdo_da_página">Atualizando o conteúdo da página</h2> + +<p>O suporte do MDN para macros KumaScript e transclusão de conteúdo de uma página para outra pode algumas vezes ser dificultada pela necessidade de fazer um cache das páginas geradas para melhorar a performance. Páginas são feitas do seu código-fonte, e a saída é cacheada para requisições futuras. A partir de lá, quaisquer macros (templates) ou transclusões (utilizando a macro Page) na página não vão refletir mudanças feitar para o macro, a saída do macro, ou o conteúdo do material transcluso.</p> + +<ul> + <li>Para atualizar a página manualmente, você pode forçar uma atualização no seu browser. MDN detecta esse gatilho e a página é refeita, inserindo a atualização feita pela saída do macro e o conteúdo da página.</li> + <li>Você também pode configurar páginas para serem refeitas periodicamente. Isso não deve ser feito a não ser que você precise que a página seja atualizada frequentemente. Veja <a href="/pt-BR/docs/MDN/Contribute/Tools/Page_regeneration">regeneração de página</a> para detalhes.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/MDN/Contribute/Editor">Guia do editor do MDN</a></li> + <li><a href="/pt-BR/docs/MDN/Contribute/Content/Style_guide">Guia de estilos do MDN</a></li> +</ul> diff --git a/files/pt-br/mdn/contribute/feedback/index.html b/files/pt-br/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..8e2c619cc0 --- /dev/null +++ b/files/pt-br/mdn/contribute/feedback/index.html @@ -0,0 +1,60 @@ +--- +title: Envie sugestões sobre o MDN +slug: MDN/Contribute/Feedback +tags: + - Documentação + - Guía + - MDN Meta +translation_of: MDN/Contribute/Feedback +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Bem-vindo ao Mozilla Developer Network! Se você tem sugestões, ou está tendo problemas usando MDN, este é o lugar certo para estar. O fato de que você está interessado em oferecer um feedback, faz de você mais uma parte da comunidade Mozilla e agradecemos antecipadamente por seu interesse.</p> + +<p><span class="seoSummary">Você tem várias opções para oferecer suas idéias. Este artigo irá ajudá-lo a fazê-lo.</span></p> + +<h2 id="Atualizar_a_documentação">Atualizar a documentação</h2> + +<p>Primeiro de tudo, se você ver algum problema com a documentação, você deve sempre se sentir livre para corrigir por si mesmo.</p> + +<ol> + <li>Você pode efetuar o <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">login</a> com sua conta do <a href="https://github.com/">Github</a> ou do <a href="https://www.persona.org/">Persona</a>.</li> + <li>Após efetuar o login, clique no botão <strong>Editar</strong> (em azul) em qualquer página para que o <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">editor</a> seja aberto.</li> + <li>Clique no botão <strong>Publicar</strong> (em verde) quando você terminar suas correções.</li> +</ol> + +<p>A Documentação aqui é uma wiki, e é curada por uma equipe de voluntários e funcionários remunerados, então não seja tímido — sua gramática não precisa ser perfeita. Nós vamos arrumar se você cometer um erro; sem nenhum problema!</p> + +<p>Para mais informações sobre contribuir com a documentação da MDN, veja:</p> + +<ul> + <li><a href="/pt-BR/docs/Project:en/Project:Getting_started">Começando</a></li> + <li><a href="/pt-BR/docs/MDN/Contribute">Contribuindo para o MDN</a></li> + <li><a href="/pt-BR/docs/MDN/Contribute/Editor">Guia do Editor MDN</a></li> +</ul> + +<h2 id="Junte-se_à_conversação">Junte-se à conversação</h2> + +<p>Fale conosco! Existem algumas maneiras de entrar em contato com outras pessoas que trabalham no conteúdo do MDN.</p> + +<h3 id="Chat">Chat</h3> + +<p> + </p><h3 id="Email">Email</h3> + + +<p>Discussões de longo-prazo acontecem em nossa mailing list, <a href="https://lists.mozilla.org/listinfo/dev-mdc" title="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc@lists.mozilla.org</a>. você postar na lista sem se inscrever nela, mas neste caso, sua postagem deve ser aprovada por um moderador, o que significa que levará mais tempo para que outros possam vê-lo. Você pode visualizar e postar em dev-mdc através de sua escolha de formatos:</p> + +<p>{{ DiscussionList("dev-mdc", "mozilla.dev.mdc") }}</p> + +<h2 id="Relatar_um_problema">Relatar um problema</h2> + +<h3 id="Problemas_na_documentação">Problemas na documentação</h3> + +<p>se você encontrar um problema na documentação e não puder corrigí-lo por qualquer motivo, você pode <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">reportar um problema</a>! Você pode usar este formulário para qualquer problema de documentação, seja uma correção simples ou uma solicitação para um conteúdo completamente novo. Como mencionado antes, nós convidamos você para contribuir com alterações por si mesmo, mas esta opção também está disponível para você.</p> + +<h3 id="Problemas_no_site">Problemas no site</h3> + +<p>se você encontrar problemas com o web site do MDN, ou tem idéias para novos recursos para o site, você pode <a href="https://bugzilla.mozilla.org/form.mdn">enviar um ticket para a equipe de desenvolvimento MDN</a>.</p> diff --git a/files/pt-br/mdn/contribute/getting_started/index.html b/files/pt-br/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..f6a1e68013 --- /dev/null +++ b/files/pt-br/mdn/contribute/getting_started/index.html @@ -0,0 +1,136 @@ +--- +title: Primeiros Passos no MDN +slug: MDN/Contribute/Getting_started +tags: + - Começando + - Documentação + - Guia(2) + - MDN + - MDN Meta + - Novos contribuidores + - Projeto MDN + - Wiki de edição +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/pt-BR/docs/MDN")}}</div> + +<p>Somos uma comunidade aberta de desenvolvedores construindo recursos para uma web melhor, independente de marca, navegador ou plataforma. Qualquer pessoa pode contribuir e cada contribuição nos torna mais fortes. Juntos podemos conduzir inovações na Web para servir ao bem maior. E começa aqui, com você.</p> + +<p><span>Cada parte do MDN (documentações, demos e o próprio site) são criados por uma comunidade aberta de desenvolvedores. Qualquer um tem algo para oferecer, e esperamos que voce junte-se a nós!</span></p> + +<h2 id="3_passos_simples_para_o_MDN"><span>3 passos simples para o MDN</span></h2> + +<p>MDN é um wiki, onde <strong>qualquer</strong> pessoa pode adicionar e editar conteúdo. Você não precisa ser um programador ou saber muito sobre tecnologia. Existe uma variedade de tarefas que precisam ser feitas, desde revisão de textos e erros de digitação, até tarefas mais complexas, como escrever documentação de API.</p> + +<p>Contribuir é fácil e seguro. Caso você cometa algum erro, este pode ser facilmente corrigido; Se você não sabe exatamente como as coisas deveriam parecer, ou se a sua gramática não é assim tão boa, não se preocupe! Temos uma equipe cujo trabalho é garantir que o conteúdo do MDN esteja o melhor possível. Alguém verificará seu trabalho para garantir que esteja correto e bem escrito.</p> + +<h3 id="Passo_1_Crie_uma_conta_no_MDN">Passo 1: Crie uma conta no MDN</h3> + +<p>Para iniciar suas contribuições, você precisa ter uma conta no MDN. Para mais detalhes, veja <a href="/pt-BR/docs/MDN/Contribute/Howto/Create_an_MDN_account">como criar uma conta</a>.</p> + +<h3 id="Passo_2_Escolha_uma_tarefa">Passo 2: Escolha uma tarefa</h3> + +<p>Agora que você está logado, leia as descrições dos diferentes tipos de tarefas da lista abaixo, e escolha a que mais te agrada. Você pode escolher qualquer tarefa que gostar para iniciar sua contribuição.</p> + +<h3 id="Passo_3_Faça_a_tarefa">Passo 3: Faça a tarefa</h3> + +<p>Assim que decidir que tipo de tarefa você quer fazer, procure uma página específica ou exemplo de código para trabalhar, e faça!</p> + +<p>Não se preocupe em fazer tudo perfeito; outros colaboradores do MDN estão aqui para ajudar a corrigir os erros que passaram despercebidos. Se estiver com dúvidas sobre como fazer, visite a página da <a href="/pt-BR/docs/MDN/Community">comunidade</a> para obter respostas via chat ou email.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se você quiser testar antes de fazer algo "de verdade", você pode editar a página <strong><a href="/pt-BR/docs/Sandbox">Sandbox</a></strong> para você poder brincar. Por favor, limite seus experimentos a esta página. Por favor, não faça mudanças desnecessárias nas páginas apenas para ver o que acontece, isso acaba por fazer uma bagunça para que outros tenham que limpar, ou, pior ainda, confundindo os leitores que estão tentando aprender coisas novas ou buscando por algo.</p> +</div> + +<p>Quando terminar, fique à vontade para escolher outro item, ou veja <a href="#Outras_coisas_que_voce_pode_fazer_no_MDN">outras coisas que você pode fazer no MDN</a>.</p> + +<h2 id="Tipos_de_tarefas_possíveis">Tipos de tarefas possíveis</h2> + +<p>Existem vários caminhos que você pode tomar para contribuir com o MDN, dependendo de suas habilidades e interesses. Ainda que algumas tarefas possam assustar, temos muitas atividades simples disponíveis. Várias delas tomam apenas cinco minutos (ou menos!) do seu tempo. Junto com a tarefa e sua breve descrição, você encontrará o tempo aproximado que cada tarefa geralmente leva para ser concluída.</p> + +<h3 id="Opção_1_Eu_gosto_de_palavras">Opção 1: Eu gosto de palavras</h3> + +<p>Você pode nos ajudar revisando ou editando documentos existentes, e aplicar correções.</p> + +<ul> + <li><a href="/pt-BR/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Ajuste o resumo de uma página</a> (5-15 minutos)</li> + <li><a href="/pt-BR/docs/MDN/Contribute/Howto/Do_an_editorial_review">Revisão editorial</a> (5–30 minutos)</li> + <li><a href="/pt-BR/docs/MDN/User_guide/Writing#Editing_an_existing_page">Atualize um artigo existente com novas informações</a> (5 minutos-1 hora)</li> + <li><a href="/pt-BR/docs/Project:MDN/Contributing/How_to/Write_a_new_entry_in_the_Glossary">Escrever uma nova entrada no Glossário</a> (15 minutos-1 hora)</li> + <li><a href="/pt-BR/docs/MDN/User_guide/Writing#Adding_a_new_page">Escrever um artigo sobre uma nova tecnologia ou API</a> (30 minutos-2 horas)</li> + <li><a href="/pt-BR/docs/Project:MDN/Contributing/How_to/Write_an_article_to_help_learning_the_web">Escrever um artigo para ajudar as pessoas a aprender sobre a web</a> (1-3 horas)</li> +</ul> + +<div class="note"><strong>Nota:</strong> Se você estiver revisando ou escrevendo novos artigos, pedimos que verifique o <a href="/pt-BR/docs/MDN/Contribute/Content/Style_guide">guia de estilo</a>. Isso ajudará a garantir que os artigos estejam consistentes.</div> + +<h3 id="Opção_2_Eu_gosto_de_programar">Opção 2: Eu gosto de programar</h3> + +<p>Precisamos de mais exemplos de códigos! Você também pode ajudar a construir nossa plataforma local, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a>!</p> + +<ul> + <li><a href="/pt-BR/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convertendo exemplos de códigos em códigos realmente</a> (~30 minutos)</li> + <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Configurando um ambiente Kuma</a> (~1 hora)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Enviar seu código para o Kuma base de códigos</a> (~1 hora)</li> + <li><a href="https://developer.mozilla.org/pt-BR/demos/submit">Enviar uma nova demo</a> (~1 hora)</li> +</ul> + +<h3 id="Opção_3_Eu_gosto_de_ambos_palavras_e_programar">Opção 3: Eu gosto de ambos, palavras e programar</h3> + +<p>Temos tarefas que exigem habilidades técnicas e de linguagem, como escrever novos artigos, revisão de precisão técnica, ou adaptação de documentos.</p> + +<ul> + <li><a href="/pt-BR/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">Marcando páginas Javascript</a> (~5 minutos)</li> + <li><a href="/pt-BR/docs/MDN/Promote">Promova o MDN em seu próprio website</a> (~5 minutos)</li> + <li><a href="/pt-BR/docs/MDN/Contribute/How_to/Do_a_technical_review">Revisões técnicas</a> (~30 minutos)</li> + <li><a href="/pt-BR/docs/MDN/Contribute/How_to/Update_API_page_layout">Atualizando o visual de páginas Apps</a> (~30 minutos)</li> + <li><a href="/pt-BR/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Criando um novo artigo com um tópico que lhe é familiar</a> (~1 hora)</li> + <li><a href="/pt-BR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Criando um exercício interativo para ajudar pessoas a aprender sobre a web</a> (~1 hora)</li> +</ul> + +<h3 id="Opção_4_Eu_quero_o_MDN_em_minha_língua">Opção 4: Eu quero o MDN em minha língua</h3> + +<p>Todo o trabalho de localização e tradução do MDN é feito pela nossa incrível comunidade de voluntários.</p> + +<ul> + <li><a href="/pt-BR/docs/MDN/Contribute/Localize/Translating_pages">Tradução de páginas</a> (~2 horas)</li> + <li>Conecte-se com outros localizadores listados em <a href="/en-US/docs/Project:MDN/Localizing/Localization_projects">localizando projetos</a> (~30 minutos)</li> +</ul> + +<h3 id="Opção_5_Encontrei_informações_erradas_e_não_sei_como_corrigir">Opção 5: Encontrei informações erradas e não sei como corrigir</h3> + +<p>Você pode reportar problemas preenchendo uma <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">documentação de bug</a>. (~5 minutos)</p> + +<p>Use estes valores de campo:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Campo Bugzilla</strong></td> + <td><strong>Valor</strong></td> + </tr> + <tr> + <td><code>product</code></td> + <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Documentação do Desenvolvedor</a></td> + </tr> + <tr> + <td><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">component</span></font></td> + <td>[escolha uma área apropriada para o tema, ou "Geral" se você não tem certeza ou se não encontrou o correto]</td> + </tr> + <tr> + <td><code>URL</code></td> + <td>Endereço da página onde você encontrou o problema</td> + </tr> + <tr> + <td><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">Description</span></font></td> + <td>O quanto você souber ou tenha tempo para descrever sobre o problema e onde encontrar as informações corretas. Isso pode incluir pessoas ("falar com fulano de tal"), bem como links da Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Outras_coisas_que_você_pode_fazer_no_MDN"><a id="Outras_coisas_que_voce_pode_fazer_no_MDN" name="Outras_coisas_que_voce_pode_fazer_no_MDN">Outras coisas que você pode fazer no MDN</a></h2> + +<ul> + <li><a href="/pt-BR/docs/Project:Community">Juntar-se a comunidade MDN</a>.</li> + <li><a href="/pt-BR/profile">Preencha seu perfil</a> para que outros saibam mais sobre você.</li> + <li>Aprenda mais sobre<a href="/pt-BR/docs/MDN/Contribute"> contribuindo para o MDN</a>.</li> +</ul> diff --git a/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html b/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html new file mode 100644 index 0000000000..541d31ff6e --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/como-marcar-as-paginas-corretamente/index.html @@ -0,0 +1,394 @@ +--- +title: Como adicionar etiquetas às páginas corretamente +slug: MDN/Contribute/guia/Como-marcar-as-paginas-corretamente +tags: + - Contribua + - Etiquetas + - Filtro + - Glossário + - Guia(2) + - Howto + - Iniciante + - Introdução + - MDN Meta + - Tags + - Tutorial +translation_of: MDN/Contribute/Howto/Tag +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/pt-BR/docs/MDN")}}</div> + +<p> As etiquetas dos artigos são uma forma importante de ajudar visitantes a encontrar o conteúdo procurado. Há muitas etiquetas usadas para ajudar a organizar as informações na MDN. Esta página vai lhe ensinar a melhor maneira de rotular as páginas, a fim de fazer com que as informações sejam organizadas, classificadas e localizadas mais facilmente. Cada página pode ser marcada por etiquetas que ajudam a classificar seu conteúdo.</p> + +<p> Você pode encontrar uma boa ajuda quanto às etiquetas em páginas na seção 'etiquetando', em nosso <a href="/pt-BR/docs/MDN/Contribute/Editor/Basics#The_tags_box">guia de edição</a>.</p> + +<p>Observe que o uso adequado de etiquetas é importante; nós estamos cada vez mais usando automação para gerar listas de conteúdo, páginas de destino e ligação cruzada de artigos. Falhar em marcar artigos corretamente (como indicado abaixo) pode impedir que os mesmos sejam listados precisamente.</p> + +<h2 id="Métodos_de_marcações_usadas_na_MDN">Métodos de marcações usadas na MDN</h2> + +<p>Há muitas maneiras das etiquetas serem usadas na MDN:</p> + +<dl> + <dt>Categorização</dt> + <dd>Qual o tipo desse documento? É uma referência? Um tutorial? Uma página de destino? As etiquetas podem ser usadas em filtros de busca, então elas são realmente importantes!</dd> + <dt>Identificação de tópico</dt> + <dd>Que tópico esse artigo envolve? É sobre uma API? O DOM? Gráficos? Estas também são importantes, pois elas podem ser usadas em filtros de buscas.</dd> + <dt>Estado da tecnologia</dt> + <dd>Qual é o estado dessa tecnologia? Isto não é padrão? Obsoleto ou moderno? Experimental?</dd> + <dt>Nível de habilidade</dt> + <dd>Para tutoriais e guias, quão avançado é o material do artigo?</dd> + <dt>Metadados do documento</dt> + <dd>Os escritores da MDN usam rótulos que informam quais páginas precisam de melhorias e de quais tipos.</dd> +</dl> + +<h2 id="Guia_de_tipos_de_marcação">Guia de tipos de marcação</h2> + +<p>Aqui está um guia rápido sobre os tipos de etiquetas e os possíveis valores para elas.</p> + +<h3 id="Categoria_do_Documento">Categoria do Documento</h3> + +<p>Quando você rotula um artigo com uma destas categorias, você ajuda ferramentas automáticas a gerarem mais precisamente as páginas de entrada, tabela de conteúdos e assim por diante. Nosso novo sitema de pesquisa também vai usar esses termos para que nossos visitantes possam localizar referências e guias mais fácilmente.</p> + +<p>Nós usamos os seguintes nomes de categorias como termos de etiquetamento padrão:</p> + +<dl> + <dt><code>{{Tag("Intro")}}</code></dt> + <dd>O artigo fornece um material introdutório sobre algum tópico. Idealmente, cada área de tecnologia deveria ter apenas uma "introdução".</dd> + <dt><code>{{Tag("Featured")}}</code></dt> + <dd>O artigo é crucial e será exibido com relevância nas páginas de entrada. Use esta etiqueta moderadamente (nunca mais do que três páginas em cada área da documentação).</dd> + <dt><code>{{Tag("Reference")}}</code></dt> + <dd>O artigo contém material de referência sobre uma API, elementos, atributos, propriedades, ou coisas semelhantes.</dd> + <dt><code>{{Tag("Landing")}}</code></dt> + <dd>Indica que esta é uma página de entrada.</dd> + <dt><code>{{Tag("Guide")}}</code></dt> + <dd>O artigo é um guia ou um tutorial.</dd> + <dt><code>{{Tag("Example")}}</code></dt> + <dd>O artigo é uma página de amostra de código, ou tem exemplos de códigos (isto é, pedaços de códigos úteis, não uma linha de "exemplo de sintaxe") .</dd> +</dl> + +<h3 id="Tópico">Tópico</h3> + +<p>Ao identificar o assunto tratado por um artigo você ajuda a gerar melhores resultados de pesquisa, assim como páginas de entrada e outros auxílios de navegação.</p> + +<p>Apesar de ser permitida certa flexibilidade, ao passo que novos assuntos são identificados, preferimos que estas etiquetas tenham os mesmos nomes das APIs, ou tecnologias, demonstradas na página. Alguns exemplos:</p> + +<ul> + <li><code>{{Tag("HTML")}}</code></li> + <li><code>{{Tag("CSS")}}</code></li> + <li><code>{{Tag("JavaScript")}}</code> (Lembre-se do "S" maiúsculo!)</li> + <li><code>{{Tag("Document")}}</code></li> + <li><code>{{Tag("DOM")}}</code></li> + <li><code>{{Tag("API")}}</code> usada em todas as interfaces, métodos e propriedades</li> + <li><code>{{Tag("Method")}}</code> usada em todo método de alguma API</li> + <li><code>{{Tag("Property")}}</code> usada em toda propriedade de alguma API</li> + <li><code>{{Tag("Graphics")}}</code> gráficos</li> + <li><code>{{Tag("Firefox OS")}}</code></li> + <li><code>{{Tag("Gecko")}}</code></li> + <li><code>{{Tag("XUL")}}</code></li> + <li><code>{{Tag("XPCOM")}}</code></li> + <li><code>{{Tag("SVG")}}</code></li> + <li><code>{{Tag("WebGL")}}</code></li> + <li><code>{{Tag("Element")}} elemento</code></li> + <li><code>{{Tag("Node")}}</code></li> + <li><code>{{Tag("Tools")}} ferramentas</code></li> + <li><code>{{Tag("Web")}}</code></li> +</ul> + +<p>No geral, se uma interface que possui várias páginas relacionadas a ela, como <a href="/pt-BR/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a> (que possui várias páginas sobre seus muitos métodos e propriedades), seu nome é uma boa etiqueta para identificar um tópico, assim como o nome de uma tecnologia abragente, ou seu tipo. Uma página sobre <em>WebGL</em> pode ser marcada com as tags <code>Gráficos/Graphics</code> e <code>WebGL</code>, por exemplo, e uma página sobre elementos {{HTMLElement("canvas")}} pode ser marcada com as etiquetas <code>HTML</code>, <code>Elementos/Element</code>, <code>Tela/Canvas</code>, e <code>Gráficos/Graphics</code>.</p> + +<h3 id="Estado_da_tecnologia">Estado da tecnologia</h3> + +<p>Para ajudar a entender se uma tecnologia é viável ou não, nós usamos as etiquetas que descrevem em que ponto estão as suas especificações. Fazer isso não detalha tanto quanto explicar, de fato, qual é a especificação e onde, nesse processo, a tecnologia está (para isto usamos uma tabela de "Especificações"), mas ajuda os leitores a julgar, rapidamente, se usar a tecnologia descrita no artigo é, ou não, uma boa ideia.</p> + +<p>Alguns valores possíveis para estas etiquetas:</p> + +<dl> + <dt>{{Tag("Read-only")}}</dt> + <dd>Aplique esta etiqueta para páginas que descrevem atributos ou propriedades que são "somente leitura".</dd> +</dl> + +<dl> + <dt><code>{{Tag("Non-standard")}}</code></dt> + <dd>Indica que a tecnologia ou API não pertence a qualquer padrão, mas é considerada estável no(s) navegador(es) que a tem implementada. Se você não usar esta etiqueta os leitores vão presumir que o artigo é padronizado. A tabela de compatibilidade da página deve esclarecer quais navegadores suportam essa tecnologia ou API.</dd> + <dt><code>{{Tag("Deprecated")}}</code></dt> + <dd>A tecnologia ou API abrigada na página foi marcada como obsoleta na especificação e é esperado que seja, eventualmente, removida mas está, em geral, ainda presente nas versões mais recentes de navegadores.</dd> + <dt><code>{{Tag("Obsolete")}}</code></dt> + <dd>Foi decidido que a tecnologia ou API está ultrapassada e, assim, foi removida (ou está em processo de remoção) de todas as versões mais recentes de navegadores.</dd> + <dt><code>{{Tag("Experimental")}}</code></dt> + <dd>A tecnologia ou API não é padronizada, ainda é experimental e pode, ou não, vir a ser parte da especificação. Também está sujeita a alterações no mecanismo do navegador (tipicamente, apenas uma) que a implementa.</dd> + <dt><code>{{Tag("Needs Privileges")}}</code></dt> + <dd>A API requer acesso privilegiado ao aparelho no qual o código está rodando.</dd> + <dt><code>{{Tag("Certified Only")}}</code></dt> + <dd>A API funciona, apenas, em código certificado.</dd> +</dl> + +<p>Estas etiquetas não são desculpa para não inserir uma <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">tabela de compatibilidade</a> em seu artigo!</p> + +<h3 id="Nível_de_habilidade">Nível de habilidade</h3> + +<p>A etiqueta de nível de habilidade é usada, apenas, em guias e tutoriais (ou seja, páginas marcadas como Guias) a fim de auxiliar quem os procura a escolher tutoriais baseados na familiaridade com a tecnologia. Existem trés valores para esta etiqueta:</p> + +<dl> + <dt><code>{{Tag("Beginner")}}</code></dt> + <dd>Artigos escritos com a intenção de introduzir uma nova tecnologia, para iniciantes.</dd> + <dt><code>{{Tag("Intermediate")}}</code></dt> + <dd>Artigos para quem já tem experiência com a tecnologia, mas ainda não a domina completamente.</dd> + <dt><code>{{Tag("Advanced")}}</code></dt> + <dd>Artigos que levam ao limite as capacidades de quem lê e da tecnologia.</dd> +</dl> + +<h3 id="Metadados_do_documento">Metadados do documento</h3> + +<p>Os escritores da MDN usam etiquetas para identificar artigos que precisam de determinados tipos de trabalho. Segue uma lista das que mais usamos:</p> + +<dl> + <dt><code>{{Tag("junk")}}</code></dt> + <dd>Este artigo precisa ser deletado.</dd> + <dt><code>{{Tag("NeedsContent")}}</code></dt> + <dd>Este artigo é um esboço, ou a informação está, de alguma forma, incompleta. Esta etiqueta significa que alguém precisa revisar o conteúdo e adicionar detalhes e/ou terminar a escrita do artigo.</dd> + <dt><code>{{Tag("NeedsExample")}}</code></dt> + <dd>O artigo precisa de um ou mais exemplos para ilustrar melhor seu objetivo, de acordo com o <a href="/pt-BR/docs/MDN/Contribute/Structures/Live_samples" title="/pt-BR/docs/MDN/Contribute/Structures/Live_samples">sistema de exemplos dinâmicos.</a></dd> + <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt> + <dd>Este arigo necessita que um, ou mais, de seus exemplos sejam modificados para incluir o uso do <a href="/pt-BR/docs/MDN/Contribute/Structures/Live_samples" title="/pt-BR/docs/MDN/Contribute/Structures/Live_samples">sistema de exemplos dinâmicos</a>.</dd> + <dt><code>{{Tag("NeedsUpdate")}}</code></dt> + <dd>O artigo está desatualizado.</dd> + <dt><code>{{Tag("l10n:exclude")}}</code></dt> + <dd>Não vale a pena traduzir este artigo e ele não aparecerá nas páginas sobre as situações das traduções.</dd> + <dt><code>{{Tag("l10n:priority")}}</code></dt> + <dd>Este artigo é importante e deve ser visto como prioridade para os tradutores da MDN. É mostrado em uma tabela de maior importância nas páginas sobre as situações das traduções.</dd> +</dl> + +<h3 id="Mapa_Literário_Web">Mapa Literário Web</h3> + +<p>O projeto <em><a href="https://webmaker.org" rel="external">WebMaker</a></em>, através do <a href="https://webmaker.org/literacy" rel="external">Mapa Literário para a <em>Web</em></a><em>,</em> definiu as habilidades necessárias para aperfeiçoar a leitura, a escrita e a participação na <em>Web</em>. Nós usamos essas habilidades literárias em forma de etiquetas, na MDN, para ajudar nossos utilizadores a encontrar as melhores respostas às suas necessidades:</p> + +<dl> + <dt>{{Tag("Navigation")}}</dt> + <dd>Este artigo inclui informação sobre como navegar pela <em>web</em>.</dd> + <dt>{{Tag("WebMechanics")}}</dt> + <dd>Este artigo tem informação de como a <em>web</em> é organizada e como ela funciona.</dd> + <dt>{{Tag("Search")}}</dt> + <dd>Este artigo explica como localizar informação, pessoas e recursos na <em>web</em>.</dd> + <dt>{{Tag("Credibility")}}</dt> + <dd>A instrução neste artigo ajuda os leitores a entender como avaliar, criticamente, a informação encontrada na <em>web</em>.</dd> + <dt>{{Tag("Security")}}</dt> + <dd>Este artigo provê informação de como manter sistemas, identidades e conteúdo seguros.</dd> + <dt>{{Tag("Composing")}}</dt> + <dd>Este artigo explica como criar e selecionar conteúdo para a <em>web</em>.</dd> + <dt>{{Tag("Remixing")}}</dt> + <dd>Este artigo ensina como modificar recursos já existentes na <em>web</em> para criar algo novo.</dd> + <dt>{{Tag("Design")}}</dt> + <dd>Documentação sobre como aprimorar a estética visual e a experiência dos utilizadores.</dd> + <dt>{{Tag("Accessibility")}}</dt> + <dd>Documentos que descrevem como desenvolver conteúdo com acessibilidade, o que significa permitir que o máximo possível de pessoas possa acessá-lo, ainda que as suas habilidades sejam limitadas de alguma forma.</dd> + <dt>{{Tag("CodingScripting")}}</dt> + <dd>Como programar e/ou criar experiências interativas na <em>web</em>.</dd> + <dt>{{Tag("infrastructure")}}</dt> + <dd>Este documento explica as partes técnicas da internete.</dd> + <dt>{{Tag("Sharing")}}</dt> + <dd>O conteúdo deste artigo fala sobre as várias maneiras de criar recursos com outras pessoas.</dd> + <dt>{{Tag("Collaborating")}}</dt> + <dd>Este artigo provê informação de como trabalhar em conjunto com outras pessoas.</dd> + <dt>{{Tag("Community")}}</dt> + <dd>Este artigo detalha como se envolver com as comunidades da <em>Web</em> e entender como elas funcionam.</dd> + <dt>{{Tag("Privacy")}}</dt> + <dd>Este material ajuda a examinar as consequências de compatilhar dados <em>online.</em></dd> + <dt>{{Tag("OpenPractices")}}</dt> + <dd>Este artigo demonstra como manter a <em>Web</em> acessível a todas as pessoas.</dd> +</dl> + +<h2 id="Colocando_tudo_junto">Colocando tudo junto</h2> + +<p>Para cada página você aplica vários tipos de etiquetas, por exemplo:</p> + +<dl> + <dt>Um tutorial sobre WebGL para iniciantes</dt> + <dd><code>WebGL</code>, Gráficos, <code>Graphics</code>, Guia, <code>Guide</code>, Iniciante, <code>Beginner</code></dd> + <dt>Referência para elementos {{HTMLElement("canvas")}}</dt> + <dd><code>Canvas</code>, Tela, <code>HTML</code>, <code>Element</code>, Elementos, <code>Graphics</code> <code>Reference</code>, Referencial Gráfico</dd> + <dt>Uma página de entrada para as ferramentas de desenvolvedores voltados ao Firefox OS</dt> + <dd><code>Tools</code>, Ferramentas, <code>Firefox OS</code>, <code>Landing</code>, Destino</dd> +</dl> + +<h2 id="Etiquetas_e_filtros_de_busca">Etiquetas e filtros de busca</h2> + +<p>Filtros de busca não vão funcionar apropriadamente, a não ser que marquemos as páginas da MDN corretamente. Aqui está uma tabela dos filtros de pesquisa e sua busca correspondente.</p> + +<div class="note"> +<p><strong>Observação:</strong> Se várias etiquetas estiverem listadas abaixo de "Nome da etiqueta", isso significa que, pelo menos, uma delas precisa estar presente para o artigo estar propriamente marcado.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Grupo do filtro</th> + <th scope="col">Nome do filtro de pesquisa</th> + <th scope="col">Nome da <em>etiqueta</em></th> + </tr> + </thead> + <tbody> + <tr> + <th>Tópico</th> + <td>Open Web Apps</td> + <td>{{Tag("Apps")}}</td> + </tr> + <tr> + <th> </th> + <td>HTML</td> + <td>{{Tag("HTML")}}</td> + </tr> + <tr> + <th> </th> + <td>CSS</td> + <td>{{Tag("CSS")}}</td> + </tr> + <tr> + <th> </th> + <td>JavaScript</td> + <td>{{Tag("JavaScript")}}</td> + </tr> + <tr> + <th> </th> + <td>APIs e DOM</td> + <td>{{Tag("API")}}</td> + </tr> + <tr> + <th> </th> + <td>Telas</td> + <td>{{Tag("Canvas")}}</td> + </tr> + <tr> + <th> </th> + <td>SVG</td> + <td>{{Tag("SVG")}}</td> + </tr> + <tr> + <th> </th> + <td>MathML</td> + <td>{{Tag("MathML")}}</td> + </tr> + <tr> + <th> </th> + <td>WebGL</td> + <td>{{Tag("WebGL")}}</td> + </tr> + <tr> + <th> </th> + <td>XUL</td> + <td>{{Tag("XUL")}}</td> + </tr> + <tr> + <th> </th> + <td>Marketplace</td> + <td>{{Tag("Marketplace")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox</td> + <td>{{Tag("Firefox")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox para Android</td> + <td>{{Tag("Firefox Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox para Computadores</td> + <td>{{Tag("Firefox Desktop")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox OS</td> + <td>{{Tag("Firefox OS")}}</td> + </tr> + <tr> + <th> </th> + <td>Dispositivos Móveis</td> + <td>{{Tag("Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Desenvolvimento <em>Web</em></td> + <td>{{Tag("Web Development")}}</td> + </tr> + <tr> + <th> </th> + <td>Complementos & Extensões</td> + <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td> + </tr> + <tr> + <th> </th> + <td>Jogos</td> + <td>{{Tag("Games")}}</td> + </tr> + <tr> + <th>Nível de habilidade</th> + <td>Sou Especialista</td> + <td>{{Tag("Advanced")}}</td> + </tr> + <tr> + <th> </th> + <td>Nível Intermediário</td> + <td>{{Tag("Intermediate")}}</td> + </tr> + <tr> + <th> </th> + <td>Estou Começando</td> + <td>{{Tag("Beginner")}}</td> + </tr> + <tr> + <th>Tipo de documento</th> + <td>Documentos</td> + <td><em>Esta vai restringir a busca ao teor dos documentos, deixando de fora Hacks e outros conteúdos MDN.</em></td> + </tr> + <tr> + <th> </th> + <td>Demos</td> + <td><em>Isto vai incluir as demonstrações (Demo Studio) nos resultados da busca.</em></td> + </tr> + <tr> + <th> </th> + <td>Ferramentas</td> + <td>{{Tag("Tools")}}</td> + </tr> + <tr> + <th> </th> + <td>Exemplos de Códigos</td> + <td>{{Tag("Example")}}</td> + </tr> + <tr> + <th> </th> + <td>Guia & Tutorial</td> + <td>{{Tag("Guide")}}</td> + </tr> + <tr> + <th> </th> + <td>Perfis de desenvolvedores</td> + <td><em>Esta inclui os perfis de desenvolvedores da comunidade MDN nos resultados da busca.</em></td> + </tr> + <tr> + <th> </th> + <td>Recursos Externos</td> + <td><em>Isto é alguma coisa que a equipe de desenvolvimento vai ter que solucionar.</em></td> + </tr> + </tbody> +</table> + +<h2 id="Problemas_de_etiquetas_que_você_pode_consertar">Problemas de etiquetas que você pode consertar</h2> + +<p>Há vários tipos de problemas de rotulagem que você pode ajudar a resolver:</p> + +<dl> + <dt>Sem etiquetas</dt> + <dd>Geralmente os artigos devem ter, <em>no minimo</em>, as etiquetas de "<a href="/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente#Categória" title="/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente#Categória">categória</a>" e "<a href="/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente#Tópico" title="/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente#Tópico">tópico</a>". Comumente outras etiquetas podem ser adicionadas mas, se você ajudar a garantir que o requesito minimo delas esteja presente, você já terá uma documentação maravilhosa!</dd> + <dt>Etiquetas que não seguem nossos padrões</dt> + <dd>Por favor, conserte qualquer documento cujas etiquetas não sigam as normas estabelecidas nesta página. Leve em consideração que, devido a um <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">erro no <em>Kuma</em></a>, algumas etiquetas traduzidas (como <code>Référence</code>) podem aparecer em algumas páginas em inglês. Há uma chance bem grande destas etiquetas voltarem após serem deletadas, então, não se acanhe em consertá-las, até o erro ser corrigiido.</dd> + <dt>Etiquetas incorretas</dt> + <dd>Se você estiver lendo um artigo sobre HTML e este estiver marcado com "JavaScript", provavelmente há algo errado! Da mesma forma, se um artigo discutir os detalhes internos da Mozilla mas exibir uma etiqueta "<em>Web</em>", provavelmente existe algo errado aí, também. Remova essas tetiquetas e adicione as corretas, se elas ainda não estiverem lá. Por favor, também corrija etiquetas escritas incorretamente (p.ex. "javascript" não está de todo errada, uma vez que etiquetas não consideram maiúsculas, ou minúsculas, mas vamos ter capricho!: )</dd> + <dt>Carência de Etiquetas</dt> + <dd>Se um artigo tem algumas, mas não todas as etiquetas de que precisa, sinta-se à vontade para adicionar mais. Por exemplo: se uma página de referência de JavaScript estiver (corretamente) marcada com "JavaScript" e nada mais além disso, agradecemos se você inserir a etiqueta "Referência/Reference" lá, também!</dd> + <dt>Etiquetas indesejáveis (<em>spam</em>)</dt> + <dd>Esta besta asquerosa é o mais revoltante dos problemas de etiquetas: Algum verme da <em>Web</em> depositou suas excreções nas etiquetass de uma página (como "Programa Grátis!" ou "Ei, eu estava navegando pela sua página e queria perguntar se você me ajudaria a resolver esse problema que estou tendo com o <em>Flash</em> travando o tempo todo"). Temos que remover estas "etiquetas" assim que possível! Elas são horrendas, difíceis de manejar se esperarmos demais, e atrapalham muito a {{Glossary("SEO")}}.</dd> +</dl> + +<p>Se você vir um (ou mais) destes problemas, por favor, registre-se, ou entre na MDN e clique no botão "EDITAR", no canto superior direito da página. Quando o editor carregar, role até o pé da página e você verá as etiquetas. Para mais detalhes da interface de marcação, leia a seção "<a href="/pt-BR/docs/MDN/Contribute/Editor/Basics#The_tags_box" title="/pt-BR/docs/MDN/Contribute/Editor/Basics#The_tags_box">As caixas de etiquetas</a>" do <a href="/pt-BR/docs/MDN/Contribute/Editor" title="/pt-BR/docs/MDN/Contribute/Editor">Guia do editor da MDN</a>.</p> diff --git a/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html b/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html new file mode 100644 index 0000000000..7bd11477fe --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/converter_exemplos_codigo_para_ao_vivo/index.html @@ -0,0 +1,43 @@ +--- +title: Como converter exemplos de codigos para funcionar "ao vivo" +slug: MDN/Contribute/guia/Converter_exemplos_codigo_para_ao_vivo +tags: + - Começando + - Como + - Contribuindo + - Documentação +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +<div>{{MDNSidebar}}</div><p class="summary"><span id="result_box" lang="pt"><span class="hps">A MDN</span> <span class="hps">agora</span> <span class="hps">possui um sistema de</span> <span class="atn hps">"</span><span>exemplos ao vivo</span><span>", onde a</span> <span class="hps">amostra de código</span> e exibida <span class="hps">em uma página que é</span> diretamente <span class="hps">utilizado</span> <span class="hps">para exibir a saída</span> <span class="hps">dessa </span><span class="hps">amostra.</span> <span class="hps">No entanto, muitos</span> <span class="hps">artigos existentes</span> <span class="hps">possuem</span> <span class="hps">exemplos de código</span> <span class="hps">que ainda não</span> <span class="hps">utilizam este sistema</span><span>,</span> <span class="hps">e</span> <span class="hps">precisam ser convertidos</span><span>.</span></span></p> + +<table class="full-width-table"> + <tbody> + <tr> + <td><strong>Onde isso precisa ser feito?</strong></td> + <td>Artigos tagueados com <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a></td> + </tr> + <tr> + <td><strong><span class="short_text" id="result_box" lang="pt"><span class="hps">O que você</span> <span class="hps">precisa saber para</span> <span class="hps">fazer a tarefa</span><span>?</span></span></strong></td> + <td> + <ul> + <li><span id="result_box" lang="pt"><span class="hps">Conhecimento de HTML</span><span>, CSS</span> <span class="hps">e/ou</span> <span class="hps">JavaScript,</span> <span class="hps">dependendo da</span> <span class="hps">amostra de código.</span></span></li> + <li>Capacidade de usar macros <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a> dentro dos artigos da MDN.</li> + </ul> + </td> + </tr> + <tr> + <td><strong><span class="short_text" id="result_box" lang="pt"><span class="hps">Quais são</span> <span class="hps">os passos para fazer</span> <span class="hps">a tarefa?</span></span></strong></td> + <td> + <p>Para uma descrição completa do sistema de exemplos ao vivo, incluindo como criar exemplos ao vivo ,veja <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">Using the live sample system</a>.</p> + + <ol> + <li>Escolha um artigo da lista lista de artigos que estao tagueados com <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>, em que o exemplo de codigo seja uma feature que seja familiar.</li> + <li>Converta o codigo de exemplo para "ao vivo".</li> + <li>Apague qualquer codigo ou imagem usada previamente para exibir uma saida de exemplo.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html new file mode 100644 index 0000000000..13d6745c3f --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/distant_example/index.html @@ -0,0 +1,72 @@ +--- +title: distant example +slug: >- + MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web/distant_example +translation_of: >- + MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example +--- +<div>{{MDNSidebar}}</div><div class="hiden"> +<h2 id="O_exemplo">O exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="square"> + #<input class="color"> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">body { + padding: 10px; + margin : 0; +} + +.square { + width : 80px; + height : 80px; + padding: 10px; + background-color: black; + color: white; + text-align: center; +} + +.color { + width: 60px; + text-transform: uppercase; +} +</pre> + +<h3 id="JS">JS</h3> + +<pre class="brush: js">function setColor(color) { + document.querySelector('.square').style.backgroundColor = '#' + color; + document.querySelector('.color').value = color; +} + +function getRandomColor() { + var color = Math.floor(Math.random() * 16777215); + return color.toString(16); +} + +function getInputColor() { + var value = document.querySelector('.color').value; + var color = Number('0x' + color); + if (color === +color) { + return color.toString(16); + } + return value; +} + +document.addEventListener('click', function () { + setColor(getRandomColor()); +}); + +document.addEventListener('keyup', function () { + setColor(getInputColor()); +}); +</pre> +</div> + +<h2 id="Resultado_ao_vivo">Resultado ao vivo</h2> + +<p>{{EmbedLiveSample('The_example', 120, 120)}}</p> diff --git a/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html new file mode 100644 index 0000000000..948da8d3f6 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -0,0 +1,185 @@ +--- +title: Como criar um exercício de aprendizado interativo +slug: MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web +tags: + - Guía +translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +--- +<div>{{MDNSidebar}}</div> + +<p><font><font>Ao aprender a web, é importante confiar no </font></font>conteúdo <font><font>da aprendizagem ativa. Esse conteúdo é feito para ajudar a aprender algo pró-ativamente. Pode ser exercícios, exemplos de hackeáveis em tempo real, tarefas a realizar, análises, etc. Em suma, qualquer coisa que desejar, ajuda alguém a entender ativamente algo.</font></font></p> + +<p><font><font>Não existe uma maneira direta para criar esse conteúdo. Por exemplo, existem muitas ferramentas de terceiros que podem ajudar-lo a criar exemplos em tempo real (ver: </font></font><a href="https://jsfiddle.net/" rel="external"><font><font>JSFiddle</font></font></a><font><font> , </font></font><a href="https://codepen.io/"><font><font>CodePen</font></font></a><font><font> , </font></font><a href="http://dabblet.com/"><font><font>Dabblet</font></font></a><font><font> , etc.) que você pode vincular a partir de artigos MDN. </font><font>Se Você Quiser CRIAR Exercícios Mais AVANÇADOS e compreensíveis, rápido Você PODE USAR fácilmente o </font></font><a href="https://thimble.mozilla.org" rel="external"><font><font>dedal</font></font></a><font><font> DO PROJETO WebMaker.</font></font></p> + +<p><font><font>Atualmente, o MDN não é uma ferramenta fácil para autorizar esse conteúdo ativo. No entanto, você é um codificador, pode usar os recursos MDN atuais para criar o conteúdo de aprendizagem ativo personalizado. </font><font>Leia mais para ver como fazer isso.</font></font></p> + +<h2 id="MDN_amostras_ao_vivo"><font><font>MDN amostras ao vivo</font></font></h2> + +<p>O MDN possui um recurso muito legal chamado <strong>live samples</strong>. É um mecanismo que transforma qualquer código HTML, CSS e JavaScript dentro de uma página MDN em seu equivalente executado. Antes de usá-lo, você deve ler <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Usando o sistema de amostra ao vivo</a>,qual é a nossa documentação completa para construí-los. Embora sejam fáceis de fazer, há peculiaridades e truques que você aprenderá ao longo do caminho.</p> + +<p>O que é interessante é que é realmente fácil ajustar esse recurso para usá-lo para incorporar qualquer tipo de ferramenta ou utilitário que você deseja em uma página MDN.</p> + +<h3 id="Código_oculto">Código oculto</h3> + +<p>A primeira maneira de usar um exemplo de código para criar conteúdo de aprendizagem ativo é editar a página onde deseja adicionar seu conteúdo. Use o recurso Live Sample para criar seu conteúdo conforme desejar. Não se preocupe com a complexidade do código que você poderia escrever; apenas crie o que você precisa. Uma vez que o seu conteúdo esteja pronto, basta mudar para a visualização do código do editor e cercar seu código com um simples {{HTMLElement('div')}} elemento com a classe<code>escondida</code>. Ao fazê-lo, seu código não será exibido, mas sua amostra ao vivo permanece acessível e exibível.</p> + +<h3 dir="ltr" id="Vamos_ver_um_exemplo_simples">Vamos ver um exemplo simples:</h3> + +<div class="moreinfo"> +<p>Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal</p> + +<div class="hidden"> +<h4 id="hidden_code_example">hidden code example</h4> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><div class="square"> + #<input class="color"> +</div></pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css">body { + padding: 10px; + margin : 0; +} + +.square { + width : 80px; + height : 80px; + padding: 10px; + background-color: black; + color: white; + text-align: center; +} + +.color { + width: 60px; + text-transform: uppercase; +} +</pre> + +<h5 id="JS">JS</h5> + +<pre class="brush: js">function setColor(color) { + document.querySelector('.square').style.backgroundColor = '#' + color; + document.querySelector('.color').value = color; +} + +function getRandomColor() { + var color = Math.floor(Math.random() * 16777215); + return color.toString(16); +} + +function getInputColor() { + var value = document.querySelector('.color').value; + var color = Number('0x' + color); + if (color === +color) { + return color.toString(16); + } + return value; +} + +document.addEventListener('click', function () { + setColor(getRandomColor()); +}); + +document.addEventListener('keyup', function () { + setColor(getInputColor()); +}); +</pre> +</div> +{{EmbedLiveSample('hidden_code_example', 120, 120)}}</div> + +<p>Se você olhar para o código HTML dessa página com o editor MDN, você verá o código HTML seguinte:</p> + +<pre class="brush: html"><div class="moreinfo"> +<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p> + +<div class="hidden"> +<h4 id="hidden_code_example">hidden code example</h4> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"> +&lt;div class="square"&gt; + #&lt;input class="color"&gt; +&lt;/div&gt;</pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css"> +body { + padding: 10px; + margin : 0; +} + +.square { + width : 80px; + height : 80px; + padding: 10px; + background-color: black; + color: white; + text-align: center; +} + +.color { + width: 60px; + text-transform: uppercase; +} +</pre> + +<h5 id="JS">JS</h5> + +<pre class="brush: js"> +function setColor(color) { + document.querySelector('.square').style.backgroundColor = '#' + color; + document.querySelector('.color').value = color; +} + +function getRandomColor() { + var color = Math.floor(Math.random() * 16777215); + return color.toString(16); +} + +function getInputColor() { + var value = document.querySelector('.color').value; + var color = Number('0x' + color); + if (color === +color) { + return color.toString(16); + } + return value; +} + +document.addEventListener('click', function () { + setColor(getRandomColor()); +}); + +document.addEventListener('keyup', function () { + setColor(getInputColor()); +}); +</pre> +</div> + +\{{EmbedLiveSample('hidden_code_example', 120, 120)}} +</div></pre> + +<p>Você pode ver um exemplo mais avançado de tal ajuste sobre <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">a página API do Canvas.</a></p> + +<h3 id="Código_de_fora_da_página">Código de fora da página</h3> + +<p>O exemplo anterior está certo se você deseja incorporar conteúdo básico de aprendizagem ativa. No entanto, se você quiser lidar com um código complexo, pode tornar-se um pouco estranho para lidar com esse wrapper de classe <code>oculto</code>.</p> + +<p><font><font>Então, outra opção e escreva o código do seu conteúdo de aprendizagem em uma página MDN e, em seguida, incorpora-lo em outra página. Para fazer isso, podemos usar o {{TemplateLink ("EmbedDistLiveSample")}} macro em vez de {{TemplateLink ("EmbedLiveSample")}} macro.</font></font></p> + +<p><font><font>Vamos ver como esse exemplo quando configurado como se estivesse sendo incorporado de uma origem remota:</font></font></p> + +<div class="moreinfo"> +<p><font><font>Clique no seguinte quadrado para alterar aleatoriamente a cor ou simplesmente digitar uma cor de código hexadecimal</font></font></p> + +<p>{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}</p> +</div> + +<p><font><font>Desta vez, </font></font><a href="/en-US/docs/MDN/Contribute/Editor/Source_mode"><font><font>se você olhar para o HTML da página usando o editor MDN</font></font></a><font><font> , você não está a ver o código oculto. </font><font>Se você quiser ver o código, vá para uma </font></font><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example"><font><font>página que o hospeda.</font></font></a></p> + +<p><font><font>Você pode ver um exemplo mais avançado do uso em nosso </font></font><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets"><font><font>tutorial HTML Form</font></font></a><font><font> , que usa essa técnica para permitir uma experiência com formulários.</font></font></p> diff --git a/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html b/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html new file mode 100644 index 0000000000..369f018ce5 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/create_an_mdn_account/index.html @@ -0,0 +1,43 @@ +--- +title: Como criar uma conta na MDN +slug: MDN/Contribute/guia/Create_an_MDN_account +tags: + - Conta + - Guia(2) + - Início(2) + - Novato + - como fazer +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Para fazer quaisquer alterações sobre o conteúdo do MDN (tanto editando uma página como contribuindo com uma demonstração), você precisará de um perfil MDN. Não se preocupe, você não precisa de um perfil se tudo o que você pretende é ler e pesquisar no MDN! Esse guia simples vai ajudá-lo a configurar seu perfil MDN.</span></p> + +<div class="standardSidebar" style="width: 280px;"><strong>Por que o MDN precisa do meu endereço de email?</strong><br> +<br> +Seu endereço de email é usado para recuperação da conta, e se necessário por administradores do MDN para contatá-lo sobre sua conta ou sua atividade no site.<br> +<br> +Além disso, você pode opcionalmente inscrever-se para receber notificações (como <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">quando uma página específica é modificada</a>) e mensagens (por exemplo, se você optar por se juntar ao nosso time de testes beta, você poderá receber email sobre novas funcionalidades que precisam ser testadas).<br> +<br> +Seu endereço de email nunca é mostrado no MDN e será usado apenas de acordo com nossa <a href="https://www.mozilla.org/privacy/websites/">política de privacidade</a>.</div> + +<p>Assim que você tiver decidido que quer contribuir para o MDN, aqui está tudo que você deve fazer para configurar o seu perfil:</p> + +<ol> + <li>No topo de qualquer página no MDN você vai encontrar um botão chamado "Entrar". Passe o seu mouse sobre ele(ou toque nele caso você esteja em um dispositivo móvel) para mostrar uma lista de serviços de autenticação que disponibilizamos para se inscrever no MDN.</li> + <li>Selecione um serviço com o qual você irá se inscrever. Atualmente, somente a inscrição com o GitHub está disponível. Note que, se você selecionar o GitHub, um vínculo com a sua conta do GitHub será incluída em seu perfil público na página pessoal do MDN.</li> + <li>Siga os passos do serviço para conectar sua conta ao MDN.</li> + <li>Uma vez que o serviço de autenticação retorná-lo ao MDN, será solicitado a você que entre com seu nome de usuário e endereço de email. Seu nome de usuário será mostrado publicamente para creditá-lo sobre trabalhos que você concluiu<strong>. Não use o seu endereço de email como seu nome de usuário.</strong></li> + <li>Clique no botão "Criar meu perfil MDN".</li> + <li>Se o endereço de email que você especificou no passo 4 não é o mesmo que você usa no serviço de autenticação, você precisará checar seu email e clicar no link do email de confirmação que foi enviado para você.</li> +</ol> + +<p>É isso! Você adquiriu uma conta MDN, e você pode imediatamente editar ou marcar páginas e postar demonstrações!</p> + +<p>Você pode clicar no seu nome no topo de qualquer página MDN para ver o seu perfil público. A partir de lá, você pode clicar o botão de "Editar" para fazer modificações ou adições no seu perfil, assim você pode compartilhar mais sobre seus interesses, adicionar links para sua conta do Twitter ou blog, e assim por diante.</p> + +<div class="note"> +<p><strong>Observação:</strong> Novos nomes de usuário não podem conter espaços ou o caractere "@". Tenha em mente que o seu nome de usuário será mostrado publicamente para identificar o trabalho que você fez!</p> +</div> + +<p> </p> diff --git a/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html b/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html new file mode 100644 index 0000000000..45d49fbc55 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/do_a_technical_review/index.html @@ -0,0 +1,52 @@ +--- +title: Como fazer uma revisão técnica +slug: MDN/Contribute/guia/Do_a_technical_review +tags: + - Documentação + - Guía + - MDN Meta + - Revisão + - como fazer +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div><p class="summary"><span id="result_box" lang="pt"><span><strong>Uma Revisão técnica</strong> consiste em revisar a precisão técnica e a integridade de um artigo e corrigi-lo, se necessário.</span></span> Se um escritor de um artigo procura alguém para verificar o conteúdo técnico do artigo, então ele marca a opção "Análise técnica" durante a edição. <span id="result_box" lang="pt"><span>Muitas vezes, o escritor contata um engenheiro específico para realizar a revisão técnica, mas qualquer pessoa com experiência técnica no tópico pode fazer um.</span></span></p> + +<p><span id="result_box" lang="pt"><span>Este artigo descreve como realizar uma revisão técnica, ajudando assim a garantir que o conteúdo do MDN seja exato.</span></span></p> + +<dl> + <dt>Como é essa tarefa?</dt> + <dd>Revisar e corrigir artigos com precisão técnica e completude.</dd> + <dt>Onde deve ser feita?</dt> + <dd>Em artigos específicos aonde estão marcados como uma <a href="/en-US/docs/needs-review/technical">revisão técnica</a>.</dd> + <dt>O que você precisa saber para fazer a tarefa?</dt> + <dd> + <ul> + <li>Conhecimento avançado (especialista) sobre o tópico do artigo que você está revisando. Se a leitura do artigo não lhe ensinou nada de novo, considere-se um especialista.</li> + <li>Como editar um artigo wiki no MDN</li> + </ul> + </dd> + <dt>Quais são os passos para fazê-lo?</dt> + <dd> + <ol> + <li>Escolha um artigo para revisar: + <ol> + <li>Vá até a lista de páginas que necessitam de <a href="/en-US/docs/needs-review/technical">revisão técnica</a>. Lá estará listado todas as páginas as quais uma revisão técnica foi solicitada.</li> + <li>Escolha uma página cujo tópico você conheça muito.</li> + <li>Clique no link do artigo para carregar a página.</li> + </ol> + </li> + <li>Leia o artigo, prestando atenção aos detalhes técnicos: o artigo está correto? Falta alguma coisa? Não hesite em mudar para uma página diferente se o primeiro que você escolher não se adequar a você.</li> + <li>Se não houver erros, você não precisa editar o artigo para marcá-lo como revisado. Procure a caixa "revisão rápida" na barra lateral esquerda da página. Esta caixa amarela lista todas as revisões pendentes e permite que você desmarque a revisão já realizada. Em caso de uma revisão técnica solicita será apresentado desse modo:<br> + <img alt="" src="https://screenshots.firefoxusercontent.com/images/1c23894f-9e24-41f5-b9cc-ba040829e99a.png" style="height: 173px; width: 295px;"></li> + <li>Desmarque a opção <strong>Técnico</strong> e clique em salvar.</li> + <li>Se você encontrar erros que precisam ser corrigidos, você também pode solicitar uma nova revisão apartir do editor. Aqui estão os passos: + <ol> + <li>Para editar a página clique no botão editar no canto superior da página; desse modo você estará acessando o <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">editor do MDN</a>.</li> + <li>Corrija qualquer informação técnica que não esteja correta e/ou adicione qualquer informação importante que esteja faltando.</li> + <li>Digite um <strong>Comentário da revisão</strong> na parte inferior do artigo. Esta é uma breve mensagem que descreve o que você fez, como "Revisão técnica concluída". Se você corrigiu as informações, inclua isso em seu comentário, por exemplo, "Análise técnica e descrições de parâmetros fixos". Isso ajuda outros contribuidores e editores de sites a saber o que você mudou e por quê. Você também pode mencionar se houve partes específicas que você não se sentiu qualificado para revisar.</li> + <li>Clique no botão <strong>PUBLICAR.</strong></li> + </ol> + </li> + </ol> + Parabéns! Você terminou sua primeira revisão técnica. Obrigado pela ajuda!</dd> +</dl> diff --git a/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html b/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html new file mode 100644 index 0000000000..687072f228 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/do_an_editorial_review/index.html @@ -0,0 +1,55 @@ +--- +title: Como fazer uma revisão editorial +slug: MDN/Contribute/guia/Do_an_editorial_review +tags: + - Documentação + - Guia(2) + - MDN Meta + - Revisão + - como fazer +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +<div>{{MDNSidebar}}</div> + +<p class="summary"><strong>A revisão editorial consiste em corrigir erros gramaticais e no modo de se expressar em um artigo</strong>. Nem todos contribuidores são experientes em linguagens, mas, independentemente dos seus conhecimentos, terão contribuído com artigos extremamente úteis, que precisam da aplicação de técnicas de revisão; Isso é feito em uma revisão editorial.</p> + +<p><span class="seoSummary">Esse artigo descreve como fazer uma revisão editorial, assim ajudando para assegurar que o conteúdo do MDN é preciso.</span></p> + +<dl> + <dd><strong>Qual é a tarefa?</strong></dd> + <dd>Edição e revisão de artigos que estiverem marcados como "<em>precisando de revisão editorial</em>."</dd> + <dd><strong>Onde é que isso precisa ser feito?</strong></dd> + <dd>Em artigos específicos que são marcados como <em>"precisando de revisão editorial</em>."</dd> + <dd><strong>O que é preciso conhecer para fazer essa tarefa?</strong></dd> + <dt><span id="result_box" lang="pt"><span>Você precisa ter</span> <span>um bom dominio do idioma Ingles</span> e <span>habilidades</span> <span>de ortografia e gramática</span><span>.</span> <span>Uma revisão editorial</span> <span>consiste em garantir</span> <span>que a gramática</span><span>, ortografia e</span> <span>redação</span> <span>estejão corretas e</span> <span>fazendo sentido; E</span><span> que o</span> <span>guia de</span> <span>estilo de escrita</span> <span>MDN seja seguido</span><span>.</span></span></dt> + <dd><strong>Quais são os passos a seguir?</strong></dd> + <dd> + <ol> + <li>Escolha um artigo para revisão: + <ol> + <li>Vá para a lista de <a href="/en-US/docs/needs-review/editorial">artigos que precisam de revisão editorial</a>. Essa lista contém todas as páginas que precisam de revisão editorial.</li> + <li>Escolha uma página que tenha título em português que não comece com <code>Template:(Template: Páginas que contém macro-códigos MDN)</code></li> + <li>Clique no link do artigo para carregar a página.</li> + </ol> + </li> + <li>Quando a página estiver carregada, clique no botão <strong>Editar </strong>próximo ao topo da página; Isso colocará você no <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>. Não hesite em trocar para uma página diferente se você não entendeu bem a página atual.</li> + <li>Se não houver erros, você não precisa editar o artigo para marca-lo como revisado. Olhe para uma caixa de "revisão rápida" a esquerda da barra de navegação:</li> + </ol> + + <p> Selecione a caixa <strong>Editorial</strong> , e clique em <strong>Review Completed</strong>.</p> + + <p>4. Se você precisa consertar erros que precisam correção:</p> + + <ol> + <li>Clique no botão <strong>Editar </strong>próximo ao topo da página; Isso colocará você no <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>.</li> + <li>Corrija todas palavras e a gramática ou erros de uso.</li> + <li>Digite um <strong>Comentário de Revisão </strong>na parte de baixo do artigo, algo como 'Editorial revisado, foram corrigidos alguns erros de gramática e ortografia'.</li> + <li><em>Tire a seleção</em> da caixa <strong>Editorial</strong> abaixo do <strong>Revisão necessária?</strong></li> + <li>Clique no botão <strong>Salvar alterações</strong>.</li> + </ol> + + <div class="note"> + <p>Por razões de perfomance, sua edição pode não aparecer logo na página.</p> + </div> + </dd> +</dl> diff --git a/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html b/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html new file mode 100644 index 0000000000..7754f741b6 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/escreva_um_artigo_para_ajudar_aprender_sobre_a_web/index.html @@ -0,0 +1,114 @@ +--- +title: Como escrever um artigo para ajudar as pessoas aprender sobre a Web +slug: MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web +tags: + - Guía + - MDN Meta + - aprendizado + - como fazer +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +<div>{{MDNSidebar}}</div> + +<p>MDN's <strong><a href="/en-US/docs/Learn">Área de aprendizado</a></strong> é a nossa casa para artigos que introduzem conceitos Web para novos desenvolvedores. Uma vez que seu conteúdo é voltado para iniciantes, este é um ótimo lugar para compartilhar seu conhecimento e ajudar visitantes a conhecer a Web. É importante ter certeza que novos desenvolvedores podem seguir o conteúdo, então nós damos atenção especial para isto.</p> + +<p><span class="seoSummary">Este artigo explica como escrever para a <a href="/en-US/docs/Learn">Área de aprendizado</a>.</span></p> + +<h2 id="Como_escrever_um_artigo_na_Área_de_aprendizado">Como escrever um artigo na Área de aprendizado</h2> + +<p>Para começar a contribuir com seu conhecimento, simplesmente clique no botão verde e grande, então siga os cinco passos abaixo. Se você está procurando por ideias, por favor dê uma olhada no <a href="https://trello.com/b/LDggrYSV">nosso quadro de time Trello</a>!</p> + +<p></p><div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">Escreva um artigo de aprendizado<div></div></a></div><p></p> + +<p>Este artigo pode não acabar exatamente no lugar certo, mas pelo menos no MDN. Se você deseja falar com alguém sobre mover ele para o lugar certo, por favor <a href="/en-US/docs/Learn#Contact_us">Contate-nos</a>.</p> + +<h3 id="Passo_1_Escreva_uma_linha-dupla">Passo 1: Escreva uma linha-dupla</h3> + +<p>A primeira frase do seu artigo precisa resumir sobre qual conteúdo você irá falar e a segunda deve ser um pouco mais específica sobre os itens que você vai inserir no seu artigo. Por exemplo:</p> + +<div class="summary"> +<p>Enquanto que os arquivos {{glossary("HTML")}} contém conteúdo estruturado, {{Glossary("CSS")}}, outra grande tecnologia Web, faz o conteúdo aparecer do jeito que você quer. Neste artigo nós vamos cobrir como esta tecnologia funciona, e como escrever seu próprio exemplo básico.</p> +</div> + +<p>Note como o exemplo explica brevemente que CSS é uma importante tecnologia Web usada para estilizar páginas. Isto é suficiente para o leitor ter uma boa ideia sobre o quê o artigo fala.</p> + +<p>Porque os artigos da Área de Aprendizado primeiramente foca em iniciantes, cada artigo deve cobrir um tópico direto, então não sobrecarregará o leitor com muita informação nova. Se você não resumir o artigo em uma sentença, você pode estar tentando fazer muito em somente um artigo!</p> + +<h3 id="Passo_2_Adicionar_uma_top_box">Passo 2: Adicionar uma top box</h3> + +<p>Então adicione uma<strong> top box</strong> para ajudar os leitores com dicas sobre onde eles estão no processo de aprendizagem. Aqui é um exemplo de top box do <a href="/en-US/docs/Learn/Understanding_URLs">"Entendendo URLs e suas estruturas"</a>. Você pode usar este artigo como um modelo quando estiver escrevendo o seu próprio.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Você primeiro precisa saber <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/How_the_Internet_works">Como a Internet funciona</a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/What_is_a_Web_server">O que é um servidor Web</a>, and <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/Understanding_links_on_the_web">Os conceitos por trás dos links na web</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Você vai aprender o que é uma URL e como ela funciona na Web.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>Pré-requisitos</dt> + <dd>O que o leitor, principalmente, precisa saber para seguir este artigo? Quando possível, faça um link de cada pré-requisito para outro artigo da Área de Aprendizado cobrindo o conceito (a menos que este seja um artigo básico que não precisa de nenhum conhecimento anterior).</dd> + <dt>Objetivos</dt> + <dd>Esta seção explica brevemente o que o leitor vai aprender no curso da leitura. Este é um pouco diferente da linha-um; a linha-um resume o tópico do artigo, enquando a seção objetivos especificamente descreve o que o leitor pode esperar ao terminar de ler todo o artigo.</dd> + <dt> </dt> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> Para criar esta tabela você pode copiar e colar a tabela do exemplo acima, ou usar a ferramenta do editor do MDN <a href="/en-US/docs/MDN/Contribute/Editor/Tables">Tabela</a>. Se você escolher usar a ferramenta Tabela, você precisa especificamente adicionar uma classe CSS <code>learn-box</code> adicional a classe padrão <code>standard-table</code>. Para fazer isto, quando você criar ou editar as propriedades da tabela, vá no painel "Avançado" e no campo <strong>Classes</strong> mudar para "<code>standard-table learn-box</code>".</p> +</div> + +<h3 id="Passo_3_Escreva_uma_descrição_completa">Passo 3: Escreva uma descrição completa</h3> + +<p>Próximo: escreva uma longa descrição que forneça uma visão geral do artigo, destacando os conceitos principais. Não esqueça de explicar por quê o leitor deve pegar seu tempo para aprender este tópico e ler seu artigo!</p> + +<h3 id="Passo_4_Vá_fundo">Passo 4: Vá fundo</h3> + +<p>Quando você tiver terminado com tudo isso, você pode finalmente ir fundo no tema. Você pode estruturar esta parde do seu artigo como você quiser (Por quanto sinta-se livre para consultar nosso <a href="/en-US/docs/MDN/Contribute/Style_guide">guia de estilo</a>). Esta é sua chance de brilhar! Entre nos detalhes explicando o tema que você está escrevendo. Forneça links de referência para a documentação completa, explique como a tecnologia funciona em detalhe, forneça detalhes da sintaxe e usabilidade, e mais. É com você!</p> + +<p>Como um guia, aqui são algumas dicas de escrita para iniciantes:</p> + +<ul> + <li>Foque somente em um tema. Se você sentir que precisa cobrir outros temas, isto significa que você está deixando faltar um pré-requisito para o artigo, ou você precisa quebrar seu artigo em mais de um.</li> + <li>Use uma linguagem simples. Evite termos técnicos quando puder, ou pelo menos defina eles e <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">link para os termos do glossário</a> onde for possível.</li> + <li>Inclua exemplos diretos para fazer o conceito teórico ser compreendido mais facilmente.Muitas pessoas aprendem melhor com exemplos. Ao contrário de textos acadêmicos, nós queremos que o texto seja legível para os iniciantes seguir.</li> + <li>Esquemas visuais podem fazer o conteúdo mais fácil de digerir e carregam informação extra, então fique à vontade para usar imagens, diagramas, vídeos e tabelas. Se você está usando diagramas ou cartas para incluir texto, nós o encorajamos a usar {{Glossary("SVG")}} então nosso time de tradução pode localizar o texto.</li> +</ul> + +<p>Dê uma olhada nas primeiras seções do nosso artigo <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções - blocos reutilizáveis de código</a> para uma boa seção descritiva.</p> + +<h3 id="Passo_5_Forneça_material_de_aprendizado_ativo">Passo 5: Forneça material de "aprendizado ativo"</h3> + +<p>Para ilustrar o artigo e ajudar o leitor a entender melhor o que ele está aprendendo, esteja certo de fornecer exercícios, tutoriais e tarefas para completar. Tendo eles praticando, e ativamente usando e experimentando os conceitos que seu artigo explica, você pode ajudar a fixar a informação no cérebro do leitor.</p> + +<p>Você pode escolher incluir os exemplos diretamente nas páginas como <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">exemplos ao vivo</a>, ou <a href="/en-US/docs/MDN/Contribute/Editor/Links">fazer links para eles</a> se eles não funciona como exemplos ao vivo. Se você está interessado em ajudar a criar estes materiais de valores, por favor leia o artigo <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Criar um exercício interativo para ajudar o Aprendendo a Web</a>.</p> + +<p>Se você não pode fornecer links para materiais de aprendizado ativo (você não conhece nenhum ou não tem tempo para criar), você deveria adicionar uma tag {{Tag("NeedsActiveLearning")}} para o artigo. Assim outros contribuintes podem encontrar artigos que precisam de materiais de aprendizado ativo e talvez ajudar você com isto.</p> + +<p>Dê uma olhada no <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Aprendizado ativo: selecionando diferentes elementos</a> para um exemplo de exercício de aprendizado interativo, ou <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Aprendizado ativo: Jogando com escopo</a> para um estilo diferente de exercício que permite fazer download de um template no dispositivo do leitor e modificá-lo seguindo os passos fornecidos.</p> + +<h3 id="Passo_6_Tenha_o_artigo_revisto_e_colocado_no_menu_de_navegação_da_Área_de_aprendizado">Passo 6: Tenha o artigo revisto e colocado no menu de navegação da Área de aprendizado</h3> + +<p>Depois de ter escrito seu artigo, deixe-nos saber para podermos dar uma olhada, fazer uma revisão e sugerir melhorias. Novamente, veja nossa seção <a href="/en-US/docs/Learn#Contact_us">Contato</a>, é a melhor maneira de manter contato.</p> + +<p>Outra parte na finalização do seu artigo é colocar ele na área principal no menu de navegação da Área de Aprendizado. Este menu é gerado pelo <a href="/en-US/docs/Template:LearnSidebar">LearnSidebar macro</a>, o qual você precisa de privilégios especiais para editar, então, novamente, converse com alguém do nosso time sobre adicionar isto.</p> + +<p>Você deveria pelo menos adicionar isso na sua página - isto é feito adicionando a chamada do macro \{{LearnSidebar}} dentro de um parágrafo no topo da sua página</p> + +<ul> +</ul> + +<h2 id="Artigos_sugeridos">Artigos sugeridos</h2> + +<p>Então você quer contribuir, mas você não tem certeza sobre o que escrever?</p> + +<p>O time da Área de aprendizado mantém <a href="https://trello.com/b/LDggrYSV">um quadro Trello com ideias de artigos</a> para escrever. Sinta-se livre para pegar um e começar a trabalhar!</p> + +<p> </p> + +<p> </p> diff --git a/files/pt-br/mdn/contribute/guia/index.html b/files/pt-br/mdn/contribute/guia/index.html new file mode 100644 index 0000000000..7a8e36996a --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/index.html @@ -0,0 +1,8 @@ +--- +title: Guia de contribuição +slug: MDN/Contribute/guia +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><p>Os seguintes artigos fornecem orientações passo-a-passo para realização de tarefas específicas no MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html b/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..91ac82e8ea --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/set_the_summary_for_a_page/index.html @@ -0,0 +1,61 @@ +--- +title: Como definir o resumo de uma página +slug: MDN/Contribute/guia/Set_the_summary_for_a_page +tags: + - Como + - Guia(2) + - MDN Meta +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Você pode definir o sumário de uma página no MDN, para ser usado de várias maneiras, incluindo em resultados de pesquisa, em outras páginas MDN como tópico de página de regiões, e em dicas.</span> E o texto deve fazer sentido tanto ao contexto da página, como quando mostrado em outro contexto, sem o restante do conteúdo da página.</p> + +<p>Um sumário pode ser bem definido com a página. Caso não seja bem definido, normalmente a primeira frase é usada, e nem sempre esta é a melhor maneira de se apresentar o conteúdo da página.</p> + +<table class="full-width-table"> + <tbody> + <tr> + <td><strong>Qual é a tarefa?</strong></td> + <td><span>Marcando o texto dentro de uma página que deve ser usado como seu resumo em outros contextos; esta tarefa pode incluir, se necessário escrever um texto adequado.</span></td> + </tr> + <tr> + <td><strong>Onde isto deve ser feito?</strong></td> + <td><span>Em páginas que não possuem um resumo ou têm um resumo menos do que ótimo.</span></td> + </tr> + <tr> + <td><strong>O que você deve saber para fazer a tarefa?</strong></td> + <td>Capacidade de usar o editor MDN; boas habilidades de escrita em inglês; familiaridade suficiente com o tema da página para escrever um bom resumo.</td> + </tr> + <tr> + <td><strong>Quais são os passos a fazer?</strong></td> + <td> + <ol> + <li>Escolha uma página para fazer o resumo: + <ol> + <li>Na página <a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a>, clique sob o link <strong>Sections</strong> para um tema que você conhece um pouco sobre (por exemplo, HTML):<br> + <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> + <li>Na página de status da documentação do tópico, clique no cabeçalho de <strong>páginas</strong> na tabela de </li> + <li><strong>Resumo</strong>. Isso leva você a um índice de todas as páginas em que seção do tópico; Ele mostra a página </li> + <li>de links na coluna da esquerda e as tags e resumos na coluna à direita:</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> + <li>Escolha uma página que está faltando um resumo, ou que tem um resumo fraco:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> + <li>Clique no link para ir para essa página.</li> + </ol> + </li> + <li>Clique em <strong>Editar</strong> para abrir a página no editor MDN.</li> + <li>Procure uma frase ou duas, que funcionam como um resumo fora de contexto. Se necessário, edite o conteúdo existente para criar ou modificar frases para ser um bom resumo.</li> + <li>Selecionar o texto a ser usado como um resumo.</li> + <li>Nos estilos de elementos gráficos da barra de ferramentas do editor, selecione Resumo SEO. (No código fonte da página, isso cria uma {{HTMLElement("span")}} elemento com class = "<code>seoSummary</code> " em torno do texto selecionado.)<br> + <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> + <li>Salve <span id="ouHighlight__5_8TO7_10">suas</span> <span id="ouHighlight__10_16TO12_21">alterações</span> <span id="ouHighlight__18_21TO23_25">com</span> um <span id="ouHighlight__23_23TO37_39">comentário</span><span id="noHighlight_0.6311055598476647"> de revisão em </span><span id="ouHighlight__42_45TO52_55">como</span> <span id="ouHighlight__47_50TO57_64">"Definir</span> <span id="ouHighlight__52_54TO66_66">a</span> <span id="ouHighlight__56_59TO68_73">página</span> <span id="ouHighlight__61_68TO75_80">Resumo</span><span id="ouHighlight__69_69TO81_82">."</span></li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html b/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html new file mode 100644 index 0000000000..7c6f94ac07 --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/tag_javascript_pages/index.html @@ -0,0 +1,84 @@ +--- +title: Como marcar páginas de JavaScript +slug: MDN/Contribute/guia/Tag_JavaScript_pages +tags: + - Como + - Guia(2) + - JavaScript + - MDN Meta +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>O tagueamento consiste na adição de meta-informações para as páginas de modo que o conteúdo relacionado possa ser agrupado, como por exemplo em uma ferramenta de pesquisa.</strong></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td><strong>E onde isso precisa ser feito?</strong></td> + <td>Dentro de páginas especificas relacionadas com <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">Javascript e sem marcação.</a></td> + </tr> + <tr> + <td><strong>O que é preciso saber para fazer a tarefa ?</strong></td> + <td> + <ul> + <li>O basico de javascript como saber o que é um metodo ou uma propriedade.</li> + </ul> + </td> + </tr> + <tr> + <td><strong>Quais são os passos para fazê-lo?</strong></td> + <td> + <ol> + <li>Escolha uma das paginas na lista 'linkada' acima.</li> + <li>Click no link do artigo e carregue a página.</li> + <li>Uma vez que a página foi carregada, clique no botão <strong>Editar</strong> no topo, isso deve lhe posicionar no editor MDN.</li> + <li>Pelo menos uma tag Javascript deve ser adicionada. Aqui estão algumas outras tags possíveis para adicionar: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">A página que está em uso.</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Method</code></td> + <td>método</td> + </tr> + <tr> + <td><code>Property</code></td> + <td>Propriedade</td> + </tr> + <tr> + <td><code>prototype</code></td> + <td>protótipo</td> + </tr> + <tr> + <td>Object type name</td> + <td>método de um objeto; por exemplo<code> </code><code>String.fromCharCode</code> deve ser a sequência da tag <code>String</code></td> + </tr> + <tr> + <td><code>ECMAScript6 </code>and <code>Experimental</code></td> + <td>recursos adicionados na nova versão do ECMAScript</td> + </tr> + <tr> + <td><code>Deprecated</code></td> + <td>recursos obsoletos (cujo o uso é desencorajado, mas ainda suportada)</td> + </tr> + <tr> + <td><code>Obsolete</code></td> + <td>recursos obsoletos (que não são mais suportados em browsers modernos)</td> + </tr> + <tr> + <td>others</td> + <td>ver as <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">normas de tagueamento MDN </a>para aplicar outras tags possíveis.</td> + </tr> + </tbody> + </table> + </li> + <li>Salve com um comentário.</li> + <li>E está pronto!</li> + </ol> + </td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/mdn/contribute/guia/vincular_uma_conta_github/index.html b/files/pt-br/mdn/contribute/guia/vincular_uma_conta_github/index.html new file mode 100644 index 0000000000..4a158cb44c --- /dev/null +++ b/files/pt-br/mdn/contribute/guia/vincular_uma_conta_github/index.html @@ -0,0 +1,113 @@ +--- +title: Como vincular uma conta do Github ao perfil do MDN +slug: MDN/Contribute/guia/VIncular_uma_conta_github +tags: + - Documentação + - MDN + - MDN Meta + - MDN Projeto +translation_of: Archive/MDN/Howto_Link_a_Github_account +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<div class="note"> +<p><strong>Note: </strong>Support for Persona logins on MDN was disabled on November 1, 2016. The method for adding a Github account to your profile therefore no longer works. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please <strong>file an <a class="external external-icon" href="https://mzl.la/accounthelp">"Account Help" bug</a> </strong>on Bugzilla. For further reading about the end of life of Persona, see: <a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">Persona shutdown guidelines</a>.</p> +</div> + +<p><span class="seoSummary">Porque o sistema de autenticação Mozilla <a href="https://login.persona.org/">Persona</a> está sendo desativado em 30 de Novembro de 2016, todos os usuários que querem contribuir para o MDN vai precisar ter outros meios para logar-se no MDN. Atualmente, a única alternativa que nós suportamos é o Github, então você vai precisar adicionar uma autenticação do <a href="https://github.com/">GitHub</a> ao seu perfil do MDN. </span></p> + +<div class="warning"> +<p>Você deve fazer isso antes de 30 de Novembro de 2016, ou você já não terá outra forma de logar-se no MDN.</p> +</div> + +<h2 id="Visão_Geral">Visão Geral</h2> + +<p>Adicionando uma autentitação do GIthub não é díficil de se fazer. Nós vamos entrar em detalhes em um momento, mas primeiro, aqui uma lista rápida dos passos involvidos:</p> + +<ol> + <li><a href="/en-US/docs/MDN/Signing_in">Logando-se em sua conta do MDN</a> com Persona.</li> + <li>Indo a página <a href="https://developer.mozilla.org/en-US/users/account/connections">contas vinculadas</a>.</li> + <li>Adicionando uma autenticação do GIthub.</li> +</ol> + +<h2 id="Instruções_detalhadas">Instruções detalhadas</h2> + +<p>Aqui estão um guia passo-a-passo com detalhes sobre como fazer tudo que você precisa fazer.</p> + +<h3 id="Logando-se_em_sua_conta_do_MDN">Logando-se em sua conta do MDN</h3> + +<ol> + <li>No topo de qualquer página do MDN, passe o mouse por cima ou clique em <strong>Entrar</strong>. Isso vai exibir metodos de aautenticação disnponíveis, <strong>Persona</strong> ou <strong>Github</strong>.<br> + <img alt="Sign in box on MDN, showing Persona and Github." src="https://mdn.mozillademos.org/files/13773/Persona%20Sign%20in%202016-08.png" style="border-style: solid; border-width: 1px; height: 162px; width: 414px;"></li> + <li>Selecione<strong> Persona </strong>e entre usando suas credenciais atuais.</li> +</ol> + +<h3 id="Vá_a_página_Contas_vinculadas.">Vá a página "Contas vinculadas".</h3> + +<p>Aqui estão duas formas para adicionar a página contas vinculadas.</p> + +<p>A primeira é simples, clique no link abaixo.</p> + +<p>De outra forma, faça o seguinte:</p> + +<ol> + <li>CLique no seu nome de usuário no topo de qualquer página do MDN. (Isso está na posiçãoo onde a caixa de <strong>Entrar </strong>quando você não estiver logado.</li> + <li>Abra o menu da <strong>"Engrenagem" </strong>, e clique em <strong>Contas vinculadas</strong><br> + <img alt='Gear menu in profile, showing the "Account connections" option' src="https://mdn.mozillademos.org/files/13428/SheppyWork___MDN_-__Private_Browsing_.png" style="height: 217px; width: 219px;"></li> +</ol> + +<h3 id="Adicione_uma_autenticação_do_Github">Adicione uma autenticação do Github</h3> + +<p>Você está agora em "Contas Vinculadas", qual lista a conta external você já tem vinculada ao seu perfil do MDN. Se o Github já estiver listado, parabéns! Você está pronto para ir! mas teste isso para ter certeza que você se lembra de sua senha, desconecte-se e volte usando suas credenciais do GIthub</p> + +<p>Se GIthub não estiver listado, quando próximo ao fim da página, olhe abaixo da lista de contas externais já listadas, você pode conectar seu perfil do MDN. Isso se parece com assim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13430/Account_Connections___MDN_-__Private_Browsing_.png" style="height: 79px; width: 476px;"></p> + +<p>Para adicionar :</p> + +<ol> + <li>Clique <strong>Conectar com GIthub</strong>. MDN vai contactar GIthub requesitando permissão para vincular a conta. Se você não estiver conectado no Github, você vai ser perguntado:<br> + <img alt="Screenshot of GitHub sign in window." src="https://mdn.mozillademos.org/files/13444/GitHub_Sign_In.png" style="height: 447px; width: 356px;"></li> + <li><span id="result_box" lang="pt"><span>Se você tiver</span> <span>autenticação de dois fatores</span> <span>ativada em</span> <span>sua conta</span> <span>GitHub</span><span>, você será</span> <span>solicitado a digitar</span> <span>o seu</span> <span>código de autenticação</span><span>:</span></span><br> + <img alt="Screenshot of GitHub's Two-factor authentication window." src="https://mdn.mozillademos.org/files/13460/GitHub_-_Where_software_is_built.png" style="height: 448px; width: 361px;"></li> + <li><span id="result_box" lang="pt"><span>Agora que você está</span> <span>conectado à sua</span> <span>conta</span> <span>GitHub</span><span>, você</span> <span>será solicitado a</span> <span>autorizar a</span> <span>ligação entre</span> <span>GitHub</span> <span>e</span> <span>MDN</span> <span>(a menos que</span> <span>você já tem</span> <span>a autorização em</span> <span>arquivo</span> <span>por algum motivo)</span><span>.</span> <span>Esta página</span> <span>é mostrada abaixo.</span></span><br> + <img alt='Screenshot of GitHub "Authorize application" window.' src="https://mdn.mozillademos.org/files/13456/Authorize_Mozilla_Developer_Network.png" style="height: 420px; width: 766px;"><br> + <span id="result_box" lang="pt"><span>Clique no botão verde</span> <span><strong>Autorizar Aplicativo</strong></span><span> para</span> <span>conceder permissão</span> <span>para o seu perfil</span> <span>MDN</span> <span>para acessar sua conta</span> <span>GitHub</span><span>.</span> <span>Se a conta</span> <span>GitHub</span> <span>está ligada</span> <span>com sucesso</span> <span>ao seu perfil</span> <span>MDN</span><span>, você verá</span> <span>esta mensagem:</span></span><br> + <img alt="Account successfully created." src="https://mdn.mozillademos.org/files/13454/Edit_Your_Profile___MDN.png" style="height: 57px; width: 646px;"></li> +</ol> + +<p><span id="result_box" lang="pt"><span>Não apenas você pode</span> <span>agora usar</span> <span>GitHub</span> <span>para fazer login no</span> <span>MDN</span><span>, mas</span> <span>na verdade você está</span> <span>já</span> <span>assinado</span> <span>em usar</span> <span>sua autenticação</span> <span>GitHub</span><span>!</span> <span>Agora você está pronto</span> <span>para o</span> <span>desligamento</span> <span>Persona</span><span>.</span> <span>Certifique-se de</span> <span>atualizar quaisquer</span> <span>gerenciadores de senha</span> <span>você pode ter instalado</span><span>,</span> <span>se necessário.</span></span></p> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>Se você tiver problemas ao tentar adicionar sua conta do GitHub ao seu perfil, espero que as dicas de solução de problemas a seguir vai ajudar.</p> + +<h3 id="Erro_Não_foi_possivel_encontrar_conta_correspondente_ao_perfil">Erro : Não foi possivel encontrar conta correspondente ao perfil</h3> + +<p><span id="result_box" lang="pt"><span>Se você tentar</span> <span>adicionar sua conta do</span> <span>GitHub</span> <span>ao seu perfil e</span> <span>obter o erro</span> <span>"</span><span>Não foi possível encontrar</span> <span>conta correspondente</span> <span>perfil</span><span>",</span> <span>pode significar</span> <span>algumas coisas diferentes</span><span>.</span> <span>Se</span> <span>você tiver várias contas</span> <span>na sua conta</span> <span>GitHub</span><span>, pode haver</span> <span>alguma confusão</span><span>;</span> <span>GitHub</span> <span>não pode relatar</span> <span>o endereço de email</span> <span>esperada</span> <span>para</span> <span>MDN</span> <span>durante a tentativa de</span> <span>conta de</span> <span>emparelhamento,</span> <span>o que irá resultar</span> <span>neste erro</span><span>.</span> <span>Outras</span> <span>falhas no</span> <span>processo pode</span> <span>também</span> <span>resultar</span> <span>na mesma mensagem</span> <span>de erro</span><span>.</span></span></p> + +<p><span id="result_box" lang="pt"><span>Uma maneira de</span> <span>contornar esse</span> <span>problema:</span> <span>abrir uma nova janela</span> <span>privada</span> <span>no seu browser</span><span>;</span> <span>no Firefox</span><span>, por exemplo</span><span>, escolha "</span><span>Nova Janela</span> <span>privada</span><span>" no</span> <span>menu Arquivo</span> <span>(ou pressione</span></span> <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> [<kbd>Cmd</kbd>-<kbd>Shift</kbd>-<kbd>P</kbd> <span class="short_text" id="result_box" lang="pt"><span>no Mac</span><span>]</span><span>)</span><span>.</span> <span>Navegue até</span> <span>MDN</span> <span>lá,</span></span> <a href="/en-US/docs/MDN/Signing_in">logue na sua conta do MDN</a>, <span id="result_box" lang="pt"><span>tente novamente</span> <span>para adicionar</span> <span>sua conta do</span> <span>GitHub</span> <span>para</span> <span>o seu perfil como</span> <span>indicado acima</span><span>.</span></span></p> + +<h3 id="Meu_autorização_GitHub_não_é_exibido_na_página_Connections_conta."><span id="result_box" lang="pt"><span>Meu</span> <span>autorização</span> <span>GitHub</span> <span>não é exibido</span> <span>na página</span> <span>Connections</span> <span>conta.</span></span></h3> + +<p><span id="result_box" lang="pt"><span>Isso pode</span> <span>ser um</span> <span>problema de cache</span><span>.</span> <span>Recarregar a página</span> <span>ou</span> <span>desconectado</span> <span>e</span> <span>efetuar login novamente</span> <span>deve resolver o problema</span><span>.</span></span></p> + +<h3 id="Persona_não_lembra-se_de_mim">Persona não lembra-se de mim</h3> + +<p><span id="result_box" lang="pt"><span>Se você tentar</span> <span>fazer login no</span> <span>Persona</span> <span>assim você pode adicionar</span> <span>um login</span> <span>GitHub</span> <span>para a sua conta</span> <span>MDN</span> <span>e se</span> <span>disse</span> <span>"</span><span>O seu endereço de</span> <span>e-mail</span> <span>é novo para nós</span><span>," esta é</span> <span>provavelmente porque</span> <span>ele foi</span> <span>tempo suficiente</span> <span>desde</span> <span>seu último login na</span> <span>Persona</span> <span>que</span> <span>tenha excluído</span> <span>seu endereço de</span> <span>e-mail de</span> <span>seu sistema.</span> <span>Isto acontece</span> <span>depois de algum</span> <span>período</span> <span>de tempo</span><span>;</span> <span>a janela de login</span> <span>Persona</span> <span>parece com isso</span> <span>nessa situação</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13765/unknown-to-persona.png" style="height: 533px; width: 800px;"></p> + +<p><span id="result_box" lang="pt"><span>Se isso acontecer</span><span>, você precisa</span> <span>simplesmente</span> <span>seguir as instruções do</span> <span>Persona</span> <span>para criar</span> <span>uma nova senha para</span> <span>esse endereço</span> <span>de e-mail</span><span>.</span> <span>O</span> <span>MDN</span> <span>não</span> <span>se preocupam com</span> <span>este processo;</span> <span>o fato de que</span> <span>o seu endereço de</span> <span>e-mail corresponde</span> <span>up é</span> <span>tudo o que importa</span><span>.</span> <span>Um e-mail</span> <span>de confirmação será enviado</span> <span>para verificar se</span> <span>você possui</span> <span>o endereço</span> <span>de e-mail</span><span>, provavelmente de</span> <span>no-reply@persona.org</span><span>.</span> <span>Se</span> <span>você tem</span> <span>filtragem de spam</span><span>, ele pode</span> <span>ser enviado</span> <span>para a pasta de</span> <span>spam.</span><br> + <br> + <span>Depois de terminar</span> <span>o processo de</span> <span>definir a senha</span> <span>para o endereço de</span> <span>e-mail usado</span> <span>para fazer login no</span> <span>MDN</span><span>,</span> <span>o seu acesso ao</span> <span>MDN</span> <span>será restaurada.</span> <span>Em seguida, você</span> <span>pode seguir</span> <span>os passos na</span> <span>{</span><span>{</span><span>anch</span> <span>( "</span><span>Instruções detalhadas</span><span>")</span><span>}}</span> <span>acima para adicionar</span> <span>o seu login</span> <span>GitHub</span> <span>para a sua conta</span> <span>MDN</span><span>.</span></span></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Como criar uma conta do MD</a></li> + <li><a href="/en-US/docs/MDN/Getting_started">Envolvendo-se com o MDN</a></li> +</ul> diff --git a/files/pt-br/mdn/contribute/index.html b/files/pt-br/mdn/contribute/index.html new file mode 100644 index 0000000000..4260e74402 --- /dev/null +++ b/files/pt-br/mdn/contribute/index.html @@ -0,0 +1,20 @@ +--- +title: Contribuindo para o MDN +slug: MDN/Contribute +tags: + - Guía + - MDN Meta + - Página de destino +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/pt-BR/docs/MDN")}}</div> + +<p>Bem-vindo! Ao visitar esta página, você deu o primeiro passo para se tornar um colaborador da MDN.</p> + +<p><span class="seoSummary">Os guias listados aqui aqui cobrem todos os aspectos de contribuição para a MDN, incluindo guias de estilo, guia de utilização do nosso editor e ferramentas e muito mais. Por favor, assegure-se de ler (e estar em conformidade) com os <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Termos da Mozilla</a> antes de editar ou criar qualquer página.</span></p> + +<p>Se você não contribuiu com a MDN anteriormente, o guia de <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Primeiros_Passos">primeiros passos</a> pode lhe ajudar a selecionar uma tarefa para começar a ajudar.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/pt-br/mdn/contribute/persona_sign-in/index.html b/files/pt-br/mdn/contribute/persona_sign-in/index.html new file mode 100644 index 0000000000..7c36309f88 --- /dev/null +++ b/files/pt-br/mdn/contribute/persona_sign-in/index.html @@ -0,0 +1,32 @@ +--- +title: MDN e Persona logins +slug: MDN/Contribute/Persona_sign-in +tags: + - Documentação + - MDN + - MDN Meta + - Mozilla + - Persona +translation_of: Archive/MDN/Persona_sign-ins +--- +<div>{{MDNSidebar}}</div><div class="warning"> +<p>Nós não damos mais suporte ao acesso via Persona na MDN.Por favor <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">conecte sua conta do Github ao seu perfil na MDN agora</a> para que você possa continuar a logar na sua conta da MDN.</p> +</div> + +<p><span id="result_box" lang="pt"><span>Atualmente,</span> <span>a MDN</span> <span>permite que</span> <span>colaboradores loguem</span><span> usando</span> <span>dois</span> <span>provedores de autenticação</span> <span>diferentes:</span> <span>Mozilla</span> <span>Persona</span> <span>e</span> <span>GitHub</span><span>.</span> <span>A partir do dia</span> <span>1</span></span>º<span lang="pt"><span> de novembro de 2016</span><span>,</span> <span>nós iremos remover o</span> <span>Persona</span> <span>como uma opção para</span> <span>fazer o login.</span> <span>Por isso</span><span>, é necessário ativar</span> <span>a autenticação</span> <span>Github</span> <span>no seu perfil para</span> <span>evitar a perda de</span> <span>acesso de login</span> <span>para</span> <span>MDN</span><span>.</span></span></p> + +<p><span id="result_box" lang="pt"><span>Nós reconhecemos</span> <span>que isso é</span> <span>um inconveniente</span><span>, e nós</span> <span>pedimos desculpas por isso</span><span>.</span> <span>Infelizmente, isso</span> <span>está fora de</span> <span>nosso controle.</span></span></p> + +<h2 id="Porque_o_Persona_está_sendo_removido">Porque o Persona está sendo removido?</h2> + +<p><span id="result_box" lang="pt"><span>A Mozilla</span> <span>fechou</span> <span>o projeto</span> <span>Persona</span><span>,</span> <span>e seus servidores</span> <span>serão desligados</span> <span>em novembro</span> <span>de 2016.</span> <span>Você pode </span></span><a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers#FAQs">entender melhor sobre a decisão da Mozilla</a> em encerrar o Persona no wiki da Mozilla.</p> + +<p> </p> + +<h2 id="A_MDN_oferecerá_outro_provedor_de_autenticação"><span class="short_text" id="result_box" lang="pt"><span class="alt-edited trans-target-highlight">A</span> <span>MDN</span> <span class="alt-edited">oferecerá outro</span> <span>provedor de autenticação</span><span>?</span></span></h2> + +<p><span id="result_box" lang="pt"><span>Nós</span> <span>gostaríamos muito</span> <span>de fazer isso,</span> <span>mas ainda não</span> <span class="alt-edited">identificamos</span> <span>outro fornecedor</span> <span>que</span> <span>atenda às nossas</span> <span>necessidades;</span> <span>Além disso,</span> <span>atualmente não</span> <span class="alt-edited">temos</span> <span class="alt-edited">os recursos de desenvolvimento</span> <span>para integrar</span> <span>outro provedor.</span> <span>Por enquanto</span><span>, a <em>única</em> opção</span> <span>para manter</span> <span>o acesso</span> <span class="alt-edited">do colaborador</span> <span class="alt-edited">na MDN</span> <span>é </span></span><a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">ligar o seu perfil MDN à sua conta GitHub. </a><br> + <br> + Caso você não tenha como associar sua conta GitHub, por favor, preencha este formulário <a href="https://mzl.la/accounthelp">"Suporte as contas" </a>no Bugzilla.</p> + +<p><span lang="pt"><span>Tenha em mente,</span> <span class="alt-edited">que</span> <span>você não precisa</span> <span class="alt-edited">fazer login na</span> <span>MDN</span> <span class="alt-edited">para ler</span> <span>nosso conteúdo.</span> <span>Mas se você</span> <span>tem uma conta para</span> <span>contribuir</span><span>,</span> <span>e gostaria de</span> <span>poder contribuir</span> <span>a qualquer momento</span> <span>no futuro,</span> <span>não se esqueça de</span> <em><strong><span>adicionar uma conta</span> <span>GitHub</span> <span>ao seu perfil</span> <span class="alt-edited">o mais rápido</span> <span>possível</span></strong></em><span>,</span> <span>antes de</span> <span>31 de outubro de 2016</span><span>.</span></span></p> diff --git a/files/pt-br/mdn/contribute/processos/index.html b/files/pt-br/mdn/contribute/processos/index.html new file mode 100644 index 0000000000..bfac34ce26 --- /dev/null +++ b/files/pt-br/mdn/contribute/processos/index.html @@ -0,0 +1,6 @@ +--- +title: Processos de documentação +slug: MDN/Contribute/Processos +translation_of: MDN/Contribute/Processes +--- +<div>{{MDNSidebar}}</div><p>O projeto de documentação do MDN é enorme; há um grande número de tecnologias para cobrir e nós temos centenas de colaboradores em todo o mundo. Para ajudar a trazer ordem ao caos, temos processos padrões a seguir quando se trabalha em tarefas específicas relacionadas com a documentação. Aqui você vai encontrar os guias para esses processos.</p> diff --git a/files/pt-br/mdn/editor/basics/index.html b/files/pt-br/mdn/editor/basics/index.html new file mode 100644 index 0000000000..5f06217a31 --- /dev/null +++ b/files/pt-br/mdn/editor/basics/index.html @@ -0,0 +1,65 @@ +--- +title: Elementos de Interface do Editor +slug: MDN/Editor/Basics +translation_of: MDN/Editor/Basics +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">O editor WYSIWYG embutido no MDN foi projetado para fazer com que seja o mais fácil possível criar, editar, e aprimorar artigos e praticamente qualquer outra página do site.</span> A janela do editor, como mostrada abaixo, consiste em oito áreas principais. Este guia oferece informações sobre cada seção para que você saiba como utilizar inteiramente nosso ambiente de edição.</p> + +<div class="note"> +<p>Estamos constantemente trabalhando em melhorias para o MDN, então haverá momentos em que este documento ou as capturas de tela abaixo estejam um pouco desatualizados. Portanto, iremos atualizar este documento periodicamente, evitando que se torne inutilizável.</p> +</div> + +<p><img alt="Screenshot of the editor UI (August 2017) with each section labeled" src="https://mdn.mozillademos.org/files/15261/edit-page-with-labels.png" style="border-style: solid; border-width: 2px; height: 723px; width: 808px;"></p> + +<p>A interface do editor contém as seguintes seções, como mostrado acima. Clique abaixo para ler sobre cada seção do editor respectivamente.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Page_info">Página de informações</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Page_controls">Comandos</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Toolbar">Barra de ferramentas</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics#Edit_box">Caixa de edição</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Tags">Tags</a></li> + <li><a href="#Revision_comment">Comentário de revisão</a></li> + <li><a href="#Review_requests">Solicitação de revisão</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Attachments">Anexos</a></li> +</ul> + +<h2 id="Caixa_de_ediçao">Caixa de ediçao</h2> + +<p>A caixa de edição é, evidementente, onde você irá realmente produzir o seu texto.</p> + +<p>Clicando com o botão direito na caixa de edição, exibe-se opções apropriadas adicionais dependendo de onde você clicar: clicar com o botão direito do mouse em uma tabela irá mostrar opções relacionadas à tabela e clicar com o botão direito em uma lista, irá apresentar opções sobre àquela lista, por exemplo. Por padrão o editor utiliza seu próprio menu quando você clica com o botão direito no editor. Para acessar o menu padrão do seu navegador (como acessar a lista de correções do corretor ortográfico do Firefox), mantenha pressionada a tecla <kbd>Shift</kbd> ou a tecla <kbd>Control</kbd> (tecla <kbd>Command</kbd> no Mac OS X) enquanto estiver clicando.</p> + +<p>Quando estiver trabalhando na caixa de edição, você pode usar essas <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Keyboard_shortcuts">teclas de atalho</a>.</p> + +<h2 id="Comentários_de_revisão">Comentários de revisão</h2> + +<p>Depois de fazer suas alterações, é extremamente recomendável que você adicione um comentário para sua revisão. Ele ficará disponível no histórico de revisão da página, assim como no <a href="/en-US/dashboards/revisions">Painel de controle</a>. Isto irá ajudar a explicar ou justificar suas alterações para os outros que revisarão o seu trabalho depois. Para adicionar um comentário de revisão, escrevá-o na caixa de comentário antes de clicar em um dos dois botões de <strong>Publicar</strong> na parte superior e inferior da página.</p> + +<p>Existem algumas razões pelas quais isto é útil:</p> + +<ul> + <li>Se o motivo a sua alteração não for óbvio, seu comentário pode explicar o seu raciocínio para os outros.</li> + <li>Se sua alteração for tecnicamente complexa, pode explicar aos editores a lógica por trás dela; isto pode incluir um número de <em>bug</em>, por exemplo, que os editores podem consultar para obter mais informações.</li> + <li>Se a sua alteração inclui deletar uma grande parte de um conteúdo, você pode justificar a sua exclusão (por exemplo, "Eu movi este conteúdo para o artigo X").</li> +</ul> + +<h2 id="Review_requests">Review requests</h2> + +<p>The MDN community uses <strong>reviews</strong> to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about <a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">technical reviews</a> and <a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">editorial review</a> in the <a href="/en-US/docs/MDN/Contribute/Howto">How to</a> guides.</p> + +<p>To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.</p> + +<p>While selecting a review checkbox adds the article to the lists of those <a href="/en-US/docs/needs-review/technical">needing technical review</a> or <a href="/en-US/docs/needs-review/editorial">needing editorial review</a>, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a <a href="/en-US/docs/MDN/Community/Roles/Subject-matter_experts">subject-matter expert</a> in the relevant technical area. For editorial reviews, you can post in the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a> to request that someone review your changes.</p> + +<p>Be sure to click one of the <strong>Publish</strong> buttons after making your selections, to commit your review request.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.ckeditor.com/">CKEditor User's Guide</a></li> +</ul> + +<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}</h6> diff --git a/files/pt-br/mdn/editor/index.html b/files/pt-br/mdn/editor/index.html new file mode 100644 index 0000000000..289d09b69f --- /dev/null +++ b/files/pt-br/mdn/editor/index.html @@ -0,0 +1,10 @@ +--- +title: Guia do editor MDN +slug: MDN/Editor +translation_of: MDN/Editor +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">O editor WYSIWYG (what-you-see-is-what-you-get) oferecido pela Mozilla Developer Network wiki torna fácil a contribuição de conteúdo novo. O guia de editor MDN fornece algumas informações sobre como usar o editor, assim como algumas informações sobre recursos úteis que podem melhorar sua produtividade. Por favor, certifique-se de ler (e está de acordo com) o <a href="https://www.mozilla.org/pt-BR/about/legal/terms/mozilla/">Mozilla Terms</a> antes de editar ou criar novas páginas. </span></p> + +<p>O <a href="/pt-BR/docs/MDN/Contribute/Content/Style_guide" title="/pt-BR/docs/Project:MDN/Style_guide">Guia de estilo MDN</a> oferece informação sobre como formatar e estilizar o conteúdo em si, incluindo as nossas regras de gramática e ortografia preferenciais.</p> +<p>{{LandingPageListSubpages}}</p> +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/pt-br/mdn/guidelines/index.html b/files/pt-br/mdn/guidelines/index.html new file mode 100644 index 0000000000..392b53bd70 --- /dev/null +++ b/files/pt-br/mdn/guidelines/index.html @@ -0,0 +1,16 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Diretrizes + - MDN Meta + - Página de destino +translation_of: MDN/Guidelines +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/pt-BR/docs/MDN")}}</div> + +<p><span class="seoSummary">Estes guias fornecem detalhes sobre como a documentação do MDN deve ser escrita e formatada, bem como a forma como nossas amostras de código e outros conteúdos devem ser apresentados. </span>Seguindo esses guias, você pode garantir que o material produzido seja limpo e fácil de usar.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/pt-br/mdn/guidelines/style_guide/index.html b/files/pt-br/mdn/guidelines/style_guide/index.html new file mode 100644 index 0000000000..3776744cbd --- /dev/null +++ b/files/pt-br/mdn/guidelines/style_guide/index.html @@ -0,0 +1,571 @@ +--- +title: Guia de estilo de escrita +slug: MDN/Guidelines/Style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Em um esforço para apresentar a documentação de maneira organizada, padronizada e fácil de ler a guia de estilo MDN Web Docs descreve como o texto deve ser organizado, escrito, formatado, e assim por diante.</span> Estas sao orientações mais do que regras estritas. Nos estamos mais interessados em conteúdo do que em formatação, então não se sinta obrigado a aprender a guia de estilo antes de contribuir. Não fique chateado/a ou surpreso/a caso algum/a voluntário/a trabalhador/a edite o seu trabalho de acordo com esta guia.</p> + +<p>Se você esta procurando por coisas específicas sobre como determinado tipo de página deve ser estruturado, veja a <a href="/en-US/docs/MDN/Contribute/Content/Layout">página sobre guia de layout MDN</a>.</p> + +<p>Os aspetos relacionado a linguagem desta guia aplicam-se principalmente a documentação em Inglês. Outras idiomas devem ter (e são bem-vindos a criar) seu próprio guia de estilo. Estes devem ser publicados como sub-páginas da página do time de localização.</p> + +<p>Para os estilos padrão que se aplicam ao conteúdo escrito por outros sites que não sejam a MDN, referir-se a <a href="http://www.mozilla.org/en-US/styleguide/">guia de estilo Única Mozilla</a>.</p> + +<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Básico</h2> + +<p>O melhor lugar para começar em qualquer publicação extensa sobre guia de estilo é com padrões de texto muito simples para ajudar a manter a consistência da documentação. As seguintes seções esboçam alguns destes padrões básicos para ajudar você.</p> + +<h3 id="Título_das_Páginas">Título das Páginas</h3> + +<p>Títulos de páginas são usados em resultados de pesquisa e também usados para estruturar a hierarquia da página na lista de breadcrumb(literalmente migalhas de pão) na parte superior da página. O título da página (que é exibido na parte superior da página e nos resultados de pesquisa) pode ser diferente da página "slug", que é a parte do URL da página que segue <em>"<local>/docs/".</em></p> + +<h4 id="Maisuculização_de_títulos_e_cabeçalhos">Maisuculização de títulos e cabeçalhos</h4> + +<p>Títulos de páginas e seções de cabeçalho devem usar letras maiúsculas no estilo da frase (Maiúsculas so na primeira palavra e nomes próprios) em vez de letras maiúsculas no estilo de título:</p> + +<ul> + <li><span class="correct"><strong>Correto</strong></span>: "Um novo método para criar sobreposições Javascript"</li> + <li><span class="incorrect"><strong>Incorreto</strong></span>: "Um Novo Método para Criar Sobreposições Javascript"</li> +</ul> + +<p>Nós temos muitas páginas antigas que foram escritas antes que essa regra de estilo fosse estabelecida. Sinta-se livre para atualizá-las se achar necessário. Estamos atualizando-as gradualmente.</p> + +<h4 id="Escolhendo_títulos_e_slugs">Escolhendo títulos e slugs</h4> + +<p>Slugs de página devem ser mantidas curtas; quando criar um novo nível de hierarquia, o componente do novo nível no slug, geralmente, deve ser só uma ou duas palavras.</p> + +<p>Títulos de páginas, por outro lado, podem ser grandes o quanto quiser, sendo razoável, e devem ser descritivos.</p> + +<h4 id="Criando_novas_subárvores">Criando novas subárvores</h4> + +<p>Quando você precisar adicionar vários artigos sobre um tópico ou um assunto do tópico, você normalmente fará isso criando uma página de destino e adicionando subpáginas para cada um dos artigos individuais. A página de destino deve abrir com um ou dois parágrafos descrevendo o tópico ou a técnologia e, em seguida, fornecer uma lista de subpáginas com descrições de cada página. Você pode automatizar a inserção de páginas na lista usando algumas macros que criamos.</p> + +<p>Por exemplo, considere a guia <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, que é estruturada da seguinte forma:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Página principal do sumário.</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> +</ul> + +<p>Tente evitar colocar seu artigo no topo da hierarquia, o que torna lento o site e menos eficiente a pesquisa e a navegação.</p> + +<h3 id="Orientações_gerais_do_conteúdo_do_artigo">Orientações gerais do conteúdo do artigo</h3> + +<p>Quando estiver escrevendo qualquer documento é importante conhecer o quanto falar. Se ficar divagando muito o artigo fica tedioso de ler e ninguém ira usa-lo. Escolher a quantidade certa a falar sobre o assunto é muito importante por diversas razões. Entre essas razões: assegurar que o leitor encontre a informação que eles precisam, prover suficiente material de qualidade para os engines de pesquisa poderem analizar e classificar o artigo de maneira adequada. Iremos discutir ao respeito disso aqui. Para aprender um pouco mais sobre como fazer as páginas são classificadas pelos engines de pesquisa, vejam o artigo <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">Como escrever SEO para MDN</a>.</p> + +<div class="hidden"> +<pre class="notranslate">Daqui para baixo.</pre> +</div> + +<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Seções, parágrafos e novas linhas</h3> + +<p>Use os níveis de cabeçalho em ordem decrescente na hierarquia: {{HTMLElement("h2")}} depois {{HTMLElement("h3")}} depois {{HTMLElement("h4")}}, sem pular níveis. {{HTMLElement("h2")}} é o maior nível permitido, pois {{HTMLElement("h1")}} está reservado para o título da página. Se perceber que precisará de mais de 3 ou 4 níveis de cabeçalho, considere fragmentar seu artigo em artigos menores, ou colocando uma landing page, linkando estes com o {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, e {{TemplateLink("PreviousNext")}} macros.</p> + +<p>O Enter (ou Return) do seu teclado inicia um novo parágrafo. Para inserir uma nova linha sem espaço, faça Shift + Enter.</p> + +<h4 id="Algumas_regras">Algumas regras</h4> + +<ul> + <li>Não crie listas com apenas um item. Não divida um tópico em um. No mínimo dois, ou nenhum.</li> + <li>Não crie cabeçalhos em sequência. É visualmente feio, e é importante para os leitores apresentar algum texto antes de iniciar outras seções.</li> + <li>Evite usar macros de cabeçalhos, com exceção de algumas macros específicas para tal.</li> + <li>Não use estilos e classes nos cabeçalhos; especificamente falando do elemento <code>. Portanto, não faça um cabeçalho "Usando a interface <code>SuperAmazingThing</code>". Em vez disso, escreva "Usando a interface SuperAmazingThing".</li> +</ul> + +<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> + +<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> + +<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> + +<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> + +<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> + +<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> + +<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> + +<p>Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p> + +<pre class="brush: js notranslate">if (condition) { + /* handle the condition */ +} else { + /* handle the "else" case */ +} +</pre> + +<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> + +<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION + || class.YET_ANOTHER_CONDITION ) { + /* something */ +} + +var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] + .createInstance(Components.interfaces.nsIToolkitProfileService); +</pre> + +<h4 id="Inline_code_formatting">Inline code formatting</h4> + +<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p> + +<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> + +<h4 id="Syntax_highlighting">Syntax highlighting</h4> + +<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:</p> + +<div class="line number2 index1 alt1"> +<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> +</div> + +<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> + +<pre class="notranslate">x = 42;</pre> + +<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> + +<p>There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.</p> + +<dl> + <dt>Element names</dt> + <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> + <dt>Attribute names</dt> + <dd>Use <strong>bold face</strong>.</dd> + <dt>Attribute definitions</dt> + <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> + <dt>Attribute values</dt> + <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> + <dt>Labeling attributes</dt> + <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd> +</dl> + +<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> + +<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> + +<ul> + <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="In_running_text" name="In_running_text">In running text</h4> + +<ul> + <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Abbrev</th> + <th>Latin</th> + <th>English</th> + </tr> + <tr> + <td>cf.</td> + <td><em>confer</em></td> + <td>compare</td> + </tr> + <tr> + <td>e.g.</td> + <td><em>exempli gratia</em></td> + <td>for example</td> + </tr> + <tr> + <td>et al.</td> + <td><em>et alii</em></td> + <td>and others</td> + </tr> + <tr> + <td>etc.</td> + <td><em>et cetera</em></td> + <td>and so forth, and so on</td> + </tr> + <tr> + <td>i.e.</td> + <td><em>id est</em></td> + <td>that is, in other words</td> + </tr> + <tr> + <td>N.B.</td> + <td><em>nota bene</em></td> + <td>note well</td> + </tr> + <tr> + <td>P.S.</td> + <td><em>post scriptum</em></td> + <td>postscript</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> +</div> + +<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> + +<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> + +<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: XUL</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> +</ul> + +<h4 id="Expansion" name="Expansion">Expansion</h4> + +<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> +</ul> + +<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> + +<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> +</ul> + +<h3 id="Contractions" name="Contractions">Capitalization</h3> + +<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> + +<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p> + +<h3 id="Contractions" name="Contractions">Contractions</h3> + +<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> + +<h3 id="Pluralization" name="Pluralization">Pluralization</h3> + +<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> +</ul> + +<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> + +<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> + +<ul> + <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> + <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> +</ul> + +<h3 id="Gender-neutral_language">Gender-neutral language</h3> + +<p>It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.<br> + <br> + Let's take the following example:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p> +</blockquote> + +<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p> +</blockquote> + +<div class="note"> +<p><strong>Note:</strong> MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> +</div> + +<p>You can use both genders:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> +</blockquote> + +<p>making the users plural:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> +</blockquote> + +<p>The best solution, of course, is to rewrite and eliminate the pronouns completely:</p> + +<blockquote> +<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> +</blockquote> + +<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.</p> + +<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> + +<h4 id="Dates">Dates</h4> + +<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> +</ul> + +<p>Alternately, you can use the YYYY/MM/DD format.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> +</ul> + +<h4 id="Decades" name="Decades">Decades</h4> + +<p>For decades, use the format "1990s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> +</ul> + +<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> + +<p>For plurals of numerals add "s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 486s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> +</ul> + +<h4 id="Commas" name="Commas">Commas</h4> + +<p>In running text, use commas only in five-digit and larger numbers.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> +</ul> + +<h3 id="Punctuation" name="Punctuation">Punctuation</h3> + +<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> + +<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> +</div> + +<h3 id="Spelling" name="Spelling">Spelling</h3> + +<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> +</ul> + +<h3 id="Terminology">Terminology</h3> + +<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> + +<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> + +<dl> + <dt>Obsolete:</dt> + <dd>On MDN, the term <strong>obsolete</strong> marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.</dd> + <dt>Deprecated:</dt> + <dd>On MDN, the term <strong>deprecated</strong> marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become <em>obsolete</em> and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.</dd> +</dl> + +<h4 id="HTML_elements">HTML elements</h4> + +<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> +</ul> + +<h4 id="User_interface_actions">User interface actions</h4> + +<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> +</ul> + +<h3 id="Voice">Voice</h3> + +<p>While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> + +<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> + +<h3 id="External_links">External links</h3> + +<p>To automatically create a link to a Bugzilla bug, use this template:</p> + +<pre class="notranslate">\{{Bug(322603)}} +</pre> + +<p>This results in:</p> + +<p>{{Bug(322603)}}</p> + +<p>For WebKit bugs, you can use this template:</p> + +<pre class="notranslate">\{{Webkitbug("322603")}} +</pre> + +<p>This results in:</p> + +<p>{{Webkitbug("322603")}}</p> + +<h3 id="Page_tags">Page tags</h3> + +<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> + +<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> + +<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> + +<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> + +<p>To remove a tag, simply click the little "X" icon in the tag.</p> + +<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> + +<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> + +<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> + +<p>Use the following tags for pages that are not current:</p> + +<ul> + <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> + <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> + <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> +</ul> + +<h3 id="SEO_summary">SEO summary</h3> + +<p>The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p> + +<p>By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> + +<h3 id="Landing_pages">Landing pages</h3> + +<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> + +<ol> + <li>A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.</li> + <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> + <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> +</ol> + +<h4 id="Creating_a_page_link_list">Creating a page link list</h4> + +<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> + +<pre class="brush: html notranslate"><div class="row topicpage-table"> + <div class="section"> + ... left column contents ... + </div> + <div class="section"> + ... right column contents ... + </div> +</div></pre> + +<p>The left column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> + +<p>The right column should contain one or more of the following sections, in order:</p> + +<dl> + <dt>Getting help from the community</dt> + <dd>This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> + <dt>Tools</dt> + <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> + <dt>Related topics</dt> + <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> +</dl> + +<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> + +<h2 id="Using_inserting_images">Using, inserting images</h2> + +<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> + +<ol> + <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> + <li>Create an image in the WYSIWYG editor</li> + <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> + <li>Press OK.</li> +</ol> + +<h2 id="Other_References">Other References</h2> + +<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> + +<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> + +<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> + +<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> + +<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> + +<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> + +<ul> + <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> + <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> +</ul> + +<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> + +<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> + +<ul> + <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> + <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> + <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> + <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> + <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> + <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> + <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> +</ul> diff --git a/files/pt-br/mdn/index.html b/files/pt-br/mdn/index.html new file mode 100644 index 0000000000..fc0aa088b0 --- /dev/null +++ b/files/pt-br/mdn/index.html @@ -0,0 +1,28 @@ +--- +title: O projeto MDN +slug: MDN +tags: + - MDN Meta + - Página de destino +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p>O <strong>MDN Web Docs</strong> é uma wiki onde nós documentamos a Web aberta, as tecnologias Mozilla e outros tópicos de desenvolvedores. Qualquer pessoa é bem-vinda para adicionar e editar conteúdo. Você não precisa ser um programador ou saber muito sobre tecnologia; há muitas tarefas diferentes que precisam ser executadas, desde os simples (corrigir erros de leitura e erros de correção) até as mais complexas (escrever a documentação da API).</p> + +<p>A missão do MDN Web Docs é fornecer aos desenvolvedores as informações necessárias para criar facilmente na plataforma web. Nós convidamos você a ajudar!</p> + +<p>Nós precisamos da sua ajuda! É fácil. Não se preocupe em pedir permissão ou em cometer erros. Por outro lado, por favor, conheça a <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Comunidade">comunidade MDN</a>; estamos aqui para ajudá-lo! A documentação abaixo, pode te ajudar a começar.</p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/pt-BR/docs/MDN/Primeiros_Passos">Início rápido para iniciantes</a></span> + + <p>Você é novo no MDN e quer aprender como ajudar a torná-lo melhor? Comece aqui!</p> + </li> + <li><span><a href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute">Eu sou um usuário avançado</a></span> + <p>Acesse nosso guia completo e aprofundado para os colaboradores do MDN para aprender mais quando você se sentir confortável.</p> + </li> + <li><span><a href="https://developer.mozilla.org/pt-BR/docs/MDN/Promote">Compartilhe</a></span> + <p>Se você ama o MDN, compartilhe a nossa a rede! Encontre o material necessário, como arte, ferramentas e guias para promover o MDN.</p> + </li> +</ul> diff --git a/files/pt-br/mdn/kuma/index.html b/files/pt-br/mdn/kuma/index.html new file mode 100644 index 0000000000..6fd43defb2 --- /dev/null +++ b/files/pt-br/mdn/kuma/index.html @@ -0,0 +1,61 @@ +--- +title: 'Kuma: MDN''s wiki platform' +slug: MDN/Kuma +tags: + - projeto kuma +translation_of: MDN/Kuma +--- +<div>{{MDNSidebar}}</div> + +<p>Kuma é a plataforma wiki que auxilia o Mozilla Developer Network. É uma plataforma open source escrita em <a href="http://www.python.org/" title="http://www.python.org/">Python</a> utilizando o framework <a href="https://www.djangoproject.com/" title="https://www.djangoproject.com/">Django</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentação do Kuma</h2> + +<dl> + <dt><a href="/en-US/docs/Project:MDN/Kuma/API" title="/en-US/docs/Project:About">A API Kuma</a></dt> + <dd>Kuma provê de uma simples API que lhe permite acessar informações através das páginas, e até enviar novas páginas de conteúdo.</dd> + <dt><a href="/en-US/docs/Project:Introduction_to_KumaScript" title="/en-US/docs/Project:Introduction_to_KumaScript">Introdução ao KumaScript</a>:</dt> + <dd>...o modelo de linguagem Kuma.</dd> + <dt><a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">Usando KumaScript e modelos</a></dt> + <dd>Um guia de como usar modelos KumaScript em um artigo de conteúdo.</dd> + <dt><a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">Referência do KumaScript</a></dt> + <dd>Uma referência para o KumaScript.</dd> + <dt><a href="/en-US/docs/MDN/Kuma/PUT_API">O Kuma PUT API</a></dt> + <dd>O PUT API <strong>experimental</strong> torna possível a criação e atualização de artigos no MDN remotamente. Também é possível, por instância, escrever scripts que automaticamente geram e enviam artigos baseados na IDL ou nos conteúdos dos arquivos de cabeçalho.</dd> + <dt><a href="/en-US/docs/Project:MDN/Kuma/Contributing" title="/en-US/docs/Project:MDN/Kuma/Contributing">Contribuindo para o Kuma</a></dt> + <dd>Um guia de como fazer um fork do Kuma e contribuir para o projeto.</dd> +</dl> + +<p>Classificação de arquivos mais antigos:</p> + +<ul> + <li><a href="/en-US/docs/Project:Getting_started_with_Kuma" title="/en-US/docs/Project:Getting_started_with_Kuma">Começando com o Kuma</a>: informação sobre a plataforma; diferenças entre a plataforma Kuma e a Mindtouch Deki platform</li> + <li><a href="/en-US/docs/Project:MDC_editor_guide" title="/en-US/docs/Project:MDC_editor_guide">A interface de edição MDN</a>: atalhos do teclado; descrição dos componentes de interface e funções</li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Kuma" title="MDN project pages">Ver tudo...</a></span></p> +</div> + +<div class="section"> +<h2 id="Ferramentas_e_tarefas">Ferramentas e tarefas</h2> + +<dl> + <dt><a href="/en-US/docs/MDN/Kuma/Server_charts">Gráficos do Servidor</a></dt> + <dd>Alguns dos nossos gráficos New Relic</dd> + <dt><a href="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936" title="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936">Bugs</a></dt> + <dd>Uma lista dos bugs do Kuma. Sinta-se livre para olha-los e encontrar algo que você gostaria de corrigir. <em>Esse link requer que você logue no Bugzilla.</em></dd> + <dt><a href="/en-US/docs/MDN/Kuma/Tools">Ferrmentas e Links</a></dt> + <dd>Esta página tem uma lista detalhada de várias ferramentas utéis e páginas de documentção. Encontre páginas que nossos desenvolvedores usam todos os dias!</dd> + <dt><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">Informar um bug</a></dt> + <dd>Se você teve algum problema com o Kuma, ou possui uma ideia para o torna-lo melhor, você pode arquivar um bug!</dd> + <dt><a href="/en-US/docs/Project:MDN/Kuma/Changelog" title="/en-US/docs/Project:MDN/Kuma/Changelog">Log de mudanças</a></dt> + <dd>Uma lista das últimas mundaças enviadas; um ótimo lugar para visualizar o que aconteceu recentemente.</dd> + <dt><a href="http://mzl.la/deployed-mdn">O que é implantado?</a></dt> + <dd>Um quadro de status que mostra o que foi implantado ao server de produção.</dd> + <dt><a href="https://trello.com/b/SyPJAeST/engineering-roadmap" title="https://mdn.kanbanery.com/projects/32137/board/?key=0383ba5f05e165e0eb19d8476654fe9775ce2ca7">Roteiro de Engenhria</a></dt> + <dd>Quadro do Trello usado para gerenciamento do trabalho regular no projeto do Kuma.</dd> +</dl> +</div> +</div> diff --git a/files/pt-br/mdn/paineis/index.html b/files/pt-br/mdn/paineis/index.html new file mode 100644 index 0000000000..0aab5076a9 --- /dev/null +++ b/files/pt-br/mdn/paineis/index.html @@ -0,0 +1,17 @@ +--- +title: Painéis +slug: MDN/Paineis +tags: + - MDN Meta + - Rascunho + - Visão Geral + - painéis +translation_of: MDN/Dashboards +--- +<div>{{MDNSidebar}}{{Draft}}</div> + +<p class="summary">Aqui estão alguns painéis que exibem algumas métricas.</p> + +<p><a href="/en-US/docs/MDN/Dashboards/Editors">Saiba mais sobre nossos Editores</a></p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/pt-br/mdn/structures/compatibility_tables/index.html b/files/pt-br/mdn/structures/compatibility_tables/index.html new file mode 100644 index 0000000000..6f4742ea1b --- /dev/null +++ b/files/pt-br/mdn/structures/compatibility_tables/index.html @@ -0,0 +1,475 @@ +--- +title: Tabelas de compatibilidade +slug: MDN/Structures/Compatibility_tables +translation_of: MDN/Structures/Compatibility_tables +--- +<div>{{MDNSidebar}}</div> + +<p>A MDN possui um formato padrão para tabelas de compatibilidade para nossa documentação da Web aberta; isto é, documentação de tecnologias como DOM, HTML, CSS, JavaScript, SVG etc., compartilhadas em todos os navegadores. Este artigo é um guia de "introdução" sobre como adicionar, manter o banco de dados a partir do qual as tabelas de compatibilidade são geradas e como integrar as tabelas em artigos.</p> + +<p>Para obter uma documentação mais avançada, bem como as alterações mais recentes nos processos e esquemas JSON usados para representar os dados, consulte o <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/contributing.md">guia do colaborador</a> do repositório de dados e o <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/data-guidelines.md">guia de diretrizes de dados</a>.</p> + +<p>Se você tiver dúvidas ou descobrir problemas, compartilhe conosco no <a href="https://discourse.mozilla-community.org/c/mdn">fórum de discussão da MDN</a>.</p> + +<h2 id="Como_acessar_o_repositório_de_dados">Como acessar o repositório de dados</h2> + +<p>Os dados são armazenados em um repositório do GitHub — consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Para acessá-lo, você precisa obter uma conta do GitHub, bifurcar (fork) o repositório de dados compatível com o navegador em sua própria conta e, em seguida, clonar seu fork na sua máquina local.</p> + +<h2 id="Preparando_para_adicionar_os_dados">Preparando para adicionar os dados</h2> + +<p>Antes de adicionar dados novos, verifique que o <em>fork </em>criado tenha o mesmo conteúdo que o repositório principal. Após isso, crie uma nova <em>branch, </em>dentro do<em> fork </em>criado, para conter as mudanças e adições a serem realizadas, em seguida, faça um <em>pull</em> dessa branch no clone local, para então começar a contribuir com o projeto.</p> + +<p>Uma forma simples para ter certeza que o seu <em>fork </em>tem o mesmo conteúdo, e está tão atualizado quanto o repositório principal, é descrita abaixo:</p> + +<h3 id="Adicionando_o_repositório_principal_browser-compat-data_como_um_controle_remoto">Adicionando o repositório principal browser-compat-data como um controle remoto</h3> + +<p>Vá para o clone local do seu fork no seu terminal/linha de comando e adicione um controle remoto apontando para o repositório principal (upstream) assim (você só precisa fazer isso uma vez):</p> + +<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre> + +<p>Se não tiver certeza se fez isso, verifique os controles remotos que seu repositório está usando</p> + +<pre class="brush: bash notranslate">git remote -v</pre> + +<h3 id="Atualizando_seu_fork_com_o_conteúdo_do_controle_remoto">Atualizando seu fork com o conteúdo do controle remoto</h3> + +<p>Agora, sempre que você quiser atualizar seu fork, você pode fazer isso:</p> + +<ol> + <li> + <p>Certificando-se de que você está no branch master:</p> + + <pre class="brush: bash notranslate">git checkout master</pre> + </li> + <li> + <p>buscando o conteúdo atualizado do repositório usando:</p> + + <pre class="brush: bash notranslate">git fetch upstream</pre> + </li> + <li> + <p>faça o rebase do seu conteúdo master com o conteúdo do repositório principal:</p> + + <pre class="brush: bash notranslate">git rebase upstream/master</pre> + </li> + <li> + <p>faça o push dessas atualizações de volta ao seu fork remoto usando:</p> + + <pre class="brush: bash notranslate">git push -f</pre> + </li> +</ol> + +<h3 id="Criando_um_novo_branch_ramo_para_fazer_o_seu_trabalho">Criando um novo branch (ramo) para fazer o seu trabalho</h3> + +<p>Em seguida, vá à sua bifurcação remota (será em <code>https://github.com/<em>seu-nome-de-usuario</em>/browser-compat-data</code>) e crie um novo ramo para guardar suas mudanças de adição de conteúdo. Isso pode ser feito em:</p> + +<ol> + <li>Clicando no botão "Branch: Master".</li> + <li>Colocando um novo nome de ramo dentro do campo de texto de "Encontre ou crie seu ramo...".</li> + <li>Clicando no botão "Criar ramo <em>nome-do-ramo</em> a partir de Master".</li> +</ol> + +<p>Por exemplo, se você quisesse adicionar informações sobre WebVR API, você criaria um ramno chamado algo como "webvr".</p> + +<h3 id="Mudando_para_o_novo_branch_ramo">Mudando para o novo branch (ramo)</h3> + +<p>Agora,volte para o seu terminal/linha de comando, e atualize seu clone local da sua bifurcação para incluir o seu novo ramo usando o seguinte comando:</p> + +<pre class="brush: bash notranslate">git pull</pre> + +<p>Agora troque para o seu ramo usando:</p> + +<pre class="brush: bash notranslate">git checkout<em> name-of-branch</em></pre> + +<p>Agora você deveria estar pronto para adicionar seu conteúdo!</p> + +<h2 id="Adicionando_os_dados">Adicionando os dados</h2> + +<p>To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:</p> + +<ul> + <li>HTML: One file per HTML element, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. The file should be called the name of the element, all in lower case, e.g. <code>div.json</code>.</li> + <li>CSS: One file per CSS property or selector, contained in the appropriate directory (see <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). The file should be called the name of the feature, all in lower case, e.g. <code>background-color.json</code>, or <code>hover.json</code>.</li> + <li>JS: One file per JS object, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. The file should be called the exact name of the object, with the casing preserved, e.g. <code>Date.json</code> or <code>InternalError.json</code>.</li> + <li>APIs: One file per interface contained in the API, put in <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Each file should be called the exact name of the interface, with the casing preserved, e.g. The WebVR API has <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You'll notice that the repo also contains data for <a href="/en-US/Add-ons/WebExtensions">Browser Extensions</a> and <a href="/en-US/docs/Web/HTTP">HTTP</a>. These data sets are basically finished as they stand, but more features may need to be added in the future.</p> +</div> + +<p>Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">detailed schema description here</a>.</p> + +<h3 id="Estrutura_de_dados_de_compatibilidade_básica">Estrutura de dados de compatibilidade básica</h3> + +<p>Let's look at an example. CSS property JSON files for example need the following basic structure:</p> + +<pre class="brush: json notranslate">{ + "css": { + "properties": { + "border-width": { + "__compat": { + ... + } + } + } + } +}</pre> + +<p>You have the <code>css</code> object, inside of which is a <code>properties</code> object. Inside the <code>properties</code> object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a <code>__compat</code> member, inside of which the actual data goes.</p> + +<p>The above data is found in the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> file — compare this to the <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">rendered border-width support table on MDN</a>.</p> + +<p>Other types of features work in the same way, but with different object names:</p> + +<ul> + <li>CSS selectors work in basically the same way as CSS properties, except that the top-level object structure is <code>css.selectors</code> instead of <code>css.properties</code>. See <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> for an example.</li> + <li>HTML data works in basically the same way, except that the top-level object structure is <code>html.elements</code>. See <code>article.json</code> for an example.</li> + <li>The top level object structure for JS built-in objects is <code>javascript.builtins</code>; see <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> for an example.</li> +</ul> + +<div> +<p>In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).</p> + +<h3 id="Estrutura_básica_dentro_de_um_recurso">Estrutura básica dentro de um recurso</h3> + +<p>Inside a feature <code>__compat</code> member, you need to include the following members:</p> + +<ul> + <li><code>mdn_url</code>: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. <code>/docs/...</code> not <code>/docs/en-US/...</code> (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.</li> + <li><code>support</code>: Contains members representing the browser support information for this feature in all the different browsers we want to report.</li> + <li><code>status</code>: Contains members reporting the standards track status of this feature.</li> +</ul> + +<p>The names of the browser members are defined in the schema (see <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.</p> + +<p>In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:</p> + +<ul> + <li>A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".</li> + <li><code>true</code>: If a browser supports a feature but you don't know the exact version number, use the value <code>true</code>. This equivalent to the <code>\{{CompatVersionUnknown}}</code> macro call in the old manual tables.</li> + <li><code>false</code>: If a browser does not support a feature, use the value <code>false</code>. This is equivalent to the the <code>\{{CompatNo}}</code> macro call in the old manual tables.</li> + <li><code>null</code>: If you don't know whether a browser supports a feature or not, use the value <code>null</code>. This is equivalent to the <code>\{{CompatUnknown}}</code> macro call in the old manual tables.</li> +</ul> + +<p>Inside the <code>status</code> member, you'll include three submembers:</p> + +<ul> + <li> "experimental": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a>, or <code>false</code> otherwise.</li> + <li>"standard_track": This should be set to <code>true</code> if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or <code>false</code> otherwise.</li> + <li>"deprecated": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">deprecated</a>, or <code>false</code> otherwise.</li> +</ul> + +<p>The feature data for <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">border-width</a> (also see <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) is shown below as an example:</p> + +<pre class="brush: json notranslate">"__compat": { + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width", + "support": { + "chrome": { + "version_added": "1" + }, + "webview_android": { + "version_added": "2" + }, + "edge": { + "version_added": true + }, + "edge_mobile": { + "version_added": true + }, + "firefox": { + "version_added": "1" + }, + "firefox_android": { + "version_added": "1" + }, + "ie": { + "version_added": "4" + }, + "ie_mobile": { + "version_added": "6" + }, + "opera": { + "version_added": "3.5" + }, + "opera_android": { + "version_added": "11" + }, + "safari": { + "version_added": "1" + }, + "safari_ios": { + "version_added": "3" + } + }, + "status": { + "experimental": false, + "standard_track": true, + "deprecated": false + } +}</pre> + +<h4 id="Adicionando_uma_descrição">Adicionando uma descrição</h4> + +<p>There is a fourth, optional, member that can go inside the __compat member — <code>description</code>. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:</p> + +<pre class="brush: json notranslate">{ + "api": { + "AbortController": { + "__compat": { + ... + }, + "AbortController": { + "__compat": { + "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController", + "description": "<code>AbortController()</code> constructor", + "support": { + ... + } + } + } + + ... etc. + } + } +}</pre> + +<h3 id="Sub-recursos">Sub-recursos</h3> + +<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p> + +<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p> + +<pre class="brush: json notranslate">{ + "css": { + "properties": { + "background-color": { + "__compat": { + ... + }, + "alpha_ch_for_hex": { + "__compat": { + ... + }, + } + } + } + } +}</pre> + +<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p> + +<pre class="brush: json notranslate">{ + "api": { + "VRDisplay": { + "__compat": { + ... + }, + "cancelAnimationFrame": { + "__compat": { + ... + } + }, + "capabilities": { + "__compat": { + ... + } + }, + + ... etc. + + } + } +}</pre> + +<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p> +</div> + +<h2 id="Adicionando_dados_Casos_avançados">Adicionando dados: Casos avançados</h2> + +<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p> + +<h3 id="Incluindo_uma_nota_de_rodapé">Incluindo uma nota de rodapé</h3> + +<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>) (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p> + +<pre class="brush: json notranslate">"chrome_android": { + "version_added": true, + "notes": "Currently supported only by Google Daydream." +}</pre> + +<h3 id="Incluindo_um_prefixo_de_fornecedor">Incluindo um prefixo de fornecedor</h3> + +<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p> + +<pre class="brush: json notranslate">"firefox": { + "version_added": true, + "prefix": "-moz-" +}</pre> + +<h3 id="Incluindo_preferências_ou_sinalizadores_do_navegador">Incluindo preferências ou sinalizadores do navegador</h3> + +<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p> + +<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p> + +<ul> + <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li> + <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li> + <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li> +</ul> + +<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p> + +<pre class="brush: json notranslate">"chrome": { + "version_added": "50", + "flags": [ + { + "type": "preference", + "name": "Enable Experimental Web Platform Features", + "value_to_set": "true" + } + ] +},</pre> + +<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p> + +<pre class="brush: json notranslate">"firefox": { + "version_added": "57", + "flags": [ + { + "type": "preference", + "name": "dom.streams.enabled", + "value_to_set": "true" + }, + { + "type": "preference", + "name": "javascript.options.streams", + "value_to_set": "true" + } + ] +},</pre> + +<h3 id="Incluindo_uma_versão_em_que_o_suporte_foi_removido">Incluindo uma versão em que o suporte foi removido</h3> + +<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p> + +<pre class="brush: json notranslate">"firefox": { + "version_added": "35", + "version_removed": "47", +},</pre> + +<h3 id="Incluindo_vários_pontos_de_suporte_para_a_mesma_entrada_do_navegador">Incluindo vários pontos de suporte para a mesma entrada do navegador</h3> + +<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p> + +<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p> + +<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p> + +<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p> + +<pre class="brush: json notranslate">"chrome": [ + { + "version_added": "47" + }, + { + "version_added": "35", + "version_removed": "47", + "flags": [ + { + "type": "preference", + "name": "Enable Experimental Web Platform Features", + "value_to_set": "true" + } + ] + } +],</pre> + +<div class="note"> +<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p> +</div> + +<h3 id="Incluindo_um_nome_alternativo">Incluindo um nome alternativo</h3> + +<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p> + +<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p> + +<div class="note"> +<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p> +</div> + +<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p> + +<ul> + <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li> + <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li> + <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li> +</ul> + +<p>To represent this in the data, we used the following JSON:</p> + +<pre class="brush: json notranslate">"firefox": [ + { + "version_added": "4", + "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0." + }, + { + "prefix": "-webkit-", + "version_added": "49", + "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>." + }, + { + "alternative_name": "-moz-border-radius-topright", + "version_added": "1", + "version_removed": "12" + } +],</pre> + +<h2 id="Empurrando_uma_mudança_de_volta_para_o_repositório_principal">Empurrando uma mudança de volta para o repositório principal</h2> + +<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p> + +<ul> + <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li> + <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li> + <li><code>npm run render dotted.path.to.feature</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render css.properties.background</code> shows the table markup for the {{cssxref("background")}} property.</li> +</ul> + +<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p> + +<pre class="brush: bash notranslate">git add . +git commit -m 'adding compat data for name-of-feature' +git push</pre> + +<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.</p> + +<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p> + +<h2 id="Inserindo_os_dados_em_páginas_MDN">Inserindo os dados em páginas MDN</h2> + +<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p> + +<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p> + +<pre class="brush: html notranslate"><div class="hidden"> +<p>The compatibility table on this page is generated from structured data. +If you'd like to contribute to the data, please check out +<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> +and send us a pull request.</p> +</div></pre> + +<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p> + +<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p> + +<hr> +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.VRDisplay.capabilities")}}</p> + +<div class="note"> +<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p> +</div> diff --git a/files/pt-br/mdn/structures/index.html b/files/pt-br/mdn/structures/index.html new file mode 100644 index 0000000000..954df06bcc --- /dev/null +++ b/files/pt-br/mdn/structures/index.html @@ -0,0 +1,10 @@ +--- +title: Estruturas dos documentos +slug: MDN/Structures +translation_of: MDN/Structures +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Em todo MDN, há várias estruturas de documentos que são usadas repetidamente, providenciando uma consistência na apresentação das informações dos artigos do MDN. Aqui estão artigos descrevendo estas estruturas, de modo, como um autor do MDN, você pode reconhecer, aplicar, e modificar eles como apropriado para documentos você escreve, edita, ou traduz.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/pt-br/mdn/structures/macros/index.html b/files/pt-br/mdn/structures/macros/index.html new file mode 100644 index 0000000000..703f7554cb --- /dev/null +++ b/files/pt-br/mdn/structures/macros/index.html @@ -0,0 +1,42 @@ +--- +title: Macros +slug: MDN/Structures/Macros +translation_of: MDN/Structures/Macros +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">The <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> platform on which MDN runs provides a powerful macro system, <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.</span></p> + +<p>The <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a> provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview.</p> + +<h2 id="Como_as_macros_são_implementadas">Como as macros são implementadas</h2> + +<p>Macros on MDN are implemented using server-executed <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> code, interpreted using <a href="https://nodejs.org/en/" title="https://nodejs.org/en/">Node.js</a>. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a>.</p> + +<h2 id="Using_a_macro_in_content">Using a macro in content</h2> + +<p>To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:</p> + +<pre class="notranslate">\{{macroname(parameter-list)}}</pre> + +<p>A few notes about macro calls:</p> + +<ul> + <li>Macro names are case-sensitive, but some attempt is made to correct for common capitalization errors; you may use all lowercase even if the macro name uses caps within it, and you may capitalize a macro whose name normally starts with a lower-case letter.</li> + <li>Parameters are separated by commas.</li> + <li>If there are no parameters, you may leave out the parentheses entirely; <code>\{{macroname()}}</code> and <code>\{{macroname}}</code> are identical.</li> + <li>Numeric parameters can be in quotes, or not. It's up to you (however, if you have a version number with multiple decimals in it, it needs to be in quotes).</li> + <li>If you get errors, review your code carefully. If you still can't figure out what's going on, see <a href="/en-US/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Troubleshooting KumaScript errors</a> for help.</li> +</ul> + +<p>Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.</p> + +<div class="note"> +<p><strong>Note:</strong> You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).</p> +</div> + +<p>Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.</p> + +<p>You can read up on our most commonly-used macros on the <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Commonly-used macros</a> page; also, there's a <a href="https://developer.mozilla.org/en-US/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete list of all macros</a> here. Most macros have documentation built into them, as comments at the top.</p> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/pt-br/mdn/tools/index.html b/files/pt-br/mdn/tools/index.html new file mode 100644 index 0000000000..a8482f8751 --- /dev/null +++ b/files/pt-br/mdn/tools/index.html @@ -0,0 +1,15 @@ +--- +title: Ferramentas do MDN +slug: MDN/Tools +tags: + - Landing + - MDN Meta +translation_of: MDN/Tools +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/pt-BR/docs/MDN")}}</div> + +<p>MDN oferece ferramentas tornando fácil o acompanhamento do progresso, gerenciamento de conteúdo e manter o site com as últimas atualizações.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/pt-br/mdn/tools/kumascript/index.html b/files/pt-br/mdn/tools/kumascript/index.html new file mode 100644 index 0000000000..9c89712e59 --- /dev/null +++ b/files/pt-br/mdn/tools/kumascript/index.html @@ -0,0 +1,500 @@ +--- +title: KumaScript +slug: MDN/Tools/KumaScript +tags: + - Guide + - Kuma + - KumaScript + - MDN Meta + - NeedsContent + - NeedsTranslation + - Site-wide + - Tools + - TopicStub +translation_of: MDN/Tools/KumaScript +--- +<div>{{MDNSidebar}}</div><h2 id="Overview">Overview</h2> + +<p><span class="seoSummary">On the <a href="/en-US/docs/MDN/Kuma">Kuma</a> platform that powers MDN, the template system for automating aspects of content on the wiki is called <a class="link-https" href="https://github.com/mdn/kumascript" title="https://github.com/mdn/kumascript">KumaScript</a>. KumaScript is powered by server-side JavaScript, implemented using <a class="external" href="https://nodejs.org/en/" title="https://nodejs.org/en/">Node.js</a>.</span> This article provides basic information on how to use KumaScript.</p> + +<p>For a detailed overview and Q&A of KumaScript, watch the MDN dev team's <a href="https://vreplay.mozilla.com/replay/showRecordDetails.html?sortBy=date&viewCount=1&currentPage=1&groupBy=combo&roomFilter=&usernameFilter=&searchFilter=&usernameFullFilter=&myManager=-1&adminManager=0&webCast=0&command=&recId=1082&auxMessage=&auxMessage1=&lang=en&langChanged=&tenantFilter=&securityTab=">KumaScript Fireside Chat</a> (the meeting starts at 10 minutes into the video). KumaScript replaced DekiScript, which was the template language for MindTouch, the previous platform used by MDN.</p> + +<h3 id="What_is_KumaScript">What is KumaScript?</h3> + +<ul> + <li>A way to reuse and localize content that appears repeatedly between documents (e.g., compatibility labels, section navigation, warning banners).</li> + <li>A way to build documents out of content pulled from other documents.</li> + <li>A way to fetch and include content from other web sites and services (e.g., Bugzilla).</li> +</ul> + +<h3 id="What_KumaScript_is_not">What KumaScript is not</h3> + +<ul> + <li>KumaScript does not support interactive scripting of the kind that can accept form submissions.</li> + <li>KumaScript does not have access to a database, files, or any other way to store information persistently.</li> + <li>KumaScript does not support site personalization based on the user currently logged in.</li> + <li>KumaScript does not have access to user information, only to the content and metadata of a wiki page being viewed.</li> +</ul> + +<h2 id="Basics">Basics</h2> + +<p>KumaScript is used on MDN in <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">embedded JavaScript templates</a>. These templates can be invoked in document content by any MDN author, through the use of macros.</p> + +<p>A script in KumaScript is a <em>template</em>, and each template is a file in <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of the KumaScript repository</a> on Github. A <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/hello.ejs" title="hello.ejs">template</a> looks like this:</p> + +<pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> +Hello #<%= i %> +<% } %></pre> + +<p>Invoking a template is done with a <em>macro</em>, which can be used anywhere in any wiki content. A macro looks like this:</p> + +<pre class="notranslate">\{{ hello("3") }}</pre> + +<p>The output of the macro looks like this:</p> + +<pre class="notranslate">Hello #0 +Hello #1 +Hello #2</pre> + +<h3 id="Macro_syntax">Macro syntax</h3> + +<p>KumaScript templates are invoked in document content with macros, like this:</p> + +<pre class="notranslate">\{{ templateName("arg0", "arg1", ..., "argN") }} +</pre> + +<p>Macro syntax consists of these rules:</p> + +<ul> + <li>Macros start and end with <code>\{{</code> and <code>\}}</code> characters.</li> + <li>The first part of the macro is the name of a template. The lowercase value of this name should match the lowercase value of one of the filenames under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>.</li> + <li>A template can accept parameters, and this parameter list starts and ends with parentheses.</li> + <li>All non-numeric parameters must be in quotes. Numbers can be left unquoted.</li> +</ul> + +<h4 id="Using_JSON_as_a_macro_parameter">Using JSON as a macro parameter</h4> + +<p>As a semi-experimental feature (not guaranteed to work), you can supply a JSON object for the first and only parameter, like so:</p> + +<pre class="notranslate">\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }} +</pre> + +<p>The data from this macro is available in template code as an object in the <code>$0</code> argument (e.g., <code>$0.Alpha</code>, <code>$0.Beta</code>, <code>$0.Foo</code>). This also allows you to express complex data structures in macro parameters that are hard or impossible to do with a simple list of parameters.</p> + +<p>Note that this parameter style is very picky — it must adhere to <a href="http://json.org/" title="http://json.org/">JSON syntax</a> exactly, which has some requirements about escaping characters that are easy to miss (e.g., all forward slashes are escaped). When in doubt, <a href="http://jsonlint.com/" title="http://jsonlint.com/">try running your JSON through a validator</a>.</p> + +<h4 id="How_to_write_in_text">How to write "\{{" in text</h4> + +<p>Since the character sequence "<code>\{{</code>" is used to indicate the start of a macro, this can be troublesome if you actually just want to use "<code>\{{</code>" and "<code>}}</code>" in a page. It will probably produce <code>DocumentParsingError</code> messages.</p> + +<p>In this case, you can escape the first brace with a backslash, like so: <code>\\{</code></p> + +<h3 id="Template_syntax">Template syntax</h3> + +<p>Each KumaScript template is a file under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>. You create and edit these files as you would the files of any open-source project on GitHub (see <a href="https://github.com/mdn/kumascript">the KumaScript README</a> for more information).</p> + +<p>KumaScript templates are processed by an <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">embedded JavaScript template engine</a> with a few simple rules:</p> + +<ul> + <li>Within a template, the parameters passed in from the macro are available as the variables <code>$0</code>, <code>$1</code>, <code>$2</code>, and so on. The entire list of parameters is also available in a template as the variable <code>arguments</code>.</li> + <li>Most text is treated as output and included in the output stream.</li> + <li>JavaScript variables and expressions can be inserted into the output stream with these blocks: + <ul> + <li><code><%= expr %></code> — the value of a JavaScript expression is escaped for HTML before being included in output (e.g., characters like <code><</code> and <code>></code> are turned into <code>&lt;</code> and <code>&gt;</code>).</li> + <li><code><%- expr %></code> — the value of a JavaScript expression is included in output without any escaping. (Use this if you want to dynamically build markup or use the results of another template that may include markup.)</li> + <li>It is an error to include semicolons inside these blocks.</li> + </ul> + </li> + <li>Anything inside a <code><% %></code> block is interpreted as JavaScript. This can include loops, conditionals, etc.</li> + <li>Nothing inside a <code><% %></code> block can ever contribute to the output stream. But, you can transition from JS mode to output mode using <code><% %></code>—for example: + <pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> +Hello #<%= i %> +<% } %> +</pre> + + <p>Note how the JavaScript code is contained in <code><% ... %></code>, and output happens in the space between <code>%> ... <%</code>. The <code>for</code> loop in JS can begin with one <code><% %></code> block, transition to output mode, and finish up in a second <code><% %></code> JS block.</p> + </li> + <li>For more details on EJS syntax, <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">check out the upstream module documentation</a>.</li> +</ul> + +<h3 id="Tips">Tips</h3> + +<p>You can see a list of macros and how they are used on MDN on the <a href="/en-US/dashboards/macros">macros dashboard</a>.</p> + +<h2 id="Advanced_Features">Advanced Features</h2> + +<p>Beyond the basics, the KumaScript system offers some advanced features.</p> + +<h3 id="Environment_variables">Environment variables</h3> + +<p>When the wiki makes a call to the KumaScript service, it passes along some context on the current document that KumaScript makes available to templates as variables:</p> + +<dl> + <dt><code>env.path</code></dt> + <dd>The path to the current wiki document</dd> + <dt><code>env.url</code></dt> + <dd>The full URL to the current wiki document</dd> + <dt><code>env.id</code></dt> + <dd>A short, unique ID for the current wiki document</dd> + <dt><code>env.files</code></dt> + <dd>An array of the files attached to the current wiki document; each object in the array is as described under {{ anch("File objects") }} below</dd> + <dt><code>env.review_tags</code></dt> + <dd>An array of the review tags on the article ("technical", "editorial", etc.)</dd> + <dt><code>env.locale</code></dt> + <dd>The locale of the current wiki document</dd> + <dt><code>env.title</code></dt> + <dd>The title of the current wiki document</dd> + <dt><code>env.slug</code></dt> + <dd>The URL slug of the current wiki document</dd> + <dt><code>env.tags</code></dt> + <dd>An array list of tag names for the current wiki document</dd> + <dt><code>env.modified</code></dt> + <dd>Last modified timestamp for the current wiki document</dd> + <dt><code>env.cache_control</code></dt> + <dd><code>Cache-Control</code> header sent in the request for the current wiki document, useful in deciding whether to invalidate caches</dd> +</dl> + +<h4 id="File_objects">File objects</h4> + +<p>Each file object has the following fields:</p> + +<dl> + <dt><code>title</code></dt> + <dd>The attachment's title</dd> + <dt><code>description</code></dt> + <dd>A textual description of the current revision of the file</dd> + <dt><code>filename</code></dt> + <dd>The file's name</dd> + <dt><code>size</code></dt> + <dd>The size of the file in bytes</dd> + <dt><code>author</code></dt> + <dd>The username of the person who uploaded the file</dd> + <dt><code>mime</code></dt> + <dd>The MIME type of the file</dd> + <dt><code>url</code></dt> + <dd>The URL at which the file can be found</dd> +</dl> + +<h4 id="Working_with_tag_lists">Working with tag lists</h4> + +<p>The <code>env.tags</code> and <code>env.review_tags</code> variables return arrays of tags. You can work with these in many ways, of course, but here are a couple of suggestions.</p> + +<h5 id="Looking_to_see_if_a_specific_tag_is_set">Looking to see if a specific tag is set</h5> + +<p>You can look to see if a specific tag exists on a page like this:</p> + +<pre class="brush: js notranslate">if (env.tags.indexOf("tag") != −1) { + // The page has the tag "tag" +} +</pre> + +<h5 id="Iterating_over_all_the_tags_on_a_page">Iterating over all the tags on a page</h5> + +<p>You can also iterate over all the tags on a page, like this:</p> + +<pre class="brush: js notranslate">env.tag.forEach(function(tag) { + // do whatever you need to do, such as: + if (tag.indexOf("a") == 0) { + // this tag starts with "a" - woohoo! + } +});</pre> + +<h3 id="APIs_and_Modules">APIs and Modules</h3> + +<p>KumaScript offers some built-in methods and APIs for KumaScript macros. Macros can also use <code>module.exports</code> to export new API methods.</p> + +<p>API changes require updating the KumaScript engine or macros via a pull request to the <a href="https://github.com/mdn/kumascript">KumaScript repository</a>.</p> + +<h4 id="Built-in_methods">Built-in methods</h4> + +<p>This manually-maintained documentation is likely to fall out of date with the code. With that in mind, <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L175" title="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L208">you can always check out the latest state of built-in APIs in the KumaScript source</a>. But here is a selection of useful methods exposed to templates:</p> + +<dl> + <dt><code>md5(string)</code></dt> + <dd>Returns an MD5 hex digest of the given string.</dd> + <dt><code>template("name", ["arg0", "arg1", ..., "argN"])</code></dt> + <dd>Executes and returns the result of the named template with the given list of parameters.</dd> + <dd>Example: <code><%- template("warning", ["foo", "bar", "baz"]) %></code>.</dd> + <dd>Example using the <code>domxref</code> macro: <code><%- template("domxref", ["Event.bubbles", "bubbles"]) %></code>.</dd> + <dd>This is a JavaScript function. So, if one of the parameters is an arg variable like $2, do not put it in quotes. Like this: <code><%- template("warning", [$1, $2, "baz"]) %></code>. If you need to call another template from within a block of code, do not use <code><%</code> ... <code>%></code>. Example: <code>myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";</code></dd> + <dt><code>require(name)</code></dt> + <dd>Loads another template as a module; any output is ignored. Anything assigned to <code>module.exports</code> in the template is returned.</dd> + <dd>Used in templates like so: <code><% var my_module = require('MyModule'); %></code>.</dd> + <dt><code>cacheFn(key, timeout, function_to_cache)</code></dt> + <dd>Using the given key and cache entry lifetime, cache the results of the given function. Honors the value of <code>env.cache_control</code> to invalidate cache on <code>no-cache</code>, which can be sent by a logged-in user hitting shift-refresh.</dd> + <dt><code>request</code></dt> + <dd>Access to <a class="link-https" href="https://github.com/mikeal/request" title="https://github.com/mikeal/request"><code>mikeal/request</code></a>, a library for making HTTP requests. Using this module in KumaScript templates is not yet very friendly, so you may want to wrap usage in module APIs that simplify things.</dd> + <dt><code>log.debug(string)</code></dt> + <dd>Outputs a debug message into the script log on the page (i.e. the big red box that usually displays errors).</dd> +</dl> + +<h4 id="Built-in_API_modules">Built-in API modules</h4> + +<p>There's only one API built in at the moment, in the <code>kuma</code> namespace. You can see the most up to date list of methods under <code>kuma</code> from <a href="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L74">the KumaScript source code</a>, but here are a few:</p> + +<dl> + <dt><code>kuma.inspect(object)</code></dt> + <dd>Renders any JS object as a string, handy for use with <code>log.debug()</code>. See also: <a href="http://nodejs.org/api/util.html#util_util_inspect_object_options">node.js <code>util.inspect()</code></a>.</dd> +</dl> + +<dl> + <dt><code>kuma.htmlEscape(string)</code></dt> + <dd>Escapes the characters <code>&, <, >, "</code> to <code>&amp, &lt;, &gt;, &quot;</code>, respectively.</dd> + <dt><code>kuma.url</code></dt> + <dd>See also: <a href="http://nodejs.org/api/url.html">node.js <code>url</code> module</a>.</dd> + <dt><code>kuma.fetchFeed(url)</code></dt> + <dd>Fetch an RSS feed and parse it into a JS object. See also: <a href="https://github.com/mdn/kumascript/blob/master/macros/InsertFeedLinkList.ejs"><code>InsertFeedLinkList</code></a></dd> +</dl> + +<h4 id="Creating_modules">Creating modules</h4> + +<p>Using the built-in <code>require()</code> method, you can load a template as a module to share common variables and methods between templates. A module can be defined in a template like this:</p> + +<pre class="notranslate"><% +module.exports = { + add: function (a, b) { + return a + b; + } +} +%> +</pre> + +<p>Assuming this template is saved under <a href="https://github.com/mdn/kumascript/tree/master/macros">https://github.com/mdn/kumascript/tree/master/macros</a> as <code>MathLib.ejs</code>, you can use it in another template like so:</p> + +<pre class="notranslate"><% +var math_lib = require("MathLib"); +%> +The result of 2 + 2 = <%= math_lib.add(2, 2) %> +</pre> + +<p>And, the output of this template will be:</p> + +<pre class="notranslate">The result of 2 + 2 = 4 +</pre> + +<h4 id="Auto-loaded_modules">Auto-loaded modules</h4> + +<p>There are a set of modules editable as wiki templates that are automatically loaded and made available to every template. This set is defined in the configuration file for the KumaScript service - any changes to this requires an IT bug to edit configuration and a restart of the service.</p> + +<p>For the most part, these attempt to provide stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:</p> + +<ul> + <li><code>mdn.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/MDN-Common.ejs" title="MDN:Common">MDN-Common</a></li> + <li><code>Page.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Page.ejs" title="DekiScript:Page">DekiScript-Page</a></li> + <li><code>String.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-String.ejs" title="DekiScript:String">DekiScript-String</a></li> + <li><code>Uri.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Uri.ejs" title="DekiScript:Uri">DekiScript-Uri</a></li> + <li><code>Web.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Web.ejs" title="DekiScript:Web">DekiScript-Web</a></li> + <li><code>Wiki.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Wiki.ejs" title="DekiScript:Wiki">DekiScript-Wiki</a></li> +</ul> + +<p><strong>Note:</strong> You might notice that the DekiScript modules use a built-in method named <code>buildAPI()</code>, like so:</p> + +<pre class="notranslate"><% module.exports = buildAPI({ + StartsWith: function (str, sub_str) { + return (''+str).indexOf(sub_str) === 0; + } +}); %> +</pre> + +<p>The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, <code>buildAPI()</code> is a hack to try to cover common case variations in DekiScript calls found in legacy templates.</p> + +<div class="note"> +<p>With that in mind, please do not use <code>buildAPI()</code> in new modules.</p> +</div> + +<h2 id="Tips_and_caveats">Tips and caveats</h2> + +<h3 id="Debugging">Debugging</h3> + +<p>A useful tip when debugging. You can use the <code>log.debug()</code> method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:</p> + +<pre class="notranslate"><%- log.debug("Some text goes here"); %> +</pre> + +<p>You can, of course, create more complex output using script code if it's helpful.</p> + +<h3 id="Caching">Caching</h3> + +<p>KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged-in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:</p> + +<ul> + <li>Hit Refresh in your browser. This causes KumaScript to invalidate its cache for the content on the current page by issuing a request with a <code>Cache-Control: max-age=0</code> header.</li> + <li>Hit Shift-Refresh in your browser. This causes KumaScript to invalidate cache for the current page, as well as for any templates or content used by the current page by issuing a request with a <code>Cache-Control: no-cache</code> header.</li> +</ul> + +<h3 id="Using_search_keywords_to_open_template_pages">Using search keywords to open template pages</h3> + +<p>When using templates, it's common to open the template's code in a browser window to review the comments at the top, which are used to document the template, its parameters, and how to use it properly. To quickly access templates, you can create a Firefox <a href="http://kb.mozillazine.org/Using_keyword_searches">search keyword</a>, which gives you a shortcut you can type in the URL box to get to a template more easily.</p> + +<p>To create a search keyword, open the bookmarks window by choosing "Show all bookmarks" in the Bookmarks menu, or by pressing <kbd>Control</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> (<kbd>Command</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> on Mac). Then from the utility ("Gear") menu in the Library window that appears, choose "New Bookmark...".</p> + +<p>This causes the bookmark editing dialog to appear. Fill that out as follows:</p> + +<dl> + <dt>Name</dt> + <dd>A suitable name for your search keyword; "Open MDN Template" is a good one.</dd> + <dt>Location</dt> + <dd><kbd>https://github.com/mdn/kumascript/blob/master/macros/%s</kbd></dd> + <dt>Tags {{optional_inline}}</dt> + <dd>A list of tags used to organize your bookmarks; these are entirely optional and what (if any) tags you use is up to you.</dd> + <dt>Keyword</dt> + <dd>The shortcut text you wish to use to access the template. Ideally, this should be something short and quick to type, such as simply "t" or "mdnt".</dd> + <dt>Description {{optional_inline}}</dt> + <dd>A suitable description explaining what the search keyword does.</dd> +</dl> + +<p>The resulting dialog looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14432/Screen%20Shot%202016-11-28%20at%203.08.39%20PM.png" style="height: 289px; width: 500px;"></p> + +<p>Then click the "Add" button to save your new search keyword. From then on, typing your keyword, then a space, then the name of a macro will open that macro in your current tab. So if you used "t" as the keyword, typing <kbd>t ListSubpages</kbd> will show you the page at {{TemplateLink("ListSubpages")}}.</p> + +<h2 id="Cookbook">Cookbook</h2> + +<p>This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.</p> + +<h3 id="Force_templates_used_on_a_page_to_be_reloaded">Force templates used on a page to be reloaded</h3> + +<p>It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.</p> + +<h3 id="Recovering_from_Unknown_Error">Recovering from "Unknown Error"</h3> + +<p>Sometimes, you'll see a scripting message like this when you load a page:</p> + +<pre class="notranslate">Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'></pre> + +<p>This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&format=itrequest">file an IT bug</a> for Mozilla Developer Network to ask for an investigation.</p> + +<h3 id="Broken_wiki.languages_macros">Broken wiki.languages() macros</h3> + +<p>On some pages, you'll see a scripting error like this:</p> + +<pre class="notranslate">Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but... +</pre> + +<p>If you edit the page, you'll probably see a macro like this at the bottom of the page:</p> + +<pre class="notranslate">\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }} +</pre> + +<p>To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <code><!-- --></code> to preserve the information, like so:</p> + +<pre class="notranslate"><!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) --> +</pre> + +<p>Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.</p> + +<h3 id="Finding_the_Current_Pages_Language">Finding the Current Page's Language</h3> + +<p>In KumaScript, the locale of the current document is exposed as an environment variable:</p> + +<pre class="notranslate">var lang = env.locale; +</pre> + +<p>The <code>env.locale</code> variable should be reliable and defined for every document.</p> + +<h3 id="Reading_the_contents_of_a_page_attachment">Reading the contents of a page attachment</h3> + +<p>You can read the contents of an attached file by using the <code>mdn.getFileContent()</code> function, like this:</p> + +<pre class="notranslate"><% + var contents = mdn.getFileContent(fileUrl); + ... do stuff with the contents ... +%> +</pre> + +<p>or</p> + +<pre class="notranslate"><%-mdn.getFileContent(fileObject)%> +</pre> + +<p>In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array <code>env.files</code>. So, for example, to embed the contents of the first file attached to the article, you can do this:</p> + +<pre class="notranslate"><%-mdn.getFileContent(env.files[0])%> +</pre> + +<div class="note"><strong>Note:</strong> You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.</div> + +<p>If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.</p> + +<h3 id="Localizing_template_content">Localizing template content</h3> + +<p>Templates are not translated like wiki pages, rather any single template might be used for any number of locales.</p> + +<p>So the main way to output content tailored to the current document locale is to pivot on the value of <code>env.locale</code>. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:</p> + +<h4 id="Ifelse_blocks_in_KumaScript">If/else blocks in KumaScript</h4> + +<p>The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:</p> + +<pre class="notranslate"><% if ("fr" == env.locale) { %> +<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a> +<% } else if ("ja" == env.locale) { %> +<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a> +<% } else if ("pl" == env.locale) { %> +<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a> +<% } else if ("de" == env.locale) { %> +<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a> +<% } else { %> +<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a> +<% } %> +</pre> + +<p>Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.</p> + +<p>My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:</p> + +<pre class="notranslate">%s#<span#^M<span#g +%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g +%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [# +%s#)</span> </span>#]) %> +</pre> + +<p>Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.</p> + +<h4 id="String_variables_and_switch">String variables and switch</h4> + +<p>Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:</p> + +<pre class="notranslate"><% +var s_title = 'Firefox for Developers'; +switch (env.locale) { + case 'de': + s_title = "Firefox für Entwickler"; + break; + case 'fr': + s_title = "Firefox pour les développeurs"; + break; + case 'es': + s_title = "Firefox para desarrolladores"; + break; +}; +%> +<span class="title"><%= s_title %></span> +</pre> + +<h4 id="Use_mdn.localString">Use <code>mdn.localString()</code></h4> + +<p>A recent addition to the <code>MDN:Common</code> module is <code>mdn.localString()</code>, used like this:</p> + +<pre class="notranslate"><% +var s_title = mdn.localString({ + "en-US": "Firefox for Developers", + "de": "Firefox für Entwickler", + "es": "Firefox para desarrolladores" +}); +%> +<span class="title"><%= s_title %></span> +</pre> + +<p>This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/CSSRef.ejs" title="CSSRef">CSSRef</a>), a switch statement might help keep all the strings grouped by locale and more easily translated that way.</p> + +<p>When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://kuma.readthedocs.io/en/latest/" title="Getting started with Kuma">Getting started with Kuma</a></li> + <li><a href="https://github.com/mdn/kumascript" title="Project:en/KumaScript reference">KumaScript reference</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MDN/Kuma" title="https://wiki.mozilla.org/MDN/Kuma">Kuma wiki</a></li> +</ul> diff --git a/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html b/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html new file mode 100644 index 0000000000..56053d6468 --- /dev/null +++ b/files/pt-br/mdn/tools/kumascript/solucionando_problemas_de_erros_de_kumascript/index.html @@ -0,0 +1,63 @@ +--- +title: Solucionando problemas de erros de KumaScript +slug: MDN/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript +tags: + - Erros + - Ferramentas + - Guía + - KumaScript + - MDN Meta +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +<div>{{MDNSidebar}}</div><div class="summary"> +<p>Erros de <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> aparecendo numa página podem ser muito desagradáveis aos leitores, mostrando grandes e medonhas caixas vermelhas, mas felizmente qualquer pessoa com uma conta MDN pode editar um documento e consertar tais tipos de erros. Quando uma página possui algum erro, ela é adicionada na lista de <a href="/docs/with-errors">documentos com erros</a>. Editores do site passam por essa lista regularmente para achar e consertar erros. Este artigo detalha os quatro tipos de erros de KumaScript, e alguns passos que você pode fazer para consertá-los.</p> +</div> + +<h2 id="Erro_tipo_DocumentParsingError">Erro tipo <em>DocumentParsingError</em></h2> + +<p><code>DocumentParsingError</code> erros aparecem quando o KumaScript tem problemas para entender alguma coisa no próprio documento. A causa mais comum é um erro de sintaxe em alguma <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a>.</p> + +<p>Verifique:</p> + +<dl> + <dt>Uso de chaves sem a intenção de chamar uma macro.</dt> + <dd>Se você pretende escrever \{ num documento sem usar macro, você pode escapar as chaves com uma barra invertida \ da seguinte forma: <code>\\{</code></dd> + <dt>Uso de caractére especial nos parâmetros de uma macro.</dt> + <dd>Se você pretende usar aspas duplas " ou barra invertida \ dentro de algum parâmetro para uma macro, eles podem ser escapados através de uma barra invertida \ da seguinte forma: <code>\\</code> or <code>\"</code></dd> + <dt>Falta de vírgula para separar parâmetros de macro.</dt> + <dd>Parâmetros de macro precisam ser separados por uma vírgula (,) exceto no último parâmetro (ou se for único); por exemplo <code>\{\{anch("top", "Back to top")}}</code>.</dd> + <dt>Tags HTML aparecendo dentro de uma chamada de macro</dt> + <dd>Se você aplicar estilos a uma macro, geralmente não irá funcionar, pois uma tag <code></code></code> pode aparecer dentro do código fonte da macro, causado erros de sintaxe na macro. Verifique a visão de código-fonte para ver o código que foi gerado, e remova qualquer estilo desnecessário.</dd> +</dl> + +<ul> +</ul> + +<h2 id="Erro_tipo_TemplateLoadingError">Erro tipo <em>TemplateLoadingError</em></h2> + +<p><code>TemplateLoadingError</code> erros aparecendo quando um KumaScript tem problemas de encontrar qual <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a> incluir numa página.</p> + +<p>Verifique:</p> + +<dl> + <dt>Nomes com erro ortográfico ou macros renomeadas.</dt> + <dd>Você pode ver a lista de macros conhecidas no <a href="https://github.com/mdn/kumascript/tree/master/macros">Repositório do Github</a>.</dd> +</dl> + +<div class="note"> +<p><strong>Dica:</strong> Você pode tornar mais rápido e fácil avançar para uma macro específica adicionando uma <a href="http://kb.mozillazine.org/Using_keyword_searches">busca por palavras-chave</a> no Firefox. Veja {{SectionOnPage("/en-US/docs/MDN/Contribute/Tools/KumaScript", "Using search keywords to open template pages")}} para um guia passo-a-passo de criar uma busca para isso.</p> +</div> + +<h2 id="Erro_tipo_TemplateExecutionError">Erro tipo <em>TemplateExecutionError</em></h2> + +<p><code>TemplateExecutionError</code> erros aparecem quando KumaScript encontra erros na macro. Esses erros só podem ser consertados por usuários administradores e precisam ser reportados como <em>bugs</em>.</p> + +<p>Antes de reportar um erro, verifique se ele ainda não foi consertado. Você pode fazer isso forçando o KumaScript a te dar uma cópia fresca da página segurando <kbd>Shift</kbd> enquanto atualiza a página (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>R</kbd> no Windows/Linux, <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>R</kbd> no Mac).</p> + +<p>Se os erros persistirem, <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&component=General#h=detail|bug">reporte um <em>bug</em></a>, incluindo a URL da página e o texto do erro.</p> + +<h2 id="Erro_tipo_Error_Unknown">Erro tipo <em>Error</em> & <em>Unknown</em></h2> + +<p>Este é um tipo de erro que aparece quando o erro não pertence aos outros tipos de erros.</p> + +<p>Verifique se existe alguma solução de contorno ou correção para o problema e reporte <em>bugs</em> persistentes como descrito em <a href="#TemplateExecutionError">TemplateExecutionError</a>.</p> diff --git a/files/pt-br/mdn/tools/page_regeneration/index.html b/files/pt-br/mdn/tools/page_regeneration/index.html new file mode 100644 index 0000000000..16808c9615 --- /dev/null +++ b/files/pt-br/mdn/tools/page_regeneration/index.html @@ -0,0 +1,32 @@ +--- +title: Page regeneration +slug: MDN/Tools/Page_regeneration +tags: + - Ferramentas + - Guia(2) + - MDN Meta + - Page-level +translation_of: MDN/Tools/Page_regeneration +--- +<div>{{MDNSidebar}}</div><p>O site da MDN cacheia as páginas para melhorar a performance. Como resultado, as mudanças que você salva nas páginas podem não aparecer imediatamente. Muitas vezes, mas nem sempre, o banner aparece na página indicando que uma atualização para aquela página está em progresso. Você pode fazer uma "atualização forçada" no seu navegador para recarregar a página do servidor, mas isso pode não ter efeito se a atualização no servidor não estiver completa.</p> + +<p>Algumas páginas (especialmente landing pages) utilizam macros para gerar e atualizar o conteúdo automaticamente. Para landing pages, fazer isso assegura que novos artigos vão automaticamente ser listados na página, sem que um editor tenha que adicioná-los manualmente. Isso é bem conveniente para contribuidores de longas datas e evita que o trabalho dos novatos seja perdido aleatoriamente devido eles não saberem como o inserir o link hierarquicamente para seus artigos.</p> + +<p>Isso também pode ser feito quando a transclusão de conteúdo de uma pátina para outras páginas (usando por exemplo, o macro {{TemplateLink("Page")}}).</p> + +<p>Devido ao cache da MDN ter renderizado o conteúdo para melhorar a performance, mudanças feitas no material fonte (como a saída dos macros ou páginas transcluídas) não são automaticamente refletidas na páginas. Se você espera mudanças frequentes feitas nesses materiais fonte, você pode considerar habilitar a regeneração automática de páginas.</p> + +<p>Para habilitar a regeneração automática de páginas:</p> + +<ol> + <li>Clique no botão <strong>Editar</strong> na página para entrar no modo de edição.</li> + <li>Abaixo do título da página, clique em <strong>Editar o título e propriedades</strong> localizado perto do título da página. Os metadados da página aparecerão.</li> + <li>Selecione um valor para <strong>Tempo máximo de regeneração</strong>. Esse valor determina o intervalo de tempo que as páginas serão refeitas, incluindo a reexecução de seus macros. Tipicamente, nós utilizamos de 4 a 8 horas. Para uma tecnologia em que a documentação está mudando rapidamente, você pode mudar para um número menor.</li> + <li>Salve suas mudanças para a página. É uma boa prática fazer a revisão dos comentários para descrever o que você fez, tipo: "Mudei o tempo máximo de renderização para 4 horas".</li> +</ol> + +<p>Essa página vai ser regerada automaticamente no tempo que você especificou.</p> + +<blockquote> +<p>A opção "Editar títilo e propriedades da página" não está disponível enquanto você cria uma nova página. Você terá que salvar as alterações e reabrir a página para vê-la.</p> +</blockquote> |