diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.md b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.md index 65dd9f953f1052..8c2ea73e8ac367 100644 --- a/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.md +++ b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.md @@ -342,7 +342,7 @@ async function makeResult(items) { Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada `await` vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await. -Vejamos esses dois exemplos — [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (veja [código-fonte](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) e [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (veja [código-fonte](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada [`setTimeout()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout): +Vejamos esses dois exemplos — [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (veja [código-fonte](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) e [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (veja [código-fonte](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada [`setTimeout()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout): ```js function timeoutPromise(interval) { diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md index 169fb37234dfd3..aae3fdd89358e7 100644 --- a/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md +++ b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md @@ -29,11 +29,11 @@ Por um longo tempo, a plataforma web tem oferecido à programadores JavaScript u Essas funções são: -- [`setTimeout()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) +- [`setTimeout()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) - : Executa um bloco específico uma vez depois de um determinado tempo -- [`setInterval()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) +- [`setInterval()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) - : Executa um bloco específico repetidamente com um intervalo fixo entre cada chamada. -- [`requestAnimationFrame()`](/en-US/docs/Web/API/window/requestAnimationFrame) +- [`requestAnimationFrame()`](/pt-BR/docs/Web/API/window/requestAnimationFrame) - : Uma versão moderna de `setInterval()`. Ela executa um bloc de código específico antes do navegador renderizar a tela novamento, permitindo que seja executada em uma taxa de quadros adequada, independentemente do ambiente em que está sendo executado. O código executado por estas funções é executado na main thread (depois do dado intervalo). @@ -44,7 +44,7 @@ De qualquer forma, essas funções são usadas para executar animações constan ## setTimeout() -Como foi dito anteriormente, o [`setTimeout()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros: +Como foi dito anteriormente, o [`setTimeout()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros: - Uma função a ser executada, ou uma referência de uma função definida em outro lugar. - Um número representando o intervalo de tempo em milissegundos (1000 milissegundos equivalem a 1 segundo) para esperar antes de executar o código. Se você especificar um valor de 0 (ou simplesmente omitir o valor), a função será executada assim que possível (mas não imediatamente). @@ -102,7 +102,7 @@ let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe'); ### Cancelando timeouts -Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando [`clearTimeout()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), passando para o identificador a chamada `setTimeout()` como um parâmetreo. então para cancelar o timeout acima, você fará isso: +Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando [`clearTimeout()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), passando para o identificador a chamada `setTimeout()` como um parâmetreo. então para cancelar o timeout acima, você fará isso: ```js clearTimeout(myGreeting); @@ -114,9 +114,9 @@ clearTimeout(myGreeting); `setTimeout()` funciona perfeitamento quando você precisa executar algum código depois de um período de tempo. Mas o que acontece quando voc\~e precisa executar o código de novo e de novo — por exemplo, no caso de uma animação? -É aí que o [`setInterval()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) entra. Ele funciona de uma maneira muito similar à `setTimeout()`, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de `setInterval()`. +É aí que o [`setInterval()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) entra. Ele funciona de uma maneira muito similar à `setTimeout()`, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de `setInterval()`. -Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto [`Date()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), tira uma string de tempo usando [`toLocaleTimeString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando `setInterval()`, criando o efeito de um relógio digital que é atualizado uma vez por segundo ([veja aqui](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), e também [veja o código](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)): +Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto [`Date()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date), tira uma string de tempo usando [`toLocaleTimeString()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando `setInterval()`, criando o efeito de um relógio digital que é atualizado uma vez por segundo ([veja aqui](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), e também [veja o código](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)): ```js function displayTime() { @@ -132,7 +132,7 @@ Assim como o `setTimeout()`, o `setInterval()` também retorna um valor identifi ### Cancelando intervalos -`setInterval()` continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por `setInterval()` para a função [`clearInterval()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval): +`setInterval()` continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por `setInterval()` para a função [`clearInterval()`](/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval): ```js const myInterval = setInterval(myFunction, 2000); @@ -234,7 +234,7 @@ Mas mesmo assim, você deve usar o `clearTimeout()` para entradas `setTimeout()` ## requestAnimationFrame() -[`requestAnimationFrame()`](/en-US/docs/Web/API/window/requestAnimationFrame) é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de `setInterval()` — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada. +[`requestAnimationFrame()`](/pt-BR/docs/Web/API/window/requestAnimationFrame) é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de `setInterval()` — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada. Ela foi criada em resposta à problemas ocorridos com `setInterval()`, que por exemplo não roda em uma taxa de quadros otimizada para o dispositivo, e às vezes diminui os frames, continua a rodar mesmo se a guia não esiver ativa ou se a animação for rolada para fora da página, etc. @@ -592,7 +592,7 @@ Let's work through this: 1. First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container. 2. Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win. - 3. Attach a [`keydown`](/en-US/docs/Web/API/Document/keydown_event) event listener to the document. When any button is pressed down, the `keyHandler()` function is run. + 3. Attach a [`keydown`](/pt-BR/docs/Web/API/Document/keydown_event) event listener to the document. When any button is pressed down, the `keyHandler()` function is run. 4. Inside `keyHandler()`, the code includes the event object as a parameter (represented by `e`) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions. 5. Log `e.key` to the console, which is a useful way of finding out the `key` value of different keys you are pressing. 6. When `e.key` is "a", display a message to say that Player 1 won, and when `e.key` is "l", display a message to say Player 2 won. (**Note:** This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus diff --git a/files/pt-br/conflicting/learn/javascript/objects/classes_in_javascript/index.md b/files/pt-br/conflicting/learn/javascript/objects/classes_in_javascript/index.md index 939d0d8feafa0a..9790699d3020bc 100644 --- a/files/pt-br/conflicting/learn/javascript/objects/classes_in_javascript/index.md +++ b/files/pt-br/conflicting/learn/javascript/objects/classes_in_javascript/index.md @@ -15,12 +15,12 @@ Com o básico fora do caminho, agora vamos nos concentrar no JavaScript orientad Alfabetização básica em informática, um entendimento básico de HTML e CSS, familiaridade com o básico do JavaScript (consulte - Primeiros passos + Primeiros passos e - Blocos de construção) e noções básicas do OOJS (consulte - Introdução aos objetos). @@ -235,7 +235,7 @@ Isso faz sentido, mas existem outras maneiras — queremos familiarizá-lo com e ### O construtor Object() -Primeiro de tudo, você pode usar o construtor [`Object()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio. +Primeiro de tudo, você pode usar o construtor [`Object()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object) para criar um novo objeto. Sim, até objetos genéricos possuem um construtor, o que gera um objeto vazio. 1. Tente inserir isso no console JavaScript do seu navegador: @@ -269,7 +269,7 @@ Primeiro de tudo, você pode usar o construtor [`Object()`](/en-US/docs/Web/Java Os construtores podem ajudá-lo a fornecer seu pedido de código — você pode criar construtores em um único local e, em seguida, criar instâncias conforme necessário, e fica claro de onde eles vieram. -No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado [`create()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente. +No entanto, algumas pessoas preferem criar instâncias de objeto sem primeiro criar construtores, especialmente se estiverem criando apenas algumas instâncias de um objeto. JavaScript tem um método embutido chamado [`create()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/create) que permite que você faça isso. Com ele, você pode criar um novo objeto com base em qualquer objeto existente. 1. Com o exercício concluído das seções anteriores carregadas no navegador, tente isso no seu console JavaScript: diff --git a/files/pt-br/conflicting/mdn/writing_guidelines/page_structures_978c99f4f82eae196d51ce675e5181c7/index.md b/files/pt-br/conflicting/mdn/writing_guidelines/page_structures_978c99f4f82eae196d51ce675e5181c7/index.md index c236fc66a5cefb..03827166eebc46 100644 --- a/files/pt-br/conflicting/mdn/writing_guidelines/page_structures_978c99f4f82eae196d51ce675e5181c7/index.md +++ b/files/pt-br/conflicting/mdn/writing_guidelines/page_structures_978c99f4f82eae196d51ce675e5181c7/index.md @@ -7,13 +7,13 @@ original_slug: MDN/Structures/Macros {{MDNSidebar}} -The [Kuma](/pt-BR/docs/Project:MDN/Kuma) platform on which MDN runs provides a powerful macro system, [KumaScript](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/en-US/docs/Project:MDN/Kuma/KumaScript_guide"), 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. +The [Kuma](/pt-BR/docs/Project:MDN/Kuma) platform on which MDN runs provides a powerful macro system, [KumaScript](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/pt-BR/docs/Project:MDN/Kuma/KumaScript_guide"), 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. -The [KumaScript guide](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/en-US/docs/Project:MDN/Kuma/KumaScript_guide") provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. +The [KumaScript guide](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/pt-BR/docs/Project:MDN/Kuma/KumaScript_guide") provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. ## Como as macros são implementadas -Macros on MDN are implemented using server-executed [JavaScript](/pt-BR/docs/Web/JavaScript) code, interpreted using [Node.js](https://nodejs.org/en/). 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 [KumaScript guide](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/en-US/docs/Project:MDN/Kuma/KumaScript_guide"). +Macros on MDN are implemented using server-executed [JavaScript](/pt-BR/docs/Web/JavaScript) code, interpreted using [Node.js](https://nodejs.org/en/). 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 [KumaScript guide](/pt-BR/docs/MDN/Contribute/Tools/KumaScript "/pt-BR/docs/Project:MDN/Kuma/KumaScript_guide"). ## Using a macro in content @@ -37,4 +37,4 @@ Macros are heavily cached; for any set of input values (both parameters and envi 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. -You can read up on our most commonly-used macros on the [Commonly-used macros](/pt-BR/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros "/en-US/docs/Project:MDN/Contributing/Custom_macros") page; also, there's a [complete list of all macros](/pt-BR/docs/templates) here. Most macros have documentation built into them, as comments at the top. +You can read up on our most commonly-used macros on the [Commonly-used macros](/pt-BR/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros "/pt-BR/docs/Project:MDN/Contributing/Custom_macros") page; also, there's a [complete list of all macros](/pt-BR/docs/templates) here. Most macros have documentation built into them, as comments at the top. diff --git a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md index 235ab7dc9a1b45..60cfa78f5e0f03 100644 --- a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md +++ b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md @@ -39,7 +39,7 @@ animationEvent.initAnimationEvent(typeArg, canBubbleArg, cancelableArg, animatio - `animationNameArg` - : Um {{domxref("DOMString")}} contendo o valor do{{cssxref("animation-name")}} propriedade CSS associada com a transição. - `elapsedTimeArg` - - : Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um `"animationstart"` evento, `elapsedTime` é `0.0` a não ser que haja um valor negativo para [`animation-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay "The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element."), nesse caso o evento irá terminar com `elapsedTime` contendo `(-1 * delay)`. + - : Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um `"animationstart"` evento, `elapsedTime` é `0.0` a não ser que haja um valor negativo para [`animation-delay`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation-delay "The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element."), nesse caso o evento irá terminar com `elapsedTime` contendo `(-1 * delay)`. ## Especificações diff --git a/files/pt-br/conflicting/web/api/element/keyup_event_c3958d9a752bb3f2d72ac974b4e226ea/index.md b/files/pt-br/conflicting/web/api/element/keyup_event_c3958d9a752bb3f2d72ac974b4e226ea/index.md index 19890a32cdb646..f922e56682e6c0 100644 --- a/files/pt-br/conflicting/web/api/element/keyup_event_c3958d9a752bb3f2d72ac974b4e226ea/index.md +++ b/files/pt-br/conflicting/web/api/element/keyup_event_c3958d9a752bb3f2d72ac974b4e226ea/index.md @@ -33,7 +33,7 @@ O evento **`keyup`** é acionado quando a tecla é liberada. Os eventos {{domxref("Document/keydown_event", "keydown")}} e `keyup` fornecem um código indicando quando a tecla é pressionada, enquanto o {{domxref("Document/keypress_event", "keypress")}} indica quando um _character_ é inserido. Por exemplo, a letra minúscula "a", sera reportado como 65 por `keydown` e `keyup`, mas é 95 por `keypress`. Uma letra maiúscula é reportado como 65 por todos os eventos. -> **Nota:** Se você está procurando por uma maneira de reagir a mudanças no valor de um input, você deve usar o [`input` event](/en-US/docs/Web/API/HTMLElement/input_event). Algumas mudanças não são detectaveis por `keyup`, por exemplo, colar um texto de um contexto no input de texto. +> **Nota:** Se você está procurando por uma maneira de reagir a mudanças no valor de um input, você deve usar o [`input` event](/pt-BR/docs/Web/API/HTMLElement/input_event). Algumas mudanças não são detectaveis por `keyup`, por exemplo, colar um texto de um contexto no input de texto. ## Exemplos diff --git a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md index 2dfeae000b87f2..34a04d7b0958d6 100644 --- a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md +++ b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md @@ -13,9 +13,9 @@ _A interface `PositionOptions` não herda_ **qualquer propriedade**. - {{domxref("PositionOptions.enableHighAccuracy")}} - : É um {{domxref("Boolean")}} que indica se a aplicação deve receber os melhores (mais exatos) resultados possíveis. Se o valor for `true` e o dispositivo puder disponibilizar uma posição mais exata, ele o fará. Note que isto pode resultar em respostas mais lentas ou aumentar o consumo de bateria. (GPS em um dispositivo mobile). Se o valor for `false`, o dispositivo toma a liberdade de salvar os recursos respondendo mais rapidamente e/ou utilizando menos bateria. Default: `false` - {{domxref("PositionOptions.timeout")}} - - : É um valor `long` positivo que representa o tamanho máximo do tempo (em milissegundos) que o dispositivo deve levar para retornar uma posição. O valor default é [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity), o que significa que `getCurrentPosition()` não terá retorno até que a posição esteja disponível. + - : É um valor `long` positivo que representa o tamanho máximo do tempo (em milissegundos) que o dispositivo deve levar para retornar uma posição. O valor default é [`Infinity`](/pt-BR/docs/JavaScript/Reference/Global_Objects/Infinity), o que significa que `getCurrentPosition()` não terá retorno até que a posição esteja disponível. - {{domxref("PositionOptions.maximumAge")}} - - : É um valor `long` positivo indicando o valor máximo em milissegundos de uma possível posição em cache aceitável para retornar. Se o valor for `0`, significa que o dispositivo não deve utilizar uma posição em cache e deve tentar obter a posição atual real. Se o valor for [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) o dispositivo deve retornar uma posição em cache, independente de seu tempo de expiração. Default: 0. + - : É um valor `long` positivo indicando o valor máximo em milissegundos de uma possível posição em cache aceitável para retornar. Se o valor for `0`, significa que o dispositivo não deve utilizar uma posição em cache e deve tentar obter a posição atual real. Se o valor for [`Infinity`](/pt-BR/docs/JavaScript/Reference/Global_Objects/Infinity) o dispositivo deve retornar uma posição em cache, independente de seu tempo de expiração. Default: 0. ## Métodos diff --git a/files/pt-br/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/pt-br/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md index 6e76214a8414ec..a5db826d2cbde7 100644 --- a/files/pt-br/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/pt-br/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -416,7 +416,7 @@ Employee.prototype.specialty = "none"; Now the value of the `jane` object's `specialty` property is "none". -Another way of inheriting is by using the [`call()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call "en-US/docs/JavaScript/Reference/Global Objects/Function/call") / [`apply()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/apply "en-US/docs/JavaScript/Reference/Global Objects/Function/apply") methods. Below are equivalent: +Another way of inheriting is by using the [`call()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/call "en-US/docs/JavaScript/Reference/Global Objects/Function/call") / [`apply()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/apply "en-US/docs/JavaScript/Reference/Global Objects/Function/apply") methods. Below are equivalent: ```js function Engineer (name, projs, mach) { diff --git a/files/pt-br/conflicting/web/javascript/javascript_technologies_overview/index.md b/files/pt-br/conflicting/web/javascript/javascript_technologies_overview/index.md index 69b5cb18598a29..5ba4578a2bc3cc 100644 --- a/files/pt-br/conflicting/web/javascript/javascript_technologies_overview/index.md +++ b/files/pt-br/conflicting/web/javascript/javascript_technologies_overview/index.md @@ -106,7 +106,7 @@ original_slug: Web/JavaScript/Language_Resources Junho 2004 - ECMAScript for XML (E4X)ECMAScript for XML (E4X).
Veja também a Dezembro de 2005 - ECMAScript para XML (E4X). + ECMAScript para XML (E4X). diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md index c5ac890edd73bb..5f9153ecb2824b 100644 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md +++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md @@ -21,7 +21,7 @@ Passando [`null`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null) para ## Veja também -- [String](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String "/en-US/docs/Web/API/DOMString") +- [String](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String "/pt-BR/docs/Web/API/DOMString") - {{domxref("USVString")}} - {{domxref("CSSOMString")}} - [`StringView` – a C-like representation of strings based on typed arrays](/pt-BR/docs/Web/JavaScript/Typed_arrays/String_view) diff --git a/files/pt-br/glossary/block/css/index.md b/files/pt-br/glossary/block/css/index.md index 6a367a0979ed74..7dabc74210c698 100644 --- a/files/pt-br/glossary/block/css/index.md +++ b/files/pt-br/glossary/block/css/index.md @@ -13,4 +13,4 @@ Usando a propriedade {{cssxref ("display")}} você pode alterar a forma como um - [Modelo de formatação visual](/pt-BR/docs/Web/Guide/CSS/Visual_formatting_model) -{{QuickLinksWithSubpages("/en-US/docs/Glossary")}} +{{QuickLinksWithSubpages("/pt-BR/docs/Glossary")}} diff --git a/files/pt-br/glossary/cors/index.md b/files/pt-br/glossary/cors/index.md index de0f4f266d2456..f135926bc0d774 100644 --- a/files/pt-br/glossary/cors/index.md +++ b/files/pt-br/glossary/cors/index.md @@ -40,4 +40,4 @@ A [same-origin security policy](/pt-BR/docs/Web/Security/Same-origin_policy) pro - [Especificação Fetch](https://fetch.spec.whatwg.org) -{{QuickLinksWithSubpages("/en-US/docs/Glossary")}} +{{QuickLinksWithSubpages("/pt-BR/docs/Glossary")}} diff --git a/files/pt-br/glossary/origin/index.md b/files/pt-br/glossary/origin/index.md index a5ff9c564aacab..bba92d1be95c8d 100644 --- a/files/pt-br/glossary/origin/index.md +++ b/files/pt-br/glossary/origin/index.md @@ -31,4 +31,4 @@ Algumas operações são restritas para conteúdos de mesma origem, e essa restr Veja [Same-origin policy](/pt-BR/docs/Web/Security/Same-origin_policy) para mais informações. -{{QuickLinksWithSubpages("/en-US/docs/Glossary")}} +{{QuickLinksWithSubpages("/pt-BR/docs/Glossary")}} diff --git a/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.md b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.md index d631b0d4a60c23..43258cf1b11f64 100644 --- a/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.md +++ b/files/pt-br/learn/accessibility/accessibility_troubleshooting/index.md @@ -15,7 +15,7 @@ Na avaliação deste módulo, apresentamos a você um site simples com vários p Conhecimento básico de informática, entendimento básico de HTML, CSS e Javascript, uma compreesão dos - artigos anteriores deste curso. diff --git a/files/pt-br/learn/accessibility/html/index.md b/files/pt-br/learn/accessibility/html/index.md index 82695b9737d041..998ad4c75ea38c 100644 --- a/files/pt-br/learn/accessibility/html/index.md +++ b/files/pt-br/learn/accessibility/html/index.md @@ -17,7 +17,7 @@ Uma grande parte do conteúdo presente na internet pode se tornar acessível ape Introdução ao HTML), e entendimento do - que é acessibilidade.

@@ -351,7 +351,7 @@ document.onkeydown = function(e) { }; ``` -Aqui nós adicionamos um "ouvinte" (listener) ao objeto de documento (`document`) para detectar quando um botão foi pressionado no teclado. Verificamos qual botão foi pressionado por meio da propriedade [`keyCode`](/en-US/docs/Web/API/KeyboardEvent/keyCode) do objeto de evento; se for o código que corresponde a Enter/Return, executamos a função armazenada no manipulador `onclick` do botão usando `document.activeElement.click()`. [`activeElement`](/en-US/docs/Web/API/Document/activeElement) nos dá o elemento que está atualmente focado na página. +Aqui nós adicionamos um "ouvinte" (listener) ao objeto de documento (`document`) para detectar quando um botão foi pressionado no teclado. Verificamos qual botão foi pressionado por meio da propriedade [`keyCode`](/pt-BR/docs/Web/API/KeyboardEvent/keyCode) do objeto de evento; se for o código que corresponde a Enter/Return, executamos a função armazenada no manipulador `onclick` do botão usando `document.activeElement.click()`. [`activeElement`](/pt-BR/docs/Web/API/Document/activeElement) nos dá o elemento que está atualmente focado na página. Isso acrescenta um monte de problemas extras para construir a funcionalidade de volta. E não deveríamos ter outros problemas com isso. **É sempre melhor apenas usar o elemento certo.** diff --git a/files/pt-br/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/pt-br/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md index d5ec1c0980c9c9..05c330fe6f84ab 100644 --- a/files/pt-br/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md +++ b/files/pt-br/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md @@ -15,7 +15,7 @@ Neste artigo, veremos o que são hiperlinks e por que eles são importantes. como a Internet funciona e estar familiarizado com a diferença entre uma página da web, um site, um servidor da web e um mecanismo de pesquisaworking with files, HTML basics (study - Introduction to HTML), and an idea of how CSS works (study - CSS first steps.) + CSS first steps.) diff --git a/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md index 0c184c444a1750..80f9a93278325e 100644 --- a/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/pt-br/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -21,10 +21,10 @@ Como você sabe de seu estudo de HTML, os elementos podem ter atributos que forn href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files" >working with files, HTML basics (study - Introduction to HTML), and an idea of how CSS works (study - CSS first steps.) + CSS first steps.) diff --git a/files/pt-br/learn/css/building_blocks/selectors/index.md b/files/pt-br/learn/css/building_blocks/selectors/index.md index de44c10ef120ce..95c355aaf474f6 100644 --- a/files/pt-br/learn/css/building_blocks/selectors/index.md +++ b/files/pt-br/learn/css/building_blocks/selectors/index.md @@ -22,12 +22,12 @@ Em {{Glossary("CSS")}}, os seletores são usados para direcionar os elementos {{ >trabalhar com arquivos , conceitos básicos de HTML (estude Introdução ao HTML ) e uma ideia de como o CSS funciona (estude os primeiros passos do CSS ). diff --git a/files/pt-br/learn/css/building_blocks/the_box_model/index.md b/files/pt-br/learn/css/building_blocks/the_box_model/index.md index 2e961e882da3d3..16ea2582cbee9b 100644 --- a/files/pt-br/learn/css/building_blocks/the_box_model/index.md +++ b/files/pt-br/learn/css/building_blocks/the_box_model/index.md @@ -25,7 +25,7 @@ Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para Introdução ao HTML), e uma idéia de como o CSS funciona (ensinado em - CSS primeiros passos.) + CSS primeiros passos.) @@ -64,15 +64,15 @@ The type of box applied to an element is defined by {{cssxref("display")}} prope ## Além disto: Tipos de exibição ( display ) internos e externos -Nesse ponto, é melhor também explicar os tipos de exibição interna ( **inner** ) e externa ( **outer )**. Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha. +Nesse ponto, é melhor também explicar os tipos de exibição interna ( **inner** ) e externa ( **outer** ). Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha. -Caixas possuem também um tipo de display _inner_, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( **[normal flow](/pt-BR/docs/Learn/CSS/CSS_layout/Normal_Flow) **), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima). +Caixas possuem também um tipo de display _inner_, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( **[normal flow](/pt-BR/docs/Learn/CSS/CSS_layout/Normal_Flow)** ), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima). We can, however, change the inner display type by using `display` values like `flex`. If we set `display: flex;` on an element, the outer display type is `block`, but the inner display type is changed to `flex`. Any direct children of this box will become flex items and will be laid out according to the rules set out in the [Flexbox](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox) spec, which you'll learn about later on. > **Nota:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to [Block and Inline Layout](/pt-BR/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). -When you move on to learn about CSS Layout in more detail, you will encounter `flex`, and various other inner values that your boxes can have, for example [`grid`](/en-US/docs/Learn/CSS/CSS_layout/Grids). +When you move on to learn about CSS Layout in more detail, you will encounter `flex`, and various other inner values that your boxes can have, for example [`grid`](/pt-BR/docs/Learn/CSS/CSS_layout/Grids). Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as _normal flow_, because without any other instruction, our boxes lay out as block or inline boxes. diff --git a/files/pt-br/learn/css/css_layout/flexbox/index.md b/files/pt-br/learn/css/css_layout/flexbox/index.md index de3455b10b543d..8bda9fee4c9113 100644 --- a/files/pt-br/learn/css/css_layout/flexbox/index.md +++ b/files/pt-br/learn/css/css_layout/flexbox/index.md @@ -13,10 +13,10 @@ Uma nova tecnologia, mas com suporte bastante difundido entre navegadores, o Fle Pré-requisitos: HTML básico (estude - Introdução a HTML), e uma ideia de como CSS funciona (estude - Introdução a CSSIntrodução a CSS.) diff --git a/files/pt-br/learn/css/css_layout/introduction/index.md b/files/pt-br/learn/css/css_layout/introduction/index.md index 97b91ee6d26a18..0c77a25cd1b71a 100644 --- a/files/pt-br/learn/css/css_layout/introduction/index.md +++ b/files/pt-br/learn/css/css_layout/introduction/index.md @@ -14,10 +14,10 @@ This article will recap some of the CSS layout features we've already touched up Prerequisites: The basics of HTML (study - Introduction to HTML), and an idea of How CSS works (study - Introduction to CSS.) diff --git a/files/pt-br/learn/css/css_layout/multiple-column_layout/index.md b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.md index 427722472303f7..a97b50e0c4ae12 100644 --- a/files/pt-br/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.md @@ -14,10 +14,10 @@ A especificação de layout de várias colunas fornece um método de disposiçã Pré requisitos: HTML basico (estude - Introduction to HTML) e uma ideia de como CSS funciona (estude - Introduction to CSS). diff --git a/files/pt-br/learn/css/css_layout/normal_flow/index.md b/files/pt-br/learn/css/css_layout/normal_flow/index.md index 259b430154d3f4..7430712502ffe5 100644 --- a/files/pt-br/learn/css/css_layout/normal_flow/index.md +++ b/files/pt-br/learn/css/css_layout/normal_flow/index.md @@ -16,10 +16,10 @@ Este artigo aborda o _Fluxo Normal_ de alinhamento e acomodação do conteúdo d Prerrequisitos: Introdução ao HTML (study - Introduction to HTML), e uma noção de como o CSS funciona (study - Introduction to CSS.) diff --git a/files/pt-br/learn/css/css_layout/positioning/index.md b/files/pt-br/learn/css/css_layout/positioning/index.md index f43c13020ac73e..7ca3f0ac9cab27 100644 --- a/files/pt-br/learn/css/css_layout/positioning/index.md +++ b/files/pt-br/learn/css/css_layout/positioning/index.md @@ -13,10 +13,10 @@ Positioning allows you to take elements out of the normal document layout flow, Prerequisites: HTML basics (study - Introduction to HTML), and an idea of How CSS works (study - Introduction to CSS.) diff --git a/files/pt-br/learn/css/css_layout/responsive_design/index.md b/files/pt-br/learn/css/css_layout/responsive_design/index.md index 918f78de5b1d23..0b216e8879fd49 100644 --- a/files/pt-br/learn/css/css_layout/responsive_design/index.md +++ b/files/pt-br/learn/css/css_layout/responsive_design/index.md @@ -13,11 +13,11 @@ Nos primórdios do web design, páginas eram criadas para serem visualizadas em Prerrequisitos: HTML básico (estude - Introduction to HTML), e uma idea de como o CSS funciona (estude - CSS first steps e - CSS building blocksCSS first steps e + CSS building blocks.) @@ -190,7 +190,7 @@ img { There are obvious downsides to this approach. The image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window. In addition, you may not want the same image aspect ratio on mobile as on desktop. For example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. Or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. These things can't be achieved by simply scaling down an image. -Responsive Images, using the [``](/en-US/docs/Web/HTML/Element/picture) element and the [``](/en-US/docs/Web/HTML/Element/img) `srcset` and `sizes` attributes solve both of these problems. You can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. +Responsive Images, using the [``](/pt-BR/docs/Web/HTML/Element/picture) element and the [``](/pt-BR/docs/Web/HTML/Element/img) `srcset` and `sizes` attributes solve both of these problems. You can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. You can also _art direct_ images used at different sizes, thus providing a different crop or completely different image to different screen sizes. @@ -244,7 +244,7 @@ h1 { The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. **Therefore you should never set text using viewport units alone**. -There is a solution, and it involves using [`calc()`](/en-US/docs/Web/CSS/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value: +There is a solution, and it involves using [`calc()`](/pt-BR/docs/Web/CSS/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value: ```css h1 { diff --git a/files/pt-br/learn/css/first_steps/getting_started/index.md b/files/pt-br/learn/css/first_steps/getting_started/index.md index 8786830ac48213..8f09d52ce004b6 100644 --- a/files/pt-br/learn/css/first_steps/getting_started/index.md +++ b/files/pt-br/learn/css/first_steps/getting_started/index.md @@ -24,7 +24,7 @@ Neste artigo iremos pegar um simples documento HTML e aplicar o CSS nele, aprend >como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)

@@ -134,7 +134,7 @@ li { Experimente adicionar isto ao seu CSS agora. -A propriedade `list-style-type` é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para [`list-style-type`](/en-US/docs/Web/CSS/list-style-type) e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página. +A propriedade `list-style-type` é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para [`list-style-type`](/pt-BR/docs/Web/CSS/list-style-type) e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página. Olhando para essa página você descobrirá que, além de remover a marcação da lista, que você também pode alterá-los — Teste mudá-los para marcação quadrada, usando valores de `square`. @@ -218,7 +218,7 @@ O exemplo ativo abaixo inclui as duas regras acima. Verifique adicionando uma re ## Estilizando coisas baseadas no estado -O tipo final de estilo, que vamos dar uma olhada neste tutorial, é a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso é quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento [``](/en-US/docs/Web/HTML/Element/a) (âncora). Isto possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está passando por ele, se foi teclado ou no processo de ser clicado (ativado). Você pode usar CSS para especificar estes diferentes estados — o CSS abaixo estiliza links não visitados com a cor rosa e links visitados com a cor verde. +O tipo final de estilo, que vamos dar uma olhada neste tutorial, é a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso é quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento [``](/pt-BR/docs/Web/HTML/Element/a) (âncora). Isto possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está passando por ele, se foi teclado ou no processo de ser clicado (ativado). Você pode usar CSS para especificar estes diferentes estados — o CSS abaixo estiliza links não visitados com a cor rosa e links visitados com a cor verde. ```css a:link { diff --git a/files/pt-br/learn/css/first_steps/how_css_is_structured/index.md b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.md index 21e7e2f3d441b4..0569664d4cc051 100644 --- a/files/pt-br/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.md @@ -22,10 +22,10 @@ Agora que você tem uma ideia sobre o que é o CSS e seu uso basico, é hora de href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files" >operação com arquivos, básico de HTML (veja - Introdução ao HTML), e uma ideia de - Como funciona o CSS. @@ -249,7 +249,7 @@ As regras de especificidade e cascata podem parecer um pouco complicadas no iní Em seu nível mais básico, CSS consiste em dois blocos de construção: -- **Properties**: Identificadores legíveis para humanos que indicam quais características estilísticas (por exemplo, [`font-size`](/en-US/docs/Web/CSS/font-size), [`width`](/en-US/docs/Web/CSS/width), [`background-color`](/en-US/docs/Web/CSS/background-color)) que você deseja alterar. +- **Properties**: Identificadores legíveis para humanos que indicam quais características estilísticas (por exemplo, [`font-size`](/pt-BR/docs/Web/CSS/font-size), [`width`](/pt-BR/docs/Web/CSS/width), [`background-color`](/pt-BR/docs/Web/CSS/background-color)) que você deseja alterar. - **Valores**: Cada propriedade especificada recebe um valor, que indica como você deseja alterar essas características estilísticas (por exemplo, o que deseja mudar a fonte, a largura ou a cor de fundo para). A imagem abaixo destaca uma única propriedade e valor. O nome da propriedade é `color` e o valor é `blue`. @@ -335,7 +335,7 @@ A saída do código acima se parece com isso: ## @rules -Até agora, não encontramos as regras, em inglês [`@rules`](/en-US/docs/Web/CSS/At-rule) (pronuncia-se "at-rules") do CSS. Estas são regras especiais que dão ao CSS algumas instruções sobre como se comportar. Algumas `@rules` são simples, com o nome da regra e um valor. Por exemplo, para importar uma folha de estilo adicional na sua folha de estilo CSS principal, você pode usar `@import`: +Até agora, não encontramos as regras, em inglês [`@rules`](/pt-BR/docs/Web/CSS/At-rule) (pronuncia-se "at-rules") do CSS. Estas são regras especiais que dão ao CSS algumas instruções sobre como se comportar. Algumas `@rules` são simples, com o nome da regra e um valor. Por exemplo, para importar uma folha de estilo adicional na sua folha de estilo CSS principal, você pode usar `@import`: ```css @import 'styles2.css'; diff --git a/files/pt-br/learn/css/first_steps/how_css_works/index.md b/files/pt-br/learn/css/first_steps/how_css_works/index.md index 623e4715e078fa..1a8e9225120711 100644 --- a/files/pt-br/learn/css/first_steps/how_css_works/index.md +++ b/files/pt-br/learn/css/first_steps/how_css_works/index.md @@ -22,7 +22,7 @@ Nós aprendemos o básico de CSS, porque e como escrever simples folhas de estí href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files" >trabalhar com arquivos, e o básico de HTML (estude - Introdução ao HTML.) diff --git a/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.md b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.md index 0a9b4810c1f453..88e3c84da41729 100644 --- a/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.md +++ b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.md @@ -15,7 +15,7 @@ Com o que você aprendeu nas últimas lições, você deve perceber que pode for Antes de tentar esta avaliação você deve ter passado pelo resto do módulo básico de CSS, além de também possuir uma compreensão básica de HTML (estude - Introdução ao HTML). diff --git a/files/pt-br/learn/css/first_steps/what_is_css/index.md b/files/pt-br/learn/css/first_steps/what_is_css/index.md index 47e7c252809d49..7bdd71ec5b13b0 100644 --- a/files/pt-br/learn/css/first_steps/what_is_css/index.md +++ b/files/pt-br/learn/css/first_steps/what_is_css/index.md @@ -23,7 +23,7 @@ original_slug: Learn/CSS/First_steps/O_que_e_CSS >como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.) @@ -95,7 +95,7 @@ Como existem tantas coisas que você pode estilizar com CSS, a linguagem é divi Nesse ponto você não precisa se preocupar muito sobre como o CSS é estruturado. No entanto, isso pode tornar fácil achar informação se, por exemplo, você estiver ciente de que uma determinada propriedade provavelmente será encontrada entre outras coisas semelhantes e estiver, portanto, provavelmente na mesma especificação. -Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders — você pode achar que isso tem um senso lógico para as propriedades [`background-color`](/en-US/docs/Web/CSS/background-color) e [`border-color`](/en-US/docs/Web/CSS/border-color) serem definidas neste módulo. E, você está certo! +Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders — você pode achar que isso tem um senso lógico para as propriedades [`background-color`](/pt-BR/docs/Web/CSS/background-color) e [`border-color`](/pt-BR/docs/Web/CSS/border-color) serem definidas neste módulo. E, você está certo! ### Especificações CSS @@ -111,7 +111,7 @@ Como iniciante no CSS, é provável que você ache as especificações CSS impre Uma vez que o CSS tenha sido especificado, então se torna útil para nós, em termos de desenvolvimento de páginas web, apenas se um ou mais navegadores implementá-los. Isso significa que o código foi escrito para transformar as instruções do nosso arquivo CSS em algo que possa ser mostrado na tela. Vamos olhar um pouco mais esse processo nas lições [Como o CSS funciona](/pt-BR/docs/Learn/CSS/First_steps/How_CSS_works). É inusitado implementarem uma característica ao mesmo tempo, e, geralmente, existe uma lacuna na qual se pode usar parte do CSS em alguns navegadores e em outros não. Por esse motivo, ser capaz de verificar o estado da implemtação é útil. Para cada página de propriedade no MDN, pode-se ver o estado dela, que se esta interessado. Assim, você saberá se pode usá-la em uma página. -A seguir, é apresentado o gráfico de dados compat para propriedade CSS [`font-family`](/en-US/docs/Web/CSS/font-family). +A seguir, é apresentado o gráfico de dados compat para propriedade CSS [`font-family`](/pt-BR/docs/Web/CSS/font-family). {{Compat("css.properties.font-family")}} diff --git a/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.md b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.md index 9f52657fd0f874..83e2c133e162f7 100644 --- a/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/pt-br/learn/forms/how_to_build_custom_form_controls/index.md @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets {{LearnSidebar}} -There are some cases where the available native HTML form controls may seem like they are not enough. For example, if you need to [perform advanced styling](/en-US/docs/Learn/Forms/Advanced_form_styling) on some controls such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you may consider building your own controls. +There are some cases where the available native HTML form controls may seem like they are not enough. For example, if you need to [perform advanced styling](/pt-BR/docs/Learn/Forms/Advanced_form_styling) on some controls such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you may consider building your own controls. In this article, we will discuss how to build a custom control. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element. We will also discuss how, when, and whether building your own control makes sense, and what to consider when building a control is a requirement. @@ -304,7 +304,7 @@ So here's the result with our three states: Check out the source code @@ -409,7 +409,7 @@ window.addEventListener("load", () => { Check out the source code @@ -570,7 +570,7 @@ At that point, our control will change state according to our design, but its va | Live example | | ----------------------------------------------------------------------------------------------------------- | | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_3")}} | -| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3) | +| [Check out the source code](/pt-BR/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3) | ### Handling the control's value @@ -666,14 +666,14 @@ window.addEventListener('load', () => { }); ``` -In the code above, it's worth noting the use of the [`tabIndex`](/en-US/docs/Web/API/HTMLElement/tabIndex) property. Using this property is necessary to ensure that the native control will never gain focus, and to make sure that our custom control gains focus when the user uses their keyboard or mouse. +In the code above, it's worth noting the use of the [`tabIndex`](/pt-BR/docs/Web/API/HTMLElement/tabIndex) property. Using this property is necessary to ensure that the native control will never gain focus, and to make sure that our custom control gains focus when the user uses their keyboard or mouse. With that, we're done! Here's the result: | Live example | | ----------------------------------------------------------------------------------------------------------- | | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_4")}} | -| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4) | +| [Check out the source code](/pt-BR/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4) | But wait a second, are we really done? @@ -681,15 +681,15 @@ But wait a second, are we really done? We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible! -Fortunately, there is a solution and it's called [ARIA](/en-US/docs/Web/Accessibility/ARIA). ARIA stands for "Accessible Rich Internet Application", and it's [a W3C specification](https://www.w3.org/TR/wai-aria/) specifically designed for what we are doing here: making web applications and custom controls accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes can be done by editing the HTML markup. We also update the ARIA attributes via JavaScript as the user updates their selected value. +Fortunately, there is a solution and it's called [ARIA](/pt-BR/docs/Web/Accessibility/ARIA). ARIA stands for "Accessible Rich Internet Application", and it's [a W3C specification](https://www.w3.org/TR/wai-aria/) specifically designed for what we are doing here: making web applications and custom controls accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes can be done by editing the HTML markup. We also update the ARIA attributes via JavaScript as the user updates their selected value. ### The `role` attribute -The key attribute used by [ARIA](/en-US/docs/Web/Accessibility/ARIA) is the [`role`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute. The [`role`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the `option` role). +The key attribute used by [ARIA](/pt-BR/docs/Web/Accessibility/ARIA) is the [`role`](/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute. The [`role`](/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the [`listbox`](/pt-BR/docs/Web/Accessibility/ARIA/Roles/listbox_role) role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the `option` role). It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role `grid`, and the {{HTMLElement("ul")}} element matches the role `list`. Because we use a {{HTMLElement("ul")}} element, we want to make sure the `listbox` role of our control will supersede the `list` role of the {{HTMLElement("ul")}} element. To that end, we will use the role `presentation`. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element. -To support the [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) role, we just have to update our HTML like this: +To support the [`listbox`](/pt-BR/docs/Web/Accessibility/ARIA/Roles/listbox_role) role, we just have to update our HTML like this: ```html @@ -707,11 +707,11 @@ To support the [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role ``` -> **Note:** Including both the `role` attribute and a `class` attribute is not necessary. Instead of using `.option` use the `[role="option"]` [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors) in your CSS . +> **Note:** Including both the `role` attribute and a `class` attribute is not necessary. Instead of using `.option` use the `[role="option"]` [attribute selectors](/pt-BR/docs/Web/CSS/Attribute_selectors) in your CSS . ### The `aria-selected` attribute -Using the [`role`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute is not enough. [ARIA](/en-US/docs/Web/Accessibility/ARIA) also provides many states and property attributes. The more and better you use them, the better your control will be understood by assistive technologies. In our case, we will limit our usage to one attribute: `aria-selected`. +Using the [`role`](/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques) attribute is not enough. [ARIA](/pt-BR/docs/Web/Accessibility/ARIA) also provides many states and property attributes. The more and better you use them, the better your control will be understood by assistive technologies. In our case, we will limit our usage to one attribute: `aria-selected`. The `aria-selected` attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our `updateValue()` function: @@ -742,7 +742,7 @@ Here is the final result of all these changes (you'll get a better feel for this | Live example | | ----------------------------------------------------------------------------------------------------------- | | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_5")}} | -| [Check out the final source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5) | +| [Check out the final source code](/pt-BR/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5) | If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. @@ -845,20 +845,20 @@ If you do create alternative controls via radio buttons, your own JavaScript, or ### Learning path -- [Your first HTML form](/en-US/docs/Learn/Forms/Your_first_form) -- [How to structure an HTML form](/en-US/docs/Learn/Forms/How_to_structure_a_web_form) -- [The native form widgets](/en-US/docs/Learn/Forms/Basic_native_form_controls) -- [HTML5 input types](/en-US/docs/Learn/Forms/HTML5_input_types) -- [Additional form controls](/en-US/docs/Learn/Forms/Other_form_controls) -- [UI pseudo-classes](/en-US/docs/Learn/Forms/UI_pseudo-classes) -- [Styling HTML forms](/en-US/docs/Learn/Forms/Styling_web_forms) -- [Form data validation](/en-US/docs/Learn/Forms/Form_validation) -- [Sending form data](/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data) +- [Your first HTML form](/pt-BR/docs/Learn/Forms/Your_first_form) +- [How to structure an HTML form](/pt-BR/docs/Learn/Forms/How_to_structure_a_web_form) +- [The native form widgets](/pt-BR/docs/Learn/Forms/Basic_native_form_controls) +- [HTML5 input types](/pt-BR/docs/Learn/Forms/HTML5_input_types) +- [Additional form controls](/pt-BR/docs/Learn/Forms/Other_form_controls) +- [UI pseudo-classes](/pt-BR/docs/Learn/Forms/UI_pseudo-classes) +- [Styling HTML forms](/pt-BR/docs/Learn/Forms/Styling_web_forms) +- [Form data validation](/pt-BR/docs/Learn/Forms/Form_validation) +- [Sending form data](/pt-BR/docs/Learn/Forms/Sending_and_retrieving_form_data) ### Advanced Topics -- [Sending forms through JavaScript](/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript) -- [How to build custom form widgets](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls) -- [HTML forms in legacy browsers](/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers) -- [Advanced styling for HTML forms](/en-US/docs/Learn/Forms/Advanced_form_styling) -- [Property compatibility table for form widgets](/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls) +- [Sending forms through JavaScript](/pt-BR/docs/Learn/Forms/Sending_forms_through_JavaScript) +- [How to build custom form widgets](/pt-BR/docs/Learn/Forms/How_to_build_custom_form_controls) +- [HTML forms in legacy browsers](/pt-BR/docs/Learn/Forms/HTML_forms_in_legacy_browsers) +- [Advanced styling for HTML forms](/pt-BR/docs/Learn/Forms/Advanced_form_styling) +- [Property compatibility table for form widgets](/pt-BR/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md index 425d825d1b228a..3b32b50a18ecb6 100644 --- a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -160,7 +160,7 @@ Quotation Element) indicates that the enclosed text is an extended quotatio Para transformar isso em uma citação em bloco, faríamos assim: ```html -
+

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

@@ -175,7 +175,7 @@ O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um As citações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento {{htmlelement("q")}}. Por exemplo, o bit de marcação abaixo contém uma citação da página MDN \: ```html -

The quote element — <q> — is intended +

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

``` @@ -188,17 +188,17 @@ O elemento de citação — `` — é "destinado a citações curtas que não O conteúdo do atributo [`cite`](/pt-BR/docs/Web/HTML/Element/blockquote#cite) parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de `cite`, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da citação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de `` à citação fonte de alguma forma: ```html -

According to the +

According to the MDN blockquote page:

-
+

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

-

The quote element — <q> — is intended -for short quotations that don't require paragraph breaks. -- +

The quote element — <q> — is intended +for short quotations that don't require paragraph breaks. -- MDN q page.

``` diff --git a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index da55f40a6f7529..d248b4f99be944 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -14,9 +14,9 @@ Vector graphics are very useful in many circumstances — they have small file s Prerequisites: You should know the - basics of HTML + basics of HTML and how to - insert an image into your document. @@ -136,7 +136,7 @@ If your SVGs aren't showing up at all, it might be because your server isn't set ### How to include SVG code inside your HTML -You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your **SVG inline**, or **inlining SVG**. Make sure your SVG code snippet begins and ends with the [``](/en-US/docs/Web/SVG/Element/svg) tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document: +You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your **SVG inline**, or **inlining SVG**. Make sure your SVG code snippet begins and ends with the [``](/pt-BR/docs/Web/SVG/Element/svg) tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document: ```html diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index e5c8dc399734d1..7286ecad9b1a9e 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -23,7 +23,7 @@ Até agora você já deve ter aprendido a incorporar coisas em suas páginas da >trabalho com arquivos , familiaridade com os fundamentos de HTML (conforme abordado em - Introdução ao HTML ) e os artigos anteriores deste módulo. @@ -38,15 +38,15 @@ Até agora você já deve ter aprendido a incorporar coisas em suas páginas da Para saber como itens incorporar em páginas da web que usam <object>, <embed>e <iframe>, como filmes em Flash e outras páginas da web. @@ -216,11 +216,11 @@ Então, isso foi fácil e divertido, certo? Os elementos [``tags de abertura e fechamento que aparecerão se o navegador não suportar `