diff --git a/files/pt-br/web/javascript/reference/global_objects/undefined/index.md b/files/pt-br/web/javascript/reference/global_objects/undefined/index.md index 5e10dbd604ef9f..5ff229bcd61154 100644 --- a/files/pt-br/web/javascript/reference/global_objects/undefined/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/undefined/index.md @@ -55,7 +55,8 @@ if (x === undefined) { } ``` -> **Nota:** Observação: O operador de igualdade estrita (`===`) tem que ser utilizado aqui uma vez que `x == undefined` também checa se `x` é nulo, enquanto o operador não o faz. `null` não é equivalente à `undefined`. Veja {{jsxref("Operators/Comparison_Operators", "operadores de comparação")}} (em inglês) para maiores detalhes. +> [!NOTE] +> O operador de igualdade estrita (`===`) tem que ser utilizado aqui uma vez que `x == undefined` também checa se `x` é nulo, enquanto o operador não o faz. `null` não é equivalente à `undefined`. Veja {{jsxref("Operators/Comparison_Operators", "operadores de comparação")}} (em inglês) para maiores detalhes. ### `Operador Typeof` e `undefined` diff --git a/files/pt-br/web/javascript/reference/global_objects/unescape/index.md b/files/pt-br/web/javascript/reference/global_objects/unescape/index.md index bae3544a5b2938..628480d5df4550 100644 --- a/files/pt-br/web/javascript/reference/global_objects/unescape/index.md +++ b/files/pt-br/web/javascript/reference/global_objects/unescape/index.md @@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/unescape {{jsSidebar("Objects")}}{{Deprecated_header}}A função **unescape()** obsolta computa uma nova string na qual as sequencias hexadecimal são esquecidas com o caractere que representa. As sequências de escape podem ser introduzidas como funções {{jsxref("escape")}}. Porque a função 'unescape' está obsoleta, ao invez disso, use {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}}. -> **Nota:** Não use `unescape` para decodificar URIs, use `decodeURI` ao invez disso. +> [!NOTE] +> Não use `unescape` para decodificar URIs, use `decodeURI` ao invez disso. ## Syntax diff --git a/files/pt-br/web/javascript/reference/iteration_protocols/index.md b/files/pt-br/web/javascript/reference/iteration_protocols/index.md index 148b600e23d243..b05d8cb51625c6 100644 --- a/files/pt-br/web/javascript/reference/iteration_protocols/index.md +++ b/files/pt-br/web/javascript/reference/iteration_protocols/index.md @@ -71,7 +71,8 @@ Um objeto é um iterador quando implementa um método **`next()`** com a semânt -> **Nota:** Não é possível saber de forma reflexiva se um determinado objeto implementa o protocolo do iterador, no entanto, é fácil criar um objeto que satisfaça tanto o iterador quanto os protocolos iteráveis (como mostrado no exemplo abaixo). Fazer isso permite que um iterador seja consumido pelas várias sintaxes que iteráveis esperam. Assim, raramente é desejável implementar o protocolo do iterador sem também implementar iteráveis. +> [!NOTE] +> Não é possível saber de forma reflexiva se um determinado objeto implementa o protocolo do iterador, no entanto, é fácil criar um objeto que satisfaça tanto o iterador quanto os protocolos iteráveis (como mostrado no exemplo abaixo). Fazer isso permite que um iterador seja consumido pelas várias sintaxes que iteráveis esperam. Assim, raramente é desejável implementar o protocolo do iterador sem também implementar iteráveis. > > ```js > var myIterator = { diff --git a/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.md b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.md index 29c165089d1f68..eaa61b787bf99f 100644 --- a/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.md +++ b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.md @@ -183,7 +183,8 @@ var a, b; ({ a, b } = { a: 1, b: 2 }); ``` -> **Nota:** Os parênteses `( ... )` ao redor da declaração de atribuição é uma sintaxe necessária quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração. +> [!NOTE] +> Os parênteses `( ... )` ao redor da declaração de atribuição é uma sintaxe necessária quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração. > > `{a, b} = {a:1, b:2}` não é uma sintaxe stand-alone válida, pois `{a, b}` no lado esquerdo é considarada um bloco, não um objeto literal. > diff --git a/files/pt-br/web/javascript/reference/operators/optional_chaining/index.md b/files/pt-br/web/javascript/reference/operators/optional_chaining/index.md index e729579dd48f6b..f0bcb8911e663a 100644 --- a/files/pt-br/web/javascript/reference/operators/optional_chaining/index.md +++ b/files/pt-br/web/javascript/reference/operators/optional_chaining/index.md @@ -59,7 +59,8 @@ Usar encadeamento opcional com chamadas de função faz com que a expressão aut let result = someInterface.customMethod?.(); ``` -> **Nota:** Se existe uma propriedade com tal nome e que não é uma função, usando `?.` ainda lançará a exceção {{JSxRef("TypeError")}} (`x.y is not a function`). +> [!NOTE] +> Se existe uma propriedade com tal nome e que não é uma função, usando `?.` ainda lançará a exceção {{JSxRef("TypeError")}} (`x.y is not a function`). #### Lidando com callbacks opcionais ou manipuladores de eventos diff --git a/files/pt-br/web/javascript/reference/operators/subtraction/index.md b/files/pt-br/web/javascript/reference/operators/subtraction/index.md index 9d4453dcd90796..773787345e1ea2 100644 --- a/files/pt-br/web/javascript/reference/operators/subtraction/index.md +++ b/files/pt-br/web/javascript/reference/operators/subtraction/index.md @@ -26,7 +26,8 @@ x - y ### Subtração com strings -> **Warning:** Note que o JavaScript sempre tentará converter uma String em numero número +> [!WARNING] +> Note que o JavaScript sempre tentará converter uma String em numero número ```js "foo" - 3; // NaN diff --git a/files/pt-br/web/javascript/reference/operators/this/index.md b/files/pt-br/web/javascript/reference/operators/this/index.md index b77ed7a5b65525..9545ea8bec9eb6 100644 --- a/files/pt-br/web/javascript/reference/operators/this/index.md +++ b/files/pt-br/web/javascript/reference/operators/this/index.md @@ -59,7 +59,8 @@ f2() === undefined; // true Portanto, em modo estrito, se `this` não for definido durante o contexto da execução, ele permanecerá indefinido (`undefined`). -> **Nota:** No segundo exemplo, `this` deveria ser [`undefined`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/undefined), porque `f2` foi chamada diretamente e não como um método ou popriedade de um objeto (ou seja, `window.f2()`). Esta característica não foi implementada em alguns navegadores quando começaram a dar suporte ao [strict mode](/pt-BR/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode) (modo estrito). Como resultado, eles incorretamente retornavam o objeto `window`. +> [!NOTE] +> No segundo exemplo, `this` deveria ser [`undefined`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/undefined), porque `f2` foi chamada diretamente e não como um método ou popriedade de um objeto (ou seja, `window.f2()`). Esta característica não foi implementada em alguns navegadores quando começaram a dar suporte ao [strict mode](/pt-BR/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode) (modo estrito). Como resultado, eles incorretamente retornavam o objeto `window`. ### Funções Arrow (seta) diff --git a/files/pt-br/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md b/files/pt-br/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md index 22bdafe2d7e009..593c9809bba9c9 100644 --- a/files/pt-br/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md +++ b/files/pt-br/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md @@ -25,7 +25,8 @@ Um **escape de classe de caracteres unicode** é um tipo de [escape de classe de - : Nome ou valor de uma propriedade Unicode solitária, seguindo a mesma sintaxe como `valor`. Ela especifica o valor para a propriedade `General_Category` (Categoria Geral), ou um [nome binário de propriedade (en-US)](https://tc39.es/ecma262/multipage/text-processing.html#table-binary-unicode-properties). No modo [`v`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets), também pode ser uma [propriedade Unicode binária de textos (en-US)](https://tc39.es/ecma262/multipage/text-processing.html#table-binary-unicode-properties-of-strings). - > **Nota:** A sintaxe [ICU (en-US)](https://unicode-org.github.io/icu/userguide/strings/unicodeset.html#property-values) permite omitir o nome da propriedade `Script` também, mas o JavaScript não suporta isso, porque na maioria dos casos a propriedade `Script_Extensions` é mais útil que a `Script`. + > [!NOTE] + > A sintaxe [ICU (en-US)](https://unicode-org.github.io/icu/userguide/strings/unicodeset.html#property-values) permite omitir o nome da propriedade `Script` também, mas o JavaScript não suporta isso, porque na maioria dos casos a propriedade `Script_Extensions` é mais útil que a `Script`. - `propriedade` - : O nome de uma propriedade Unicode. Deve ser composto de letras {{Glossary("ASCII")}} (`A–Z`, `a–z`) e underscores (`_`), e deve ser um dos [nome de propriedades não binárias (en-US)](https://tc39.es/ecma262/multipage/text-processing.html#table-nonbinary-unicode-properties). @@ -42,7 +43,8 @@ Para compor múltiplas propriedades, use a sintaxe de [intersecção de conjunto No modo `v`, `\p` pode corresponder a uma sequências de pontos de código, definida no Unicode como "propriedades de textos". Isto é mais útil para emojis, que são frequentemente compostos por múltiplos pontos de código. Contudo, `\P` pode apenas complementar as propriedades do caracter. -> **Nota:** Existem planos de portar a funcionalidade de propriedades de texto para o modo `u` também. +> [!NOTE] +> Existem planos de portar a funcionalidade de propriedades de texto para o modo `u` também. ## Exemplos diff --git a/files/pt-br/web/javascript/reference/statements/async_function/index.md b/files/pt-br/web/javascript/reference/statements/async_function/index.md index d48118a9f9e93b..4e33f01fdb1247 100644 --- a/files/pt-br/web/javascript/reference/statements/async_function/index.md +++ b/files/pt-br/web/javascript/reference/statements/async_function/index.md @@ -30,7 +30,8 @@ Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")} Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da `Promise` passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido. -> **Nota:** A proposta das funções `async/await` é de simplificar o uso de forma síncrona das `Promises` e executar alguns procedimentos em um grupo de `Promises`. Assim como `Promises` são similares a `callbacks` estruturados, funções `async/await` são similares à junção de `generators` com `Promises`. +> [!NOTE] +> A proposta das funções `async/await` é de simplificar o uso de forma síncrona das `Promises` e executar alguns procedimentos em um grupo de `Promises`. Assim como `Promises` são similares a `callbacks` estruturados, funções `async/await` são similares à junção de `generators` com `Promises`. ## Exemplos diff --git a/files/pt-br/web/javascript/reference/statements/export/index.md b/files/pt-br/web/javascript/reference/statements/export/index.md index 045db21cb8974b..3a2d36fad93295 100644 --- a/files/pt-br/web/javascript/reference/statements/export/index.md +++ b/files/pt-br/web/javascript/reference/statements/export/index.md @@ -117,7 +117,8 @@ export { function1, function2 }; Mas onde `function1` e `function2` não ficam disponíveis dentro do módulo atual. -> **Nota:** Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import: +> [!NOTE] +> Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import: ```js import DefaultExport from "bar.js"; // Válido diff --git a/files/pt-br/web/javascript/reference/statements/for/index.md b/files/pt-br/web/javascript/reference/statements/for/index.md index 22b542bf5e3f7f..8c48cff0e79088 100644 --- a/files/pt-br/web/javascript/reference/statements/for/index.md +++ b/files/pt-br/web/javascript/reference/statements/for/index.md @@ -117,7 +117,8 @@ showOffsetPos("content"); // top: 153px;" ``` -> **Nota:** Nesse caso, quando você não usa a seção de declaração, **o** **ponto-e-vírgula é colocada imediatamente após a declaração do ciclo**. +> [!NOTE] +> Nesse caso, quando você não usa a seção de declaração, **o** **ponto-e-vírgula é colocada imediatamente após a declaração do ciclo**. ## Especificações diff --git a/files/pt-br/web/javascript/reference/statements/label/index.md b/files/pt-br/web/javascript/reference/statements/label/index.md index 7615adc8753c75..3ccc75ee2b62ef 100644 --- a/files/pt-br/web/javascript/reference/statements/label/index.md +++ b/files/pt-br/web/javascript/reference/statements/label/index.md @@ -23,7 +23,9 @@ label : - `declaração` - : Uma declaração qualquer. _break_ pode ser utilizado com qualquer declaração entiquetada (com _label_) , assim como o _continue_ também pode. -> **Aviso:** ### Evite usar labelsLabels não são comunmente utilizados em JavaScript já que estes fazem com que programas fiquei mais difíceis de ler e entender. Sempre que possível evite utilizar labels e, dependendo dos casos, prefira [chamar funções](/pt-BR/docs/JavaScript/Reference/Statements/function) ou [lançar um erro](/pt-BR/docs/JavaScript/Reference/Statements/throw). +### Evite usar labels + +Labels não são comunmente utilizados em JavaScript já que estes fazem com que programas fiquei mais difíceis de ler e entender. Sempre que possível evite utilizar labels e, dependendo dos casos, prefira [chamar funções](/pt-BR/docs/JavaScript/Reference/Statements/function) ou [lançar um erro](/pt-BR/docs/JavaScript/Reference/Statements/throw) ## Exemplos diff --git a/files/pt-br/web/javascript/reference/statements/return/index.md b/files/pt-br/web/javascript/reference/statements/return/index.md index 1e71c0b3b7f7a9..d21ef2d1e641a6 100644 --- a/files/pt-br/web/javascript/reference/statements/return/index.md +++ b/files/pt-br/web/javascript/reference/statements/return/index.md @@ -46,7 +46,8 @@ a + b; O console irá alertar "unreachable code after return statement" (código inacessível após a declaração return). -> **Nota:** A partir do Gecko 40, um alerta é mostrado no console se um código inacessível é encontrado após uma declaração `return`. +> [!NOTE] +> A partir do Gecko 40, um alerta é mostrado no console se um código inacessível é encontrado após uma declaração `return`. ## Exemplos diff --git a/files/pt-br/web/javascript/reference/statements/with/index.md b/files/pt-br/web/javascript/reference/statements/with/index.md index 09f8eff8cfd8c9..cdfab0544c8421 100644 --- a/files/pt-br/web/javascript/reference/statements/with/index.md +++ b/files/pt-br/web/javascript/reference/statements/with/index.md @@ -3,7 +3,8 @@ title: with slug: Web/JavaScript/Reference/Statements/with --- -> **Aviso:** O uso da declaração `with` não é recomendado, isso porque ele pode ser a fonte de bugs confusos e problemas de compatibilidade. Veja o parágrafo "Contra de ambiguidade" na seção "Descrição" para mais detalhes. +> [!WARNING] +> O uso da declaração `with` não é recomendado, isso porque ele pode ser a fonte de bugs confusos e problemas de compatibilidade. Veja o parágrafo "Contra de ambiguidade" na seção "Descrição" para mais detalhes. {{jsSidebar("Statements")}} @@ -25,7 +26,8 @@ with (expressão) JavaScript procura por um nome não qualificado procurando uma cadeia de escopo associada à execução do contexto do script ou função contendo um nome não qualificado. A declaração 'with' adiciona o dado objeto à frenet dessa cadeia de escopo durante a validação desse corpo de declarações. Se um nome não qualificado usado no corpo for igual ao de uma propriedade na cadeia de escopo, então o nome ficará ligado à propriedade e ao objeto contendo a propriedade. Senão, um {{jsxref("ReferenceError")}} será invocado. -> **Nota:** Usar `with` não é recomendado, e está probido no [strict mode](/pt-BR/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode) do ECMAScript 5. A alternativa recomendada é atribuir o objeto cujas propriedades você quer acessar a uma variável temporária. +> [!NOTE] +> Usar `with` não é recomendado, e está probido no [strict mode](/pt-BR/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode) do ECMAScript 5. A alternativa recomendada é atribuir o objeto cujas propriedades você quer acessar a uma variável temporária. ### Pros & contras de perfomance diff --git a/files/pt-br/web/javascript/reference/strict_mode/index.md b/files/pt-br/web/javascript/reference/strict_mode/index.md index 47b7eed946d1ee..aee23e4fa44cc6 100644 --- a/files/pt-br/web/javascript/reference/strict_mode/index.md +++ b/files/pt-br/web/javascript/reference/strict_mode/index.md @@ -97,7 +97,8 @@ delete Object.prototype; // lança TypeError Quarto, strict mode anterior ao Gecko 34 requer que todas as propriedades nomeadas em um objeto literal sejam únicas. Código normal pode duplicar nomes de propriedades, sendo que a última ocorrência determina o valor da propriedade. Mas como apenas o último faz algo, a duplicação é meramente um vetor de bugs, se o código for modificado para mudar o valor da propriedade por outro meio que não modificando a última instância. Nomes de propriedades duplicados são erro de sintaxe em strict mode: -> **Nota:** Não é mais o caso no ECMAScript 6 ([Erro do Firefox 1041128](https://bugzil.la/1041128)). +> [!NOTE] +> Não é mais o caso no ECMAScript 6 ([Erro do Firefox 1041128](https://bugzil.la/1041128)). ```js "use strict"; diff --git a/files/pt-br/web/manifest/index.md b/files/pt-br/web/manifest/index.md index b45e4b9efa319f..517e1b69ea0998 100644 --- a/files/pt-br/web/manifest/index.md +++ b/files/pt-br/web/manifest/index.md @@ -15,9 +15,11 @@ Manifesto de aplicativos web são implementados em suas páginas HTML usando uma ``` -> **Nota:** A extensão `.webmanifest` está especificada na sessão de [Media type registration](https://w3c.github.io/manifest/#media-type-registration) da especificação, mas no geral os navegadores suportam manifestos em outras extensões apropriadas como `.json` +> [!NOTE] +> A extensão `.webmanifest` está especificada na sessão de [Media type registration](https://w3c.github.io/manifest/#media-type-registration) da especificação, mas no geral os navegadores suportam manifestos em outras extensões apropriadas como `.json` -> **Nota:** Se o manifesto precisa de credenciais para ser buscado, você [deve](https://github.com/w3c/manifest/issues/186#issuecomment-43939505) adicionar o atributo [`crossorigin`](/pt-BR/docs/Web/HTML/CORS_settings_attributes) mesmo que o arquivo de manifesto esteja na mesma origem da página atual. +> [!NOTE] +> Se o manifesto precisa de credenciais para ser buscado, você [deve](https://github.com/w3c/manifest/issues/186#issuecomment-43939505) adicionar o atributo [`crossorigin`](/pt-BR/docs/Web/HTML/CORS_settings_attributes) mesmo que o arquivo de manifesto esteja na mesma origem da página atual. ## Exemplo de manifesto @@ -87,7 +89,8 @@ Define a "cor de fundo" esperada para o website. Este valor repete o que já é "background_color": "red" ``` -> **Nota:** O membro `background_color` tem o único intuito de melhorar a experiência de usuário enquanto o site apontado está carregando, e não deve ser usado pelo agente de usuário como o {{cssxref("background-color", "background color")}} quando a folha de estilo do aplicativo web progressivo (PWA) estiver disponível. +> [!NOTE] +> O membro `background_color` tem o único intuito de melhorar a experiência de usuário enquanto o site apontado está carregando, e não deve ser usado pelo agente de usuário como o {{cssxref("background-color", "background color")}} quando a folha de estilo do aplicativo web progressivo (PWA) estiver disponível. ### description @@ -113,7 +116,8 @@ Pode ter um dos valores a seguir: - `rtl` (right-to-left) - `auto` (hints to the browser to use the Unicode bidirectional algorithm to make a best guess about the text's direction.) -> **Nota:** When the value is omitted, it defaults to `auto`. +> [!NOTE] +> When the value is omitted, it defaults to `auto`. ### display @@ -191,7 +195,8 @@ Valid values are: -> **Nota:** You can selectively apply CSS to your app based on the display mode, using the [display-mode](/docs/Web/CSS/@media/display-mode) media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon. +> [!NOTE] +> You can selectively apply CSS to your app based on the display mode, using the [display-mode](/docs/Web/CSS/@media/display-mode) media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon. ### icons @@ -270,7 +275,8 @@ Specifies a boolean value that hints for the user agent to indicate to the user "prefer_related_applications": false ``` -> **Nota:** If omitted, the value defaults to `false`. +> [!NOTE] +> If omitted, the value defaults to `false`. ### related_applications diff --git a/files/pt-br/web/media/formats/index.md b/files/pt-br/web/media/formats/index.md index 79fbceed462aa4..21b9f37b80c0af 100644 --- a/files/pt-br/web/media/formats/index.md +++ b/files/pt-br/web/media/formats/index.md @@ -65,7 +65,8 @@ O contêiner Ogg pode também conter um áudio codificado usando o [codec FLAC]( O formato MP4 com o codec de vídeo H.264 e codec de áudio AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4. -> **Nota:** Codificação MP4 com um perfil elevado não será executado em um hardware inferior, como o Firefox OS. +> [!NOTE] +> Codificação MP4 com um perfil elevado não será executado em um hardware inferior, como o Firefox OS. O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla \[[1](http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/), [2](http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html)], Google \[[1](http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html), [2](http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html)] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a [Mozilla decidiu dar suporte para o formato](https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/), e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome. @@ -92,7 +93,8 @@ Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE: Por exemplo, [você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE](http://msopentech.com/blog/2014/01/03/streaming_video_player/). -> **Nota:** Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido. +> [!NOTE] +> Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido. ## Veja também diff --git a/files/pt-br/web/security/practical_implementation_guides/index.md b/files/pt-br/web/security/practical_implementation_guides/index.md index 66cb3d0b23465e..4a054bb763f9c9 100644 --- a/files/pt-br/web/security/practical_implementation_guides/index.md +++ b/files/pt-br/web/security/practical_implementation_guides/index.md @@ -6,7 +6,8 @@ original_slug: Web/Security/Securing_your_site Há várias coisas que você pode fazer para ajudar na segurança do seu site. Esse artigo oferece uma série de sugestões, bem como links para outros artigos fornecendo informações mais úteis. -> **Nota:** Esse artigo é um trabalho em progresso e não está nem completo nem as sugestões a seguir irão garantir que seu site será completamente seguro. +> [!NOTE] +> Esse artigo é um trabalho em progresso e não está nem completo nem as sugestões a seguir irão garantir que seu site será completamente seguro. ## Segurança da informação do usuário diff --git a/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.md b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.md index cdbf869ddeb226..b4a0e88f0d6a37 100644 --- a/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.md @@ -7,7 +7,8 @@ Firefox 3.5 introduziu suporte para uso do [SVG](/pt-BR/docs/SVG) como um compon Você pode embutir o SVG nos estilos dentro do mesmo documento, ou com um _stylesheet_ externo. -> **Nota:** Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário. +> [!NOTE] +> Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário. ## Usando SVG embutido @@ -126,7 +127,8 @@ p { Isso estabelece uma área recortada composta por um círculo e um retângulo, e atribui para ela ID "#c1". Isso é então referenciado por um estilo. Quando o estilo `target` é estabelecido desse modo, `clip-path` pode ser atribuido para qualquer outro elemento. -> **Nota:** Também você pode fazer mudanças no SVG em tempo real e ver suas alterações imediatamente afetar a renderização do HTML. Por exemplo, você pode redimensionar o círculo dentro do caminho do recorte estabelecendo o seguinte: +> [!NOTE] +> Também você pode fazer mudanças no SVG em tempo real e ver suas alterações imediatamente afetar a renderização do HTML. Por exemplo, você pode redimensionar o círculo dentro do caminho do recorte estabelecendo o seguinte: ```js function toggleRadius() { diff --git a/files/pt-br/web/svg/attribute/fill/index.md b/files/pt-br/web/svg/attribute/fill/index.md index 0cc6242dc09322..e9b7aba9941980 100644 --- a/files/pt-br/web/svg/attribute/fill/index.md +++ b/files/pt-br/web/svg/attribute/fill/index.md @@ -52,7 +52,8 @@ svg { ## altGlyph -> **Aviso:** a partir da versão SVG2, a tag {{SVGElement('altGlyph')}} está obsoleta e não deve ser utilizada. +> [!WARNING] +> A partir da versão SVG2, a tag {{SVGElement('altGlyph')}} está obsoleta e não deve ser utilizada. Para {{SVGElement('altGlyph')}}, `fill` é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo). @@ -61,7 +62,8 @@ Para {{SVGElement('altGlyph')}}, `fill` é a apresentação do atributo que defi | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## animate @@ -110,7 +112,8 @@ Para {{SVGElement('circle')}}, `fill` é o atributo de apresentação utilizado | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## ellipse @@ -121,7 +124,8 @@ Para {{SVGElement('ellipse')}}, `fill` é o atributo de apresentação utilizado | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## path @@ -132,7 +136,8 @@ Para {{SVGElement('path')}}, `fill` é um atributo de apresentação que define | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## polygon @@ -143,7 +148,8 @@ Para {{SVGElement('polygon')}}, `fill` é um atributo de apresentação que defi | Valor padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## polyline @@ -154,7 +160,8 @@ For {{SVGElement('polyline')}}, `fill` é um atributo de apresentação que defi | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## rect @@ -165,7 +172,8 @@ Para {{SVGElement('rect')}}, `fill` é o atributo de apresentação utilizado pa | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## set @@ -185,7 +193,8 @@ Para {{SVGElement('text')}}, `fill` é o atributo de apresentação utilizado pa | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## textPath @@ -196,11 +205,13 @@ For {{SVGElement('textPath')}}, `fill` é o atributo de apresentação utilizado | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## tref -> **Aviso:** a partir da versão SVG2, a tag {{SVGElement('tref')}} está obsoleta e não deve ser utilizada. +> [!WARNING] +> A partir da versão SVG2, a tag {{SVGElement('tref')}} está obsoleta e não deve ser utilizada. Para {{SVGElement('tref')}}, `fill` é o atributo de apresentação utilizado para definir a cor de um texto @@ -209,7 +220,8 @@ Para {{SVGElement('tref')}}, `fill` é o atributo de apresentação utilizado pa | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## tspan @@ -220,7 +232,8 @@ Para {{SVGElement('tspan')}}, `fill` é o atributo de apresentação utilizado p | Valor Padrão | `black` | | Animável | Sim | -> **Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. +> [!NOTE] +> Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS. ## Especificações @@ -230,4 +243,5 @@ Para {{SVGElement('tspan')}}, `fill` é o atributo de apresentação utilizado p {{Compat}} -> **Nota:** Nota: Para obter informações do uso do `context-fill` (e do `context-stroke`) de documentos HTML, consulte a documentação da propriedade não-padrão {{cssxref("-moz-context-properties")}} . +> [!NOTE] +> Para obter informações do uso do `context-fill` (e do `context-stroke`) de documentos HTML, consulte a documentação da propriedade não-padrão {{cssxref("-moz-context-properties")}} . diff --git a/files/pt-br/web/svg/attribute/index.md b/files/pt-br/web/svg/attribute/index.md index 65b7807d1d668c..7cb4ce94163782 100644 --- a/files/pt-br/web/svg/attribute/index.md +++ b/files/pt-br/web/svg/attribute/index.md @@ -392,7 +392,8 @@ slug: Web/SVG/Attribute ### Presentation attributes -> **Nota:** Note that all SVG presentation attributes can be used as CSS properties. +> [!NOTE] +> Note that all SVG presentation attributes can be used as CSS properties. {{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }} diff --git a/files/pt-br/web/svg/element/a/index.md b/files/pt-br/web/svg/element/a/index.md index c10d5f7c452151..4ca614f3001219 100644 --- a/files/pt-br/web/svg/element/a/index.md +++ b/files/pt-br/web/svg/element/a/index.md @@ -59,7 +59,8 @@ svg|a:active { {{EmbedLiveSample('Exemple', 100, 100)}} -> **Aviso:** Como esse elemento compartilha seu nome de tag com o [elemento `` do HTML](/pt-BR/docs/Web/HTML/Element/a), selecionar `a` com CSS ou [`querySelector`](/pt-BR/docs/Web/API/Document/querySelector), pode ser aplicar ao tipo errado de elemento. Experimente usar [a regra @namespace](/pt-BR/docs/Web/CSS/@namespace) para distinguir os dois. +> [!WARNING] +> Como esse elemento compartilha seu nome de tag com o [elemento `` do HTML](/pt-BR/docs/Web/HTML/Element/a), selecionar `a` com CSS ou [`querySelector`](/pt-BR/docs/Web/API/Document/querySelector), pode ser aplicar ao tipo errado de elemento. Experimente usar [a regra @namespace](/pt-BR/docs/Web/CSS/@namespace) para distinguir os dois. ## Attributes diff --git a/files/pt-br/web/svg/element/image/index.md b/files/pt-br/web/svg/element/image/index.md index c452ef94ccb980..7fb3c4372a39a9 100644 --- a/files/pt-br/web/svg/element/image/index.md +++ b/files/pt-br/web/svg/element/image/index.md @@ -11,7 +11,8 @@ The only image formats SVG software must support are [JPEG](/pt-BR/docs/Glossary SVG files displayed with `` are [treated as an image](/pt-BR/docs/Web/SVG/SVG_as_an_Image): external resources aren't loaded, [:visited](/pt-BR/docs/Web/CSS/:visited) styles [aren't applied](/pt-BR/docs/Web/CSS/Privacy_and_the_:visited_selector), and they cannot be interactive. To include dynamic SVG elements, try [\](/pt-BR/docs/Web/SVG/Element/use) with an external URL. To include SVG files and run scripts inside them, try [\](/pt-BR/docs/Web/HTML/Element/object) inside of [\](/pt-BR/docs/Web/SVG/Element/foreignObject). -> **Nota:** The HTML spec defines `` as a synonym for [\](/pt-BR/docs/Web/HTML/Element/img) while parsing HTML. This specific element and its behavior only apply inside SVG documents or [inline SVG](/pt-BR/docs/SVG_In_HTML_Introduction). +> [!NOTE] +> The HTML spec defines `` as a synonym for [\](/pt-BR/docs/Web/HTML/Element/img) while parsing HTML. This specific element and its behavior only apply inside SVG documents or [inline SVG](/pt-BR/docs/SVG_In_HTML_Introduction). ## Usage context diff --git a/files/pt-br/web/svg/element/index.md b/files/pt-br/web/svg/element/index.md index 72d74c0763000b..c547de856c67c4 100644 --- a/files/pt-br/web/svg/element/index.md +++ b/files/pt-br/web/svg/element/index.md @@ -204,7 +204,8 @@ Os desenhos e imagens SVG são criados usando uma grande variedade de elementos ## Elementos obsoletos e descontinuados -> **Aviso:** Aviso: Esses são elementos SVG antigos que foram descontinuados e não devem ser usados. Você nunca deve usá-los em novos projetos e deve susbstituí-los em projetos antigos o mais rápido possível. Eles estão listados aqui apenas para fins informativos. +> [!WARNING] +> Esses são elementos SVG antigos que foram descontinuados e não devem ser usados. Você nunca deve usá-los em novos projetos e deve susbstituí-los em projetos antigos o mais rápido possível. Eles estão listados aqui apenas para fins informativos. ### A diff --git a/files/pt-br/web/svg/element/rect/index.md b/files/pt-br/web/svg/element/rect/index.md index b5386a2ab85b07..5f9057ace66aca 100644 --- a/files/pt-br/web/svg/element/rect/index.md +++ b/files/pt-br/web/svg/element/rect/index.md @@ -51,7 +51,8 @@ svg { - : The total length of the rectangle's perimeter, in user units. _Value type_: [**\**](/docs/Web/SVG/Content_type#Number) ; _Default value_: _none_; _Animatable_: **yes** -> **Nota:** Starting with SVG2, `x`, `y`, `width`, `height`, `rx` and `ry` are _Geometry Properties_, meaning those attributes can also be used as CSS properties for that element. +> [!NOTE] +> Starting with SVG2, `x`, `y`, `width`, `height`, `rx` and `ry` are _Geometry Properties_, meaning those attributes can also be used as CSS properties for that element. ### Global attributes diff --git a/files/pt-br/web/svg/element/svg/index.md b/files/pt-br/web/svg/element/svg/index.md index 799ea80baa6305..b1d5d2d7b30a08 100644 --- a/files/pt-br/web/svg/element/svg/index.md +++ b/files/pt-br/web/svg/element/svg/index.md @@ -7,7 +7,8 @@ slug: Web/SVG/Element/svg O elemento `svg` é um contêiner que define um novo sistema de coordenadas e [janela de visualização](/pt-BR/docs/Web/SVG/Attribute/viewBox). É usado como o elemento mais externo dos documentos SVG, mas também pode ser usado para incorporar um fragmento SVG dentro de um documento SVG ou HTML. -> **Nota:** The `xmlns` attribute is only required on the outermost `svg` element of _SVG documents_. It is unnecessary for inner `svg` elements or inside HTML documents. +> [!NOTE] +> The `xmlns` attribute is only required on the outermost `svg` element of _SVG documents_. It is unnecessary for inner `svg` elements or inside HTML documents. ## Exemplo @@ -69,7 +70,8 @@ svg { - : The displayed y coordinate of the svg container. No effect on outermost `svg` elements. _Value type_: [**\**](/pt-BR/docs/Web/SVG/Content_type#Length)|[**\**](/pt-BR/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** -> **Nota:** Starting with SVG2, `x`, `y`, `width`, and `height` are _Geometry Properties_, meaning these attributes can also be used as CSS properties. +> [!NOTE] +> Starting with SVG2, `x`, `y`, `width`, and `height` are _Geometry Properties_, meaning these attributes can also be used as CSS properties. ### Global attributes diff --git a/files/pt-br/web/svg/tutorial/index.md b/files/pt-br/web/svg/tutorial/index.md index 005798009ff6cb..0be6f8c616624a 100644 --- a/files/pt-br/web/svg/tutorial/index.md +++ b/files/pt-br/web/svg/tutorial/index.md @@ -7,7 +7,8 @@ Scalable Vector Graphics (Gráficos vetoriais escaláveis), [SVG](/pt-BR/Web/SVG Este tutorial tem como objetivo explicar as partes internas de SVG acompanhada de detalhes técnicos. Se você quiser usá-la apenas para desenhar belas imagens, você pode encontrar informações mais uteis na [Página de documentação do Inkscape](http://inkscape.org/doc/). Outra boa introdução ao SVG é fornecida pelo W3C' [SVG Primer](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html). -> **Nota:** O tutorial está em um estágio inicial de desenvolvimento.Se puder, por favor ajude escrevendo um parágrafo ou dois. Pontos extras para quem escrever uma página inteira! +> [!NOTE] +> O tutorial está em um estágio inicial de desenvolvimento.Se puder, por favor ajude escrevendo um parágrafo ou dois. Pontos extras para quem escrever uma página inteira! ##### Apresentando SVG com Scratch diff --git a/files/pt-br/webassembly/c_to_wasm/index.md b/files/pt-br/webassembly/c_to_wasm/index.md index 9b616cd2d08d3c..68ae96272400c2 100644 --- a/files/pt-br/webassembly/c_to_wasm/index.md +++ b/files/pt-br/webassembly/c_to_wasm/index.md @@ -59,7 +59,8 @@ Neste ponto em seu diretório de origem, você deve ter: Agora tudo o que resta é você carregar o resultado `hello.html` em um navegador que suporte WebAssembly. Ele é ativado por padrão no Firefox 52, Chrome 57, Edge 57, Opera 44. -> **Nota:** Se você tentar abrir o arquivo HTML gerado (`hello.html`) diretamente de seu disco rígido local (por exemplo, `file://your_path/hello.html`), você terminará com uma mensagem de erro ao longo das linhas de `both async and sync fetching of the wasm failed.` Você precisa executar seu arquivo HTML por meio de um servidor HTTP (`http://`) — consulte [Como você configura um servidor de teste local](/pt-BR/docs/Learn/Common_questions/set_up_a_local_testing_server) Para maiores informações. +> [!NOTE] +> Se você tentar abrir o arquivo HTML gerado (`hello.html`) diretamente de seu disco rígido local (por exemplo, `file://your_path/hello.html`), você terminará com uma mensagem de erro ao longo das linhas de `both async and sync fetching of the wasm failed.` Você precisa executar seu arquivo HTML por meio de um servidor HTTP (`http://`) — consulte [Como você configura um servidor de teste local](/pt-BR/docs/Learn/Common_questions/set_up_a_local_testing_server) Para maiores informações. Se tudo funcionou como planejado, você deverá ver a saída "Hello world" no console do Emscripten aparecendo na página da Web e no console JavaScript do seu navegador. Parabéns, você acabou de compilar C para WebAssembly e executá-lo em seu navegador! ![image](helloworld.png) @@ -94,7 +95,8 @@ Se tudo funcionou como planejado, você deverá ver a saída "Hello world" no co 4. Agora vamos executar este exemplo. O comando acima terá gerado `hello2.html`, que terá praticamente o mesmo conteúdo do modelo com algum código de cola adicionado para carregar o wasm gerado, executá-lo etc. Abra-o em seu navegador e você verá a mesma saída do último exemplo. -> **Observação:** Você pode especificar a saída apenas do arquivo JavaScript "cola" em vez do HTML completo especificando um arquivo .js em vez de um arquivo HTML no `-o` flag, e.g. `emcc -o hello2.js hello2.c -O3`. Você poderia então construir seu HTML personalizado completamente do zero, embora esta seja uma abordagem avançada; geralmente é mais fácil usar o modelo HTML fornecido. +> [!CALLOUT] +> Você pode especificar a saída apenas do arquivo JavaScript "cola" em vez do HTML completo especificando um arquivo .js em vez de um arquivo HTML no `-o` flag, e.g. `emcc -o hello2.js hello2.c -O3`. Você poderia então construir seu HTML personalizado completamente do zero, embora esta seja uma abordagem avançada; geralmente é mais fácil usar o modelo HTML fornecido. > > - O Emscripten requer uma grande variedade de código JavaScript "cola" para lidar com alocação de memória, vazamentos de memória e uma série de outros problemas @@ -126,7 +128,8 @@ Se você tiver uma função definida em seu código C que deseja chamar conforme Por padrão, o código gerado pelo Emscripten sempre chama a função `main()` e outras funções são eliminadas como código morto. Colocando `EMSCRIPTEN_KEEPALIVE` antes que um nome de função impeça que isso aconteça. Você também precisa importar a biblioteca `emscripten.h` para usar `EMSCRIPTEN_KEEPALIVE`. - > **Nota:** Estamos incluindo os blocos `#ifdef` para que, se você estiver tentando incluir isso no código C++, o exemplo ainda funcione. Devido às regras de desmembramento de nomes C versus C++, isso seria quebrado, mas aqui estamos definindo-o para que seja tratado como uma função C externa se você estiver usando C++. + > [!NOTE] + > Estamos incluindo os blocos `#ifdef` para que, se você estiver tentando incluir isso no código C++, o exemplo ainda funcione. Devido às regras de desmembramento de nomes C versus C++, isso seria quebrado, mas aqui estamos definindo-o para que seja tratado como uma função C externa se você estiver usando C++. 2. Agora adicione `html_template/shell_minimal.html` com \{\{{ SCRIPT }}} como conteúdo neste novo diretório também, apenas por conveniência (você obviamente colocaria isso em um local central em seu ambiente de desenvolvimento real). diff --git a/files/pt-br/webassembly/concepts/index.md b/files/pt-br/webassembly/concepts/index.md index 2211d13597e2a1..68d8ddff074fa1 100644 --- a/files/pt-br/webassembly/concepts/index.md +++ b/files/pt-br/webassembly/concepts/index.md @@ -24,7 +24,8 @@ WebAssembly está sendo criado em código aberto dentro do [W3C WebAssembly Comm - Manter a segurança — WebAssembly é especificado para ser executado num ambiente seguro e controlado. Como outros códigos web, ele reforçará as mesmas políticas de origem e permissões dos browsers. - Não quebrar a web — WebAssembly foi pensado de maneira que ele seja executado em harmonia com outras tecnologias web, mantendo a compatibilidade retroativa. -> **Nota:** WebAssembly também terá usos fora dos ambientes web e JavaScript (veja [Non-web embeddings](http://webassembly.org/docs/non-web/)). +> [!NOTE] +> WebAssembly também terá usos fora dos ambientes web e JavaScript (veja [Non-web embeddings](http://webassembly.org/docs/non-web/)). ## Como o WebAssembly se encaixa na plataforma web? @@ -94,7 +95,8 @@ De maneira resumida, o processo funciona da seguinte maneira: 2. Emscripten transforma o resultado compilado do clang+LLVM em um binário .wasm 3. Por si só, o WebAssembly atualmente não pode acessar diretamente o DOM; ele só pode chamar o JavaScript, transmitindo tipos de dados primitivos de ponto flutuante e inteiro. Portanto, para acessar qualquer API da Web, o WebAssembly precisa chamar o JavaScript, que faz a chamada da API da Web. Portanto, o Emscripten cria o código de "cola" HTML e JavaScript necessário para alcançar isso. -> **Nota:** Existem planos futuros para [permitir o WebAssembly chamar APIs Web diretamente](https://github.com/WebAssembly/gc/blob/master/README.md). +> [!NOTE] +> Existem planos futuros para [permitir o WebAssembly chamar APIs Web diretamente](https://github.com/WebAssembly/gc/blob/master/README.md). O código de "cola" JavaScript não é tão simples quanto você imagina. Para começar, o Emscripten implementa bibliotecas populares de C/C++ como SDL, OpenGL, OpenAL e partes do POSIX. Essas bibliotecas são implementadas em termos de APIs da Web e, portanto, cada uma exige algum código JavaScript para conectar o WebAssembly à API da Web subjacente. diff --git a/files/pt-br/webassembly/understanding_the_text_format/index.md b/files/pt-br/webassembly/understanding_the_text_format/index.md index 6a4853d6daef1f..1264582420e661 100644 --- a/files/pt-br/webassembly/understanding_the_text_format/index.md +++ b/files/pt-br/webassembly/understanding_the_text_format/index.md @@ -7,7 +7,8 @@ slug: WebAssembly/Understanding_the_text_format Para permitir que o WebAssembly seja lido e editado por humanos, existe uma representação textual do formato binário Wasm. Este é um formulário intermediário projetado para ser exposto em editores de texto, ferramentas de desenvolvedor de navegador etc. Este artigo explica como esse formato de texto funciona, em termos de sintaxe bruta, e como ele está relacionado ao bytecode subjacente que ele representa — e os objetos wrapper que representam Wasm em JavaScript. -> **Nota:** Isso pode ser um exagero se você for um desenvolvedor da Web que deseja apenas carregar um módulo Wasm em uma página e usá-lo em seu código (consulte [Usando a API JavaScript WebAssembly](/pt-BR/docs/WebAssembly/Using_the_JavaScript_API)), mas é mais útil se, por exemplo, você deseja escrever módulos Wasm para otimizar o desempenho de sua biblioteca JavaScript ou criar seu próprio compilador WebAssembly. +> [!NOTE] +> Isso pode ser um exagero se você for um desenvolvedor da Web que deseja apenas carregar um módulo Wasm em uma página e usá-lo em seu código (consulte [Usando a API JavaScript WebAssembly](/pt-BR/docs/WebAssembly/Using_the_JavaScript_API)), mas é mais útil se, por exemplo, você deseja escrever módulos Wasm para otimizar o desempenho de sua biblioteca JavaScript ou criar seu próprio compilador WebAssembly. ## S-expressions @@ -178,7 +179,8 @@ WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => { }); ``` -> **Nota:** Você pode encontrar este exemplo no GitHub como [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Consulte também [`WebAssembly.instantiateStreaming()`](/pt-BR/docs/WebAssembly/JavaScript_interface/instantiateStreaming) para obter mais detalhes sobre a função instanciar. +> [!NOTE] +> Você pode encontrar este exemplo no GitHub como [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Consulte também [`WebAssembly.instantiateStreaming()`](/pt-BR/docs/WebAssembly/JavaScript_interface/instantiateStreaming) para obter mais detalhes sobre a função instanciar. ## Explorando fundamentos @@ -254,7 +256,8 @@ WebAssembly.instantiateStreaming(fetch("logger.wasm"), importObject).then( ); ``` -> **Nota:** Você pode encontrar este exemplo no GitHub como [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)). +> [!NOTE] +> Você pode encontrar este exemplo no GitHub como [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)). ### Declarando globais no WebAssembly @@ -334,7 +337,8 @@ Nosso módulo Wasm final se parece com isso: call $log)) ``` -> **Nota:** Acima, observe a sintaxe de ponto e vírgula dupla (`;;`) para permitir comentários em arquivos WebAssembly. +> [!NOTE] +> Acima, observe a sintaxe de ponto e vírgula dupla (`;;`) para permitir comentários em arquivos WebAssembly. Agora, a partir do JavaScript, podemos criar uma memória com 1 página e passá-la. Isso resulta em "Hi" sendo impresso no console: @@ -353,7 +357,8 @@ WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then( ); ``` -> **Nota:** Você pode encontrar a fonte completa no GitHub como [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) ([também veja ao vivo](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)). +> [!NOTE] +> Você pode encontrar a fonte completa no GitHub como [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) ([também veja ao vivo](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)). ### Tabelas WebAssembly @@ -392,7 +397,8 @@ Então, como colocamos as funções Wasm em nossa tabela? Assim como as seções - A seção `elem` pode listar qualquer subconjunto das funções em um módulo, em qualquer ordem, permitindo duplicatas. Esta é uma lista das funções que devem ser referenciadas pela tabela, na ordem em que devem ser referenciadas. - O valor `(i32.const 0)` dentro da seção `elem` é um deslocamento — isso precisa ser declarado no início da seção e especifica em qual índice na tabela as referências de função começam a ser preenchidas. Aqui especificamos 0 e um tamanho de 2 (veja acima), para que possamos preencher duas referências nos índices 0 e 1. Se quiséssemos começar a escrever nossas referências no deslocamento 1, teríamos que escrever `(i32.const 1)`, e o tamanho da tabela teria que ser 3. -> **Nota:** Os elementos não inicializados recebem um valor padrão de ativação. +> [!NOTE] +> Os elementos não inicializados recebem um valor padrão de ativação. Em JavaScript, as chamadas equivalentes para criar tal instância de tabela seriam mais ou menos assim: @@ -470,9 +476,11 @@ WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => { }); ``` -> **Nota:** Você pode encontrar este exemplo no GitHub como [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)). +> [!NOTE] +> Você pode encontrar este exemplo no GitHub como [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)). -> **Nota:** Assim como a memória, as tabelas também podem ser criadas a partir de JavaScript (consulte [`WebAssembly.Table()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table)) bem como importadas de/para outro módulo Wasm. +> [!NOTE] +> Assim como a memória, as tabelas também podem ser criadas a partir de JavaScript (consulte [`WebAssembly.Table()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table)) bem como importadas de/para outro módulo Wasm. ### Tabelas mutantes e links dinâmicos @@ -521,7 +529,8 @@ Estes funcionam da seguinte forma: 4. Na última parte da função, criamos uma constante com valor `0`, então chamamos a função neste índice 0 da tabela, que é `shared0func`, armazenado lá anteriormente pelo bloco `elem` em `shared0.wat`. 5. Quando chamado, `shared0func` carrega o `42` que armazenamos na memória usando o comando `i32.store` em `shared1.wat`. -> **Nota:** As expressões acima novamente extraem valores da pilha implicitamente, mas você pode declará-los explicitamente dentro das chamadas de comando, por exemplo: +> [!NOTE] +> As expressões acima novamente extraem valores da pilha implicitamente, mas você pode declará-los explicitamente dentro das chamadas de comando, por exemplo: > > ```wasm > (i32.store (i32.const 0) (i32.const 42)) @@ -548,7 +557,8 @@ Promise.all([ Cada um dos módulos que está sendo compilado pode importar a mesma memória e objetos de tabela e, assim, compartilhar a mesma memória linear e "espaço de endereçamento" de tabela. -> **Nota:** Você pode encontrar este exemplo no GitHub como [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)). +> [!NOTE] +> Você pode encontrar este exemplo no GitHub como [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)). ## Operações de memória em massa @@ -564,7 +574,8 @@ As novas operações são: - `table.copy`: Copia de uma região de uma tabela para outra. - `table.init`: Copia uma região de um segmento de elemento. -> **Nota:** você pode encontrar mais informações na proposta [Operações de memória em massa e inicialização de segmento condicional](https://github.com/WebAssembly/bulk-memory-operations/blob/master/proposals/bulk-memory-operations/Overview.md). +> [!NOTE] +> Você pode encontrar mais informações na proposta [Operações de memória em massa e inicialização de segmento condicional](https://github.com/WebAssembly/bulk-memory-operations/blob/master/proposals/bulk-memory-operations/Overview.md). ## Tipos @@ -588,7 +599,8 @@ A [proposta de tipos de referência](https://github.com/WebAssembly/reference-ty - Um novo tipo, `externref`, que pode conter _qualquer_ valor JavaScript, por exemplo, strings, referências DOM, objetos, etc. `externref` é opaco do ponto de vista do WebAssembly — um módulo Wasm não pode acessar e manipular esses valores e, em vez disso, pode apenas recebê-los e passá-los de volta. Mas isso é muito útil para permitir que os módulos Wasm chamem funções JavaScript, APIs DOM, etc., e geralmente para preparar o caminho para uma interoperabilidade mais fácil com o ambiente host. `externref` pode ser usado para tipos de valor e elementos de tabela. - Uma série de novas instruções que permitem aos módulos Wasm manipular diretamente [tabelas WebAssembly](#webassembly_tables), em vez de ter que fazer isso por meio da API JavaScript. -> **Nota:** A documentação [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) contém algumas informações úteis sobre como aproveitar `externref` do Rust. +> [!NOTE] +> A documentação [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) contém algumas informações úteis sobre como aproveitar `externref` do Rust. ## WebAssembly de vários valores @@ -645,13 +657,15 @@ No formato de texto, você pode criar uma memória compartilhada usando a palavr Ao contrário das memórias não compartilhadas, as memórias compartilhadas devem especificar um tamanho "máximo", tanto no construtor da API JavaScript quanto no formato de texto Wasm. -> **Nota:** Você pode encontrar muito mais detalhes na [Proposta de encadeamento para WebAssembly](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md). +> [!NOTE] +> Você pode encontrar muito mais detalhes na [Proposta de encadeamento para WebAssembly](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md). ### Acessos à memória atômica Várias novas instruções Wasm foram adicionadas e podem ser usadas para implementar recursos de nível superior, como mutexes, variáveis de condição etc. Estas instruções são permitidas em memórias não compartilhadas a partir do Firefox 80. -> **Nota:** A [página de suporte do Emscripten Pthreads](https://emscripten.org/docs/porting/pthreads.html) mostra como aproveitar essa nova funcionalidade do Emscripten. +> [!NOTE] +> A [página de suporte do Emscripten Pthreads](https://emscripten.org/docs/porting/pthreads.html) mostra como aproveitar essa nova funcionalidade do Emscripten. ## Resumo diff --git a/files/pt-br/webassembly/using_the_javascript_api/index.md b/files/pt-br/webassembly/using_the_javascript_api/index.md index 39e7719987aded..66626a0c091624 100644 --- a/files/pt-br/webassembly/using_the_javascript_api/index.md +++ b/files/pt-br/webassembly/using_the_javascript_api/index.md @@ -7,13 +7,15 @@ slug: WebAssembly/Using_the_JavaScript_API Se você já [compilou um módulo de outra linguagem usando ferramentas como Emscripten](/pt-BR/docs/WebAssembly/C_to_Wasm) ou [carregou e executou o código você mesmo](/pt-BR/docs/WebAssembly/Loading_and_running), a próxima etapa é aprender mais sobre como usar os outros recursos da API JavaScript WebAssembly. Este artigo ensina o que você precisa saber. -> **Nota:** Se você não estiver familiarizado com os conceitos básicos mencionados neste artigo e precisar de mais explicações, leia [Conceitos do WebAssembly](/pt-BR/docs/WebAssembly/Concepts) primeiro e depois volte. +> [!NOTE] +> Se você não estiver familiarizado com os conceitos básicos mencionados neste artigo e precisar de mais explicações, leia [Conceitos do WebAssembly](/pt-BR/docs/WebAssembly/Concepts) primeiro e depois volte. ## Alguns exemplos simples Vamos percorrer alguns exemplos que explicam como usar a API WebAssembly JavaScript e como usá-la para carregar um módulo Wasm em uma página da web. -> **Nota:** você pode encontrar o código de exemplo em nosso [webassembly-examples](https://github.com/mdn/webassembly-examples) repositório do GitHub. +> [!NOTE] +> Você pode encontrar o código de exemplo em nosso [webassembly-examples](https://github.com/mdn/webassembly-examples) repositório do GitHub. ### Preparando o exemplo @@ -53,7 +55,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then( O resultado disso é que chamamos nossa função WebAssembly exportada `exported_func`, que por sua vez chama nossa função JavaScript importada `imported_func`, que registra o valor fornecido dentro da instância WebAssembly (42) no console. Se você salvar seu código de exemplo agora e carregá-lo em um navegador compatível com WebAssembly, verá isso em ação! -> **Nota:** Este é um exemplo complicado e prolixo que alcança muito pouco, mas serve para ilustrar o que é possível — usar código WebAssembly juntamente com JavaScript em seus aplicativos da web. Como dissemos em outro lugar, o WebAssembly não pretende substituir o JavaScript; os dois, em vez disso, podem trabalhar juntos aproveitando os pontos fortes um do outro. +> [!NOTE] +> Este é um exemplo complicado e prolixo que alcança muito pouco, mas serve para ilustrar o que é possível — usar código WebAssembly juntamente com JavaScript em seus aplicativos da web. Como dissemos em outro lugar, o WebAssembly não pretende substituir o JavaScript; os dois, em vez disso, podem trabalhar juntos aproveitando os pontos fortes um do outro. ### Carregando nosso módulo Wasm sem streaming @@ -133,7 +136,8 @@ Vamos tornar as afirmações acima mais claras observando um exemplo de memória 1. faça uma cópia local de `memory.wasm` no mesmo diretório de antes. - > **Nota:** você pode ver a representação de texto do módulo em [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). + > [!NOTE] + > Você pode ver a representação de texto do módulo em [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). 2. Volte para seu arquivo de exemplo `memory.html` e busque, compile e instancie seu módulo Wasm como antes — adicione o seguinte ao final de seu script: @@ -165,7 +169,8 @@ As importações de memória funcionam exatamente como as importações de funç - Eles permitem que o JavaScript busque e crie o conteúdo inicial da memória antes ou simultaneamente com a compilação do módulo. - Eles permitem que um único objeto de memória seja importado por várias instâncias de módulo, o que é um bloco de construção crítico para implementar a vinculação dinâmica no WebAssembly. -> **Nota:** Você pode encontrar nossa demonstração completa em [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) . +> [!NOTE] +> Você pode encontrar nossa demonstração completa em [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) . ## Tabelas @@ -185,7 +190,8 @@ Vejamos um exemplo de tabela simples — um módulo WebAssembly que cria e expor 1. Faça uma cópia local de `table.wasm` em um novo diretório. - > **Nota:** você pode ver a representação de texto do módulo em [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). + > [!NOTE] + > Você pode ver a representação de texto do módulo em [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). 2. Crie uma nova cópia do nosso [modelo HTML](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) no mesmo diretório e chame-o de `table.html`. 3. Como antes, busque, compile e instancie seu módulo Wasm — adicione o seguinte a um elemento {{htmlelement("script")}} na parte inferior do corpo do HTML: @@ -206,7 +212,8 @@ Vejamos um exemplo de tabela simples — um módulo WebAssembly que cria e expor Este código acessa cada referência de função armazenada na tabela por sua vez e as instâncias para imprimir os valores que contêm no console — observe como cada referência de função é recuperada com um [`Table.prototype.get()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table/get), adicionamos um conjunto extra de parênteses no final para realmente invocar a função. -> **Nota:** você pode encontrar nossa demonstração completa em [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)). +> [!NOTE] +> Você pode encontrar nossa demonstração completa em [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)). ## Globais @@ -261,7 +268,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then( ); ``` -> **Nota:** Você pode ver o exemplo [executando ao vivo no GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); consulte também o [código-fonte](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). +> [!NOTE] +> Você pode ver o exemplo [executando ao vivo no GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); consulte também o [código-fonte](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). ## Multiplicidade