diff options
Diffstat (limited to 'files/pt-br/orphaned/web/guide')
9 files changed, 0 insertions, 1300 deletions
diff --git a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html b/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html deleted file mode 100644 index ac24931ebe..0000000000 --- a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Usando CSS media queries (consultas de mídia em CSS) -slug: orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) -tags: - - CSS - - Guía - - Iniciante - - media query -original_slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) ---- -<p><span class="seoSummary">Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.</span></p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.</p> - -<p>Fonte:</p> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a></p> - -<p> </p> diff --git a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index ec531e58e0..0000000000 --- a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Criando e disparando eventos -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados <strong>eventos sintéticos</strong>, oposto aos eventos disparados pelo próprio navegador.</p> - -<h2 id="Criando_eventos_customizados">Criando eventos customizados</h2> - -<p>Eventos podem ser criados com o construtor <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> da seguinte forma:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Ouve pelo evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Dispara o evento. -elem.dispatchEvent(event);</pre> - -<p>Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">a forma antiga</a> abaixo.</p> - -<h3 id="Adicionando_dados_customizados_–_CustomEvent()">Adicionando dados customizados – CustomEvent()</h3> - -<p>Para adicionar mais dados ao objeto do evento, usa-se a interface <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a>, a qual possui a propriedade <u><strong>detail</strong></u> que pode ser utilizada para fornecer dados customizados.</p> - -<p><span style="line-height: 1.5;">Por exemplo, o evento pode ser criado da seguinte forma:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Isso permitirá que você acesse dados customizados no listener do evento:</p> - -<pre class="brush: js">function eventHandler(e) { - console.log('The time is: ' + e.detail); -} -</pre> - -<h3 id="A_forma_antiga">A forma antiga</h3> - -<p>A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:</p> - -<pre class="brush: js">// Cria o evento. -var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); - -// Define que o nome do evento é 'build'. -event.initEvent('build', true, true); - -// Ouve pelo evento. -elem.addEventListener('build', function (e) { - // e.target é igual a elem, neste caso -}, false); - -// O alvo do evento pode ser qualquer instância de Element ou EventTarget. -elem.dispatchEvent(event); - -</pre> - -<h2 id="Disparando_eventos_nativos">Disparando eventos nativos</h2> - -<p>Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Veja o exemplo em ação.</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - - var cb = document.getElementById('checkbox'); - var cancelled = !cb.dispatchEvent(event); - - if (cancelled) { - // Um listener invocou o método preventDefault. - alert("Cancelado"); - } else { - // Nenhum listener invocou o método preventDefault. - alert("Não cancelado"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidade com navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Edge</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>construtor Event()</code></td> - <td>15</td> - <td>11</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Mobile</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html b/files/pt-br/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 34fdcb15f8..0000000000 --- a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: DOM onevent handlers -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p>A plataforma web oferece várias maneiras de trabalhar com o <span class="seoSummary"><a href="/en-US/docs/Web/Events">DOM events</a>. </span>Duas abordagens comuns são:<span class="seoSummary"> {{domxref("EventTarget.addEventListener", "addEventListener()")}} e o específico <code>on<em>event</em></code> que dispara um evento.</span> Este artigo se concentra em como o último funciona.</p> - -<h2 id="Registering_onevent_handlers">Registering onevent handlers</h2> - -<p>The <strong><code>on<em>event</em></code></strong> handlers are properties on certain DOM elements to manage how that element reacts to events. Elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <code><body></code> element). Events are actions like:</p> - -<ul> - <li>Being clicked</li> - <li>Detecting pressed keys</li> - <li>Getting focus</li> -</ul> - -<p>The on-event handler is usually named with the event it reacts to, like <code>on<em>click</em></code>, <code>on<em>keypress</em></code>, <code>on<em>focus</em></code>, etc.</p> - -<p>You can specify an <code>on<em><…></em></code> event handler for a particular event (such as {{event("click")}}) for a given object in different ways:</p> - -<ul> - <li>Adding an HTML {{Glossary("attribute")}} named <code>on<em><eventtype></em></code>:<br> - <code><button <strong>onclick="handleClick()"</strong>></code>,</li> - <li>Or by setting the corresponding {{Glossary("property/JavaScript", "property")}} from JavaScript:<br> - <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> -</ul> - -<p>An <code>on<em>event</em></code> event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. In order to allow multiple handlers to be installed for the same event on a given object, you can call its {{domxref("EventTarget.addEventListener", "addEventListener()")}} method, which manages a list of handlers for the given event on the object. A handler can then be removed from the object by calling its {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} function.</p> - -<p>When an event occurs that applies to an element, each of its event handlers is called to allow them to handle the event, one after another. You don't need to call them yourself, although you can do so in many cases to easily simulate an event taking place. For example, given a button object <code>myButton</code>, you can do <code>myButton.onclick(myEventObject)</code> to call the event handler directly. If the event handler doesn't access any data form the event object, you can leave out the event when calling <code>onclick()</code>.</p> - -<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p> - -<pre class="brush: js notranslate">const xhr = new XMLHttpRequest(); -xhr.onprogress = function() { … };</pre> - -<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2> - -<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p> - -<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p> - -<h3 id="HTML">HTML</h3> - -<p>Given this HTML document:</p> - -<pre class="brush: html notranslate"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on - <a onclick="log('Click!')">these three words</a>. -</p> - -<div></div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p> - -<pre class="brush: js notranslate">let logElement = document.querySelector('div'); -let el = document.querySelector("a"); - -function log(msg) { logElement.innerHTML += `${msg}<br>` }; -function anchorOnClick(event) { log("Changed onclick handler") }; - -// Original Handler -log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); - -//Changing handler using .onclick -log('<br>Changing onclick handler using <strong> onclick property </strong> '); - -el.onclick = anchorOnClick; - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); - -//Changing handler using .setAttribute -log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); -el.setAttribute("onclick", 'anchorOnClick(event)'); - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<div class="blockIndicator note"> -<p>TBD (non-capturing listener)</p> -</div> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may refer to:</p> - -<ul> - <li>Any function or object that is registered to be notified of events</li> - <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { … }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events:</p> - -<ul> - <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li> - <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/pt-br/orphaned/web/guide/events/index.html b/files/pt-br/orphaned/web/guide/events/index.html deleted file mode 100644 index d705b4757c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> -<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> -<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> -<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> -<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> -<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> -<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p> -<ul> - <li>the original 'click' event,</li> - <li>mouse events,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> - <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> -</ul> -<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> -<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> -<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> -<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> -<div class="note"> - <p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> -</div> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html b/files/pt-br/orphaned/web/guide/events/mutation_events/index.html deleted file mode 100644 index c60653c55c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Mutation events -slug: orphaned/Web/Guide/Events/Mutation_events -translation_of: Web/Guide/Events/Mutation_events -original_slug: Web/Guide/Events/Mutation_events ---- -<p>{{deprecated_header()}}</p> - -<p><strong>Mutation events</strong> fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. <span style="background-color: #ffff00;">Utilize ao invés, se possível, <a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>.</span></p> - -<h2 id="Prefácio">Prefácio</h2> - -<p>Os eventos de mutação foram marcados como em desuso na <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events specification</a> pelo fato do projeto da API ser falho (veja detalhes no "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" publicado em <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a>)</span>.</p> - -<p id="Replacement.3A_mutation_observers"><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>.</p> - -<p>As razões práticas para evitar os eventos de mutação são <strong>problemas de desempenho</strong> e suporte <strong>cross-browser.</strong></p> - -<h3 id="Performance">Performance</h3> - -<p>Adicionando listeners de mutação do DOM a um documento <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1" rel="external" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">degrada o desempenho profundamente</a> de outras modificações DOM para esse documento (tornando-os 1.5 - 7 vezes mais lento!). Além disso, remover os listeners não reverte o dano.</p> - -<p>O efeito de desempenho é <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">limitado aos documentos que têm os listeners de evento de mutação</a>.</p> - -<h3 id="Suporte_cross-browser">Suporte cross-browser</h3> - -<p>Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:</p> - -<ul> - <li>IE anteriores à versão 9 não suportavam os eventos de mutação por completo e em alguns aspectos não implementa corretamente na versão 9 (<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">por exemplo, DOMNodeInserted</a>)</li> - <li>WebKit não suporta DOMAttrModified (veja <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> e <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li> - <li>"mutation name events", por exemplo DOMElementNameChanged e DOMAttributeNameChanged não são suportados no Firefox (a partir da versão 11), e provavelmente em outros navagedores também.</li> - <li>...</li> -</ul> - -<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">suporte a eventos de mutação nos navegadores</a>.</p> - -<h2 id="Lista_de_mutation_events">Lista de mutation events</h2> - -<p>Listado a seguir todos os eventos de mutação, como definido no <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a>:</p> - -<ul> - <li><code>DOMAttrModified</code></li> - <li><code>DOMAttributeNameChanged</code></li> - <li><code>DOMCharacterDataModified</code></li> - <li><code>DOMElementNameChanged</code></li> - <li><code>DOMNodeInserted</code></li> - <li><code>DOMNodeInsertedIntoDocument</code></li> - <li><code>DOMNodeRemoved</code></li> - <li><code>DOMNodeRemovedFromDocument</code></li> - <li><code>DOMSubtreeModified</code></li> -</ul> - -<h2 id="Uso">Uso</h2> - -<p>Você pode registrar um listener para eventos de mutação usando <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a>, como mostrado a seguir:</p> - -<pre><code>element.addEventListener("DOMNodeInserted", function (event) {</code> - // ... -<code>}, false);</code> -</pre> - -<p>O objeto event é transmitido para o listener em um {{ domxref("MutationEvent") }} (veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">sua definição na especificação</a>) para a maioria dos eventos, e {{ domxref("MutationNameEvent") }} para <code>DOMAttributeNameChanged</code> e <code>DOMElementNameChanged</code>.</p> diff --git a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 950ddd0b4f..0000000000 --- a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Uma visão geral sobre Events e Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p>Este artigo apresenta uma visão geral sobre o design pattern usado para reagir a alterações que ocorrem quando o navegador acessa uma página, e dá um resumo sobre como os navegadores modernos reagem a eles.</p> -</div> - -<p>Eventos e a manipulação de eventos fornecem uma técnica essencial em JavaScript para reagir a algum incidente quando o navegador acessa uma página, incluindo eventos de preparação para exibir a página, ou interação com algum conteúdo da página que estejam relacionados com o dispositivo onde o navagador está rodando, e muitas outras, como reprodução de áudio ou vídeo.</p> - -<p>A manipulação de eventos tornou-se imprescindível com a evolução e mudança na arquitetura de renderização dos navegadores em relação a forma de busca e carregamento de informações na página. No início, os navegadores esperavam e recebiam os dados e recursos associados a página para analisar, processar e apresentar a página ao usuário. A página permanecia inalterada até uma requisição para um novo link. Atualmente, com a mudança para páginas dinâmicas, os navegadores estão sempre em um loop contínuo, processando, desenhando, apresentando conteúdo e esperando de algum novo evento. Os gatilhos (triggers) de evento podem ser a conclusão do carregamento de um arquivo na rede, por exemplo, uma imagem que agora pode ser mostrada na tela, a conclusão da análise de um recurso pelo navegador, o processamento do conteúdo HTML de uma página, a interação de um usuário com o conteúdo da página, com o clique em um botão. Douglas Crockford explica essa mudança de maneira eficaz em sua palestra, <em>An Inconvenient API: The Theory of the DOM.</em></p> - -<p>With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network <em>e.g.,</em> downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser <em>e.g.</em>, processes the HTML content of a page, the interaction of a user with the contents of the page <em>e.g.,</em> clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, <em>An Inconvenient API: The Theory of the DOM,</em> which shows the change in flow from the original browser flow</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">this one</a>.) Currently, all execution environments for JavaScript code use events and event handling.</p> - -<h2 id="The_event_design_pattern">The event design pattern</h2> - -<p>The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:</p> - -<ul> - <li>the name String used for the event,</li> - <li>the type of the data structure used to represent the key properties of that event, and</li> - <li>the JavaScript object which will 'emit' that event.</li> -</ul> - -<p>The pattern is implemented by</p> - -<ul> - <li>defining a JavaScript function which takes as an argument the data structure which was agreed upon, and</li> - <li>registering the function using the name String with the object which will emit the event.</li> -</ul> - -<p>The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">article on custom events</a>. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.</p> - -<p>Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the <code>EventPrototype</code> object. Browsers use as the registration method for the function which will handle those data structures a method called <code>addEventListener</code> which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">Button Event Handler Demo</h2> - -<p>For example, browser <code>button</code> elements are intended to emit events named <code>'click'</code> in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a <code>button</code> as:</p> - -<pre class="brush: html notranslate"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>and, in our JavaScript code, we could first define a function to listen to that <code>'click'</code> event:</p> - -<pre class="brush: js notranslate">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>and second register our function with the the <code>Button</code> object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:</p> - -<pre class="brush: js notranslate">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>or within the HTML page by adding the function as the value of the <code>'onclick'</code> attribute, although this second approach is usually only used in very simple web pages.</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> JavaScript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p> - -<p>As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p> - -<pre class="brush: js notranslate">var funcInit = function(){ - // user code goes here and can safely address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); -</pre> - -<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p> - -<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p> - -<h2 id="Notable_events">Notable events</h2> - -<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p> - -<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p> - -<ul> - <li>the <code>window</code> object, such as due to resizing the browser,</li> - <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li> - <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li> - <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li> - <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li> - <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li> -</ul> - -<p>although this list is currently incomplete.</p> - -<p>Some notable events are:</p> - -<div class="note"> -<p><strong>Note:</strong> This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li> - <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li> - <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li> -</ul> - - - -<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2> - -<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p> - -<p>A partial diagram of the class hierarchy of event objects is:</p> - -<div class="note"> -<p><strong>Note:</strong> This diagram is incomplete.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p> - -<h2 id="Documents">Documents</h2> - -<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p> - -<ul> - <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> - <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li> -</ul> diff --git a/files/pt-br/orphaned/web/guide/html/html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index 70e852c9cb..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p>HTML5 é a mais recente evolução do padrão que define o <a href="https://developer.mozilla.org/pt-BR/docs/HTML" title="https://developer.mozilla.org/pt-BR/docs/HTML">HTML</a>. O termo representa dois conceitos diferentes:</p> - -<ul> - <li>É uma nova versão da <em>linguagem </em>HTML, com novos elementos, atributos, e comportamentos</li> - <li>e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado <em>HTML5 & friends</em> e muitas vezes abreviado apenas como <em>HTML5.</em></li> -</ul> - -<p>Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;</p> - -<ul> - <li><em>Semântica</em>: permite você descrever mais precisamente o seu conteúdo.</li> - <li>Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.</li> - <li>Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.</li> - <li>Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.</li> - <li>Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. </li> - <li>Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.</li> - <li>Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.</li> - <li>Estilização: permite aos autores a escrita de temas mais sofisticados.</li> -</ul> - -<div class="twocolumns"> - -</div> - -<h2 id="Semântica"><img alt="" src="https://mdn.mozillademos.org/files/3827/HTML5_Semantics_512.png" style="height: 50px; width: 50px;"> Semântica </h2> - -<dl> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas em HTML</a></strong></dt> - <dd>Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}</dd> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video">Utilizando áudio e vídeo com HTML5</a></strong></dt> - <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. </dd> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Forms_in_HTML">Formulários em HTML5</a></strong> </dt> - <dd>Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.</dd> - <dt><strong>Novos elementos semânticos</strong></dt> - <dd>Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element">elementos válidos do HTML5</a>.</dd> - <dt><strong>Melhorias no {{HTMLElement("iframe")}}</strong></dt> - <dd>Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento <strong>{{HTMLElement("iframe")}}.</strong></dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/MathML">MathML</a></dt> - <dd>Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.</dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5">Introdução ao HTML5</a></dt> - <dd>Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. </dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Parser_HTML5">HTML5 parser compatível</a></dt> - <dd>O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.</dd> -</dl> - -<h2 id="Conectividade"><img alt="" src="https://mdn.mozillademos.org/files/3839/HTML5_Connectivity_512.png" style="height: 50px; width: 50px;">Conectividade</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/WebSockets">Web Sockets</a></dt> - <dd>Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Eventos do servidor</a></dt> - <dd>Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.</dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/API/WebRTC">WebRTC</a></dt> - <dd>WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.</dd> -</dl> - -<h2 id="Offline_e_armazenamento"><img alt="" src="https://mdn.mozillademos.org/files/3833/HTML5_Offline_Storage_512.png" style="height: 50px; width: 50px;">Offline e armazenamento</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Recursos offline: cache de aplicação</a></dt> - <dd>Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.</dd> - <dt>Eventos online e offline</dt> - <dd> - <p>Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. </p> - </dd> - <dt>WHATWG </dt> - <dd>Sessão <em>client-side</em> e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.</dd> - <dt>IndexedDB</dt> - <dd>É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.</dd> - <dt>Uso de arquivos de aplicações web</dt> - <dd>Foi adicionado ao <a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Gecko">Gecko</a> o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input#attr-type">tipo</a> <span style="font-family: courier;">file</span> do HTML5. Há também o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader">FileReader</a>.</dd> -</dl> - -<h2 id="Multimídia"><img alt="" src="https://mdn.mozillademos.org/files/3835/HTML5_Multimedia_512.png" style="height: 50px; width: 50px;">Multimídia</h2> - -<dl> - <dt>Utilizando áudio e vídeo com HTML5</dt> - <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.</dd> - <dt>WebRTC</dt> - <dd>Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um <em>plugin</em> ou aplicação externa.</dd> - <dt>API da câmera</dt> - <dd>Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.</dd> - <dt>Track e WebVTT</dt> - <dd>O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.</dd> -</dl> - -<h2 id="Gráficos_e_efeitos_3D"><img alt="" src="https://mdn.mozillademos.org/files/3841/HTML5_3D_Effects_512.png" style="height: 50px; width: 50px;">Gráficos e efeitos 3D</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a></dt> - <dd>Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.</dd> - <dt>API de texto para {{HTMLElement("canvas")}}</dt> - <dd>O elemento {{HTMLElement("canvas")}} agora dá suporte à API de texto do HTML5.</dd> - <dt>WebGL</dt> - <dd>WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.</dd> - <dt>SVG</dt> - <dd>Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.</dd> -</dl> - -<h2 id="Performance_e_integração"><img alt="" src="https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" style="height: 50px; width: 50px;">Performance e integração</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> - <dd>Permite buscar de forma <span id="result_box" lang="pt"><span>assíncrona</span></span> algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do <a href="https://developer.mozilla.org/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> - <dt>Motor JIT-compiling para JavaScript</dt> - <dd>A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">O atributo contentEditable: Transforme seu website em uma wiki!</a></dt> - <dd>O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> - <dd>A API do HTML5 permite suportar o recurso de arrastar e soltar (<em>dragging and dropping</em>) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Foco de gestão em HTML</a></dt> - <dd>O novo HTML5 <code>activeElement</code> e <code>hasFocus</code> são atributos suportados.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manipuladores de protocolos beseados na web</a></dt> - <dd>Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método the<code>navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> - <dd>Permite o controle de animações de renderização para obter a performance ideal.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Fullscreen</a></dt> - <dd>Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API bloqueio de ponteiro</a></dt> - <dd>Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos online e offline</a></dt> - <dd>A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.</dd> -</dl> - -<h2 id="Acesso_à_dispositivos"><img alt="" src="https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" style="height: 50px; width: 50px;">Acesso à dispositivos</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Usando a API da câmera</a></dt> - <dd>É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventos touch</a></dt> - <dd>Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (<em>touch screens</em>).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using geolocation">Utilizando geolocalização</a></dt> - <dd>Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detectando a orientaçåo do dispositivo</a></dt> - <dd>Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.</dd> -</dl> - -<h2 id="Estilização"><img alt="" src="https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" style="height: 50px; width: 50px;">Estilização</h2> - -<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> <span id="result_box" lang="pt"><span>foi estendido para</span> <span>ser</span> <span>capaz de estilo</span> <span>elementos</span> <span>de uma forma</span> <span>muito mais complexa</span></span>. Sua extensão, também conhecido como <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.</p> - -<dl> - <dt>Novas caracteristicas dos estilos de background</dt> - <dd>Agora é possível determinar uma sombra à um elemento, usando a propriedade <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" title="The box-shadow property describes one or more shadow effects as a comma-separated list.">box-shadow</a> </code>e também podemos definir <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds">diversos backgrounds</a> para um elemento.</dd> - <dt>More fancy borders</dt> - <dd>Também é possível utilizar imagens para estilizar bordas, usando a propriedade <code>border-image. </code>Bordas arredondadas são suportadas através da propriedade <code>border-radius.</code></dd> - <dt>Animating your style</dt> - <dd>Utilizando <code>transition </code>para animar diferentes estágios de determinadas propriedades ou usando <code>animation </code>para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. </dd> - <dd>Using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a>to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> - <dt>Typography improvement</dt> - <dd>Authors have better control to reach better typography. Eles podem controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" title="The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 Horizontal Ellipsis), or display a custom string."><code>text-overflow</code></a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, mas tambem pode adicionar um <a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> a ele ou controlar mais precisamente a sua <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" title="The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><code>@font-face</code></a> at-rule.</dd> - <dt>Novos layouts de apresentaçoes</dt> - <dd>A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> -</dl> - - - -<p>(Alguns <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">outros artigos relacionados com HTML5</a>.)</p> - -<h2 id="Introdução_ao_HTML5">Introdução ao HTML5</h2> - -<dl> - <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>Introdução ao HTML5</strong></a></dt> - <dd>Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.</dd> -</dl> - -<h2 id="Elementos_do_HTML5">Elementos do HTML5</h2> - -<dl> - <dt><a href="/en/HTML/HTML5/HTML5_element_list" title="en"><strong>Lista de tags / elementos do HTML5</strong></a></dt> - <dd>Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.</dd> -</dl> - -<dl> - <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utilizando audio e video</a></dt> - <dd>Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.</dd> - <dt><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">Formulários em HTML5</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Veja as</span> <span class="hps">melhorias para</span> <span class="hps">formulários web</span> <span class="hps">em</span> <span class="hps">HTML5</span><span>: a</span> <span class="hps">API</span> de <span class="hps">validação de restrição</span><span>, vários</span> <span class="hps">novos atributos,</span> <span class="hps">novos valores</span> <span class="hps">para </span></span>{{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }}<span id="result_box" lang="pt"> <span class="hps">e os</span> <span class="hps">novo</span> <span class="hps">elemento </span></span>{{ HTMLElement("output") }}.<span id="result_box" lang="pt"> </span></dd> - <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e esboços em HTML5</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Veja os novos elementos para </span><span class="hps">delinear</span> e seccionar <span class="hps">em</span> <span class="hps">HTML5:</span></span> {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> - <dt>O elemento {{ HTMLElement("mark") }}</dt> - <dd>Este elemento é usado para marcar em destaque um texto de especial relevância.</dd> - <dt>O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}</dt> - <dd>Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, <span id="result_box" lang="pt">colocado a<span class="hps">baixo d</span><span class="hps">o texto principal</span><span>.</span></span></dd> -</dl> - -<h3 id="Suporte_Canvas">Suporte Canvas</h3> - -<dl> - <dt><a href="/en/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Tutorial Canvas </a></dt> - <dd> Apreda sobre o novo elemento<code> {{ HTMLElement("canvas") }} </code>e como desenhar gráficos e outros objetos no Firefox.</dd> - <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">HTML5 API texto para elemento <canvas></a></dt> - <dd><span id="result_box" lang="pt">HTML5 <span class="hps">API</span> <span class="hps">texto</span> <span class="hps">agora é suportado</span> <span class="atn hps">pelo </span></span>{{ HTMLElement("canvas") }}<span id="result_box" lang="pt"><span class="hps">.</span></span></dd> -</dl> - -<div class="twocolumns"> -<h2 id="Recursos_de_aplicações_web">Recursos de aplicações web</h2> -</div> - -<dl> - <dt><a href="/en/HTML/Using_the_application_cache" title="en/Offline_resources_in_Firefox">Recursos Offline</a></dt> - <dd><span id="result_box" lang="pt">O <span class="hps">Firefox</span> suporta completamente <span class="hps">as</span> <span class="hps">especificações de</span> <span class="hps">HTML5 para </span> <span class="hps">recurso</span> <span class="hps">offline.</span> <span class="hps">A maioria dos outros</span> navegadores <span class="hps">tem</span> algum nível de suporte aos <span class="hps">recursos offline</span></span>.</dd> - <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos online e offline</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">O Firefox 3 suporta</span> <span class="hps">WHATWG</span> <span class="hps">eventos online e offline</span><span>, que permitem que</span> <span class="hps">aplicações e extensões</span> <span class="hps">detectem se</span> <span class="hps">há ou não</span> <span class="hps">uma conexão ativa com Internet</span><span>, bem como</span> <span class="hps">detecta</span> <span class="hps">quando a conexão</span> conecta e desconecta.</span></dd> - <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">A sessão do lado cliente</span> <span class="hps">e</span> o <span class="hps">armazenamento persistente</span> <span class="hps">permitem que as aplicações web</span> <span class="hps">armazenem</span> <span class="hps">dados estruturados</span> <span class="hps">no lado cliente</span><span>.</span></span></dd> - <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">O atributo contentEditable: transforma seu website em um wiki!</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">O HTML5</span> <span class="hps">tem</span> um<span class="hps"> atributo</span> <span class="hps">padronizado</span> <span class="hps">contentEditable</span><span>.</span> <span class="hps">Saiba mais sobre</span> <span class="hps">este recurso.</span></span></dd> - <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Usando arquivos de aplicações web</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Suporta para </span><span class="hps">a nova HTML5 API de arquivo</span> <span class="hps">foi adicionada ao</span> <span class="hps">Gecko,</span> <span class="hps">tornando possível </span><span class="hps">as aplicações web</span> <span class="hps">para acessarem arquivos</span> <span class="hps">locais</span> <span class="hps">selecionados pelo usuário</span><span>.</span> <span class="hps">Isso inclui suporte</span> <span class="hps">para selecionar vários arquivos</span> <span class="hps">usando o novo element</span>o HTML </span><span style="font-family: monospace;">{{ HTMLElement("input") }}</span> do <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">arquivo</span> <span id="result_box" lang="pt"><span>de</span> </span><a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiplos</strong></a> atributos.</dd> -</dl> - -<h2 id="Recursos_DOM">Recursos DOM</h2> - -<dl> - <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> - <dd>O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.</dd> - <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> - <dd>A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. <span id="result_box" lang="pt"><span class="hps">Isto também proporciona</span> <span class="hps">uma API simples</span> <span class="hps">para uso de extensões</span> <span class="hps">e</span> <span class="hps">aplicativos baseados em</span> <span class="hps">Mozilla</span><span>.</span></span></dd> - <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Foco na gestão do HTML</a></dt> - <dd><span id="result_box" lang="pt">Os novos</span> <code>activeElement</code> e <code>hasFocus</code> são atributos suportados pelo HTML5..</dd> - <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Manipuladores de protocolo baseado em web</a></dt> - <dd>Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método <code>navigator.registerProtocolHandler()</code>.</dd> -</dl> - -<h2 id="HTML_parser">HTML parser</h2> - -<p>O Gecko é <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">compatível com HTML5 parser</a>—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.)</p> - -<h2 id="Alterações_adicionais">Alterações adicionais</h2> - -<ul> - <li><code>localName</code> e <code>namespaceURI</code> em documentos HTML agora se comportam como em documentos XML: <code>localName</code> retorna em minúsculas e <code>namespaceURI</code> para elementos HTML é <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code></li> - <li>Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento <code>hashchange</code> é enviado para a página. Veja <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para mais informação.</li> - <li>Suporte para <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> para facilitar o manuseio de atributo de classe.</li> - <li>evnto de documento pronto <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> e <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> são propriedades suportadas.</li> - <li><span id="result_box" lang="pt"><span class="hps">Cores em</span> <span class="hps">atributos de apresentação</span> <span class="hps">são interpretados</span> <span class="hps">de acordo com o</span> <span class="hps">HTML5.</span></span></li> -</ul> - -<h2 id="Tecnologias_muitas_vezes_chamado_de_parte_do_HTML5_que_não_são"><span id="result_box" lang="pt"><span class="hps">Tecnologias</span> <span class="hps">muitas vezes chamado de</span> <span class="hps">parte do</span> <span class="hps">HTML5</span> <span class="hps">que não</span> <span class="hps">são</span></span></h2> - -<p><span id="result_box" lang="pt"><span class="hps">Estas</span> são <span class="hps">muitas vezes </span><span class="hps">consideradas em conjunto com</span> <span class="hps">um uso</span> <span class="hps">amplo</span> <span class="hps">termo</span> <span class="atn hps">de "</span><span>HTML5</span><span>", mas</span> <span class="hps">não são</span> <span class="hps">realmente parte do</span> </span><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="W3C HTML5 Spec">W3C HTML5 Spec</a>.</p> - -<ul> - <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> - <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> - <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> - <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector()</a></code></li> - <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> - <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> - <li><a href="/en/CSS/CSS3" title="CSS3">CSS3</a></li> - <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> - <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> - <li><a href="/en/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li> - <li>Faster JavaScript</li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<p><span id="result_box" lang="pt"><span class="hps">Alterações</span> <span class="hps">nas versões</span> <span class="hps">do Firefox</span> <span class="hps">que afetam</span> <span class="hps">os desenvolvedores</span> <span class="hps">da Web:</span></span></p> - -<ul> - <li><a href="/en/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> - <li><a href="/en/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> - <li><a href="/en/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> - <li><a href="/en/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> - <li><a href="/en/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> - <li><a href="/en/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> - <li><a href="/en/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> - <li><a href="/en/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> - <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> - <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 </a></li> - <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 </a></li> - <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 </a></li> - <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 </a></li> - <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 </a></li> -</ul> - -<div class="noinclude"> -<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p> -</div> diff --git a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index a36dbb612f..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.</p> - -<p>Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na <a href="/en/HTML/HTML5" title="en/HTML/HTML5">página principal do HTML5</a>. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> - -<p>Seu primeiro passo: O doctype do HTML5</p> - -<p>O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:</p> - -<pre><!DOCTYPE html> -</pre> - -<p>Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.</p> - -<div class="noinclude"> -<p>{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}</p> -</div> - -<p> </p> diff --git a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 09144f9ce4..0000000000 --- a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Seções e estrutura de um documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div class="warning"> -<p><strong>Importante</strong>: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou <em>user agents</em> de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.</p> -</div> - -<p>A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.</p> - -<h2 id="Estrutura_de_um_documento_em_HTML4">Estrutura de um documento em HTML4</h2> - -<p>A estrutura de um documento, ou seja, a estrutura semântica do que está entre <span style="font-family: courier new;"><body></span> e <span style="font-family: courier new;"></body></span>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.</p> - -<p>Então a seguinte marcação:</p> - -<pre class="brush: html notranslate"><div class="section" id="elefantes-da-floresta" > -<h1>Elefantes da floresta</h1> -<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta. -<em>...esta seção continua...</em> -<div class="subsection" id="floresta-habitat"> -<h2>Habitat</h2> -<p>Os elefantes da floresta não vivem em árvores mas sim entre elas. -<em>...esta subseção continua...</em> -</div> -</div> -</pre> - -<p>leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat -</pre> - -<p>Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,</p> - -<pre class="brush: html notranslate"><h1>Elefantes da floresta</h1> -<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta. -<em>...esta seção continua...</em> -<h2>Habitat</h2> -<p>Os elefantes da floresta não vivem em árvores mas sim entre elas. -<em>...esta subseção continua...</em> -<h2>Dieta</h2> -<h1>Esquilo da mongólia</h1> -</pre> - -<p>leva à:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat - 1.2 Dieta -2. Esquilo da mongólia -</pre> - -<h2 id="Problemas_resolvidos_pelo_HTML5">Problemas resolvidos pelo HTML5</h2> - -<p>A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:</p> - -<ol> - <li>O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo <strong>class</strong> torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para <a href="https://pt.wikipedia.org/wiki/Tecnologia_assistiva">tecnologias assistivas</a>, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O {{HTMLElement("section")}}, o elemento de Seção do HTML. </li> - <li>Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Heading_Elements">elementos de cabeçalho</a> de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.</li> - <li>No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.</li> - <li>Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.</li> -</ol> - -<h2 id="sect1"></h2> - -<p>Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.</p> - -<h2 id="The_HTML5_Outline_Algorithm">The HTML5 Outline Algorithm</h2> - -<h3 id="Definindo_seções_em_HTML5">Definindo seções em HTML5</h3> - -<p>Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }} é parte de uma seção. Seções em HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }}, {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. </p> - -<div class="note"><strong>Nota: </strong>Cada seção pode ter sua própria hierarquia de cabeçalho {{ HTMLElement("h1") }}. Veja <a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">D</a><a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">efinindo cabeçalhos com HTML5</a>.</div> - -<p>Exemplo:</p> - -<pre class="brush: html notranslate"><section> - <h1>Elefantes da floresta</h1> - <section> - <h1>Introdução</h1> - <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p> - </section> - <section> - <h1><span><span>Habitat</span><span></</span><span>h1</span><span>> - </span></span><span><span><</span><span>P</span><span>></span><span>Elefantes florestais não vivem em árvores mas entre eles.</p> - </section> - <aside> - <p>Bloco publicitário</p> - </aside> -</section> -<footer> - <p>(c) 2010 O Exemplo de empresa</p> -</footer></span></span> -</pre> - -<p>Esse <a href="https://tableless.com.br/produtividade-editores-e-snippets/">snippet</a> HTML define duas seções de nível superior:</p> - -<pre class="brush: html notranslate"><span> <section> - <h1> Elefantes da floresta </h1> - <section> - <h1> Introdução </h1> - <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p> - </section> - <section> - <h1> Habitat </h1> - <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p> - </section> - <aside> - <p> bloco de publicidade</p> - </aside> -</section> -<footer> - <p> (c) 2010 A empresa exemplo</p> -</footer></span></pre> - -<p>A primeira seção possui três subseções:</p> - -<pre class="brush: html notranslate"><span><section> - <h1>Forest elephants</h1> - </span><span> <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants. - </section> - </span><span> <section> - <h1><span><span>Habitat</span><span></</span><span>h1</span><span>> - </span></span><span><span><</span><span>P</span><span>></span><span>Forest elephants do not live in trees but among them. - </section> - </span><span> <aside> - <p>advertising block - </aside> - </span><span></section> - <footer> - <p>(c) 2010 The Example company - </footer></span></span></span></pre> - -<p>Isso leva à seguinte estrutura:</p> - -<pre class="notranslate">1. Forest elephants - 1.1 Introduction - 1.2 Habitat - 1.3 Section (aside) -</pre> - -<h3 id="Definindo_cabeçalho_com_HTML5">Definindo cabeçalho com HTML5</h3> - -<p>Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.</p> - -<p>Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:</p> - -<pre class="brush: html notranslate"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. -<span> </span><em>...this section continues...</em> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. -<span> </span><em>...this subsection continues...</em> - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. -<span> </span><em>...this section continues...</em> -</section> -</pre> - -<p>leva ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat -2. Gerbos da Mongólia</pre> - -<p>Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)</p> - -<h3 id="Seção_implícita">Seção implícita</h3> - -<p>Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.</p> - -<p>Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:</p> - -<pre class="brush: html notranslate"><section> - <h1> Elefantes da floresta </h1> - <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos. - ... esta seção continua ... - <h3 class = "subseção implícita"> Habitat </h3> - <p>Os elefantes da floresta não vivem em árvores, mas entre elas. - ... esta subseção continua ...</p> -</section> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat (definido implicitamente pelo elemento h3) -</pre> - -<p>Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:</p> - -<pre class="brush: html notranslate"><section> - <h1> Elefantes da floresta </h1> - <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos. - ... esta seção continua ... - <h1 class = "seção implícita"> Gerbos da Mongólia </h1> - <p>Os gerbos da Mongólia são pequenos mamíferos fofos. - ... esta seção continua ...</p> -</section> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta -2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo) -</pre> - -<p>Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:</p> - -<pre class="brush: html notranslate"><body> - <h1> Mamíferos </h1> - <h2> Baleias </h2> - <p> Nesta seção, discutimos as baleias nadadoras. - ... esta seção continua ...</p> - <section> - <h3> Elefantes da floresta </h3> - <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos. - ... esta seção continua ...</p> - <h3> Gerbos da Mongólia </h3> - <p> Hordas de gerbos se espalharam muito além da Mongólia. - ... esta subseção continua ...</p> - <h2> Répteis </h2> - <p>Répteis são animais com sangue frio. - ... esta subseção continua ...</p> - </section> -</body> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">1. Mamíferos - 1.1 Baleias (definidos implicitamente pelo elemento h2) - 1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção) - 1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo) - 1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo) - -</pre> - -<p>Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.</p> - -<p>Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.</p> - -<h3 id="Sobrepondo_seções_implícitas">Sobrepondo seções implícitas</h3> - -<p> Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:</p> - -<ul> - <li>uma seção sobre um livro ou filme que possui um título secundário: - <pre class="brush: html notranslate"><section> - <h1> Justine </h1> - <h2> Os Infortúnios da Virtude </h2> -</section></pre> - - <p>leva ao seguinte esboço:</p> - - <pre class="notranslate">1. Justine - 1.1 Os Infortúnios da Virtude -</pre> - </li> - <li>o cabeçalho secundário pode ser usado para uma lista de tags: - <pre class="brush: html notranslate"><section> - <h1> Seção e esboços de um documento </h1> - <h2> HTML, HTML5, seções, contornos </h2> -</section></pre> - - <p>levando ao seguinte esboço:</p> - - <pre class="notranslate">1. Seção e linhas gerais de um documento - 1.1 HTML, HTML5, Seções, Esboços</pre> - </li> -</ul> - -<p>Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:</p> - -<pre class="brush: html notranslate"><section> - <hgroup> - <h1>Justine</h1> - <h2>Les Malheurs de la vertu</h2> - </hgroup> -</section> -</pre> - -<p>leads to the following outline:</p> - -<pre class="notranslate">1. Justine -</pre> - -<h3 id="Caminhos_de_seção"><a>Caminhos de seção</a></h3> - -<p> Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.</p> - -<p>Exemplo:</p> - -<pre class="brush: html notranslate"><section> - <h1> Elefantes da floresta </h1> - <section> - <h2> Introdução </h2> - <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p> - </section> - <section> - <h2> Habitat </h2> - <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos - veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>": - <blockquote> - <h1> Bornéu</h1> - <p> O elemento florestal vive em Bornéu ...</p> - </blockquote> - </section> -</section> -</pre> - -<p>Este exemplo resulta no seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Introdução - 1.2 Habitat -</pre> - -<p>Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.</p> - -<h3 id="Seções_de_fora_da_estrutura">Seções de fora da estrutura</h3> - -<p>O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:</p> - -<ol> - <li>O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.</li> - <li>O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.</li> - <li>O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.</li> - <li>O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.</li> -</ol> - -<h2 id="Endereços_e_horário_de_publicação_nos_elementos_de_seção">Endereços e horário de publicação nos elementos de seção</h2> - -<p>O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.</p> - -<p>Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.</p> - -<p>Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.</p> - -<h2 id="Usando_elementos_HTML5_em_navegadores_não-HTML5">Usando elementos HTML5 em navegadores não-HTML5</h2> - -<p>Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM">DOM (Document Object Model)</a> especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:</p> - -<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.</p> - -<p>Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:</p> - -<pre class="brush: html notranslate"><!--[if lt IE 9]> - <script> - <code class="js">document.createElement(<span class="js__string">"header"</span> ); - document.createElement(<span class="js__string">"footer" </span>); - document.createElement(<span class="js__string">"section"</span>); - document.createElement(<span class="js__string">"aside"</span> ); - document.createElement(<span class="js__string">"nav"</span> ); - document.createElement(<span class="js__string">"article"</span>); - document.createElement(<span class="js__string">"hgroup"</span> ); - document.createElement(<span class="js__string">"time"</span> ); - </script> -</code><code class="html"><span class="html__ie_style"><![endif]--></span></code> -</pre> - -<p>Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:</p> - -<pre class="brush: html notranslate"><noscript> - <strong> Aviso! </strong> - Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript. - Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página. -</noscript> -</pre> - -<p>Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um <strong>plano b</strong> adequado para o caso em que este último navegador está configurado para não usar scripts :</p> - -<pre class="brush: html notranslate"><!--[if lt IE 9]> - <script> - <code class="js">document.createElement(<span class="js__string">"header"</span> ); - document.createElement(<span class="js__string">"footer" </span>); - document.createElement(<span class="js__string">"section"</span>); - document.createElement(<span class="js__string">"aside"</span> ); - document.createElement(<span class="js__string">"nav"</span> ); - document.createElement(<span class="js__string">"article"</span>); - document.createElement(<span class="js__string">"hgroup"</span> ); - document.createElement(<span class="js__string">"time"</span> ); - </script></code> -<code class="html"><span class="html__ie_style"> <noscript> - <strong>Aviso !</strong> - Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript. - Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente. - </noscript></span></code> -<code class="html"><span class="html__ie_style"><![endif]-<span style="font-family: courier new,andale mono,monospace;">-<span style="font-family: monospace;">></span></span></span> </code> -</pre> - -<h2 id="Conclusão">Conclusão</h2> - -<p>Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.</p> |