diff options
author | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
commit | 4d3b1c2c79113786e001e3bec551205cd34f818a (patch) | |
tree | fcff970c1fb2155bfcd55f5e2056a79cefd58890 /files/pt-br/web | |
parent | a8cc0431ca75f502b324ec880c62c0f6caf71727 (diff) | |
download | translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.gz translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.bz2 translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.zip |
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web')
-rw-r--r-- | files/pt-br/web/html/preloading_content/index.html | 239 | ||||
-rw-r--r-- | files/pt-br/web/svg/element/color-profile/index.html | 95 |
2 files changed, 0 insertions, 334 deletions
diff --git a/files/pt-br/web/html/preloading_content/index.html b/files/pt-br/web/html/preloading_content/index.html deleted file mode 100644 index 6c5165a5c6..0000000000 --- a/files/pt-br/web/html/preloading_content/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -<p class="summary">O valor <code>preload</code> do atributo <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link#attr-rel">rel</a></code> do elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link" title="O Elemento HTML <link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo."><code><link></code></a> permite que você escreva solicitações de busca declarativas em seu elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/head" title="The HTML <head> elemento providencia informações gerais (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos."><code><head></code></a> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</p> - -<h2 id="O_básico">O básico</h2> - -<p>Você comumente usa o elemento <code><link></code> quando carrega um arquivo de estilo CSS para sua pagina com:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>No entanto, aqui nós usamos <code>rel</code> com valor <code>preload</code>, que transforma o elemento <code><link></code> em um <em>preloader</em> para praticamente qualquer recurso que você precisar. Você também precisa especificar</p> - -<ul> - <li>o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}</li> - <li>o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.</li> -</ul> - -<p>Um exemplo simples pode se parecer com o seguinte (veja seus <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, e <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js"></script> -</body></pre> - -<p>Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <code><link rel="stylesheet"></code> e <code><script></code> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:</p> - -<ul> - <li>Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;</li> - <li>Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;</li> - <li>Imagens maiores e arquivos de vídeo.</li> -</ul> - -<p><code>preload</code> também possui outras vantagens. Usando o atributo <code>as</code> para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:</p> - -<ul> - <li>Priorize o carregamento de recursos com maior precisão;</li> - <li id="tw-target-text">Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;</li> - <li>Aplique a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> adequada ao recurso;</li> - <li>Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.</li> -</ul> - -<h3 id="Qual_tipo_de_conteúdo_pode_ser_pré-carregado">Qual tipo de conteúdo pode ser pré-carregado?</h3> - -<p>Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo <code>as</code> são os seguintes:</p> - -<ul> - <li><code>audio</code>: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .</li> - <li><code>document</code>: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.</li> - <li><code>embed</code>: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.</li> - <li><code>fetch</code>: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.</li> - <li><code>font</code>: Arquivo de fonte.</li> - <li><code>image</code>: Arquivo de imagem.</li> - <li><code>object</code>: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.</li> - <li><code>script</code>: Arquivo JavaScript.</li> - <li><code>style</code>: Estilo CSS.</li> - <li><code>track</code>: Arquivo webVTT.</li> - <li><code>worker</code>: Um web worker JavaScript ou shared worker.</li> - <li><code>video</code>: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .</li> -</ul> - -<div class="note"> -<p><strong>Nota</strong>: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Observe também que a lista completa de valores que o atributo <code>as</code> pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> -</div> - -<h2 id="Incluindo_um_tipo_MIME">Incluindo um tipo MIME</h2> - -<p><code><link></code> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo <code>type</code> para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.</p> - -<p>Você pode ver um exemplo disto no nosso exemplo de video (veja o <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, e também <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.</p> - -<h2 id="Buscas_de_origem_cruzada">Buscas de origem cruzada</h2> - -<p>Se você tem no seu site as configurações de <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <code><link></code>.</p> - -<p dir="ltr" id="tw-target-text">Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a> se você esta interesado em todos os detalhes).</p> - -<p>Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - - <link href="style.css" rel="stylesheet" type="text/css"> -</head> -<body> - ... -</body></pre> - -<p>Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo <code>crossorigin</code> para lidar com os problemas de CORS..</p> - -<h2 id="Adicionando_media">Adicionando media</h2> - -<p>Um bom recurso de alemento <code><link></code> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types">media types</a> ou full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, permitindo que você faça o pré-carregamento responsivo!</p> - -<p>Vamos ver um exemplo simples (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if(mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> para mais informaçoes sobre isso).</p> - -<p>Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).</p> - -<p>Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.</p> - -<h2 id="Scripting_and_preloads">Scripting and preloads</h2> - -<p>Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.</p> - -<p>Para usalo, você poderia fazer isso quando desejado:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.</p> - -<h2 id="Outros_mecanismos_de_pré-carregamento_de_recursos">Outros mecanismos de pré-carregamento de recursos</h2> - -<p dir="ltr" id="tw-target-text">Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito <code><link rel="preload"></code>:</p> - -<ul> - <li><code><link rel="prefetch"></code><br> - tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> para mais detalhes.</li> - <li><code><link rel="prerender"></code> - <p dir="ltr" id="tw-target-text">é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trata<code>prerender</code> como um <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a>.</p> - </li> - <li><code><link rel="subresource"></code> {{non-standard_inline}} - <p dir="ltr" id="tw-target-text">foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.</p> - </li> - <li> - <p dir="ltr">Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.</p> - </li> -</ul> - -<h2 id="Specifications" name="Specifications">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>mais detalhes sobre <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>definições de <code>rel=preload</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pedido de envio.</p> - -<p>{{Compat("html.elements.link.rel.preload")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/pt-br/web/svg/element/color-profile/index.html b/files/pt-br/web/svg/element/color-profile/index.html deleted file mode 100644 index be238bced6..0000000000 --- a/files/pt-br/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: color-profile -slug: Web/SVG/Element/color-profile -tags: - - Elemento - - Perfil de Cor - - Referencia - - SVG -translation_of: Web/SVG/Element/color-profile ---- -<div>{{SVGRef}}</div> - -<p>O elemento permite descrever o perfil de cor utilizado para a imagem.</p> - -<h2 id="Contexto_de_uso">Contexto de uso</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemplo">Exemplo</h2> - -<h2 id="Atributos">Atributos</h2> - -<h3 id="Atributos_globais">Atributos globais</h3> - -<ul> - <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> - <li><a href="/pt-BR/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> -</ul> - -<h3 id="Atributos_específicos">Atributos específicos</h3> - -<ul> - <li>{{ SVGAttr("local") }}</li> - <li>{{ SVGAttr("name") }}</li> - <li>{{ SVGAttr("rendering-intent") }}</li> - <li>{{ SVGAttr("xlink:href") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGColorProfileElement" title="en/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>.</p> - -<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>A tabela é baseada <a href="/pt-BR/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> |