recursal/MDN huggingface dataset:
WebRTC Introduction
===================

**Nota:** WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.

Estableciendo la conexión
-------------------------

La conexión inicial entre pares debe ser establecida a través de un servidor de aplicaciones que proporcione descubrimiento de usuarios, comunicación y traducción de direcciones de red (NAT) con transmisión de datos.

### Señalización

Señalización es el mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación. Estos no están especifiados en el standar WebRTC. En su lugar, el desarrollador puede elegir cualquier protocolo de mensajería (como SIP o XMPP), y cualquier canal de comunicación bidirecional (como WebSocket o XMLHttpRequest) en conjunción con un servidor con un API de conexión permanente (como el Google Channel API) para AppEngine.

Transmisión
-----------

### getUserMedia

LocalMediaStream object

Recepción
---------

El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a about:config y establce 'media.navigator.enabled' a 'true'.

**Nota:** Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: dom/media/tests/local\_video\_test.html. Por favor, prueba también lademo de servicio de llamadas, la página de su código, y el código de su servidor.
WebRTC protocols
================

Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.

ICE
---

Interactive Connectivity Establishment (ICE) es un marco para permitir que su navegador web se conecte con sus compañeros. Hay muchas razones por las que una conexión directa de un par a otro simplemente no funcionará. Debe evitar los firewalls que evitarían abrir conexiones, darle una dirección única si, como en la mayoría de las situaciones, su dispositivo no tiene una dirección IP pública y transmitir datos a través de un servidor si su enrutador no le permite conectarse directamente con sus pares. ICE utiliza algunas de las siguientes técnicas que se describen a continuación para lograr esto:

STUN
----

Session Traversal Utilities for **NAT** (STU**N**) (acrónimo dentro de un acrónimo) es un protocolo para descubrir su dirección pública y determinar cualquier restricción en su enrutador que impida una conexión directa con un par.

El cliente enviará una solicitud a un servidor STUN en Internet que responderá con la dirección pública del cliente y si el cliente está accesible detrás del NAT del enrutador.

![An interaction between two users of a WebRTC application involving a STUN server.](/es/docs/Web/API/WebRTC_API/Protocols/webrtc-stun.png)

NAT
---

Network Address Translation (NAT) se usa para dar a su dispositivo una dirección IP pública. Un enrutador tendrá una dirección IP pública y cada dispositivo conectado al enrutador tendrá una dirección IP privada. Las solicitudes se traducirán de la IP privada del dispositivo a la IP pública del enrutador con un puerto único. De esa manera, no necesita una IP pública única para cada dispositivo, pero aún puede descubrirse en Internet.

Algunos enrutadores tendrán restricciones sobre quién puede conectarse a dispositivos en la red. Esto puede significar que aunque tengamos la dirección IP pública encontrada por el servidor STUN, nadie puede crear una conexión. En esta situación, debemos recurrir a TURN.

TURN
----

Algunos enrutadores que utilizan NAT emplean una restricción llamada "NAT simétrica". Esto significa que el enrutador solo aceptará conexiones de pares a los que se haya conectado previamente.

Traversal Using Relays around NAT (TURN) está destinado a eludir la restricción NAT simétrica al abrir una conexión con un servidor TURN y transmitir toda la información a través de ese servidor. Crearía una conexión con un servidor TURN y le diría a todos los pares que envíen paquetes al servidor que luego se le reenviarán. Obviamente, esto conlleva algunos gastos generales, por lo que solo se usa si no hay otras alternativas.

![An interaction between two users of a WebRTC application involving STUN and TURN servers.](/es/docs/Web/API/WebRTC_API/Protocols/webrtc-turn.png)

SDP
---

Session Description Protocol (SDP) es un estándar para describir el contenido multimedia de la conexión, como la resolución, los formatos, los códecs, el cifrado, etc., de modo que ambos pares puedan entenderse una vez que se transfieren los datos. Esto es, en esencia, los metadatos que describen el contenido y no el contenido de los medios en sí.
HTMLTableElement.insertRow()
============================

El método **`HTMLTableElement.insertRow()`** inserta una nueva fila en la tabla.

Sintaxis
--------
```

var row = HTMLTableElement.insertRow(optional index = -1);
```


* `HTMLTableElement` es una referencia a un elemento table HTML.
* `index` es el índice de fila de la nueva fila.
* `row` queda asignada a una referencia a la nueva fila. Una referencia a un HTMLTableRowElement (en-US).
 Si `index` es -1 o igual al número de filas, la nueva fila es añadida detrás de la última. Si `index` es mayor que el números defilas, es lanzada una excepción IndexSizeError. Si index se omite, se asume por defecto -1.
* Si una tabla tiene múltiples elementos `tbody`, por defecto la nueva fila es insertada en el último `tbody`. Para insertar una fila dentro de un `tbody` especifico pued hacer:
 `var specific_tbody=document.getElementById(tbody_id); var row=specific_tbody.insertRow(index)`
Ejemplo
-------


```html
<table id="TableA">
  <tr>
    <td>Antigua fila superior</td>
  </tr>
</table>
<script type="text/javascript">
 function addRow(tableID) {
 // Obtiene una referencia a la tabla
 var tableRef = document.getElementById(tableID);

 // Inserta una fila en la tabla, en el índice 0
 var newRow = tableRef.insertRow(0);

 // Inserta una celda en la fila, en el índice 0
 var newCell = newRow.insertCell(0);

 // Añade un nodo de texto a la celda
 var newText = document.createTextNode("Nueva fila superior");
 newCell.appendChild(newText);
 }

 // Llama a addRow() con el ID de la tabla
 addRow("TableA");
</script>
```


Para ser válida en un documento HTML, una TR debe contener al menos un elemento TD.

Observese que `insertRow` inserta la fila diréctamente en la tabla y retorna una referencia a la nueva fila. La fila no necesita ser añadida separadamente (p.e. con `document.appendChild()`) tal sería el caso si se usase `document.createElement()` (en-US) para crear el nuevo elemento TR.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # dom-table-insertrow-dev |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `HTMLTableRowElement.insertCell()` (en-US)
HTMLTableElement.align
======================

**Obsoleto:** Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

La propiedad **`HTMLTableElement.align`** representa la alineación de la tabla.

Sintaxis
--------
```

HTMLTableElement.align =alignment;
varalignment =HTMLTableElement.align;
```

### Parámetros

`alignment` 
Obsoleto

`alignment` es una cadena con uno de los siguientes valores:

* left
* center
* right

Ejemplo
-------


```js
// Establecer la alineación de una tabla
var t = document.getElementById("TableA");
t.align = "center";
```

Especificación
--------------

* Especificación W3C DOM 2 HTML *HTMLTableElement* .align.
background-attachment
=====================

### Resumen

La propiedad CSS **`background-attachment`** determina si la posición de la imagen de fondo será **fija** dentro de la pantalla o **se desplazará** con su bloque contenedor.

* `Inicial`: desplazamiento (*scroll*)
* Se aplica a: todos los elementos
* `Herencia`: no
* Porcentajes: N/A
* Medio: `visual`
* `Valor calculada`: como se haya especificado
### Sintaxis
```

background-attachment: scroll | fixed | inherit
```

### Valores

scroll

Si `scroll` es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.

fixed

Si `fixed` es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.

Ejemplos
--------

### Ejemplo simple

#### CSS


```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```


#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```


#### Resultado

### Soporta múltiples imagenes de fondo

Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un `<attachment>` diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.

#### CSS


```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```


#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```


#### Resultado

### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

### Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Ver también

`background`, `background-attachment`, `background-color`, `background-image`, `background-position`, `background-repeat`
animation-delay
===============

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen
-------

La propiedad CSS `animation-delay` especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.

El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.

Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.

Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.

A menudo es conveniente usar la propiedad abreviada `animation` para ajustar las propiedades de animación una sola vez.

|  |  |
| --- | --- |
| Valor inicial | `0s` |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------
```

Gramática formal: <time> [, <time>]*

animation-delay: 3s
animation-delay: 2s, 4ms
```

### Valores

`<time>`

El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando `s`) o milisegundos (usando `ms`). Si no especificamos la unidad, la sentencia no será válida.

Ejemplos
--------

Visitar animaciones CSS para ver algunos ejemplos.

Especificaciones
----------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-delay |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Consulte también
----------------

* Usando animaciones CSS (en-US)
* `AnimationEvent`
:not()
======

La pseudoclase **`:not()`** de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la *pseudoclase de negación*.


```css
/\* Selecciona cualquier elemento que NO sea un párrafo \*/
:not(p) {
  color: blue;
}
```


**Nota:**

* Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, `:not(*)` coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.
* Esta pseudoclase puede aumentar la especificidad de una regla. Por ejemplo, `#foo:not(#bar)` coincidirá con el mismo elemento que el `#foo` más simple, pero tiene una especificidad más alta.
* `:not(.foo)` coincidirá con cualquier cosa que no sea `.foo`, *incluidos `<html>` y `<body>`.*
* Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, `body :not(table) a` se aplicará a los enlaces dentro de una tabla, ya que `<tr>` coincidirá con la parte `:not()` del selector.

Sintaxis
--------

La pseudoclase `:not()` requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

**Advertencia:** La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

Error: could not find syntax for this itemEjemplo
-------

### HTML


```html
<p>Soy un párrafo.</p>
<p class="fancy">¡Soy muy elegante!</p>
<div>NO soy un párrafo.</div>
```

### CSS


```css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* elementos <p> que no están en la clase `.fancy` \*/
p:not(.fancy) {
  color: green;
}

/\* Elementos que no son elementos <p> \*/
body :not(p) {
  text-decoration: underline;
}

/\* Elementos que no son elementos <div> o <span> \*/
body :not(div):not(span) {
  font-weight: bold;
}

/\* Elementos que no son `.crazy` o `.fancy` \*/
/\* Tenga en cuenta que esta sintaxis aún no está bien soportada. \*/
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # negation |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-mask-position-x
=======================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS `-webkit-mask-position-x` CSS establece la posición horizontal inicial de una imagen de máscara.

|  |  |
| --- | --- |
| Valor inicial | `0%` |
| Applies to | all elements |
| Heredable | no |
| Percentages | refer to the size of the box itself |
| Valor calculado | for `length` the absolute value, otherwise a percentage |
| Animation type | discrete |

Síntaxis
--------


```css
/\* Palabras Clave valores \*/
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/\* <porcentaje> valores \*/
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/\* <longitud> valores \*/
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/\* Múltiples valores \*/
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

/\* Valores globales \*/
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;
```

Valores
-------

`<percentage>`

Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.

`<length>`

Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.

**`left`**

Equivalente a `0%`.

**`center`**

Equivalente a `50%`.

**`right`**

Equivalente a `100%`.

### Síntaxis Formal

Error: could not find syntax for this itemEjemplos
--------


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}
```

Especificaciones
----------------

No forma parte de ninguna especificación.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

`-webkit-mask-position`, `-webkit-mask-position-y`, `-webkit-mask-origin`, `-webkit-mask-attachment`
border-inline-start-style
=========================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-inline-start-style`** define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-style` (en-US) y `border-bottom-style`, o `border-left-style` (en-US), y `border-right-style` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-style'> values \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;
```


Propiedades relacionadas son `border-block-start-style`, `border-block-end-style`, y `border-inline-end-style`, que definen los otros estilos del borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

### Valores

`<'border-style'>`

La línea de estilo del borde. Mira `border-style`.

### Sintaxis formal
```

border-inline-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top-style` (en-US), `border-right-style` (en-US), `border-bottom-style`, o `border-left-style` (en-US).
* `writing-mode`, `direction`, `text-orientation`
Selectores de tipo
==================

El selector de tipo CSS selecciona elementos por nombre de nodo. En otras palabras, selecciona todos los elementos del tipo dado dentro de un documento.

```css
/\* Todos los elementos <a> \*/
a {
  color: red;
}
```

Sintaxis
--------
```

element { style properties }
```

Ejemplo
-------

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>Aquí hay un elemento 'span' con algo de texto.</span>
<p>Aquí hay un elemento 'p' con algo de texto.</p>
<span>Aquí hay un elemento 'span' con más texto.</span>
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
min-height
==========

### Resumen

La propiedad `min-height` se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad `height` llegue a ser más pequeña que la especificada en la altura mínima (`min-height`).

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | elementos de bloque o remplazados |
| Heredable | no |
| Percentages | Se refiere a la altura del bloque contenedor. |
| Valor calculado | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

### Sintaxis
```

min-height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

### Values

* **length** : puede ser en px, cm, in (píxel, centímetro o inches)
* **percentage** : % especificado como un porcentaje de la altura del bloque contenedor.
### Examples
```

table {min-height: 75%;}

form {min-height: 0;}
```

### Notes

`min-height` tiene prioridad sobre los valores `max-height` y `height`.

### Especificaciones

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

### Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Ver también

`modelo de caja`, `ancho`, `tamaño de cajas -Mozilla` (en-US), `altura mínima`, `altura máxima`