From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../cascade_and_inheritance/index.html | 128 ++++++ .../learn/css/building_blocks/selectors/index.html | 430 +++++++++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 126 ++++++ .../index.html | 112 ++++++ .../index.html | 106 +++++ .../conflicting/learn/css/first_steps/index.html | 98 +++++ .../video_and_audio_content/index.html | 240 ++++++++++++ .../learn/javascript/objects/index.html | 352 +++++++++++++++++ 8 files changed, 1592 insertions(+) create mode 100644 files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html create mode 100644 files/pt-br/conflicting/learn/css/first_steps/index.html create mode 100644 files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/pt-br/conflicting/learn/javascript/objects/index.html (limited to 'files/pt-br/conflicting/learn') diff --git a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..7880e00f6d --- /dev/null +++ b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,128 @@ +--- +title: Cascata e herança +slug: Web/CSS/Getting_Started/Cascading_and_inheritance +tags: + - Guía + - Iniciante +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.

+ +

Informação: Cascata e Herança

+ +

O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.

+ +

Existem três fontes principais de estilos que constituem a cascata. São elas:

+ + + +

O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.

+ +
+
Exemplo
+ +

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

+ +

Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo userContent.css do seu navegador.

+ +

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

+
+ +

Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.

+ +

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

+ +

Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.

+ +

Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.

+ +

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

+ +

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

+ +

Mais detalhes

+ +
+

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

+ +

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

+ +

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

+
+ +

Ação: Usando herança

+ +
    +
  1. Edite o seu arquivo CSS.
    2. +
  2. Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.
    + +

    Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.

    +
    4. +
+ + +
+ + + + + + + + +
Antes
Cascading Style Sheets
+ + + + + + + + +
Depois
Cascading Style Sheets
+ +
+
Desafio
+Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Veja a solução do desafio.
+ +

Qual o próximo?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais seletores.

diff --git a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..3870c68936 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,430 @@ +--- +title: Seletores +slug: Web/CSS/Getting_Started/Seletores +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.

+ +

Informações: Seletores

+ +

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

+ +
strong {
+  color: red;
+}
+
+ +

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

+ +
+
Mais detalhes
+ +

A parte dentro das chaves é a declaração.

+ +

A palavra-chave color é uma propriedade e red é um valor.

+ +

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

+ +

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

+
+ +

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

+ +

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

+ +

Dois atributos são especiais para o CSS. São eles o class e o id.

+ +

Seletores com Classe

+ +

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

+ +

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

+ +

Seletores com ID

+ +

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

+ +

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

+ +
+
Exemplo
+Esta tag HTML tem tanto um atributo class quanto um atributo id: + +
<p class="chave" id="principal">
+
+ +

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

+ +

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

+ +
.chave {
+  color: green;
+}
+
+ +

Esta regra torna negrito um elemento com id principal:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Seletores de Atributo

+ +

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:

+ +
+
[disabled]
+
Seleciona todos os elementos com o atributo "disabled".
+
[type='button']
+
Seleciona todos os elementos do tipo "button".
+
[class~=key]
+
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
+
[lang|=es]
+
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
+
[title*="example" i]
+
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
+
a[href^="https://"]
+
Seleciona links seguros.
+
img[src$=".png"]
+
IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.
+
+ +

Seletores de pseudo-classes

+ +

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

+ +

Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite CSS3 Selectors working spec.

+ +
+
Syntax
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Lista de pseudo-classes

+ + + +

Informação: Especificidade

+ +

Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais específico. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.

+ +
+
Mais detalhes
+ +

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

+
+ +

Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.

+ +

Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.

+ +

Information: Selectors based on relationships

+ +

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
+ +

You can combine these to express complex relationships.

+ +

You can also use the symbol * (asterisk) to mean "any element".

+ +
+
Example
+ +

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:

+ +
    #data-table-1 td:first-child {text-decoration: underline;}
+    #data-table-1 td:first-child + td {text-decoration: line-through;}
+
+ +

The result looks like:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
More details
+ +

In the usual way, if you make a selector more specific, then you increase its priority.

+ +

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

+ +

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

+ +

For more examples about tables, see Tables in the CSS Reference page.

+
+ +

Action: Using class and ID selectors

+ +
    +
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. +
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Now edit your CSS file. Replace the entire contents with: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Save the files and refresh your browser to see the result: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    + +

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    + +

    The ID selector #first has priority over the class and tag selectors.

    +
    5. +
+ +
+
Challenges
+ +
    +
  1. Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Action: Using pseudo-classes selectors

+ +
    +
  1. Create an HTML file with following content: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Now edit your CSS file. Replace the entire contents with: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Action: Using selectors based on relationships and pseudo-classes

+ +

With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

to be applied to an HTML structure like the following:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

See our complete CSS-based dropdown menu example for a possible cue.

+ +

What next?

+ +

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..2ead5ccae7 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,126 @@ +--- +title: Como o CSS funciona +slug: Web/CSS/Getting_Started/Como_CSS_funciona +tags: + - 'CSS:PrimeirosPassos' + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. 

+ +

Informação: Como o CSS funciona

+ +

Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:

+ +
    +
  1. O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
    2. +
  2. O navegador exibe o conteúdo do DOM.
    3. +
+ +

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

+ +

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

+ +

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

+ +

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

+ +
+
Exemplo
+No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Exemplo em tempo real

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Ação: Analisando um DOM

+ +

Utilizando Inspetor DOM

+ +

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

+ +
    +
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. +
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. +
    +
    Mais detalhes
    + +

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    + +

    Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.

    +
    +
    3. +
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. +

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    + +

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

    + +

    Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

    +
    4. +
+ +
+
Desafio
+ +

No DOMi, clique em um nó STRONG.

+ +

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

+ + +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+Veja a solução para o desafio.
+ +

Usando Raio-X Goggles da Web

+ +

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

+ +
    +
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. +
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. +
  3. Abra o seu documento HTML de exemplo.
    4. +
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. +
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. +
+ +

O que vem depois?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html new file mode 100644 index 0000000000..1ccc04f0ce --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html @@ -0,0 +1,112 @@ +--- +title: O que é CSS +slug: Web/CSS/Getting_Started/Oque_é_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

+ +

O que é CSS ?

+ +

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

+ +

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

+ +
+
Examples
+ + +
+ +

Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.

+ +
+
Mais detalhes
+ +

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

+ +

Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.

+ +

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
+ +

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

+
+ +

Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.

+ +
+
Mais detalhes
+ +

CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

+ +

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

+
+ +

Ação: Criando um documento

+ +
    +
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. +
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Documento de exemplo</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. +

    Você deve ver o texto  com as letras iniciais em negrito, como este:

    + + + + + + + +
    Cascading Style Sheets
    + +

    O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.

    +
    4. +
+ +

O que veremos depois?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html new file mode 100644 index 0000000000..453aa4c966 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html @@ -0,0 +1,106 @@ +--- +title: Por que usar CSS? +slug: Web/CSS/Getting_Started/Porque_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

+ +

Informação: Por que usar CSS?

+ +

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

+ +

Uma folha de estilo externa, tem muitas vantagens.:

+ + + +
+
Exemplo
+ +

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

+ +

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

+ +

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

+
+ +

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

+ +
+
Mais detalhes
+ +

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

+ +

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

+ +

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

+
+ +

Ação: Criando uma folha de estilo

+ +
    +
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. +
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. +
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: + 
    strong {color: red;}
+
    +
    4. +
+ +

Linkando seu documento para sua folha de estilo

+ +
    +
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Documento Simples com CSS</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

+ +
+
Desafio
+ +

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

+ +

Encontre mais cinco nomes de cores que as CSS trabalham.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+Veja a solução para este desafio.
+ +

O que veremos?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/index.html b/files/pt-br/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..389962ab07 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,98 @@ +--- +title: Iniciando com o CSS +slug: Web/CSS/Getting_Started +tags: + - CSS + - Guia(2) + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

 

+ +

Introdução

+ +

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

+ + + + + +

Esse tutorial é baseado na Especificação do CSS 2.1.

+ +

Quem deve usar esse tutorial?

+ +

Esse tutorial é, principalmente, para iniciantes no CSS.

+ +

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

+ +

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

+ +

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

+ +

O que você precisa saber antes de começar?

+ +

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

+ +

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

+ +

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

+ + + +

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

+ +

Como usar esse tutorial

+ +

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

+ +

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

+ +

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

+ +

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

+ +

Parte I do Tutorial

+ +

Uma guia básico passo a passo do CSS

+ +
    +
  1. O que é o CSS
    2. +
  2. Porque usar o CSS
    3. +
  3. Como o CSS funciona
    4. +
  4. Cascata e herança
    5. +
  5. Seletores
    6. +
  6. CSS legível
    7. +
  7. Estilos de texto
    8. +
  8. Cores
    9. +
  9. Conteúdo
    10. +
  10. Listas
    11. +
  11. Caixas
    12. +
  12. Layout
    13. +
  13. Tabelas
    14. +
  14. Mídia
    15. +
+ +

Parte II do Tutorial

+ +

Exemplos do uso do CSS juntamente com outras tecnologias

+ +
    +
  1. JavaScript
    2. +
  2. Gráficos SVG
    3. +
  3. Dados XML
    4. +
  4. Ligações XBL
    5. +
  5. Interfaces de usuário XUL
    6. +
+ +

{{ CSSTutorialTOC() }}

+ +

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..4577341105 --- /dev/null +++ b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,240 @@ +--- +title: Utilizando áudio e vídeo com HTML5 +slug: Web/HTML/Using_HTML5_audio_and_video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +

O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.

+ +

Incorporando mídia:

+ +

Incorporar mídia em documentos HTML é simples:

+ +
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+
+ +

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

+ +

Aqui há um exemplo de áudio incorporado em um documento HTML

+ +
<audio src="/test/audio.ogg">
+<p>Seu nevegador não suporta o elemento audio.</p>
+</audio>
+
+ +

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

+ +
<audio src="audio.ogg" controls autoplay loop>
+<p>Seu navegador não suporta o elemento audio </p>
+</audio>
+
+ +

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

+ + + +
<audio src="audio.mp3" preload="auto" controls></audio>
+
+ +

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

+ + + +

Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4" type="video/mp4">
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+
+ +

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista media formats supported by the audio and video elements para detalhes.

+ +

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
+  Seu navegador não suporta o elemento <code>video</code>.
+</video>
+ +

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

+ +

Se o atributo type não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo source é verificado.

+ +

Veja Media events para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja Media formats supported by the audio and video elements.

+ +

Controlando a reprodução de mídia

+ +

Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:

+ +
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+ +

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

+ +

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

+ +
<audio id="demo" src="audio.mp3"></audio>
+<div>
+  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
+  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
+  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
+  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
+</div>
+
+ +

Parando o download de mídia

+ +

Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.

+ +

Esta é um modo para parar o download imediatamente:

+ +
var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src = "";
+
+ +

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

+ + + +

Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade currentTime no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.

+ +

Você pode usar a propriedade seekable para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.

+ +
var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
+mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
+mediaElement.currentTime = 122; // Ir para 122 segundos
+mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
+
+ +

Especificando o intervalo de reprodução

+ +

Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.

+ +

O intervalo é especificado usando a sintaxe:

+ +
#t=[tempoinicial],[tempofinal]
+
+ +

O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).

+ +

Alguns exemplos:

+ +
+
http://foo.com/video.ogg#t=10,20
+
Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
+
http://foo.com/video.ogg#t=,10.5
+
Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.
+
http://foo.com/video.ogg#t=,02:00:00
+
Especifica que o vídeo deve ser reproduzido do início até 2 horas.
+
http://foo.com/video.ogg#t=60,
+
Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.
+
+ +
+

{{ gecko_callout_heading("9.0") }}

+ +

O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da Media Fragments URI specification implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.

+
+ +

Opções alternativas

+ +

O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.

+ +

Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.

+ +

Utilizando Flash

+ +

Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:

+ +
<video src="video.ogv" controls>
+    <object data="flvplayer.swf" type="application/x-shockwave-flash">
+      <param value="flvplayer.swf" name="movie"/>
+    </object>
+</video>
+
+ +

Note que você não deve incluir classid na tag object para que outros navegadores além do Internet Explorer sejam compatíveis.

+ +

Reproduzindo vídeos em Ogg usando uma applet Java

+ +

Existe uma applet Java chamada Cortado que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:

+ +
<video src="my_ogg_video.ogg" controls width="320" height="240">
+  <object type="application/x-java-applet"
+          width="320" height="240">
+     <param name="archive" value="cortado.jar">
+     <param name="code" value="com.fluendo.player.Cortado.class">
+     <param name="url" value="my_ogg_video.ogg">
+     <p>You need to install Java to play this file.</p>
+  </object>
+</video>
+
+ +

Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.

+ +

{{ h1_gecko_minversion("Error handling", "2.0") }}

+ +

A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento error ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.

+ +

Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:

+ +
<video>
+<source id="mp4_src"
+        src="video.mp4"
+        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+        src="video.3gp"
+        type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+        src="video.ogv"
+        type='video/ogg; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos error antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.

+ +

Detectando quando nenhuma fonte foi carregada

+ +

Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo networkState do elemento media. Se esse valor for HTMLMediaElement.NETWORK_NO_SOURCE, você saberá que todas as fontes falharam o carregamento.

+ +

Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.

+ +

Veja também

+ + + +

{{ HTML5ArticleTOC() }}

+ +
{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}
diff --git a/files/pt-br/conflicting/learn/javascript/objects/index.html b/files/pt-br/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..aaab9150b3 --- /dev/null +++ b/files/pt-br/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,352 @@ +--- +title: Introdução ao JavaScript Orientado a Objeto +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - Construtor + - Encapsular + - Herança + - Intermediário + - Membros + - Objeto + - Orientado a Objeto + - POO +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +

JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.

+ +

Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.

+ +

Revisão do Javascript

+ +

Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em Uma reintrodução ao JavaScript. Você também pode consultar o Core JavaScript 1.5 Guide.

+ +

Programação Orientada a Objetos

+ +

Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).

+ +

A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.

+ +

A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.

+ +

Terminologia

+ +
+
Namespaces
+
Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.
+
+ +
+
Classe
+
Define as características do objeto. Uma classe é uma definição modelo das propriedades e métodos de um objeto.
+
Objeto
+
Um exemplar de uma classe.
+
Atributo
+
Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.
+
Método
+
Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.
+
Construtor
+
Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.
+
Herança
+
Uma classe pode herdar características de outra classe.
+
Encapsulamento
+
Uma maneira de agrupar os dados e os métodos que usam os dados.
+
Abstração
+
A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.
+
Polimorfismo
+
Diferentes classes podem definir o mesmo método ou propriedade.
+
+ +

Para uma descrição mais extensiva sobre programação orientada a objetos, veja Orientação a objetos na Wikipédia.

+ +

Programação Baseada em Protótipos

+ +

Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como protótipos. Este modelo também é conhecido como sem classes, orientado a protótipo, ou programação baseada em exemplares.

+ +

O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o framework Viewer para manipular componentes do Morphic) e várias outras.

+ +

Programação Orientada a Objetos em Javascript

+ +

Namespaces

+ +

Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.

+ +
+

Nota: É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).

+
+ +

A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.

+ +

Vamos criar um objeto global chamado MEUAPP:

+ +
// namespaces global
+var MEUAPP = MEUAPP || {};
+ +

No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos

+ +

Podemos também criar sub-espaços de nomes.

+ +
// sub namespaces
+MEUAPP.eventos = {};
+ +

A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:

+ +
// Criando um recipiente chamado MEUAPP.metodosEmComum
+// para métodos e propriedades em comum
+
+MEUAPP.metodosEmComum = {
+
+  regexParaNome: "", // definindo uma expressao regular
+                     // para validação de nomes
+
+  regexParaTelefone: "",  // define uma expressao regular para
+                          //validacao de numeros de telefone
+}
+
+// Objeto junto a declaracoes de método
+
+MEUAPP.eventos = {
+
+    adicionarTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    removerTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    obterEvento: function(e) {
+
+    // codigos
+
+    }
+
+    // é possível adicionar outros métodos e propriedades
+
+}
+
+// Sintaxe para usar o método adicionarTratador:
+
+MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);
+ +

Objetos inclusos por padrão

+ +

JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().

+ +
console.log(Math.random());
+
+ +
Nota: Este e todos os exemplos a seguir presumem que uma função console.log() está definida globalmente. A função console.log() não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.
+ +

Veja Core JavaScript 1.5 Reference:Global Objects para a lista dos objetos inclusos por padrão em JavaScript.

+ +

Cada objeto em JavaScript é um exemplar do objeto Object e, portanto, herda todas as suas propriedades e métodos.

+ +

Objetos Personalizados

+ +

A Classe

+ +

JavaScript é uma linguagem baseada em protótipos e não contém a declaração class, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.

+ +
var Pessoa = function () {};
+ +

O objeto (exemplar de uma classe)

+ +

Para criar um novo exemplar de um objeto obj, usamos a declaração new obj, atribuindo o resultado (que é do tipo obj) a uma variável que será acessada depois.

+ +

No exemplo acima, definimos uma classe chamada Pessoa. No exemplo abaixo, criamos dois exemplares (pessoa1 e pessoa2).

+ +
var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+
+ +
Nota: Por favor, veja também Object.create para um novo e alternativo método que cria um exemplar não-inicializado.
+ +

O Construtor

+ +

O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.

+ +

O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.

+ +

No exemplo abaixo, o construtor da classe Pessoa envia uma mensagem ao log quando um exemplar de Pessoa é criado.

+ +
var Pessoa = function () {
+  console.log("exemplar criado");
+}
+
+var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+
+ +

Propriedades (atributos de objetos)

+ +

Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.

+ +

A palavra-chave this, que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe NomeDoExemplar.Propriedade, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)

+ +
var Pessoa = function(nome) {
+  this.nome = nome;
+  console.log('Exemplar de Pessoa criado');
+};
+
+var pessoa1 = new Pessoa('Alice');
+var pessoa2 = new Pessoa('Bob');
+
+// mostrando as propriedades nome dos objetos
+console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
+console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log
+ +

Métodos

+ +

Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca () no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do prototype da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.

+ +

No exemplo abaixo, definimos e usarmos o método dizerOla() na classe Pessoa .

+ +
var Pessoa = function (genero) {
+  this.genero = genero;
+  alert('Pessoa instanciada');
+}
+
+Pessoa.prototype.dizerOla = function()
+{
+  alert ('hello');
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var pessoa2 = new Pessoa('Feminino');
+
+// Chamando o método dizerOla em Pessoa .
+pessoa1.dizerOla(); // hello
+
+ +

Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: 

+ +
function Pessoa(genero) {
+  this.genero = genero;
+}
+
+Pessoa.prototype.dizGenero = function()
+{
+  alert(this.genero);
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var informaGenero = pessoa1.dizGenero;
+
+pessoa1.dizGenero(); // 'Masculino'
+informaGenero(); // undefined
+alert(informaGenero === pessoa1.dizGenero); //true
+alert(informaGenero === Pessoa.prototype.dizGenero); //true
+
+ +

Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto Function, da seguinte maneira:

+ +
informaGenero.call(pessoa1); //alerts 'Masculino'
+
+ +
Veja mais sobre em Function.call e Function.apply
+ +

Herança

+ +

Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (JavaScript suporta apenas herança de classe única). A classe especializada é comumente chamada de filha, e a outra classe é comumente chamada de pai. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar Object.create para implementar herança.

+ +
+

JavaScript não detecta o  prototype.constructor da classe filha, veja a propriedade Core JavaScript 1.5 Reference:Global Objects:Object:prototype, então devemos declará-la manualmente.

+
+ +

No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().

+ +
// define a classe Pessoa
+function Pessoa() {}
+
+Pessoa.prototype.caminhar = function(){
+  alert ('Estou Caminhando!');
+};
+Pessoa.prototype.dizOi = function(){
+  alert ('Oi!');
+};
+
+// define a classe  Estudante
+function Estudante() {
+  // Chama o método pai
+  Pessoa.call(this);
+}
+
+// herda de Pessoa
+Estudante.prototype = new Pessoa();
+
+// corrige o ponteiro construtor, que aponta para Pessoa
+Estudante.prototype.constructor = Estudante;
+
+// adiciona o método dizOi
+Estudante.prototype.dizOi = function(){
+  alert('Oi, eu sou estudante');
+}
+
+// adiciona o método dizTchau
+Estudante.prototype.dizTchau = function(){
+  alert('tchau');
+}
+
+var estudante1 = new Estudante();
+estudante1.dizOi();
+estudante1.caminhar();
+estudante1.dizTchau();
+
+// checa a herança
+alert(estudante1 instanceof Pessoa); // true
+alert(estudante1 instanceof Estudante); // true
+
+ +

Utilizando Object.create a linha de herança deveria ser:

+ +
Estudante.prototype = Object.create(Pessoa.prototype);
+ +

Encapsulamento

+ +

Em exemplo anterior, Estudante não precisava saber como o método caminhar() da classe Pessoa seria implementada, mas ainda pode utilizar esté método; a classe Estudante não possui necessidade explícita de definir o método desde que não queremos alterar-lo. Isso se chama encapsulamento, pelo qual cada classe herda os métodos de seu pai e só precisa definir as coisas que deseja mudar.

+ +

Abstração

+ +

A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript alcança especialização por herança, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.

+ +

A Função de classe do JavaScript é hedar da classe Object (isso demonstra a especialização do modelo). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)

+ +
var foo = function(){};
+alert( 'foo é um Function: ' + (foo instanceof Function) );
+alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
+
+ +

Polimorfismo

+ +

Assim como todos os métodos e propriedades são definidos dentro da propriedade prototype, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).

+ +

Notas

+ +

As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.

+ +

As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. 

+ +

Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.

+ +

Referências

+ +
    +
  1. Mozilla. "Core JavaScript 1.5 Guide", https://developer.mozilla.org/docs/Web/JavaScript/Guide
    2. +
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. +
+ +
+

Original Document Information

+ + +
+ +

Es: https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos 

-- cgit v1.2.3-54-g00ecf