From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/pt-pt/web/css/azimuth/index.html | 72 ----- .../css/como_come\303\247ar/dados_xml/index.html" | 239 --------------- .../interfaces_de_usu\303\241rio_xul/index.html" | 336 --------------------- 3 files changed, 647 deletions(-) delete mode 100644 files/pt-pt/web/css/azimuth/index.html delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/interfaces_de_usu\303\241rio_xul/index.html" (limited to 'files/pt-pt/web/css') 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 ---- -

{{ CSSRef() }}

-

Resumo

-

Em combinação com elevation, azimuth 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.

- -

Sintaxe

-
azimuth: angle | [[ left-side | far-left | left |
-    center-left | center | center-right | right |
-    far-right | right-side ] || behind ] | leftwards |
-    rightwards | inherit
-
-

Valores

-
-
- angle 
-
- Posição de fonte audível é descrita como um ângulo dentro da faixa de -360deg até 360deg. O valor 0deg significa diretamente adiante do centro do estágio de som (este é o valor padrão). 90deg é para a direita, 180deg é atrás e 270deg ou -90deg é para a esquerda.
-
-

Image:Azimuth.png

-

Palavras-chave relativas a posição

- -

Exemplos

-
h1   { azimuth: 30deg }
-td.a { azimuth: far-right }          /*  60deg */
-#12  { azimuth: behind far-right }   /* 120deg */
-p.comment { azimuth: behind }        /* 180deg */
-
-

Especificações

- -

== Compatibilidade com navegadores == TBD (this might be abandoned in favour of a centralized compatibility chart)

-

Veja também

-

{{ Cssxref("elevation") }}

-

Categorias

-

Interwiki Language Links

-

{{ languages( { "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth" } ) }}

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" deleted file mode 100644 index d0245353fa..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/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 ---- -

{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}

- -

 

- -

Esta página contém um exemplo de como você pode usar o CSS com dados XML.

- -

Você cria um documento XML de amostra e uma folha de estilo que você pode usar para exibí-lo em seu navegador.

- -

Informação: Dados XML

- -

XML (eXtensible Markup Language) é uma linguagem de propósito geral para qualquer tipo de dados estruturados.

- -

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.

- -

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.

- - - - - - - - -
Exemplo
Dados em um documento XML usando tags <INFO>. Você quer que os elementos INFO do documento sejam mostrados como parágrafos no HTML. -

Na folha de estilo do documento, você especifica como os elementos INFO serão exibidos:

- -
- 
-INFO {
-  display: block;
-  margin: 1em 0;
-  }
-
-
-
- -

Os valores mais comuns para a propriedade display são:

- - - - - - - - - - - - -
blockMonstrado como DIV do HTML (para cabeçalhos, parágrafos)
inlineMostrado como SPAN do HTML (para ênfases no texto)
- -

Adicione seu próprio estilo de regras para especificar a fonte, espaçamento e outros detalhes da mesma maneira que no HTML.

- - - - - - - - -
Mais detalhes
Outros valores de display mostram o elemento como o item de uma lista, ou como o componente de uma tabela. -

Para a lista completa de tipos de exibição, veja The display property em CSS Specification.

- -

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.

- -

Para mais informações sobre o XML no Mozilla, veja a página XML neste wiki.

-
- -

Ação: Uma demonstração XML

- -

Crie um novo arquivo XML, doc9.xml. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

- -
-
<?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>
-
-
- -

Crie um novo arquivo CSS, style9.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

- -
-
/*** 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";
-  }
-
-
- -

Abra o documento em seu navegador:

- - - - - - - -
-
-

Oceans

- -

Arctic
- Area: 13,000 million km²
- Mean depth: 1,200 m

- -

Atlantic
- Area: 87,000 million km²
- Mean depth: 3,900 m

- -

. . .

-
-
- -


- Notas sobre esta demonstração:

- - - -

 

- - - - - - - - -
Desafio
Mude a folha de estilo de modo que ela mostre o documento como uma tabela. -

(Veja o capítulo Tables em CSS Specification para exemplos que você pode adaptar.)

-
- -

O que vem depois?

- -

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 Discussão.

- -

Esta é a última página do tutorial. Para mais informações sobre CSS no Mozilla, veja a página principal CSS neste wiki.

- -

{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}

- -

Categorias

- -

Interwiki Language Links

diff --git "a/files/pt-pt/web/css/como_come\303\247ar/interfaces_de_usu\303\241rio_xul/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/interfaces_de_usu\303\241rio_xul/index.html" deleted file mode 100644 index 46408abaa8..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/interfaces_de_usu\303\241rio_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 ---- -

{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}

- -

Esta página ilustra a linguagem especializada do Mozilla para criação de interfaces de usuário.

- -

Você cria uma simples demonstração que roda no seu navegador Mozilla.

- -

Informação: Interfaces de usuário

- -

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.

- -

O Mozilla supera esta limitação providenciando uma linguagem especializada para criar interfaces de usuário: XUL (XML User-interface Language, usualmente pronunciada como "zool").

- -

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.

- -

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.

- -

Como outras linguagens baseadas em XML, XUL usa folhas de estilo CSS.

- - - - - - - - -
Mais detalhes
Para maiores informações sobre interfaces de usuário XUL, veja a página XUL neste wiki.
- -

Ação: Uma demonstração XUL

- -

Crie um novo documento XUL de um simples arquivo de texto, doc7.xul. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

- -
-
<?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>
-
-
- -

Crie um novo arquivo CSS, style7.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

- -
-
/*** 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;
-  }
-
-
- -

Crie um novo arquivo de texto, script7.js. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego todo o conteúdo daqui:

- -
-
// 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())
-    }
-  }
-
-
- -

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.

- -

Abra o documento no seu navegador Mozilla e use a interface.

- -

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:

- - - - - - - -
-

XUL demonstration

- -
-

Day of week calculator

- - - - - - - - - - - - - - - - -
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
-
-

Clear Today

-
-
-
- -
-

June 27, 2005

-
-
- -

Notas sobre esta demonstração:

- - - -

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.

- - - - - - - - -
Desafio
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. -

Descubra a classe do elemento html:input. Este é o elemento que atualmente recebe a entrada do usuário.

- -

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).

-
- -

O que vem depois?

- -

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 Discussão.

- -

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: Gráficos SVG

- -

{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}

-- cgit v1.2.3-54-g00ecf