diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
commit | 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e (patch) | |
tree | 86ab4534d10092b293d4b7ab169fe1a8a2421bfa /files/pt-pt/web/guide/html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.gz translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.bz2 translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.zip |
unslug pt-pt: move
Diffstat (limited to 'files/pt-pt/web/guide/html')
-rw-r--r-- | files/pt-pt/web/guide/html/content_categories/index.html (renamed from files/pt-pt/web/guide/html/categorias_de_conteudo/index.html) | 0 | ||||
-rw-r--r-- | files/pt-pt/web/guide/html/html5/html5_parser/index.html | 58 | ||||
-rw-r--r-- | files/pt-pt/web/guide/html/html5/index.html | 169 | ||||
-rw-r--r-- | files/pt-pt/web/guide/html/html5/introduction_to_html5/index.html | 20 | ||||
-rw-r--r-- | files/pt-pt/web/guide/html/using_html_sections_and_outlines/index.html (renamed from files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html) | 0 |
5 files changed, 247 insertions, 0 deletions
diff --git a/files/pt-pt/web/guide/html/categorias_de_conteudo/index.html b/files/pt-pt/web/guide/html/content_categories/index.html index 9a7c08ee9a..9a7c08ee9a 100644 --- a/files/pt-pt/web/guide/html/categorias_de_conteudo/index.html +++ b/files/pt-pt/web/guide/html/content_categories/index.html diff --git a/files/pt-pt/web/guide/html/html5/html5_parser/index.html b/files/pt-pt/web/guide/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..eff96db73f --- /dev/null +++ b/files/pt-pt/web/guide/html/html5/html5_parser/index.html @@ -0,0 +1,58 @@ +--- +title: Parser HTML5 +slug: Web/HTML/HTML5/Parser_HTML5 +translation_of: Web/Guide/HTML/HTML5/HTML5_Parser +--- +<p>{{ gecko_minversion_header("2") }}</p> +<p>O Gecko 2 introduz um novo analizador (parser), baseado no HTML5. O analizador (parser) HTML é uma das peças mais sensíveis e complicadas de um navegador. Ele controla como o código fonte HTML é transformado em páginas web e, também, mudanças para alguns casos de exceções. O novo analisador (parser) é mais rápido, cumpre com o padrão do HTML5, e habilita também várias novas funcionalidades.</p> +<p>O novo analisador (parser) introduz estas melhorias maiores:</p> +<ul> + <li>Você pode agora usar o SVG e o MathML em linha em páginas HTML5, sem a sintaxe namespace XML.</li> + <li>O analizador (parsing) está completo em um processo separado do processo de interface de usuário do Firefox, melhorando a responsividade do navegador como um todo.</li> + <li>Chamadas para <code>innerHTML</code> estão muito mais rápidas.</li> + <li><a class="external" href="http://tinyurl.com/html-parser-bugs" title="https://bugzilla.mozilla.org/buglist.cgi?status_whiteboard_type=substring&status_whiteboard=[fixed%20by%20the%20HTML5%20parser]&resolution=FIXED">Dúzias de bugs relacionados à análise de longa data</a> (en) estão agora corrigidas.</li> +</ul> +<p>A <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificação do HTML5</a> (en) fornece descrições mais detalhadas do que os padrões anteriores do HTML de como transformar um fluxo de bytes em uma árvore DOM. Isto resultará em implementações mais consistentes do navegador. Em outras palavras, o suporte ao HTML5 no Gecko, WebKit e Internet Explorer (IE) se tornará mais consistente um com o outro.</p> +<h2 id="Changed_parser_behaviors">Changed parser behaviors</h2> +<p>Some changes to the way that the Gecko 2 parser behaves, as compared to earlier versions of Gecko, may affect web developers, depending on how you've written your code in the past and what browsers you've tested it on.</p> +<h3 id="Tokenization_of_left_angle-bracket_within_a_tag">Tokenization of left angle-bracket within a tag</h3> +<p>Given the string <code><foo<bar></code>, the new parser reads it as one tag named <code>foo<bar</code>. This behavior is consistent with IE and Opera, and is different from Gecko 1.x and WebKit, which read it as two tags, <code>foo</code> and <code>bar</code>. If you previously tested your code in IE and Opera, then you probably don't have any tags like this. If you tested your site only with Gecko 1.x or WebKit (for example, Firefox-only intranets or WebKit-oriented mobile sites), then you might have tags that match this pattern, and they will behave differently with Gecko 2.</p> +<h3 id="Calling_document.write()_during_parsing">Calling document.write() during parsing</h3> +<p>Prior to HTML5, Gecko and WebKit allowed calls to <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>during parsing</em> to insert content into the source stream. This behavior was inherently <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">racy</a>, as the content was inserted into a timing-dependent point in the source stream. If the call happened after the parser was done, the inserted content replaced the document. In IE, such calls are either ignored or imply a call to <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, replacing the document. In HTML5, <code>document.write()</code> can only be called from a script that is created by a {{ HTMLElement("script") }} tag that does not have the <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> or <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code> attributes set. With the HTML5 parser, calls to <code>document.write()</code> in any other context either are ignored or replace the document.</p> +<p>Some contexts from which you should <em>not</em> call <code>document.write()</code> include:</p> +<ul> + <li>scripts created using <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement()</a></li> + <li>event handlers</li> + <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">setTimeout()</a></li> + <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval">setInterval()</a></li> + <li><code><script async src="..."></code></li> + <li><code><script defer src="..."></code></li> +</ul> +<p>If you use the same mechanism for loading script libraries for all browsers including IE, then your code probably will not be affected by this change. Scripts that serve racy code to Firefox, perhaps while serving safe code to IE, will see a difference due to this change. Firefox writes a warning to the JavaScript console when it ignores a call to <code>document.write()</code>.</p> +<h3 id="Lack_of_Reparsing">Lack of Reparsing</h3> +<p>Prior to HTML5, parsers reparsed the document if they hit the end of the file within certain elements or within comments. For example, if the document lacked a <code></title></code> closing tag, the parser would reparse to look for the first '<' in the document, or if a comment was not closed, it would look for the first '>'. This behavior created a security vulnerability. If an attacker could force a premature end-of-file, the parser might change which parts of the document it considered to be executable scripts. In addition, supporting reparsing led to unnecessarily complex parsing code.</p> +<p>With HTML5, parsers no longer reparse documents. This change has the following consequences for web developers:</p> +<ul> + <li>If you omit the closing tag for <title>, <style>, <textarea>, or <xmp>, the page <em>will</em> fail to be parsed. IE already fails to parse documents with a missing </title> tag, so if you test with IE, you probably don't have that problem.</li> + <li>If you forget to close a comment, the page will most likely fail to be parsed. However, unclosed comments often already break in existing browsers for one reason or another, so it's unlikely that you have this issue in sites that are tested in multiple browsers.</li> + <li>In an inline script, in order to use the literal strings <code></script></code> and <code><!--</code>, you should prevent them from being parsed literally by expressing them as <code>\u003c/script></code> and <code>\u003c!--</code>. The older practice of escaping the string <code></script></code> by surrounding it with comment markers, while supported by HTML5, is problematic in cases where the closing comment marker is omitted (see preceding point). You can avoid such problems by using the character code for the initial '<' instead.</li> +</ul> +<h2 id="Performance_improvement_with_speculative_parsing">Performance improvement with speculative parsing</h2> +<p>Unrelated to the requirements of HTML5 specification, the Gecko 2 parser uses <em>speculative parsing</em>, in which it continues parsing a document while scripts are being downloaded and executed. This results in improved performance compared to older parsers, because most of the time, Gecko can complete these tasks in parallel.</p> +<p>To best take advantage of speculative parsing, and help your pages to load as quickly as possible, ensure that when you call <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write()</a>, you write a <em>balanced sub-tree</em> within that chunk of script. A balanced sub-tree is HTML code in which any elements that are opened are also closed, so that after the script, the elements left open are the same ones that were open before the script. The open and closing tags do not need to be written by the same <code>document.write()</code> call, as long as they are within the same <code><script></code> tag.</p> +<p>Please note that you shouldn't use end tags for void elements that don't have end tags: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (There are also some element whose end tags can be omitted in some cases, such as {{ HTMLElement('p') }} in the example below, but it's simpler to always use end tags for those elements than to make sure that the end tags are only omitted when they aren't necessary.)</p> +<p>For example, the following code writes a balanced sub-tree:</p> +<pre><script> + document.write("<div>"); + document.write("<p>Some content goes here.</p>"); + document.write("</div>"); +</script> +<!-- Non-script HTML goes here. --> +</pre> +<p>In contrast, the following code contains two scripts with unbalanced sub-trees, which causes speculative parsing to fail and therefore the time to parse the document is longer.</p> +<pre><script>document.write("<div>");</script> +<p>Some content goes here.</p> +<script>document.write("</div>");</script> +</pre> +<p>For more information, see <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/Optimizing Your Pages for Speculative Parsing">Optimizing your pages for speculative parsing</a>.</p> +<p> </p> diff --git a/files/pt-pt/web/guide/html/html5/index.html b/files/pt-pt/web/guide/html/html5/index.html new file mode 100644 index 0000000000..87e542c8c8 --- /dev/null +++ b/files/pt-pt/web/guide/html/html5/index.html @@ -0,0 +1,169 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - Desenvolvimento da Web + - Guía + - HTML + - HTML5 + - Resumo + - Sinopse + - Web +translation_of: Web/Guide/HTML/HTML5 +--- +<p class="summary">HTML5 é a última evolução no padrão que define o <a href="/pt-PT/docs/Web/HTML_Linguagem_de_marcacao_de_hipertexto" title="HTML">HTML</a>. O termo representa dois conceitos diferentes. Esta é uma nova versão da linguagem HTML, com novos elementos, atributos e comportamentos, <strong>e</strong> um conjunto maior de tecnologias que permite a criação de sites e aplicações da Web mais diversos e poderosos. Este conjunto às vezes é chamado de HTML5 e amigos e, muitas vezes, abreviado apenas para HTML5.</p> + +<p>Desenhado para ser utilizado por todos os programadores da <strong>Web Aberta</strong>, esta página de referência interliga para inúmeros recursos sobre as tecnologias em HTML5, classificadas em vários grupos com base nas suas funções.</p> + +<ul> + <li><em>Semântica</em>: <span id="result_box" lang="pt"><span>permitindo que descreva mais precisamente o que é o seu conteúdo.</span></span></li> + <li><em>Conetividade</em>: permitindo que <span id="result_box" lang="pt"><span> comunique com o servidor de maneiras novas e inovadoras.</span></span></li> + <li><em>Off-line e armazenamento</em>: permitindo webpages <span id="result_box" lang="pt"><span> armazenem dados localmente </span></span><span lang="pt"><span>no client-side (lado do cliente) e operem offline de forma mais eficiente.</span></span></li> + <li><em>Multimédia</em>: <span id="result_box" lang="pt"><span>tornando o vídeo e áudio de primeira classe cidadãos na Open Web.</span></span></li> + <li><em>Gráficos e efeitos 2D/3D</em>: <span id="result_box" lang="pt"><span>permitindo uma gama muito mais diversificada de opções de apresentação.</span></span></li> + <li><em>Desempenho e integração</em>: <span id="result_box" lang="pt"><span>proporcionando maior otimização de velocidade e melhor uso do hardware do computador.</span></span></li> + <li><em>Acesso ao dispositivo</em>: <span id="result_box" lang="pt"><span>permitindo o uso de vários dispositivos de entrada e saída.</span></span></li> + <li><em>Estilização</em>: <span id="result_box" lang="pt"><span>permitindo que os autores escrevam temas mais sofisticados.</span></span></li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="SemÂntIcA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemÂntIcA</h2> + +<dl> + <dt><a href="/pt-PT/docs/Web/Guide/HTML/Utilizar_estruturas_e_seccoes_de_HTML" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> + <dd>A look at the new outlining and sectioning elements in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">Forms improvements</a></dt> + <dd>A look at the <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">constraint validation API</a>, several new attributes, new values for the {{HTMLElement("input")}} attribute {{htmlattrxref("type", "input")}} and the new {{HTMLElement("output")}} element.</dd> + <dt>New semantic elements</dt> + <dd>Beside sections, media and forms elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the number of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Improvement in {{HTMLElement("iframe")}}</dt> + <dd>Using the {{htmlattrxref("sandbox", "iframe")}} and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Allows directly embedding mathematical formulas.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt> + <dd>This article introduces how to indicate to the browser that you are using HTML5 in your web design or web application.</dd> + <dt><a href="https://www.wpkube.com/html5-cheat-sheet/">HTML5 Cheat Sheet</a></dt> + <dd>A handy HTML 5 cheat sheet for beginners who want to master HTML 5, its elements, event attributes and compatibility.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="ConetiviDADE" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ConetiviDADE</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Off-line_e_ARMAZENAMENTO" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Off-line e ARMAZENAMENTO</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="MultimÉdia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MultimÉdia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="GRÁFICOS_E_EFEITOS_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">GRÁFICOS E EFEITOS 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="DESEMPENHO_E_IntegraÇÃO" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">DESEMPENHO E IntegraÇÃO</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater 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>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="ACESSO_AO_DISPOSITIVO" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">ACESSO AO DISPOSITIVO</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="ESTILIZAÇÃO" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">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="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 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.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/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. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> diff --git a/files/pt-pt/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-pt/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..7a30759282 --- /dev/null +++ b/files/pt-pt/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,20 @@ +--- +title: Introdução ao HTML5 +slug: Web/HTML/HTML5/Introdução_ao_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p>O <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> (en), cujas novidades começaram a ser implementadas no Gecko 1.8.1, é a mais nova versão do padrão HTML. Ela oferece novas características para proporcionar não somente um rico suporte à mídia, mas também para melhorar o suporte à criação de aplicações web que podem interagir com o usuário, seus dados locais e servidores de maneira mais fácil e efetiva.</p> + +<p>Como o HTML5 ainda está em estágio de projeto, mudanças às especificações são inevitáveis. Por causa disso, nem todas as características são suportadas por todos os navegadores ainda. Entretanto, o Gecko (e por extensão, o Firefox) possui um suporte inicial ao HTML5 muito bom e o trabalho continua no caminho de suportar cada vez mais características. Você pode encontrar uma lista das características do HTML5 suportadas pelo Gecko na <a href="/pt/HTML/HTML5" title="pt/HTML/HTML5">página principal do HTML5</a>.</p> + +<h2 id="O_doctype_do_HTML5">O doctype do HTML5</h2> + +<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>Este doctype tão simples, permitirá que mesmo os navegadores que atualmente não suportam o HTML5, o considerem como o modo padrão, o que significa que eles irão interpretar as partes do HTML já estabelecidas em um modo complacente do HTML5, ignorando as novas características do HTML5 não suportadas pelos mesmos.</p> diff --git a/files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html b/files/pt-pt/web/guide/html/using_html_sections_and_outlines/index.html index fd11f62887..fd11f62887 100644 --- a/files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html +++ b/files/pt-pt/web/guide/html/using_html_sections_and_outlines/index.html |