diff options
Diffstat (limited to 'files/pt-pt/web')
5 files changed, 0 insertions, 863 deletions
diff --git a/files/pt-pt/web/css/azimuth/index.html b/files/pt-pt/web/css/azimuth/index.html deleted file mode 100644 index 24e469dc63..0000000000 --- a/files/pt-pt/web/css/azimuth/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: azimuth -slug: Web/CSS/azimuth -tags: - - Referencia_CSS -translation_of: Archive/Web/CSS/azimuth ---- -<p>{{ CSSRef() }}</p> -<h3 id="Resumo" name="Resumo">Resumo</h3> -<p>Em combinação com <code><a href="/pt/CSS/elevation" title="pt/CSS/elevation">elevation</a></code>, <code>azimuth</code> habilita diferentes fontes de áudio para serem posicionadas espacialmente para apresentações aurais. Isto é importante porque proporciona uma maneira natural de contar várias vozes a parte, como cada uma pode ser posicionada para originar em uma localização diferente no estágio de som. Saída estéreo produz um estágio de som lateral, enquanto instalações de fones de ouvido e microfones permitem um estágio tridimencional completo.</p> -<ul> - <li>Valor inicial: center</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: sim</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="/pt/CSS/Media/Aural" title="pt/CSS/Media/Aural">aural</a></li> - <li>Valor computado: ângulo normalizado</li> -</ul> -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> -<pre class="eval">azimuth: <em>angle</em> | [[ left-side | far-left | left | - center-left | center | center-right | right | - far-right | right-side ] || behind ] | leftwards | - rightwards | inherit -</pre> -<h3 id="Valores" name="Valores">Valores</h3> -<dl> - <dt> - angle </dt> - <dd> - Posição de fonte audível é descrita como um ângulo dentro da faixa de <code>-360deg</code> até <code>360deg</code>. O valor <code>0deg</code> significa diretamente adiante do centro do estágio de som (este é o valor padrão). <code>90deg</code> é para a direita, <code>180deg</code> é atrás e <code>270deg</code> ou <code>-90deg</code> é para a esquerda.</dd> -</dl> -<p><img alt="Image:Azimuth.png"></p> -<h4 id="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o" name="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o">Palavras-chave relativas a posição</h4> -<ul> - <li><strong>left-side</strong>: O mesmo que <code>270deg</code>.</li> - <li><strong>left-side behind</strong>: O mesmo que <code>270deg</code>.</li> - <li><strong>far-left</strong>: O mesmo que <code>300deg</code>.</li> - <li><strong>far-left behind</strong>: O mesmo que <code>240deg</code>.</li> - <li><strong>left</strong>: O mesmo que <code>320deg</code>.</li> - <li><strong>left behind</strong>: O mesmo que <code>220deg</code>.</li> - <li><strong>center-left</strong>: O mesmo que <code>340deg</code>.</li> - <li><strong>center-left behind</strong>: O mesmo que <code>200deg</code>.</li> - <li><strong>center</strong>: O mesmo que <code>0deg</code>.</li> - <li><strong>center behind</strong>: O mesmo que <code>180deg</code>.</li> - <li><strong>center-right</strong>: O mesmo que <code>20deg</code>.</li> - <li><strong>center-right behind</strong>: O mesmo que <code>160deg</code>.</li> - <li><strong>right</strong>: O mesmo que <code>40deg</code>.</li> - <li><strong>right behind</strong>: O mesmo que <code>140deg</code>.</li> - <li><strong>far-right</strong>: O mesmo que <code>60deg</code>.</li> - <li><strong>far-right behind</strong>: O mesmo que <code>120deg</code>.</li> - <li><strong>right-side</strong>: O mesmo que <code>90deg</code>.</li> - <li><strong>right-side behind</strong>: O mesmo que <code>90deg</code>.</li> - <li><strong>behind</strong>: O mesmo que <code>180deg</code>. Também é usado como um modificador para outros valores de palavras-chave posicionais, como acima.</li> - <li><strong>leftwards</strong>: Move o som no sentido anti-horário em 20 graus, relativo ao ângulo corrente.</li> - <li><strong>rightwards</strong>: Move o som no sentido horário em 20 graus, relatico ao ângulo corrente.</li> -</ul> -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> -<pre>h1 { azimuth: 30deg } -td.a { azimuth: far-right } /* 60deg */ -#12 { azimuth: behind far-right } /* 120deg */ -p.comment { azimuth: behind } /* 180deg */ -</pre> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a></li> -</ul> -<p><span class="comment">== Compatibilidade com navegadores == TBD (this might be abandoned in favour of a centralized compatibility chart)</span></p> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> -<p>{{ Cssxref("elevation") }}</p> -<p><span class="comment">Categorias</span></p> -<p><span class="comment">Interwiki Language Links</span></p> -<p>{{ languages( { "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth" } ) }}</p> diff --git a/files/pt-pt/web/css/como_começar/dados_xml/index.html b/files/pt-pt/web/css/como_começar/dados_xml/index.html deleted file mode 100644 index d0245353fa..0000000000 --- a/files/pt-pt/web/css/como_começar/dados_xml/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Dados XML -slug: Web/CSS/Como_começar/Dados_XML -tags: - - 'CSS:Como_começar' -translation_of: Archive/Beginner_tutorials/XML_data ---- -<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</p> - -<p> </p> - -<p>Esta página contém um exemplo de como você pode usar o CSS com dados XML.</p> - -<p>Você cria um documento XML de amostra e uma folha de estilo que você pode usar para exibí-lo em seu navegador.</p> - -<h3 id="Informa.C3.A7.C3.A3o:_Dados_XML" name="Informa.C3.A7.C3.A3o:_Dados_XML">Informação: Dados XML</h3> - -<p><em><a href="/pt/XML" title="pt/XML">XML</a></em> (eXtensible Markup Language) é uma linguagem de propósito geral para qualquer tipo de dados estruturados.</p> - -<p>Por padrão, seu navegador Mozilla mostra o XML em um formato muito similar aos dados originais no arquivo XML. Você vê as tags reais que definem a estrutura dos dados.</p> - -<p>Ligando a folha de estilo CSS com o documento XML, você pode definir outras maneiras para mostrá-lo. Para fazer isto, sua folha de estilo usa regras que mapeiam os tags no documento XML para mostrar tipos usados pelo HTML.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Exemplo</caption> - <tbody> - <tr> - <td>Dados em um documento XML usando tags <code><INFO></code>. Você quer que os elementos <small>INFO</small> do documento sejam mostrados como parágrafos no HTML. - <p>Na folha de estilo do documento, você especifica como os elementos <small>INFO</small> serão exibidos:</p> - - <div style="width: 30em;"> - <pre class="eval"> -INFO { - display: block; - margin: 1em 0; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>Os valores mais comuns para a propriedade <code>display</code> são:</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"><code>block</code></td> - <td>Monstrado como <small>DIV</small> do HTML (para cabeçalhos, parágrafos)</td> - </tr> - <tr> - <td><code>inline</code></td> - <td>Mostrado como <small>SPAN</small> do HTML (para ênfases no texto)</td> - </tr> - </tbody> -</table> - -<p>Adicione seu próprio estilo de regras para especificar a fonte, espaçamento e outros detalhes da mesma maneira que no HTML.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption>Mais detalhes</caption> - <tbody> - <tr> - <td>Outros valores de <code>display</code> mostram o elemento como o item de uma lista, ou como o componente de uma tabela. - <p>Para a lista completa de tipos de exibição, veja <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> em CSS Specification.</p> - - <p>Usando CSS sozinho, a estrutura de exibição precisa ser a mesma da estrutura do documento. Outras tecnologias pode modificar a estrutura da exibição — por exemplo, o XBL pode adicionar conteúdo, e o JavaScript pode modificar o DOM.</p> - - <p>Para mais informações sobre o XML no Mozilla, veja a página <a href="/pt/XML" title="pt/XML">XML</a> neste wiki.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML">Ação: Uma demonstração XML</h3> - -<p>Crie um novo arquivo XML, <code>doc9.xml</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre><?xml version="1.0"?> -<!-- XML demonstration --> - -<?xml-stylesheet type="text/css" href="style9.css"?> - -<!DOCTYPE planet> -<planet> - -<ocean> -<name>Arctic</name> -<area>13,000</area> -<depth>1,200</depth> -</ocean> - -<ocean> -<name>Atlantic</name> -<area>87,000</area> -<depth>3,900</depth> -</ocean> - -<ocean> -<name>Pacific</name> -<area>180,000</area> -<depth>4,000</depth> -</ocean> - -<ocean> -<name>Indian</name> -<area>75,000</area> -<depth>3,900</depth> -</ocean> - -<ocean> -<name>Southern</name> -<area>20,000</area> -<depth>4,500</depth> -</ocean> - -</planet> -</pre> -</div> - -<p>Crie um novo arquivo CSS, <code>style9.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre>/*** XML demonstration ***/ - -planet:before { - display: block; - width: 8em; - font-weight: bold; - font-size: 200%; - content: "Oceans"; - margin: -.75em 0px .25em -.25em; - padding: .1em .25em; - background-color: #cdf; - } - -planet { - display: block; - margin: 2em 1em; - border: 4px solid #cdf; - padding: 0px 1em; - background-color: white; - } - -ocean { - display: block; - margin-bottom: 1em; - } - -name { - display: block; - font-weight: bold; - font-size: 150%; - } - -area { - display: block; - } - -area:before { - content: "Area: "; - } - -area:after { - content: " million km\B2"; - } - -depth { - display: block; - } - -depth:before { - content: "Mean depth: "; - } - -depth:after { - content: " m"; - } -</pre> -</div> - -<p>Abra o documento em seu navegador:</p> - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> - <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> - - <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br> - Area: 13,000 million km²<br> - Mean depth: 1,200 m</p> - - <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br> - Area: 87,000 million km²<br> - Mean depth: 3,900 m</p> - - <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p> - </div> - </td> - </tr> - </tbody> -</table> - -<p><br> - Notas sobre esta demonstração:</p> - -<ul> - <li>O 2 sobre-escrito (em "million km²") um caractér Unicode, é codificado com <code>\B2</code> no arquivo CSS.</li> - <li>O cabeçalho, "Oceans", tem uma margem negativa no topo, movendo-o para cima quando exibido no topo da borda.</li> -</ul> - -<p> </p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Desafio</caption> - <tbody> - <tr> - <td>Mude a folha de estilo de modo que ela mostre o documento como uma tabela. - <p>(Veja o capítulo <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification para exemplos que você pode adaptar.)</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h4> - -<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Dados_XML" title="Talk:pt/CSS/Como_começar/Dados_XML">Discussão</a>.</p> - -<p>Esta é a última página do tutorial. Para mais informações sobre CSS no Mozilla, veja a página principal <a href="/pt/CSS" title="pt/CSS">CSS</a> neste wiki.</p> - -<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html b/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html deleted file mode 100644 index 46408abaa8..0000000000 --- a/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Interfaces de usuário XUL -slug: Web/CSS/Como_começar/Interfaces_de_usuário_XUL -tags: - - 'CSS:Como_começar' -translation_of: Archive/Beginner_tutorials/XUL_user_interfaces ---- -<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p> - -<p>Esta página ilustra a linguagem especializada do Mozilla para criação de interfaces de usuário.</p> - -<p>Você cria uma simples demonstração que roda no seu navegador Mozilla.</p> - -<h2 id="Informa.C3.A7.C3.A3o_Intefaces_de_usu.C3.A1rio" name="Informa.C3.A7.C3.A3o:_Intefaces_de_usu.C3.A1rio">Informação: Interfaces de usuário</h2> - -<p>Embora o HTML tenha algum suporte à interfaces de usuário, ele não suporta todas as características que você precisa para fazer uma aplicação autônoma.</p> - -<p>O Mozilla supera esta limitação providenciando uma linguagem especializada para criar interfaces de usuário: <em>XUL</em> (XML User-interface Language, usualmente pronunciada como "<em>zool</em>").</p> - -<p>Em XUL, muitas características comuns de interfaces de usuário podem ser construídas. Por exemplo, XUL proporciona janelas especializadas como diálogos, assim como barras de estado, menus, barras de ferramenta, e mesmo navegadores.</p> - -<p>Mais características especializadas podem ser construídas em partes usando XUL juntamente com outras tecnologias que você viu neste tutorial: estilo CSS, código JavaScript e XBL bindings.</p> - -<p>Como outras linguagens baseadas em XML, XUL usa folhas de estilo CSS.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> - <caption>Mais detalhes</caption> - <tbody> - <tr> - <td>Para maiores informações sobre interfaces de usuário XUL, veja a página <a href="/pt/XUL" title="pt/XUL">XUL</a> neste wiki.</td> - </tr> - </tbody> -</table> - -<h2 id="A.C3.A7.C3.A3o_Uma_demonstra.C3.A7.C3.A3o_XUL" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XUL">Ação: Uma demonstração XUL</h2> - -<p>Crie um novo documento XUL de um simples arquivo de texto, <code>doc7.xul</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre><?xml version="1.0"?> -<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> -<?xml-stylesheet type="text/css" href="style7.css"?> - -<window - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" - title="CSS Getting Started - XUL demonstration" - onload="init();"> - -<script type="application/x-javascript" src="script7.js"/> - -<label class="head-1" value="XUL demonstration"/> - -<vbox> - - <groupbox class="demo-group"> - <caption label="Day of week calculator"/> - <grid> - <columns> - <column/> - <column/> - </columns> - <rows> - <row> - <label class="text-prompt" value="Date:" - accesskey="D" control="date-text"/> - <textbox id="date-text" type="timed" - timeout="750" oncommand="refresh();"/> - </row> - <row> - <label value="Day:"/> - <hbox id="day-box"> - <label class="day" value="Sunday" disabled="true"/> - <label class="day" value="Monday" disabled="true"/> - <label class="day" value="Tuesday" disabled="true"/> - <label class="day" value="Wednesday" disabled="true"/> - <label class="day" value="Thursday" disabled="true"/> - <label class="day" value="Friday" disabled="true"/> - <label class="day" value="Saturday" disabled="true"/> - </hbox> - </row> - </rows> - </grid> - <hbox class="buttons"> - <button id="clear" label="Clear" accesskey="C" - oncommand="clearDate();"/> - <button id="today" label="Today" accesskey="T" - oncommand="setToday();"/> - </hbox> - </groupbox> - - <statusbar> - <statusbarpanel id="status"/> - </statusbar> - -</vbox> - -</window> -</pre> -</div> - -<p>Crie um novo arquivo CSS, <code>style7.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre>/*** XUL demonstration ***/ -window { - -moz-box-align: start; - background-color: -moz-dialog; - font: -moz-dialog; - padding: 2em; - } - -.head-1 { - font-weight: bold; - font-size: 200%; - padding-left: 5px; - } - - -/* the group box */ -.demo-group { - padding: 1em; - } - -.demo-group grid { - margin-bottom: 1em; - } - -.demo-group column { - margin-right: .5em; - } - -.demo-group row { - margin-bottom: .5em; - } - -.demo-group .buttons { - -moz-box-pack: end; - } - - -/* the day-of-week labels */ -.day { - margin-left: 1em; - } - -.day[disabled] { - color: #777; - } - -.day:first-child { - margin-left: 4px; - } - - -/* the left column labels */ -.text-prompt { - padding-top: .25em; - } - - -/* the date input box */ -#date-text { - max-width: 8em; - } - - -/* the status bar */ -statusbar { - width: 100%; - border: 1px inset -moz-dialog; - margin: 4px; - padding: 0px 4px; - } - -#status { - padding: 4px; - } - -#status[warning] { - color: red; - } -</pre> -</div> - -<p>Crie um novo arquivo de texto, <code>script7.js</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego todo o conteúdo daqui:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre>// XUL demonstration - -var dateBox, dayBox, currentDay, status; // elements - -// called by window onLoad -function init() { - dateBox = document.getElementById("date-text") - dayBox = document.getElementById("day-box") - status = document.getElementById("status") - setToday(); - } - -// called by Clear button -function clearDate() { - dateBox.value = "" - refresh() - } - -// called by Today button -function setToday() { - var d = new Date() - dateBox.value = (d.getMonth() + 1) - + "/" + d.getDate() - + "/" + d.getFullYear() - refresh() - } - -// called by Date textbox -function refresh() { - var d = dateBox.value - var theDate = null - - showStatus(null) - if (d != "") { - try { - var a = d.split("/") - var theDate = new Date(a[2], a[0] - 1, a[1]) - showStatus(theDate) - } - catch (ex) {} - } - setDay(theDate) - } - -// internal -function setDay(aDate) { - if (currentDay) currentDay.setAttribute("disabled", "true") - if (aDate == null) currentDay = null - else { - var d = aDate.getDay() - currentDay = dayBox.firstChild - while (d-- > 0) currentDay = currentDay.nextSibling - currentDay.removeAttribute("disabled") - } - dateBox.focus(); - } - -function showStatus(aDate) { - if (aDate == null) { - status.removeAttribute("warning") - status.setAttribute("label", "") - } - else if (aDate === false || isNaN(aDate.getTime())) { - status.setAttribute("warning", "true") - status.setAttribute("label", "Date is not valid") - } - else { - status.removeAttribute("warning") - status.setAttribute("label", aDate.toLocaleDateString()) - } - } -</pre> -</div> - -<p>Para ver o resultado exatamente como pretendido use o tema padrão do seu navegador. Se você usa um tema diferente, isto mode mudar alguns estilos da interface do usuário e a demonstração pode parecer estranha.</p> - -<p>Abra o documento no seu navegador Mozilla e use a interface.</p> - -<p>Este wiki não suporta XUL e JavaScript nas páginas, então não é possível fazer a demonstração aqui. Deve se parecer com isto:</p> - -<table style="background-color: threedface; border: 2px outset #3366bb; cursor: default; margin: .5em 0; padding: 1em; white-space: nowrap;"> - <tbody> - <tr> - <td> - <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> - - <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> - <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p> - - <table style="background-color: threedface; margin: .5em; padding-right: .5em;"> - <tbody> - <tr> - <td style="padding-right: .5em;"><u>D</u>ate:</td> - <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td> - </tr> - <tr> - <td>Day:</td> - <td style="color: graytext;">Sunday <span style="color: #000000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td> - </tr> - <tr> - <td></td> - <td> - <div style="float: right; margin-top: .5em;"> - <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p> - </div> - </td> - </tr> - </tbody> - </table> - </div> - - <div style="border: 1px inset threedface; margin-top: 1em;"> - <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>Notas sobre esta demonstração:</p> - -<ul> - <li>O documento XUL é ligado à folha de estilo normalmente, e também ligado ao script.</li> - <li>O script não é importante nesta demonstração.</li> - <li>Muito do estilo que você vê é determinado pelo tema do seu navegador.</li> -</ul> - -<p>Examine a folha de estilo do documento para ver se você entende todas as regras dele. Se houver alguma regra que você não entende, comente-a e atualize o seu navegador para ver o efeito no documento.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Desafio</caption> - <tbody> - <tr> - <td>Use a ferramenta DOM Inspector para examinar a caixa de texto Date. Ela é feita de outros elementos que são gerados por seu XBL binding. - <p>Descubra a <em>classe</em> do elemento <code>html:input</code>. Este é o elemento que atualmente recebe a entrada do usuário.</p> - - <p>Usando este conhecimento, adicione uma regra à sua folha de estilo que faça o fundo da caixa Date de um azul pálido quando ele tiver o foco do teclado (mas branco quando o foco do teclado estiver em outro lugar).</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> - -<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Intefaces_de_usu%C3%A1rio" title="Talk:pt/CSS/Como_começar/Intefaces_de_usuário">Discussão</a>.</p> - -<p>Nesta demonstração, você viu que as formas retangulares padrão são comuns na maioria das interfaces de usuário. Mozilla também suporta uma linguagem especializada de gráficos para criar padrões, usando folhas de estilo CSS para especificar o estilo. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Gr%C3%A1ficos_SVG" title="pt/CSS/Como_começar/Gráficos_SVG">Gráficos SVG</a></strong></p> - -<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p> diff --git a/files/pt-pt/web/javascript/novidades_no_javascript/index.html b/files/pt-pt/web/javascript/novidades_no_javascript/index.html deleted file mode 100644 index 42d40e9929..0000000000 --- a/files/pt-pt/web/javascript/novidades_no_javascript/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Novidades no JavaScript -slug: Web/JavaScript/Novidades_no_JavaScript -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/Web/JavaScript/New_in_JavaScript ---- -<div>{{jsSidebar("New_in_JS")}}</div> - -<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p> - -<h2 id="ECMAScript_versions">ECMAScript versions</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt> - <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt> - <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6 support</a></dt> - <dd>Implementation status for the draft ECMA-262 Edition 6 in Mozilla-based engines and products.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript 7 support</a></dt> - <dd>Implementation status for the upcoming ECMA-262 Edition 7 in Mozilla-based engines and products.</dd> -</dl> - -<h2 id="JavaScript_release_notes">JavaScript release notes</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt> - <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd> - <dt>Chrome JavaScript changelog</dt> - <dd>(TODO). See this changelog for JavaScript features implemented in Chrome releases.</dd> -</dl> - -<h2 id="JavaScript_versions">JavaScript versions</h2> - -<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p> - -<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> - <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> - <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> - <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> - Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> - <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> - <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> - Standardization work to be compliant with ECMA-262 3rd Edition.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> - <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> - Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> - <dd>Version shipped in Firefox 2. Released in October 2006.<br> - Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> - <dd>Version shipped in Firefox 3. Released in June 2008.<br> - Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> - <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br> - Includes the TraceMonkey JIT and supports native JSON.</span></dd> - <dt>JavaScript 1.8.2</dt> - <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> - Includes only minor changes.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> - <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> - Includes many new features for ECMA-262 Edition 5 compliance.<br> - This is the last JavaScript version.</dd> -</dl> - -<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt> - <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd> -</dl> diff --git a/files/pt-pt/web/javascript/novidades_no_javascript/novidades_no_javascript_1.8/index.html b/files/pt-pt/web/javascript/novidades_no_javascript/novidades_no_javascript_1.8/index.html deleted file mode 100644 index 4791e4d0e9..0000000000 --- a/files/pt-pt/web/javascript/novidades_no_javascript/novidades_no_javascript_1.8/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Novidades no Javascript 1.8 -slug: Web/JavaScript/Novidades_no_JavaScript/Novidades_no_Javascript_1.8 -tags: - - JavaScript - - Todas_as_Categorias -translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8 ---- -<p>{{jsSidebar("New_in_JS")}}</p> - -<p>O JavaScript 1.8 está programado para ser lançado como parte do Gecko 1.9 (que será incorporado ao <a href="/pt/Firefox_3_para_desenvolvedores" title="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>). Esta é uma atualização menos substancial que o <a href="/en/New_in_JavaScript_1.7">JavaScript 1.7</a>, mas tem algumas atualizações para acompanhar o progresso rumo ao ECMAScript 4/JavaScript 2. Esta liberação incluirá todas as novas características especificadas no <a href="/en/New_in_JavaScript_1.6">JavaScript 1.6</a> e <a href="/en/New_in_JavaScript_1.7">JavaScript 1.7</a>.</p> - -<p>Veja o {{ Bug(380236) }} para acompanhar o progresso do desenvolvimento do JavaScript 1.8.</p> - -<h2 id="Usando_JavaScript_1.8" name="Usando_JavaScript_1.8">Usando JavaScript 1.8</h2> - -<p>A fim de usar algumas das novas características do JavaScript 1.8 no HTML, use:</p> - -<pre class="eval"> <script type="application/javascript;version=1.8"> ... seu código ... </script> -</pre> - -<p>Quando usando o <a href="/en/Introduction_to_the_JavaScript_shell">JavaScript shell</a>, componentes XPCOM ou elementos XUL <code><script></code>, a versão mais recente do Javascript (1.8 no Mozilla 1.9) é usada automaticamente ({{ Bug(381031) }}, {{ Bug(385159) }}).</p> - -<p>Os recursos que requerem o uso das novas palavras-chave "yield" e "let" requerem que você especifique a versão 1.7 ou mais recente, porque o código existente pode usar estas palavras-chave como variáveis ou nomes de função. Os recursos que não introduzem novas palavras-chave (como o gerador de expressões) podem ser usados sem que seja necessário especificar a versão do JavaScript.</p> - -<h2 id="Fechamentos_de_express.C3.B5es" name="Fechamentos_de_express.C3.B5es">Fechamentos de expressões</h2> - -<p>Esta adição nada mais é que uma abreviação para escrever funções simples, dando à linguagem algo similar a uma típica <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">notação lambda</a>.</p> - -<p>JavaScript 1.7 e mais antigos:</p> - -<pre class="eval"> function(x) { return x * x; } -</pre> - -<p>JavaScript 1.8:</p> - -<pre class="eval"> function(x) x * x -</pre> - -<p>Esta sintaxe permite que você deixe de fora as chaves e a declaração 'return' — fazendo-as implícitas. Não há benefício adicionado ao se escrever código desta maneira, à exceção de ser sintaticamente mais curto.</p> - -<p><strong>Exemplos:</strong></p> - -<p>Uma abreviação para ligar ouvintes de evento:</p> - -<pre class="eval"> document.addEventListener("click", function() false, true); -</pre> - -<p>Usando esta notação com alguma das funções de array do JavaScript 1.6:</p> - -<pre class="eval"> elems.some(function(elem) elem.type == "text"); -</pre> - -<h2 id="Gerador_de_express.C3.B5es" name="Gerador_de_express.C3.B5es">Gerador de expressões</h2> - -<p>Esta adição permite que você crie geradores de maneira simples (que foram introduzidos no JavaScript 1.7). Tipicamente você teria que criar uma função personalizada contendo a palavra-chave yield, mas esta adição permite que você use uma sintaxe semelhante à compreensão de arrays para criar uma instrução geradora idêntica.</p> - -<p>No JavaScript 1.7, você poderia escrever algo como o seguinte, a fim de criar um gerador personalizado para um objeto:</p> - -<pre class="eval"> function add3(obj) { - for ( let i in obj ) - yield i + 3; - } - - let it = add3(someObj); - try { - while (true) { - document.write(it.next() + "<br>\n"); - } - } catch (err if err instanceof StopIteration) { - document.write("End of record.<br>\n"); - } -</pre> - -<p>No JavaScript 1.8, você pode contornar a criação de uma função de gerador personalizada usando um gerador de expressões em vez disso:</p> - -<pre class="eval"> let it = (i + 3 for (i in someObj)); - try { - while (true) { - document.write(it.next() + "<br>\n"); - } - } catch (err if err instanceof StopIteration) { - document.write("End of record.<br>\n"); - } -</pre> - -<p>Geradores de expressões também podem ser passados como valores a uma função. Isto é particularmente notável de modo que geradores não serão executados antes que seja absolutamente necessário (diferente de típicas situações de compreensão de array, onde os arrays são construídos antes do tempo). Um exemplo da diferença pode ser visto aqui:</p> - -<p>Usando a compreensão de array do JavaScript 1.7</p> - -<pre class="eval"> handleResults([ i for ( i in obj ) if ( i > 3 ) ]); - - function handleResults( results ) { - for ( let i in results ) - // ... - } -</pre> - -<p>Usando o gerador de expressões do JavaScript 1.8</p> - -<pre class="eval"> handleResults( i for ( i in obj ) if ( i > 3 ) ); - - function handleResults( results ) { - for ( let i in results ) - // ... - } -</pre> - -<p>A diferença significativa entre os dois exemplos, começando pelo que usa o gerador de expressões, é que você poderia usar somente o <em>loop</em> uma vez sobre a estrutura 'obj', ao invés de uma vez compreender o array e novamente iterar com ele.</p> - -<h2 id="Mais_extras_do_Array" name="Mais_extras_do_Array">Mais extras do Array</h2> - -<p>Existem dois novos métodos iterativos de <code><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></code> incluídos no JavaScript 1.8, especificamente:</p> - -<ul> - <li><code><a href="/en/Core_JavaScript_1.5_Reference/Objects/Array/reduce">reduce()</a></code> - executa uma função em cada item no <em>array</em> e coleta os resultados de chamadas anteriores.</li> - <li><code><a href="/en/Core_JavaScript_1.5_Reference/Objects/Array/reduceRight">reduceRight()</a></code> - executa uma função em cada item no <em>array</em> e coleta os resultados de chamadas anteriores, mas em reverso.</li> -</ul> - -<h2 id="Mudan.C3.A7as_na_desestrutura.C3.A7.C3.A3o_for..in" name="Mudan.C3.A7as_na_desestrutura.C3.A7.C3.A3o_for..in">Mudanças na desestruturação for..in</h2> - -<p>Menção em <a href="/en/New_in_JavaScript_1.7#Looping_across_objects">en:New_in_JavaScript_1.7#Looping_across_objects</a> ({{ Bug(366941) }}).</p> - -<h2 id="Mudan.C3.A7as_iminentes" name="Mudan.C3.A7as_iminentes">Mudanças iminentes</h2> - -<p>As mudanças esperadas para a chegada no JavaScript 1.8 incluem:</p> - -<ul> - <li>Codificação e decodificação JSON.</li> - <li>Sintaxe <em>slice</em>.</li> - <li>Desestruturação generalizada <code>for...in</code> (isso significa algo diferente de <a href="#Chances_in_destrugturing_for..in">#Chances in destrugturing for..in</a>? --<a href="/User:Nickolay">Nickolay</a> 10:52, 9 de setembro de 2007 (PDT)).</li> -</ul> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> |