From 4f70db6399a732ca7571c6c8cb952be7c9a85763 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 6 Jul 2021 12:07:28 -0400 Subject: delete conflicting/orphaned in es (#1418) --- .../es/orphaned/web/api/abstractworker/index.html | 131 ------- .../web/api/ambient_light_events/index.html | 115 ------ files/es/orphaned/web/api/body/formdata/index.html | 73 ---- files/es/orphaned/web/api/body/index.html | 100 ----- files/es/orphaned/web/api/body/json/index.html | 83 ----- .../es/orphaned/web/api/childnode/after/index.html | 182 --------- .../orphaned/web/api/childnode/before/index.html | 176 --------- files/es/orphaned/web/api/childnode/index.html | 181 --------- .../orphaned/web/api/childnode/remove/index.html | 95 ----- .../web/api/childnode/replacewith/index.html | 142 ------- .../api/detecting_device_orientation/index.html | 279 -------------- .../api/document_object_model/events/index.html | 73 ---- .../web/api/element/currentstyle/index.html | 81 ---- .../web/api/element/runtimestyle/index.html | 83 ----- .../web/api/elementcssinlinestyle/style/index.html | 53 --- .../api/htmlorforeignelement/dataset/index.html | 133 ------- .../basic_concepts_behind_indexeddb/index.html | 217 ----------- .../orphaned/web/api/parentnode/append/index.html | 135 ------- .../web/api/parentnode/children/index.html | 158 -------- .../api/parentnode/firstelementchild/index.html | 144 -------- files/es/orphaned/web/api/parentnode/index.html | 152 -------- .../web/api/parentnode/lastelementchild/index.html | 147 -------- .../checking_authenticity_with_password/index.html | 31 -- .../web/css/_colon_-moz-ui-valid/index.html | 95 ----- .../web/css/comenzando_(tutorial_css)/index.html | 41 --- files/es/orphaned/web/css/como_iniciar/index.html | 6 - .../orphaned/web/css/linear-gradient()/index.html | 262 ------------- .../es/orphaned/web/css/primeros_pasos/index.html | 40 -- .../orphaned/web/css/radial-gradient()/index.html | 300 --------------- files/es/orphaned/web/css/rtl/index.html | 23 -- .../css/tools/cubic_bezier_generator/index.html | 321 ---------------- .../creating_and_triggering_events/index.html | 145 -------- .../web/guide/events/event_handlers/index.html | 133 ------- files/es/orphaned/web/guide/events/index.html | 17 - .../index.html | 48 --- .../html/html5/constraint_validation/index.html | 346 ----------------- .../web/guide/html/html5/html5_parser/index.html | 65 ---- files/es/orphaned/web/guide/html/html5/index.html | 200 ---------- .../html/html5/introduction_to_html5/index.html | 17 - .../html/introduction_alhtml_clone/index.html | 173 --------- .../using_html_sections_and_outlines/index.html | 410 --------------------- .../orphaned/web/html/element/command/index.html | 153 -------- .../orphaned/web/html/element/element/index.html | 111 ------ .../orphaned/web/html/element/isindex/index.html | 45 --- .../orphaned/web/html/element/multicol/index.html | 21 -- .../etiqueta_personalizada_html5/index.html | 47 --- .../html/elemento/tipos_de_elementos/index.html | 120 ------ .../web/html/global_attributes/dropzone/index.html | 100 ----- .../global_objects/array/prototype/index.html | 189 ---------- .../reference/global_objects/map/clear/index.html | 110 ------ .../reference/global_objects/map/delete/index.html | 115 ------ .../global_objects/map/entries/index.html | 110 ------ .../global_objects/map/foreach/index.html | 95 ----- .../reference/global_objects/map/get/index.html | 78 ---- .../reference/global_objects/map/has/index.html | 66 ---- .../reference/global_objects/map/index.html | 214 ----------- .../reference/global_objects/map/keys/index.html | 110 ------ .../reference/global_objects/map/set/index.html | 134 ------- .../reference/global_objects/map/size/index.html | 111 ------ .../reference/global_objects/map/values/index.html | 78 ---- .../operators/pipeline_operator/index.html | 79 ---- files/es/orphaned/web/reference/api/index.html | 65 ---- files/es/orphaned/web/reference/index.html | 57 --- .../orphaned/web/svg/svg_en_firefox_1.5/index.html | 61 --- 64 files changed, 7875 deletions(-) delete mode 100644 files/es/orphaned/web/api/abstractworker/index.html delete mode 100644 files/es/orphaned/web/api/ambient_light_events/index.html delete mode 100644 files/es/orphaned/web/api/body/formdata/index.html delete mode 100644 files/es/orphaned/web/api/body/index.html delete mode 100644 files/es/orphaned/web/api/body/json/index.html delete mode 100644 files/es/orphaned/web/api/childnode/after/index.html delete mode 100644 files/es/orphaned/web/api/childnode/before/index.html delete mode 100644 files/es/orphaned/web/api/childnode/index.html delete mode 100644 files/es/orphaned/web/api/childnode/remove/index.html delete mode 100644 files/es/orphaned/web/api/childnode/replacewith/index.html delete mode 100644 files/es/orphaned/web/api/detecting_device_orientation/index.html delete mode 100644 files/es/orphaned/web/api/document_object_model/events/index.html delete mode 100644 files/es/orphaned/web/api/element/currentstyle/index.html delete mode 100644 files/es/orphaned/web/api/element/runtimestyle/index.html delete mode 100644 files/es/orphaned/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/append/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/firstelementchild/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/lastelementchild/index.html delete mode 100644 files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html delete mode 100644 files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html delete mode 100644 files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html delete mode 100644 files/es/orphaned/web/css/como_iniciar/index.html delete mode 100644 files/es/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/es/orphaned/web/css/primeros_pasos/index.html delete mode 100644 files/es/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/es/orphaned/web/css/rtl/index.html delete mode 100644 files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html delete mode 100644 files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/es/orphaned/web/guide/events/event_handlers/index.html delete mode 100644 files/es/orphaned/web/guide/events/index.html delete mode 100644 files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/html5_parser/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html delete mode 100644 files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/es/orphaned/web/html/element/command/index.html delete mode 100644 files/es/orphaned/web/html/element/element/index.html delete mode 100644 files/es/orphaned/web/html/element/isindex/index.html delete mode 100644 files/es/orphaned/web/html/element/multicol/index.html delete mode 100644 files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html delete mode 100644 files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html delete mode 100644 files/es/orphaned/web/html/global_attributes/dropzone/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html delete mode 100644 files/es/orphaned/web/reference/api/index.html delete mode 100644 files/es/orphaned/web/reference/index.html delete mode 100644 files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html (limited to 'files/es/orphaned/web') diff --git a/files/es/orphaned/web/api/abstractworker/index.html b/files/es/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index a2ffb4c950..0000000000 --- a/files/es/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -

{{ APIRef("Web Workers API") }}

- -

La interfaz AbstractWorker de la API de Web Workers es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.
- Al ser una clase abstracta, usted no interactúa directamente con el AbstractWorker.

- -

Propiedades

- -

La interfaz AbstractWorker no hereda ninguna propiedad.

- -

Gestor de eventos

- -
-
{{domxref("AbstractWorker.onerror")}}
-
Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo error se gatilla através del worker.
-
- -

Métodos

- -

La interfaz AbstractWorker no implementa o hereda ningún método.

- -

Ejemplo

- -

Note que usted no estará usando la interfaz AbstractWorker diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.

- -

El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:

- -
var myWorker = new Worker("worker.js");
-
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Mensaje enviado al worker');
-}
- -

El código del worker se carga desde el archivo "worker.js". Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como first; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de first, un mensaje se enviará al worker haciendoselo saber.

- -

Para ejemplos completos, visitar:

- - - -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}No existen cambios para {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Definición inicial.
- -

Compatibilidad en Navegadores

- -
{{CompatibilityTable()}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
-
- -

Vease también

- - diff --git a/files/es/orphaned/web/api/ambient_light_events/index.html b/files/es/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 79f4c1ef65..0000000000 --- a/files/es/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Luz Ambiental Eventos -slug: orphaned/Web/API/Ambient_Light_Events -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.

- -

Eventos de luz

- -

Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.

- -

Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.

- -

Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.

- -

Ejemplo

- -
if ('ondevicelight' in window) {
-  window.addEventListener('devicelight', function(event) {
-    var body = document.querySelector('body');
-    if (event.value < 50) {
-      body.classList.add('darklight');
-      body.classList.remove('brightlight');
-    } else {
-      body.classList.add('brightlight');
-      body.classList.remove('darklight');
-    }
-  });
-} else {
-  console.log('devicelight event not supported');
-}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificacionesEstadoComentario
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}definición inicial
- -

Compatibilidad del Navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).

- -

See also

- - diff --git a/files/es/orphaned/web/api/body/formdata/index.html b/files/es/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index a7cb72413c..0000000000 --- a/files/es/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - FormData - - Method - - NeedsExample - - Reference -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -
{{APIRef("Fetch")}}
- -

El método formData() de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.

- -
-

Nota: Esto es principalmente relevante en service workers. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a formData() para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).

-
- -

Sintaxis

- -
response.formData()
-.then(function(formdata) {
-  // hacer algo con tu formdata
-});
- -

Parámetros

- -

Ninguno.

- -

Valor de retorno

- -

Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.

- -

Ejemplo

- -

TBD.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.Body.formData")}}

- -

Ver también

- - diff --git a/files/es/orphaned/web/api/body/index.html b/files/es/orphaned/web/api/body/index.html deleted file mode 100644 index 346e7b2286..0000000000 --- a/files/es/orphaned/web/api/body/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -
{{ APIRef("Fetch") }}
- -

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

- -

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

- -

Properties

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
A {{domxref("Boolean")}} that indicates whether the body has been read.
-
- -

Methods

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
-
- -

Examples

- -

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

- -

HTML Content

- -
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
-
- -

JS Content

- -
const myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
-	.then(res => res.blob())
-	.then(res => {
-		const objectURL = URL.createObjectURL(res);
-		myImage.src = objectURL;
-});
- -

{{ EmbedLiveSample('Examples', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Body")}}

- -

See also

- - - -

 

diff --git a/files/es/orphaned/web/api/body/json/index.html b/files/es/orphaned/web/api/body/json/index.html deleted file mode 100644 index 35f7811df3..0000000000 --- a/files/es/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -
{{APIRef("Fetch API")}}
- -

El método json() de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.

- -

Sintáxis

- -
response.json().then(data => {
-  // do something with your data
-});
- -

Parámetros

- -

No.

- -

Valor devuelto

- -

Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).

- -

Example

- -

In our fetch json example (run fetch json live), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a .json file. When the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.

- -
const myList = document.querySelector('ul');
-const myRequest = new Request('products.json');
-
-fetch(myRequest)
-  .then(response => response.json())
-  .then(data => {
-    for (const product of data.products) {
-      let listItem = document.createElement('li');
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = product.Name;
-      listItem.append(
-        ` can be found in ${
-          product.Location
-        }. Cost: `
-      );
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = `£${product.Price}`;
-      myList.appendChild(listItem);
-    }
-  });
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Body.json")}}

- -

See also

- - diff --git a/files/es/orphaned/web/api/childnode/after/index.html b/files/es/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 468dfd58ae..0000000000 --- a/files/es/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -

{{APIRef("DOM")}} {{SeeCompatTable}}
- El método ChildNode.after() inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este ChildNode del padre, justo después de este ChildNode. Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.

- -

Sintaxis

- -
[Throws, Unscopable]
-void ChildNode.after((Node o DOMString)... nodes);
-
- -

Parámetros

- -
-
nodes
-
Un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} para insertar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Insertando un elemento

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.after(span);
-
-console.log(parent.outerHTML);
-// "<div><p></p><span></span></div>"
-
- -

Insertando texto

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-
-child.after("Text");
-
-console.log(parent.outerHTML);
-// "<div><p></p>Text</div>"
- -

Insertando un elemento y texto

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.after(span, "Text");
-
-console.log(parent.outerHTML);
-// "<div><p></p><span></span>Text</div>"
- -

ChildNode.after() es unscopable

- -

El método after() no está incluido en la declaración with.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  after("foo");
-}
-// ReferenceError: after is not defined
- -

Polyfill

- -

Puedes usar un polyfill del método after() en Internet Explorer 9 y superiores con el siguente código:

- -
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('after')) {
-      return;
-    }
-    Object.defineProperty(item, 'after', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function after() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.parentNode.insertBefore(docFrag, this.nextSibling);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
- -

Otro polyfill

- -
// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
-
-(function(x){
- var o=x.prototype,p='after';
- if(!o[p]){
-    o[p]=function(){
-     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
-     if(p!==null){
-        while(i<l){
-         e=m[i];
-         if(e instanceof n){
-            t=t.nextSibling;
-            if(t!==null){
-                p.insertBefore(e,t);
-            }else{
-                p.appendChild(e);
-            };
-         }else{
-            p.appendChild(d.createTextNode(s(e)));
-         };
-         ++i;
-        };
-     };
-    };
- };
-})(Element);
-
-
-
-/*
-minified:
-
-(function(x){
- var o=x.prototype;
- o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
-}(Element));
-*/
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad con navegadores

- -

{{Compat("api.ChildNode.after")}}

- -

Ver también

- - diff --git a/files/es/orphaned/web/api/childnode/before/index.html b/files/es/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index cfede06158..0000000000 --- a/files/es/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -

- -
-
 
-
- -
-
 
-
- -
-
{{APIRef ( "DOM")}} {{SeeCompatTable}}
-
-El método ChildNode.before inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.
-
- -

Síntasix

- -
[Throws, Unscopable]
-void ChildNode.before((Node or DOMString)... nodes);
-
- -

Parámetros

- -
-
nodos
-
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Insertando un elemento

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span);
-
-console.log(parent.outerHTML);
-// "<div><span></span><p></p></div>"
-
- -

Insertando texto

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-
-child.before("Text");
-
-console.log(parent.outerHTML);
-// "<div>Text<p></p></div>"
- -

Insertando un elemento y texto

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span, "Text");
-
-console.log(parent.outerHTML);
-// "<div><span></span>Text<p></p></div>"
- -

ChildNode.before() es unscopable

- -

El método before () no está definido en la declaración with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  before("foo");
-}
-// ReferenceError: before is not defined
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte  Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
-
- -

Ver también

- - diff --git a/files/es/orphaned/web/api/childnode/index.html b/files/es/orphaned/web/api/childnode/index.html deleted file mode 100644 index 2cdd1c573b..0000000000 --- a/files/es/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -
{{APIRef("DOM")}}
- -

The ChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

- -

ChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.

- -

Properties

- -

There are neither inherited, nor specific properties.

- -

Methods

- -

There are no inherited methods.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Removes this ChildNode from the children list of its parent.
-
{{domxref("ChildNode.before()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.after()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
-
Replaces this ChildNode in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Polyfill

- -

External on github: childNode.js

- -

Browser compatibility

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatGeckoDesktop(23)}}Edge16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
-
- -

See also

- - diff --git a/files/es/orphaned/web/api/childnode/remove/index.html b/files/es/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 069ed69160..0000000000 --- a/files/es/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Experimental - - metodo -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -

{{APIRef ( "DOM")}}
- El método ChildNode.remove ( ) elimina el objeto del árbol al que pertenece.

- -

Sintaxis

- -
node.remove();
-
- -

Ejemplo

- -

Utilizando remove()

- -
<div id="div-01">Este es el div-01</div>
-<div id="div-02">Este es el div-02</div>
-<div id="div-03">Este es el div-03</div>
-
- -
var el = document.getElementById('div-02');
-el.nextElementSibling.remove(); // Elimina el div con el id 'div-03'
-
- -

ChildNode.remove() es unscopable

- -

El método remove() no está definido en el contexto de las declaración with. Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  remove();
-}
-// ReferenceError: remove is not defined
- -

Polyfill

- -

El código a continuación es un polyfill del método remove() para Internet Explorer 9 y superiores:

- -
// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('remove')) {
-      return;
-    }
-    Object.defineProperty(item, 'remove', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function remove() {
-        if (this.parentNode !== null)
-          this.parentNode.removeChild(this);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Definición inicial.
- -

Compatibilidad en los navegadores

- -
-

{{Compat("api.ChildNode.remove")}}

-
- -

Ver también

- - diff --git a/files/es/orphaned/web/api/childnode/replacewith/index.html b/files/es/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index a9aa23ce79..0000000000 --- a/files/es/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -

{{APIRef ( "DOM")}} {{SeeCompatTable}}
-
- El método ChildNode.replaceWith () reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.

- -

 

- -

Síntasix

- -

 

- -
[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-
- -

Parámetros

- -
-
nodos
-
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Utilizando replaceWith()

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.replaceWith(span);
-
-console.log(parent.outerHTML);
-// "<div><span></span></div>"
-
- -

ChildNode.replaceWith() es unscopable

- -

El método replaceWith () no está incluido en la declaracion with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  replaceWith("foo");
-}
-// ReferenceError: replaceWith is not defined
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOperaMobile(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
-
- -

Ver También

- - diff --git a/files/es/orphaned/web/api/detecting_device_orientation/index.html b/files/es/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 96afd861e0..0000000000 --- a/files/es/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: Detectando la orientación del dispositivo -slug: orphaned/Web/API/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -
{{SeeCompatTable}}
- -

Resumen

- -

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. 

- -

Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.

- -

El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.

- -

Trabajando con eventos de orientación

- -

Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:

- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.

- -

La información del evento contiene 4 valores:

- - - -

El manejador del evento puede ser similar a lo siguiente:

- -
function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // Do stuff with the new orientation data
-}
-
- -

Explicación de los Valores de Orientación

- -

El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la Orientacíon y datos del movimiento explicado que es resumido abajo. 

- - - -

Ejemplo de orientación

- -

Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.

- -

Imaginemos una pelota en un jardin:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:

- -
.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-
- -

Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:

- -
var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // In degree in the range [-180,180]
-  var y = event.gamma; // In degree in the range [-90,90]
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // Because we don't want to have the device upside down
-  // We constrain the x value to the range [-90,90]
-  if (x >  90) { x =  90};
-  if (x < -90) { x = -90};
-
-  // To make computation easier we shift the range of
-  // x and y to [0,180]
-  x += 90;
-  y += 90;
-
-  // 10 is half the size of the ball
-  // It center the positioning point to the center of the ball
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-
- -

Aqui el resultado en vivo:

- -
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
- -
-

Tener en cuenta: Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.

-
- -

Procesando eventos de movimiento

- -

Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función HandleMotion.

- -

El evento de movimiento tiene cuatro propiedades:

- - - -

Valores de movimiento explicados

- -

{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver Datos de orientación y movimiento explicados por más detalles).

- -

Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:

- - - -

Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:

- - - -

Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Especificación inicial.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
- 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
- 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
-

Note: gyronorm.js es un polyfill para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..

-
- -

Gecko implementation notes

- -
    -
  1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard {{domxref("DeviceOrientationEvent")}} event
    2. -
- -

Vea también

- - diff --git a/files/es/orphaned/web/api/document_object_model/events/index.html b/files/es/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index b40c7ce7ae..0000000000 --- a/files/es/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Eventos y el DOM -slug: orphaned/Web/API/Document_Object_Model/Events -tags: - - DOM - - Guía -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -

Introducción

- -

Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz Event, así como las interfaces para el registro de eventos en los nodos del DOM, y los oyentes de eventos, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.

- -

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador DOM Level 3 Events.

- -

Vea también el Ejemplo 5: Propagación de eventos en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.

- -

Registrando oyentes de eventos

- -

Hay 3 formas de registrar gestores de eventos para un elemento DOM.

- -

EventTarget.addEventListener

- -
// Se supone que myButton es un elemento de botón
-myButton.addEventListener('click', function(){alert('Hello world');}, false);
-
- -

Este es el método que debe usar en las páginas web modernas. 

- -

Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.

- -

Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.

- -

Atributo HTML

- -
<button onclick="alert('Hello world!')">
-
- -

El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

- -

Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.

- -

Propiedades del elemento DOM

- -
// Se supone que myButton es un elemento de botón
-myButton.onclick = function(event){alert('Hello world');};
-
- -

La función se puede defirnir para que tome un parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

- -

El problema con este método es que solo se puede establecer un gestor por elemento y por evento.

- -

Accediendo a las Interfaces de eventos

- -

Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al objeto window, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.

- -

Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.

- -
function foo(evt) {
-  // al parámetro evt se le asigna automáticamente el objeto event
-  alert(evt);
-}
-table_el.onclick = foo;
-
- - - - diff --git a/files/es/orphaned/web/api/element/currentstyle/index.html b/files/es/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 0b329e5d0e..0000000000 --- a/files/es/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - API - - Compatibilidad en los navegadores móviles - - Property -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Sumario

- -

Element.currentStyle es una propiedad que es una alternativa propietaria del método estandarizado {{domxref("window.getComputedStyle")}} . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

- -

Especificación

- -

No forma parte de ninguna especificación.

- -

Microsoft tiene una descripción MSDN.

- -

Compatibilidad en los Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
-
- -

Ver También

- - diff --git a/files/es/orphaned/web/api/element/runtimestyle/index.html b/files/es/orphaned/web/api/element/runtimestyle/index.html deleted file mode 100644 index 71ff184062..0000000000 --- a/files/es/orphaned/web/api/element/runtimestyle/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Element.runtimeStyle -slug: orphaned/Web/API/Element/runtimeStyle -tags: - - API - - Necesidad de compatibilidad de los navegadores - - Necesidad de compatibilidad de los navegadores móviles - - Necesidad de ejemplo - - Propiedad -translation_of: Web/API/Element/runtimeStyle -original_slug: Web/API/Element/runtimeStyle ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Sumario

- -

Element.runtimeStyle es una propiedad exclusiva similar a {{domxref ("HTMLElement.style")}}, excepto sus estilos, que tienen mayor precedencia y modificaciön.It no modifica el contenido del atributo  style . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

- -

especificación

- -

No forma parte de ninguna especificación.

- -

Microsoft tiene una descripción en MSDN.

- -

Compatibilidad de los Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
-
- -

Ver también

- - diff --git a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index add3fa5480..0000000000 --- a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Element.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -

{{ ApiRef("HTML DOM") }}

- -

Resumen

- -

Devuelve un objeto que representa el atributo style del elemento.

- -

Ejemplo

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25in";
-
- -

Notas

- -

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

- -

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

- -

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

- -

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

- -

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

- -

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

- -
elt.style.color = "blue";  // Asignación directa
-
-var st = elt.style;
-st.color = "blue";  // Asignación Indirecta
-
- -

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

- -
var elt = document.getElementById("elementIdHere");
-var out = "";
-var st = elt.style;
-var cs = window.getComputedStyle(elt, null);
-for (x in st)
-  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
-
- -

 

- -

Especificación

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 7fb7d2a62e..0000000000 --- a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -
{{ APIRef("HTML DOM") }}
- -

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

- - - -

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

- -

Conversion de nombres

- -

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

- - - -

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

- - - -

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

- -

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

- - - -

Accediendo valores

- - - -

Definiendo valores

- - - -

Sintaxis

- - - -

Ejemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
const el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-// set the data attribute
-el.dataset.dateOfBirth = '1960-10-03';
-// Result: el.dataset.dateOfBirth === 1960-10-03
-
-delete el.dataset.dateOfBirth;
-// Result: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// Result: 'someDataAttr' in el.dataset === true
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Ver también

- - diff --git a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 81bfcf5693..0000000000 --- a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Conceptos Básicos -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

IndexedDB es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).

- -

Sobre este documento

- -

Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de Definiciones.

- -

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.

- -

Visión general de IndexedDB

- -

IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una política de mismo origen, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.

- -

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.

- -

IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.

- -

Conceptos principales

- -

Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:

- - - -

Definiciones

- -

Esta sección define y explica los términos utilizados en la API de IndexedDB.

- -

Base de Datos

- -
-
base de datos
-
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: -
    -
  • Nombre. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).
    • -
  • -

    Versión actual. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.

    -
    • -
-
-
almacén de objetos
-
-

El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las llaves en orden ascendente.

- -

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

- -

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

-
-
versión
-
Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
-
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
-
conexión a la base de datos
-
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
-
transacción
-
-

Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

- -

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

- -

Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.

- -

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

- -

Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

-
-
solicitud
-
La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.
-
índice
-
-

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

- -

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

- -

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

-
-
- -

Llave y valor

- -
-
llave
-
-

Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un generador de llaves, una ruta de llave, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.

- - -

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves.

- -

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

-
-
generador de llaves
-
Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.
-
llaves en línea
-
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.
-
llave fuera de línea
-
Una llave que se almacena separada del valor.
-
ruta de llave
-
Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.
-
valor
-
-

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

- -

Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.

- -

Se pueden almacenar Blobs y archivos. cf. especificación.

-
-
- -

Rango y ámbito

- -
-
ámbito
-
El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.
-
cursor
-
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea IDBCursor o IDBCursorSync.
-
rango de llaves
-
-

Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.

- -

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

-
-
- -

Limitaciones

- -

IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:

- - - -

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

- - - -

Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.

- -
-

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

-
- -

Próximo paso

- -

Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea Usando IndexedDB.

- -

Vea también

- -

Especificación

- - - -

Referencia

- - - -

Tutoriales

- - - -

Artículo relacionado

- - diff --git a/files/es/orphaned/web/api/parentnode/append/index.html b/files/es/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 4944a7fe68..0000000000 --- a/files/es/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}}
- -

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

- -

Diferencias con {{domxref("Node.appendChild()")}}:

- - - -

Sintaxis

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

Parameters

- -
-
nodes
-
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
-
- -

Exceptions

- - - -

Examples

- -

Appending an element

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Appending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() is unscopable

- -

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.append")}}

- -

See also

- - diff --git a/files/es/orphaned/web/api/parentnode/children/index.html b/files/es/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index f8ae9e5831..0000000000 --- a/files/es/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - DOM - - ParentNode - - Propiedad -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -

{{ APIRef("DOM") }}

- -

Node.children es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un Node.

- -

Sintaxis

- -
var children = node.children;
- -

children es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos de node. Si no hay elementos hijos, entonces children no contendrá elementos y su longitud ( length )  será 0.

- -

Ejemplo

- -
var foo = document.getElementById('foo');
-for (var i = 0; i < foo.children.length; i++) {
-    console.log(foo.children[i].tagName);
-}
-
- -

Polyfill

- -
// Sobrescribe el prototipo 'children' nativo.
-// Añade soporte para Document y DocumentFragment en IE9 y Safari.
-// Devuelve un array en lugar de HTMLCollection.
-;(function(constructor) {
-    if (constructor &&
-        constructor.prototype &&
-        constructor.prototype.children == null) {
-        Object.defineProperty(constructor.prototype, 'children', {
-            get: function() {
-                var i = 0, node, nodes = this.childNodes, children = [];
-                while (node = nodes[i++]) {
-                    if (node.nodeType === 1) {
-                        children.push(node);
-                    }
-                }
-                return children;
-            }
-        });
-    }
-})(window.Node || window.Element);
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definición Inicial
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]38.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}16.0{{CompatNo}}
Soporte en {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.

- -

Ver también

- - diff --git a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html b/files/es/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index c809951fdf..0000000000 --- a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ParentNode.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild ---- -

{{ APIRef("DOM") }}

- -

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto {{domxref("Element")}}, o bien null si no existen elementos hijos.

- -
-

Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, firstElementChild fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.

-
- -

Sintaxis

- -
var childNode = elementNodeReference.firstElementChild;
-
- -

Ejemplo

- -
<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstElementChild.nodeName)
-</script>
- -

En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.

- -

Polyfill para Internet Explorer 8

- -

Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:

- -
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
-if(!("firstElementChild" in document.documentElement)){
-    Object.defineProperty(Element.prototype, "firstElementChild", {
-        get: function(){
-            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
-                if(n = nodes[i], 1 === n.nodeType) return n;
-            return null;
-        }
-    });
-}
- -

Especificación

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda definido ahora en el segundo.
- Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

Ver también

- - diff --git a/files/es/orphaned/web/api/parentnode/index.html b/files/es/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 726bd7d0f5..0000000000 --- a/files/es/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API DOM Tab - - NeedsTranslation - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -

{{ APIRef("DOM") }}

- -

The ParentNode interface contains methods that are particular to {{domxref("Node")}} objects that can have children.

- -

ParentNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

- -

 

- -

Properties

- -
-
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
-
Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this ParentNode.
-
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the first child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the last child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
-
Returns an unsigned long giving the amount of children that the object has.
-
- -

Methods

- -

There is no inherited or specific and implemented methods.

- -

Specification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
- Added the children property.
- Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.

- -

See also

- - diff --git a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html b/files/es/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 621e139fb8..0000000000 --- a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild ---- -

{{ APIRef("DOM") }}

- -

La propiedad de sólo lectura ParentNode.lastElementChild retorna el último hijo del objeto {{domxref("Element")}} o bien null si no hay elementos hijos.

- -
-

Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, lastElementChild fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.

-
- -

Sintaxis

- -
var childNode = elementNodeReference.lastElementChild;
- -

Ejemplo

- -
<p id="para-01">
-  <span>First span</span>
-  <b>bold</b>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.lastElementChild.nodeName)
-</script>
-
- -

En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").

- -

Polyfill para Internet Explorer 8

- -

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:

- -
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
-if(!("lastElementChild" in document.documentElement)){
-    Object.defineProperty(Element.prototype, "lastElementChild", {
-        get: function(){
-            for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i)
-                if(n = nodes[i], 1 === n.nodeType) return n;
-            return null;
-        }
-    });
-}
- -

Especificación

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda ahora definido en el segundo.
- {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal  y lo usa en {{domxref("Element")}}.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

 

- -

Ver también

- - diff --git a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index 6ff8e52560..0000000000 --- a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Verificando la autenticidad usando contraseña -slug: orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password -original_slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -

{{APIRef("Web Crypto API")}}{{draft}}

- -

La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.

- -

Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados.  Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.

- -

Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.

- -

Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use localforage.js a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.

- -

The data we want to access is of the form:

- -

 

- -

where data is the information to guarantee the integrity and signature the information used to verify it.

- -

Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.

- -

We ask the user for a password, and we use it to generate the key:

- -
 
- -

With that key, we will be able to compute the mac of the data.

- -
 
diff --git a/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html b/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html deleted file mode 100644 index 0e8b963374..0000000000 --- a/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ':-moz-ui-valid' -slug: orphaned/Web/CSS/:-moz-ui-valid -tags: - - CSS - - NeedsExample - - NeedsMobileBrowserCompatibility - - No estándar(2) - - Pseudo clase CSS - - Referencia CSS -translation_of: Web/CSS/:-moz-ui-valid -original_slug: Web/CSS/:-moz-ui-valid ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La pseudo-clase CSS:-moz-ui-valid CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  restricciones de validación.

- -

Se aplica siguiendo las siguientes reglas:

- - - -

El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- - diff --git a/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html b/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html deleted file mode 100644 index d611859f41..0000000000 --- a/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Comenzando (tutorial CSS) -slug: orphaned/Web/CSS/Comenzando_(tutorial_CSS) -original_slug: Web/CSS/Comenzando_(tutorial_CSS) ---- -

 

-

Introducción

-

Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).

-

Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.

- - -

Este tutorial se base en la especificación CSS 2.1

-

¿Quienes deberían usar este tutorial?

-

Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.

-

Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.

-

Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.

-

Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.

-

¿Qué necesitas antes de empezar?

-

Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.

-

Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.

-

Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.

- -

Nota:  CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.

-

Como usar este tutorial

-

Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.

-

En cada página, usa la sección Información para entender como funciona CSS. Usa la sección Acción para tratar de usar CSS en tu computadora.

-

Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.

-

Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas Más detalles. Usa los enlaces allí para encontrar información de referencia acerca de CSS.

-

Tutorial Parte I

-

Una guía de CSS paso a paso.

-
  1. Que es CSS
  2. Por qué usar CSS
  3. Como funciona CSS
  4. Cascada y herencia
  5. Selectores
  6. CSS legible
  7. Estilos de texto
  8. Color
  9. Contenido 
  10. Listas
  11. Cajas
  12. Estructura
  13. Tablas
  14. Media
    15. -
-

Tutorial Parte II

-

Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.

-
  1. JavaScript
  2. Gráficos SVG
  3. Data XML
  4. XBL bindings 
  5. Interfaces de usuario 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/es/orphaned/web/css/como_iniciar/index.html b/files/es/orphaned/web/css/como_iniciar/index.html deleted file mode 100644 index ac3a0b3836..0000000000 --- a/files/es/orphaned/web/css/como_iniciar/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Como iniciar -slug: orphaned/Web/CSS/Como_iniciar -original_slug: Web/CSS/Como_iniciar ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/orphaned/web/css/linear-gradient()/index.html b/files/es/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index 94289c2695..0000000000 --- a/files/es/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - Función CSS - - Imágenes CSS - - Plantilla - - Referencia - - Web - - graficos -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -

{{ CSSRef() }}

- -

Resumen

- -

La función CSS linear-gradient() crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.

- -

{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}

- -

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.

- -

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

- -

linear-gradient.png

- -

La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.

- -

El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.

- -

De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.

- -

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

- -

Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.

- -

La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.

- -

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.

- -
Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.
-For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
- -

Syntax

- -
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                                  \---------------------------------/ \----------------------------/
-                                    Definition of the gradient line         List of color stops
-
-                      where <side-or-corner> = [left | right] || [top | bottom]
-                        and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
-linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
-                                                  finishing red */
-
-linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
-                                                  and finishing red */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

History of the syntax

- -

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

- -
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
- -

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

- -

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

- -
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

- -

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

- - - -

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

- -
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

- -
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

This should be the final syntax.

- -

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

- -

Examples

- -

Gradient at a 45 degree angle

- -

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

- -

lingradexample.png

- -

Gradient with multiple color stops

- -

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

- -

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

- -
A rainbow made from a gradient
- -
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-
- -

Repeating a linear gradient

- -

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

- -

Using transparency

- -
Linear with transparency
- -
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
- -

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

- -

Notes

- -

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
- -

Browser compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
linear-gradient(to top left, blue, red);
- -

is almost the same as:

- -
-moz-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

Cross-browser gradients

- -

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

- -
.grad {
-  background-color: #F07575; /* fallback color if gradients are not supported */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
-}
-
- -

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

- -

See also

- - diff --git a/files/es/orphaned/web/css/primeros_pasos/index.html b/files/es/orphaned/web/css/primeros_pasos/index.html deleted file mode 100644 index e9a41b9331..0000000000 --- a/files/es/orphaned/web/css/primeros_pasos/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Primeros pasos -slug: orphaned/Web/CSS/Primeros_pasos -original_slug: Web/CSS/Primeros_pasos ---- -

 

-

Introducción

-

Este tutorial es una introducción a las hojas de estilo en cascada (CSS).

-

Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.

- - -

El tutorial está basado en la especificación 2.1 de CSS 2.1.

-

¿Quién debe usar este tutorial?

-

Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.

-

Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.

-

Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.

-

Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.

-

¿Qué necesitas antes de empezar?

-

Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.

-

Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.

-

Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:

- -

Nota:  CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.

-

Cómo usar este tutorial

-

Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.

-

En cada página, usa la sección de Información para entender cómo funciona CSS. Usa la sección Acción para probar el uso de CSS en tu propio equipo.

-

Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.

-

Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título Más detalles. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.

-

Primera parte del tutorial

-

Una guía básica paso a paso de CSS.

-
  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media
    15. -
-

Segunda parte del tutorial

-

Ejemplos que muestran el alcance del CSS en Mozilla.

-
  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
    6. -
-

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "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/es/orphaned/web/css/radial-gradient()/index.html b/files/es/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index bb61f0c811..0000000000 --- a/files/es/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -tags: - - Función CSS - - Gráficos(2) - - Imagen CSS -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -

{{CSSRef}}

- -

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

- -

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

- -

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

- -

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

- -

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

- -

Sintaxis

- -
// Definición de la figura
-radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
-radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
-radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
-radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
-radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
-
-// Definición de la posición de la figura
-radial-gradient ( … at <position>, … )
-
-// Definición de los stops de colores
-radial-gradient ( …, <color-stop>, … )
-radial-gradient ( …, <color-stop>, <color-stop> )
- -

Valores

- -
-
<position>
-
Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es center.
-
<shape>
-
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
-
<color-stop>
-
Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.
-
<extent-keyword>
-
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescripción
closest-sideLa figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
- Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
-
- -

Sintaxis formal

- -
radial-gradient(
-  [ [ circle || {{cssxref("<length>")}} ]                         [ at {{cssxref("<position>")}} ]? , |
-    [ ellipse || [ <length> | {{cssxref("<percentage>")}} ]{2} ]  [ at <position> ]? , |
-    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
-    at <position> ,
-  ]?
-  <color-stop> [ , <color-stop> ]+
-)
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -

Ejemplo 1

- -

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
-}
- -

{{ EmbedLiveSample('Example_1') }}

- -

Ejemplo 2

- -

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
-}
- -

{{ EmbedLiveSample('Example_2') }}

- -

Ejemplo 3

- -

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
-}
- -

{{ EmbedLiveSample('Example_3') }}

- -

Ejemplo 4

- -

Este código producirá un círculo difuso con radio de 16px:

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
-}
- -

{{ EmbedLiveSample('Example_4') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
- 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

- -

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

- -

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

- -

Véase también

- - diff --git a/files/es/orphaned/web/css/rtl/index.html b/files/es/orphaned/web/css/rtl/index.html deleted file mode 100644 index 6497cf094d..0000000000 --- a/files/es/orphaned/web/css/rtl/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: rtl -slug: orphaned/Web/CSS/rtl -original_slug: Web/CSS/rtl ---- -

Sumario

-

El valor rtl es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. -


-

-

Ejemplos

-
div {
-   position: absolute;
-   right: 20px;
-   height: 200px;
-   border: 1px solid #000;
-   direction: rtl;
-}
-
-


-

-

Ver también

-

{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -

diff --git a/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html b/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html deleted file mode 100644 index 0cb95888b6..0000000000 --- a/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Generador de curvas de bézier -slug: orphaned/Web/CSS/Tools/Cubic_Bezier_Generator -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator -original_slug: Web/CSS/Tools/Cubic_Bezier_Generator ---- -
- - -

{{draft}}

- -

Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!

- -

{{EmbedLiveSample("Tool", 1000, 2000)}}

-
- -

 

diff --git a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 057a0273fa..0000000000 --- a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

- -

Crear eventos personalizados

- -

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

- -
var event = new Event('build');
-
-// Escucha para el evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Disparar event.
-elem.dispatchEvent(event);
- -

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

- -

Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

- -

Adición de datos personalizados con CustomEvent ()

- -

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
- Por Ejemplo, el evento se puede crear de la siguiente manera:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

La Forma Antigua

- -

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

- -
// Creamos el evento.
-var event = document.createEvent('Event');
-
-/* Definimos el nombre del evento que es 'build'.*/
-event.initEvent('build', true, true);
-
-// Asignamos el evento.
-document.addEventListener('build', function (e) {
-  // e.target matches document from above
-}, false);
-
-// target can be any Element or other EventTarget.
-document.dispatchEvent(event);
-
-
- -

El disparo incorporado eventos

- -

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    // A handler called preventDefault.
-    alert("canceled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not canceled");
-  }
-}
- -

Compatibilidad con los Navegadores

- -

 

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

See also

- - diff --git a/files/es/orphaned/web/guide/events/event_handlers/index.html b/files/es/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 1c298b7826..0000000000 --- a/files/es/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Manejadores de eventos en el DOM -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -

La plataforma Web provee varias formas de recibir notificaciones de los eventos del DOM.  Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos. Esta página se enfoca en los detalles de cómo funcionan estos.

- -

Registering on-event handlers

- -

Los controladores on-event son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla,  enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser onclick, onkeypress, onfocus, etc.

- -

Pueden especificar un controlador de evento on<...> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:

- - - -

Un controlador onevent

- -

Notese que cada objeto puede tener sólo un controlador on-event para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.

- -

Also note that on-event handlers are called automatically, not at the programmer's will (although you can, like  mybutton.onclick(myevent); ) since they serve more as placeholders to which a real handler function can be assigned.

- -

Non-element objects

- -

Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:

- -
xhr.onprogress = function() { ... }
- -

Details

- -

The value of HTML on<...> attributes and corresponding  JavaScript properties

- -

A handler registered via an on<...> attribute will be available via the corresponding on<...> property, but not the other way around:

- -
<div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div>
-
-<script>
-window.onload = function () {
-  var div = document.getElementById("a");
-  console.log("Attribute reflected as a property: ", div.onclick.toString());
-  // Prints: function onclick(event) { alert('old') }
-  div.onclick = function() { alert('new') };
-  console.log("Changed property to: ", div.onclick.toString());
-  // Prints: function () { alert('new') }
-  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
-  // Prints: alert('old')
-}
-</script>
- -

For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)

- -

Event handler's parameters, this binding, and the return value

- -

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

- - - -

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

- -

The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see "The event handler processing algorithm" in the HTML specification.

- -

When the event handler is invoked

- -

TBD (non-capturing listener)

- -

Terminology

- -

The term event handler may be used to refer to:

- - - -

When discussing the various methods of listening to events,

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- -

Event handler changes in Firefox 9

- -

In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.

- -

Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.

- -

Detecting the presence of event handler properties

- -

You can now detect the presence of an event handler property (that is, for example, onload), using the JavaScript in operator. For example:

- -
if ("onsomenewfeature" in window) {
-  /* do something amazing */
-}
-
- -

Event handlers and prototypes

- -

You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change Window.prototype.onload anymore. In the past, event handlers (onload, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.

diff --git a/files/es/orphaned/web/guide/events/index.html b/files/es/orphaned/web/guide/events/index.html deleted file mode 100644 index f9469eba26..0000000000 --- a/files/es/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -

{{draft()}}

-

Everything you need to know about events will go under here. We're working on cleanup here now.

-

Docs

-

{{LandingPageListSubpages}}

diff --git a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index d6e7708621..0000000000 --- a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Explicación de los datos de orientación y movimiento -slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained ---- -

{{ Draft() }}

-

Sumario

-

Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.

-
-

Atención: Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.

-
-

Acerca de los marcos de coordenadas

-

Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:

-

Marco de coordenadas terrestres

-

El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.

- -

 

-

-

 

-

Marco de coordenadas del dispositivo

-

El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo

-

axes.png

- -
- Nota: En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.
-

Sobre la rotación

-

La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.

-

Alpha

-

Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:

-

alpha.png

-

El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.

-

Beta

-

Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:

-

beta.png

-

El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.

-

Gamma

-

Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:

-

gamma.png

-

El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.

diff --git a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index 160d590380..0000000000 --- a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Validación de restricciones -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guía - - HTML5 - - NecesitaContenido - - Selectores -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation ---- -

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

- -
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
- -

Restricciones intrínsecas y básicas

- -

En HTML5, las restricciones básicas son declaradas de dos formas:

- - - -

Tipos de captura semánticos

- -

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

- - - - - - - - - - - - - - - - - - - - - -
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: -
    -
  • una URI válida (como se define en RFC 3986)
    • -
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • -
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • -
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • -
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: -
    -
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • -
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • -
- -
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
- -

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

- -

Atributos relacionados con validaciones

- -

Los siguientes atributos son usados para describir restricciones básicas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
- -

Proceso de validación de restricciones

- -

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

- - - -
Nota: - - -
- -

Restricciones complejas usando la API de Restricciones de HTML5

- -

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

- -

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

- -

Restricciones que combinan varios campos: Validación de código postal

- -

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

- -
-

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

-
- -

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

- -
<form>
-    <label for="ZIP">Código postal : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">País : </label>
-    <select id="Country">
-      <option value="ch">Suiza</option>
-      <option value="fr">Francia</option>
-      <option value="de">Alemania</option>
-      <option value="nl">Países Bajos</option>
-    </select>
-    <input type="submit" value="Validar">
-</form>
- -

Esto mostrará el siguiente formulario: 

- -

- -

Primero, escribimos una función que revisará las restricciones en sí:

- -
function checkZIP() {
-  // Para cada país, se define el patrón para el código postal
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
-  };
-
-  // Se lee el ID del país
-  var country = document.getElementById("Country").value;
-
-  // Se obtiene el campo del código postal
-  var ZIPField = document.getElementById("ZIP");
-
-  // Se crea el validador de la restricción
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // ¡Se hace la revisión!
-  if (constraint.test(ZIPField.value)) {
-    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // El código postal no cumple la restricción, usamos la API de Restricciones para
-    // dar un mensaje sobre el formato requerido para este país
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

- -

Limitando el tamaño de un archivo antes de ser subido

- -

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

- -

Aquí está la parte de HTML:

- -
<label for="FS">Selecciona un archivo menor a 75KB : </label>
-<input type="file" id="FS">
- -

Esto muestra lo siguiente:

- -

- - - -

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // Si hay (por lo menos) un archivo seleccionado
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Validar la restricción
-       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
-       return;
-     }
-  }
-  // No hay incumplimiento de la restricción
-  FS.setCustomValidity("");
-}
- - - -

Finalmente, anclamos el método al evento requerido:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

- -

Estilos visuales de validación de restricciones

- -

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

- -

Controlando el aspecto de los elementos

- -

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

- -

Pseudo-clases :required y :optional

- -

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

- -

Pseudo-clase :-moz-placeholder

- -

Véase ::placeholder (experimental).

- -

Pseudo-clases :valid :invalid

- -

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

- -

Estilos predeterminados

- -

Controlando el texto de incumplimiento de restricciones

- -

El atributo x-moz-errormessage

- -

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

- -
-

Nota: Esta extensión no es estándar.

-
- -

element.setCustomValidity() de la API de Validación de Restricciones

- -

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

- -

Objeto ValidityState de la API de Validación de Restricciones

- -

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusión

diff --git a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html deleted file mode 100644 index 5548e129ac..0000000000 --- a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Analizador de HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/HTML5_Parser -tags: - - HTML - - HTML5 - - para_revisar -translation_of: Web/Guide/HTML/HTML5/HTML5_Parser -original_slug: Web/Guide/HTML/HTML5/HTML5_Parser ---- -

{{ gecko_minversion_header("2") }}{{ draft() }}

-

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

-

El nuevo analizador presenta estas mejoras importantes:

- -

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

-

Conductas del analizador modificadas

-

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

-

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

-

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

-

Llamar a document.write () durante el análisis

-

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

-

Algunos contextos en los que no debes llamar a document.write() incluyen:

- -

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

-

Falta de repetición del análisis

-

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

-

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

- -

Mejora del rendimiento con el análisis especulativo

-

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

-

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

-

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

-

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

-
<script>
-  document.write ("<div>");
-  document.write ("<p> Aquí va el contenido. </ p>");
-  document.write ("</ div>");
-</ script>
-<!-- Aquí va el HTML sin script. -->
-
-
-

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

-
<script>document.write("<div>");</script>
-<p>El contenido va aquí.</p>
-<script>document.write("</div>");</script>
-
-
-

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

-

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/orphaned/web/guide/html/html5/index.html b/files/es/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index a85b952772..0000000000 --- a/files/es/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - API - - CSS3 - - Gráficos(2) - - HTML - - HTML5 - - Multimedia - - SVG - - conectividad - - graficos - - mejoras - - nuevo -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

- - - -

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

- - - -
-
-

SEMÁNTICA

- -
-
Secciones y contenidos en HTML5
-
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
-
Uso de audio y video en HTML5
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
-
- -
-
Formularios en HTML5
-
Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
-
Nuevos elementos semánticos
-
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos. -
-
-
Mejora en {{HTMLElement("iframe")}}
-
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
-
MathML
-
Permite integrar directamente fórmulas matemáticas.
-
-
Introducción a HTML5
-
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
-
Analizador de HTML5 compatible
-
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
-
- -

CONECTIVIDAD

- -
-
Web Sockets
-
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
-
Eventos de servidor enviados
-
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
-
WebRTC
-
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
-
- -

Sin Conexión Y ALMACENAMIENTO

- -
-
Recursos sin conexión: el caché de la aplicación
-
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
-
Eventos  con y sin conexión
-
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
-
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
-
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
-
IndexedDB
-
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
-
Uso de archivos desde aplicaciones web
-
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
-
- -

MULTIMEDIA

- -
-
Usando HTML5 de audio y video
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. -
-
-
WebRTC
-
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Track and WebVTT
-
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
-
- -

3D, GRAFICOS & EFECTOS

- -
-
Canvas Tutorial
-
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
-
API de texto para elementos <canvas> 
-
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
-
WebGL
-
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <canvas> HTML5  .
-
SVG
-
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
-
-
-
-
-
-
-
- -
-

RESULTADOS e INTEGRACIÓN

- -
-
Web Workers
-
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
-
XMLHttpRequest Nivel 2
-
Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
-
- -
-
Motores JIT compilación de JavaScript
-
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
-
History API
-
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
-
El atributo contentEditable: transformar su sitio web en una wiki!
-
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
-
Arrastrar y soltar
-
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
-
Gestión del foco en HTML
-
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
-
Manejadores de protocolo basados ​​en web
-
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
-
Fullscreen API
-
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
-
API Pointer Lock
-
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
-
Eventos en línea y fuera de línea
-
-
-
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
-
-
-
- -

ACCESO al dispositivo

- -
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Eventos táctiles
-
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
-
El uso de geolocalización
-
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
-
Detección de la orientación del dispositivo
-
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
-
API Pointer Lock
-
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
-
- -

CSS3 STYLING

- -

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.

- -
-
Nuevas características de diseño de fondo
-
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
-
- -
-
Bordes mas "lujosos"
-
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
-
Animación de su estilo
-
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
-
Tipografía mejorada
-
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
-
Nuevos diseños de presentación
-
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
-
-
-
diff --git a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index c0ad7e26db..0000000000 --- a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Introducción a HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -


- HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

-

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

-

El tipo de documento HTML5

-

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

-
<!DOCTYPE html>
-

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

-

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html b/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html deleted file mode 100644 index f5f733a71d..0000000000 --- a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Introducción al HTML -slug: orphaned/Web/Guide/HTML/Introduction_alhtml_clone -tags: - - HTML -original_slug: Web/Guide/HTML/Introduction_alhtml_clone ---- -

Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas palabras normalmente tienen algunas características, como diferentes tamaños y colores. En algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás viendo. La página también puede contener animaciones y contenidos que cambian mientras el resto de la página se mantiene sin cambios.

- -

Varias tecnologías (como CSS, JavaScript, Flash, AJAX, JSON) pueden usarse para definir los elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se define usando HTML (HyperText Markup Language). Sin HTML, no habría páginas web.

- -

Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.

- -

Una breve historia del HTML

- -

A finales de la década de los 80s, Tim Berners-Lee estuvo trabajando como físico en CERN (las siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para que los científicos pudieran compartir documentos a través de internet. Antes de su invención, las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías como el email, FTP (File Transfer Protocol), y Usenet- tecnología en la que se basan los foros de internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).

- -

¿Qué es el HTML?

- -

HTML es un lenguaje de etiquetas. Indica al navegador como tiene que mostrar el contenido. El HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos <>, y las etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una barra /.

- -

Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "<p>" y una de cierre "</p>". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento párrafo en HTML:

- -
-
<p>Mi perro odia el pescado.</p>
-
- -

Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:

- -

{{ EmbedLiveSample("Spl1", 400, 50) }}

- -

El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.

- -

Los elementos que contienen contenidos, normalmente suelen contener también otros elementos. Por ejemplo, el elemento énfasis (etiqueta <em>) puede estar dentro del elemento párrafo:

- -
-
<p>Mi perro <em>odia</em> el pescado.</p>
-
- -

Cuando se muestre se verá del siguiente modo:

- -

{{ EmbedLiveSample("Spl2", 400, 50) }}

- -

Algunos elementos no contienen otros elementos.  Como es el caso de la etiqueta imagen ("<img>") que simplemente especifica el nombre del archivo que contiene la imagen como atributo:

- -
<img src="smileyface.jpg">
- -

En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma ">" para indicar el final de la misma "/>". Aunque se trata de algo opcional en HTML, en XHTML es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).

- -

El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección. Además, si quieres ver HTML en acción, pásate por Mozilla Thimble, que es un editor online  interactivo que enseña cómo escribir HTML. Además, en el HTML Elements podrás ver una lista de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada uno de ellos.

- -

Elementos — los bloques básicos de construcción

- -

El HTML consiste en una serie de elementos. Los Elementos definen el significado semántico del contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez contienen otras etiquetas. Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>" indica una imagen. Mira la página HTML Elements para ver una lista completa de todos los elementos.

- -

Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como "esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son usados por razones técnicas, como "esto es la información identificativa de la página que no debe ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor semántico.

- -

Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:

- -
<html>
-  <body>
-
-    <p>Mi perro <em>odia</em> el pescado.</p>
-
-  </body>
-</html>
- -

Como puedes ver, los elementos <html> encierran el resto del documento, y el elemento <body> encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los elementos <body> y <p> son las ramas que crecen del tronco que es <html>. Esta estructura jerárquica es lo que se denomina DOM: siglas inglesas del Documento Objeto Modelo (Document Object Model).

- -

Etiquetas

- -

Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de código HTML prefieren editores especializados que resaltan las partes de código propias de la sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en mayúsculas o en minúsculas. Aunque, el W3C (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el XHTML requiere de las minúsculas).

- -

El código HTML contenido entre los signos de menor que ("<") al comienzo y mayor que (">") al final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo sencillo:

- -
<p>Esto es texto dentro de un párrafo.</p>
-
- -

En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para poder escribir código válido.

- -

Esto es un ejemplo de código válido:

- -
<em>Me <strong>refiero</strong> a eso</em>.
-
- -

Esto es un ejemplo de código inválido:

- -
Invalido: <em>Me <strong>refiero</em> a eso</strong>.
- -

Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada antes de la etiqueta de cierre del elemento que la contenedor.

- -
-

Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a medida que han implementado las nuevas normas de interpretación de código HTML no válido. Aquí puede ver el resultado de un código invalido para el mismo arbol DOM en todos los navegadores modernos.

-
- -

Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:

- -
<img src="smileyface.jpg">
- -

Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del simbolo mayor que (necesario en los códigos de XHTML).

- -
<img src="smileyface.jpg" />
- -

En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.

- -

Atributos

- -

La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el siguiente ejemplo. Dicha información es lo que se conoce como atributos. Los atributos suelen consistir en dor partes:

- - - -

Algunos atributos sólo pueden tener un único valor. Son atributos Booleanos y pueden ser incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres ejemplos tienen el mismo significado:

- -
<input required="required">
-
-<input required="">
-
-<input required>
-
- -

Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos ambiguo para la vista y para evitar errores. El siguiente es semejante error..:Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. El siguiente código sería un error:

- -
<p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)
- -

En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el código se interpreta como si se hubiera escrito así:

- -
<p class="foo" bar="">
- -

Nombre de caracteres referenciados

- -

Los Caraceteres Referenciados  (a veces llamados entidades) son combinaciones de caracteres que sirven para mostrar en el navegador símbolos que tienen un significado especial en el código HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados más comunes, que no estaría de más que memorizases:

- - - -

Hay muchas más entidades, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.

- -

Tipo de documento y comentarios

- -

Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración doctype en la primera línea. En el HTML actual esto se escribe del siguiente modo:

- -
<!DOCTYPE html>
- -

El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares web del W3C y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar peculiaridades.)

- -

HTML tiene un mecanismo para poder introducir comentarios al código que no serán mostrados en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en HTML están contenidos entre los siguientes símbolos:

- -
<!-- Esto es un comentario de texto -->
- -

Un pequeño documento pero completo

- -

Colocando todas estas explicaciones juntas, aquí os dejamos un pequeño ejemplo de un documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como myfirstdoc.html y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo se trata de un pequeño comienzo.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>A tiny document</title>
-</head>
-<body>
-  <h1>Main heading in my document</h1>
-  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
-  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
-</body>
-</html>
-
diff --git a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index dcee261b54..0000000000 --- a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Secciones y esquema de un documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.

- -
-

A lo largo de este documento se empleará la palabra esquema en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

-
- -

Estructura de un documento HTML 4

- -

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.

- -

Entonces el siguiente marcado:

- -
-
<div class="seccion" id="zorro" >
-<h1>El zorro</h1>
-<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
-... bla, bla, bla ...
-<div class="subseccion" id="zorro-habitat" >
-<h2>Hábitat</h2>
-<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
-...bla, bla, bla...
-</div>
-</div>
-
-
- -

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-
- -

Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,

- -
<h1>El zorro</h1>
-<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
-... bla, bla, bla ...
-<h2>Hábitat</h2>
-<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
-...bla, bla, bla...
-<h2>Costrumbres</h2>
-<h1>El oso</h1>
-
- -

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-   1.2 Costumbres
-2. El oso
-
- -

Problemas resueltos por HTML5

- -

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

- -
    -
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para tecnologías de apoyo, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
    2. -
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.
    3. -
  3. Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. -
  4. En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.
    5. -
  5. Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.
    6. -
- -

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

- -

El algoritmo de esquematizado de HTML5

- -

Definiendo secciones en HTML5

- -

Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.

- -
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también Definiendo cabeceras en HTML5.
- -

Ejemplo:

- -
<section>
-  <h1>El pato</h1>
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-  <aside>
-    <p>otros estudiosos del pato
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

El bloque de HTML define dos secciones de alto nivel:

- -
<section>
-  <h1>El pato</h1>
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-   <aside>
-    <p>otros estudiosos del pato
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

La primera sección tiene tres subsecciones:

- -
<section>
-  <h1>El pato</h1>
-
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-
-  <aside>
-    <p>Otros estudiosos del lobo
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

Esto genera la siguiente estructura:

- -
1. El pato
-   1.1 Introducción
-   1.2 Hábitat
-   1.3 Section (aside)
-
- -

Definiendo cabeceras en HTML5

- -

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.

- -

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:

- -
<section>
-  <h1>La mosca</h1>
-  <p>El esta sección hablaremos de la mosca, una criatura adorable.
-    ... bla, bla, bla ...
-  <section>
-    <h2>Hábitat</h2>
-    <p>Únicamente se han divisado colonias de moscas en los montes de....
-        ...bla, bla, bla ...
-  </section>
-</section>
-<section>
-  <h3>El mosquito</h3>
-  <p>A continuación, otra rareza a punto de extinguirse, el mosquito.
-     ...bla, bla, bla...
-</section>
- -

Genera el siguiente esquema:

- -
1. La mosca
-   1.1 Hábitat
-2. El mosquito
- -

Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).

- -

Seccionado implícito

- -

Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado seccionado implícito.

- -

Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:

- -
<section>
-  <h1>El águila</h1>
-  <p> ....
-
-  <h3 class="subsec-implicita">Hábitat</h3>
-  <p> ...
-</section>
- -

Genera el siguiente esquema:

- -
1. El águila
-   1.1 Hábitat (impícitamente definido mediante <h3>)
-
- -

Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: 

- -
<section>
-  <h1>El águila</h1>
-  <p>...
-  <h1 class="secc-implicita">El buitre</h1>
-  <p>...
-</section>
- -

genera el siguiente esquema: 

- -
1. El águila
-2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
-
- -

Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:

- -
<body>
-  <h1>Colores</h1>
-  <h2>Rojo</h2>
-  <p> ...
-  <section>
-    <h3>Amarillo</h3>
-    <p> ...
-    <h3>Verde</h3>
-      <p> ...
-    <h2>Sabores</h2>
-      <p>...
-  </section>
-</body>
- -

generando el siguiente esquema:

- -
1. Colores
-   1.1 Rojo (implícitamente con <h2> )
-   1.2 Amarillo(explícitamente con <section> )
-   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
-2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
-
- -

Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica

- - - -

Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

- -

Una excepción a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser reutilizadas en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.

- -

Sobreescribiendo seccionamiento implícito

- -

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

- - - -

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:

- -
<section>
-  <hgroup>
-    <h1>La flauta mágica</h1>
-    <h2>Ópera en dos actos del genio salzburgués</h2>
-  </hgroup>
-  ... algún contenido ...
-</section>
-
- -

genera el siguiente esquema, que es el que se desea:

- -
1. La flauta mágica
- -

Secciones desacopladas

- -

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

- -

Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.
-  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

- -

Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.

- -

Ejemplo:

- -
<section>
-  <h1>Bach</h1>
-  <section>
-    <h2>Introducción</h2>
-    <p>...
-  </section>
-  <section>
-    <h2>La Pasión según S. Mateo</h2>
-    <p> Bla, bla, bla ...
-    <blockquote>
-       <h1>Friedich Nietzsche
-       <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
-    </blockquote>
-  </section>
-</section>
- -

Este ejemplo resulta en el siguiente esquema:

- -
1. Bach
-   1.1 Introducción
-   1.2 La Pasión según s. Mateo
- -

Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.

- -

Secciones fuera del esquema

- -

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

- -
    -
  1. El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.
    2. -
  2. El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
    3. -
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.
    4. -
  4. El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.
    5. -
- -

Direcciones y tiempo de publicación en elementos de seccionado

- -

El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.

- -

Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.

- -

De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.

- -

Usando elementos HTML5 en navegadores no HTML5

- -

Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como display:inline por defecto:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.
-
- Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Warning !</strong>
-     Because your browser does not support HTML5, some elements are simulated using JScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

Conclusión

- -

Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.

diff --git a/files/es/orphaned/web/html/element/command/index.html b/files/es/orphaned/web/html/element/command/index.html deleted file mode 100644 index da926bfb8f..0000000000 --- a/files/es/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsoleto -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Elemento/command ---- -
{{obsolete_header()}}
- -
-

Nota: El elemento command ha sido removido de {{Gecko("24.0")}}  en favor del elemento {{HTMLElement("menuitem")}}  . Firefox nunca ha soportado este elemento command , y la implementación existente de la interface DOM  {{domxref("HTMLCommandElement")}} ha sido removida de  Firefox 24.

-
- - - -
<command function="About live stream">
- -

- -

El elemento command representa un comando que el usuario puede invocar .

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorías de contenidoContenido dinámico , contenido estático de texto, contenido de metadata .
Contenido permitidoNinguno , es un {{Glossary("empty element")}}.
Omisión de etiquetasLa etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . 
Elementos padre permitidos Solamente {{HTMLElement("colgroup")}} ,aunque puede ser definido implícitamente ya que su etiqueta de inicio no es obligatoria .El  {{HTMLElement("colgroup")}} no debe de tener un {{HTMLElement("span")}} como hijo .
Interface DOM {{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}
- -

Atributos

- -

Este elemento incluye los atributos globales .

- - - -
-
{{htmlattrdef("checked")}}
-
Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo type sea checkbox o radio.
-
{{htmlattrdef("disabled")}}
-
Indica que el comando no está disponible .
-
{{htmlattrdef("icon")}}
-
Proporciona una imagen que representa el comando.
-
{{htmlattrdef("label")}}
-
El nombre del comando como se muestra al usuario .
-
{{htmlattrdef("radiogroup")}}
-
Este atributo proporciona el nombre del grupo de comandos , con un atributo  type de tipo radio ,que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo type sea del tipo radio .
-
{{htmlattrdef("type")}}
-
Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :
-
- -

Ejemplos

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilidad en exploradores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico {{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

{{ HTMLRef }}

diff --git a/files/es/orphaned/web/html/element/element/index.html b/files/es/orphaned/web/html/element/element/index.html deleted file mode 100644 index ae980b7be1..0000000000 --- a/files/es/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Elemento/element ---- -
-

Nota: Este elemento ha sido borrado de la especificación. Mira esto para obtener más información desde el editor de la espeficicación.

-
- -

Resumen

- -

El elemento HTML <element> es utilizado para personalizar los elementos DOM.

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorias de contenidoContenido transparente.
Contenido Permitido???
Etiquetas omitidas{{no_tag_omission}}
Elementos padre permitidos???
Interfaz DOM{{domxref("HTMLElement")}}
- -

Atributos

- -

Este elemento incluye los atributos globales.

- -

Ejemplos

- -

El texto va aquí

- -
Más texto va aquí.
-
- -

Especificaciones

- -

El elemento <element> fue formulado en un borrador de la especificación de elementos personalizados, que se ha eliminado.

- -

Compatibilidad dee navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver También

- -
    -
  • Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}
    • -
- -
{{HTMLRef}}
diff --git a/files/es/orphaned/web/html/element/isindex/index.html b/files/es/orphaned/web/html/element/isindex/index.html deleted file mode 100644 index a0b5d74166..0000000000 --- a/files/es/orphaned/web/html/element/isindex/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: -slug: orphaned/Web/HTML/Element/isindex -tags: - - Deprecado - - Elemento - - HTML - - Referencia - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -
{{Deprecated_header}}
- -

Resumen

- -

<isindex> es un elemento HTML  obsoleto que posiciona un campo de texto en una página para buscar en el documento . <isindex> fue pensado por el W3C  para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .

- -

<isindex> fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. 

- -

Atributos 

- -

Como todos los otros elementos HTML , este elemento acepta los atributos globales .

- -
-
{{htmlattrdef("prompt")}}
-
Este atributo añade su valor como una ventana para un campo de texto.
-
{{htmlattrdef("action")}}
-
Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .
-
- -

Ejemplo

- -
<head>
-  <isindex prompt="Search Document... " />
-</head>
- -

Ver también

- -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("form")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/es/orphaned/web/html/element/multicol/index.html b/files/es/orphaned/web/html/element/multicol/index.html deleted file mode 100644 index 9ebbd8cb22..0000000000 --- a/files/es/orphaned/web/html/element/multicol/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: -slug: orphaned/Web/HTML/Element/multicol -tags: - - HTML -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -
{{non-standard_header}}
- -

Resumen

- -

El elemento HTML <multicol> fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .

- -
-

No usar esto ! Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS Column ,

-
- -

Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <multicol> fue asociado con un {{domxref("HTMLSpanElement")}}.  Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .

- -

 

diff --git a/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html b/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html deleted file mode 100644 index 54edf8c8f8..0000000000 --- a/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Etiqueta Personalizada HTML5 -slug: orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 -original_slug: Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 ---- -

Una etiqueta personalizada sencilla, es crear una plantilla de elementos.

- -

Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:

- -

corazon.js

- -

Contenido JavaScript

- -
function ini(){
-document.createElement('corazon');//creamos el elemento corazon
-var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento
-  var i;
-  for (i = 0; i < corazon.length; i++) {//ejecuta acciones para esos elementos
-//creamos estilos para nuetras etiquetas
-    corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')";
-    corazon[i].style.position="relative";
-    corazon[i].style.display="block";
-    corazon[i].style.width="64px";
-    corazon[i].style.height="64px";
-  }
-}
-window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento
- -

Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta <corazon> con la cual nos mostrara un corazon.

- -

index.html

- -

Contenido HTML

- -

<!DOCTYPE html>
- <html>
-   <head>
-     <meta charset="utf-8">
-     <title>Mi Etiqueta</title>
-     <script src="corazon.js"  type="text/javascript"></script>
-   </head>
-   <body>
-     <corazon></corazon>
-   </body>
- </html>

- -

 

diff --git a/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html b/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html deleted file mode 100644 index a5d26e1fd9..0000000000 --- a/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Tipos de elementos -slug: orphaned/Web/HTML/Elemento/Tipos_de_elementos -tags: - - HTML - - HTML:Elemento - - Todas_las_Categorías -original_slug: Web/HTML/Elemento/Tipos_de_elementos ---- -

Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.

- -

Según el doctype

- -

Todo documento HTML debe tener un doctype, en el doctype se indica la dtd que se aplica al documento. La dtd es un archivo que, entre otras cosas, indica qué elementos pueden usarse en el documento, o cuales son sus atributos.

- -

Los doctypes válidos en HTML 4.01 son tres:

- -

Para marcos

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
-       "http://www.w3.org/TR/html4/frameset.dtd">
-
- -

Con este doctype pueden usarse todos los elementos del html.

- -

De transición

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-       "http://www.w3.org/TR/html4/loose.dtd">
-
- -

Pueden usarse todos los elementos menos los especificos de marcos que son: frame frameset

- -

Estrictos

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-       "http://www.w3.org/TR/html4/strict.dtd">
-
- -

Con este doctype pueden usarse todos los elementos menos los específicos de los marcos: frame frameset y los desaprobados: applet basefont center dir font isindex menu s strike u

- -

Según su estructura

- -

Se dividen en tres grupos: básicos, de cabecera y de cuerpo.

- -

Los elementos básicos

- -

Son los elemento que conforman la columna vertebral de un documento html:

- -
-
Para un documento normal
-
html head body
-
- -
-
para uno de marcos
-
html head frameset frame
-
- -

De cabecera

- -

Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.

- -
-
Elementos de cabecera son
-
 
-
El obligatorio: title
-
Los opcionales: base meta link
-
Los mixtos: style script object y el transicional: isindex. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.
-
- -

De cuerpo

- -

Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.

- -

En bloque

- -
-
Elementos en bloque son
-
 
-
p dl div address hr blockquote form table fieldset pre noscript noframes Y los transicionales: center isindex
-
Los elementos de encabezados: h1 h2 h3 h4 h5 h6
-
los elementos para listas: ul y ol. Y los transicionales: dir menu
-
- -

En línea

- -
-
Elementos en línea son
-
 
-
Los elementos de frase: abbr acronym cite code em strong dfn kbd samp var
-
Los elementos de estilo de fuente: b big i small tt y los desaprobados: u s strike
-
Los elementos especiales: a bdo br img map object q script span sub sup y los desaprobados: applet font basefont iframe
-
Los elementos de controles de formulario: button input label select textarea
-
- -

Ni en bloque ni en línea

- -

Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.

- -
-
Elementos subordinados son
-
 
-
Subordinados a table: caption tr th td thead tbody tfoot col colgroup
-
Subordinados de listas: li dd dl Subordinados a select son: optgroup option
-
Por último, area subordinado a map. param subordinado a object. y legend subordinado a fieldset.
-
- -

En bloque y en línea

- -

Los elementos ins y del pueden ser elementos en línea o en bloque según convenga.

- -

Según su función

- - -
-

Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.

- -

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta Cómo ayudar.

-
diff --git a/files/es/orphaned/web/html/global_attributes/dropzone/index.html b/files/es/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 205236c73b..0000000000 --- a/files/es/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Atributos_Globales/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global dropzone es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and Drop . Pueden tener los siguientes valores :

- -
    -
  • copy , indica que el soltado creará una copia del elemento que fue arrastrado .
    • -
  • move , indica que el elemento que fue arrastrado será movido a su nueva localización .
    • -
  • link, indica que creara un link para el dato arrastrado.
    • -
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, definición inicial .
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico {{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CataracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Ver también 

- -
    -
  • Tos los atributos globales 
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index ed9861e62c..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - Arreglo - - JavaScript - - Property - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype ---- -
{{JSRef}}
- -

La propiedad Array.prototype representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.

- -
// Si JavaScript no proporciona un método first() de forma nativa,
-// agrega un nuevo método que devuelve el primer elemento de una matriz.
-
-if (!Array.prototype.first) {
-  Array.prototype.first = function() {
-    return this[0];
-  }
-}
-
- -

Descripción

- -

Las instancias {{jsxref("Array")}} heredan de Array.prototype. Al igual que con todos los constructores, puede cambiar el prototipo del constructor del objeto para realizar cambios en todas las instancias {{jsxref("Array")}} . Por ejemplo, puede agregar nuevos métodos y propiedades para extender todos los objetos Array. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.

- -

Un hecho poco conocido: Array.prototype en sí es un {{jsxref("Array")}}:

- -
Array.isArray(Array.prototype); // true
- -

{{js_property_attributes(0, 0, 0)}}

- -

Propiedades

- -
-
Array.prototype.constructor
-
Especifica la función que crea el prototipo de un objeto.
-
{{jsxref("Array.prototype.length")}}
-
Refleja el número de elementos en un array.
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante with.
-
- -

Métodos

- -

Métodos de mutación

- -

Estos métodos modifican el array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
Copia una secuencia de elementos dentro del array.
-
{{jsxref("Array.prototype.fill()")}}
-
Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.
-
{{jsxref("Array.prototype.pop()")}}
-
Elimina el último elemento de un array y devuelve dicho elemento.
-
{{jsxref("Array.prototype.push()")}}
-
Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.
-
{{jsxref("Array.prototype.shift()")}}
-
Elimina el primer elemento de un array y devuelve dicho elemento.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordena los elementos de un array y devuelve el array.
-
{{jsxref("Array.prototype.splice()")}}
-
Añade o elimina elementos de un array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.
-
- -

Métodos de consulta

- -

Estos métodos no modifican el array y devuelven alguna representación del array.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).
-
{{jsxref("Array.prototype.includes()")}}
-
Determina si un array contiene cierto elemento, devolviendo true o false apropiadamente.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.
-
{{jsxref("Array.prototype.join()")}}
-
Une todos los elementos de un array en una cadena de texto.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.
-
{{jsxref("Array.prototype.slice()")}}
-
Extrae una sección de un array y devuelve un nuevo array.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Devuelve el array literal que representa al propio array especificado; puedes usar este valor para crear un nuevo array. Reemplaza al método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.
-
- -

Métodos de iteración

- -

Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (length) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (callback) no es visitado. Otros cambios sobre el array (establecer el valor o eliminar un elemento) podría afectar el resultado de la operación si el método visita el elemento después. Mientras que el comportamiento especifico de estos métodos en muchos casos es bien definido, no deberías delegar sobre eso con la finalidad de no confundir a otros que podrían leer tu código. Si debes modificar el array, copialo en un nuevo array en su lugar.

- -
-
{{jsxref("Array.prototype.entries()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor para cada índice en el array.
-
{{jsxref("Array.prototype.every()")}}
-
Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.
-
{{jsxref("Array.prototype.filter()")}}
-
Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.
-
{{jsxref("Array.prototype.find()")}}
-
Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o undefined si no se halla ninguno.
-
{{jsxref("Array.prototype.findIndex()")}}
-
Devuelve el índice hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o -1 si no se halla ninguno.
-
- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Llama a una función para cada elemento del array.
-
{{jsxref("Array.prototype.keys()")}}
-
Devuelve un nuevo Array Iterator que contiene las claves para cada índice en el array.
-
{{jsxref("Array.prototype.map()")}}
-
Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.
-
{{jsxref("Array.prototype.some()")}}
-
Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.
-
{{jsxref("Array.prototype.values()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice en el array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice en el array.
-
- -

Métodos genéricos (no estándar)

- -

Muchos métodos en el objeto Javascript Array son diseñados para ser generalmente llamados para todos los objetos que "parecen" Arrays. Es decir, pueden ser usados sobre cualquier objeto que tenga una propiedad longitud (length), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación array[5]). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la longitud y propiedades numéricas del objeto sobre el cual son llamados. Otros, como {{jsxref("Array.reverse", "reverse")}}, requieren que las propiedades numéricas del objeto y la longitud sean mutables; estos métodos, por tanto, no pueden ser llamados sobre objetos como {{jsxref("String")}}, los cuales no permiten que su longitud o propiedades numéricas sintetizadas sean establecidas.

- -

Especificaciones

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} -

Se agregaron los métodos copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().

-
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Se agregó el método includes().
- -

 

- -

Compatibilidad con navegadores

- -
{{Compat("javascript.builtins.Array.prototype")}}
- -
 
- -

Ver también

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 8d48f1081a..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -
{{JSRef}}
- -

El método clear() elimina todos los elementos de un objeto Map.

- -

Sintaxis

- -
myMap.clear();
- -

Ejemplos

- -

Usando el método clear

- -
var myMap = new Map();
-myMap.set("bar", "baz");
-myMap.set(1, "foo");
-
-myMap.size;       // 2
-myMap.has("bar"); // true
-
-myMap.clear();
-
-myMap.size;       // 0
-myMap.has("bar")  // false
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico.38{{CompatGeckoDesktop("19.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico.{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 805d003686..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -
{{JSRef}}
- -

El método delete() elimina el elemento especificado de un objeto Map.

- -

Sintaxis

- -
myMap.delete(clave);
- -

Parámetros

- -
-
clave
-
Requerido. La clave del elemento a eliminar del objeto Map.
-
- -

Valor de retorno

- -

Retorna true si el elemento existe en el objeto Map objecty fue eliminado, o false si el elemento no existe.

- -

Ejemplo

- -

Usando el método delete

- -
var myMap = new Map();
-myMap.set("bar", "foo");
-
-myMap.delete("bar"); // Retorna true. Eliminado con éxito.
-myMap.has("bar");    // Retorna false. El elemento "bar" ya no está presente.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES6')}}Definición inicial
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}}
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 9f63684690..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -
{{JSRef}}
- -

El método entries() retorna un nuevo objeto Iterator que contiene los pares [clave, valor] para cada elemento en el objeto Map en orden de inserción.

- -

Sintaxis

- -
myMap.entries()
- -

Ejemplos

- -

Usando entries()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.entries();
-
-console.log(mapIter.next().value); // ["0", "foo"]
-console.log(mapIter.next().value); // [1, "bar"]
-console.log(mapIter.next().value); // [Object, "baz"]
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES6')}}Definición
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico.{{CompatNo}}38{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index ef7a8abb08..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -
{{JSRef}}
- -

El método forEach() ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.

- -

Sintaxis

- -
myMap.forEach(callback[, thisArg])
- -

Parámetros

- -
-
callback
-
Función ejecutada en cada elemento.
-
thisArg
-
Valor a usar por la funcion callback.
-
- -

Valor de Retorno

- -

{{jsxref("undefined")}}.

- -

Descripción

- -

El método forEach ejecuta la devolución de llamada (callback) proporcionada una vez para cada clave del mapa que realmente exista. No se invoca para las claves que se han eliminado. Sin embargo, se ejecuta para los valores que están presentes pero tienen el valor indefinido (undefined).

- -

La función (callback) es invocada con 3 argumentos:

- -
    -
  • valor del elemento
    • -
  • clave del elemento
    • -
  • El objeto utilizado
    • -
- -

Si se provee un parámetro thisArg al método forEach, pasará al callback cuando sea invocado, para ser utilizado como su valor this. De otra manera, el valor undefined pasará para ser usado como su valor this. El valor this finalmente observable por el callback se determina de acuerdo a las reglas usuales para determinar la visibilidad de this por una función.

- -

Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el forEach haya terminado. callback no es invocado para valores eliminados antes de que sean usados. 

- -

El método forEach ejecuta la función callback una vez para cada elemento en el objeto Map; No se retornan valores.

- -

Ejemplos

- -

Imprimiendo el contenido de un objeto Map

- -

El siguiente código imprime una línea por cada elemento en el objeto Map:

- -
function logMapElements(value, key, map) {
-    console.log(`m[${key}] = ${value}`);
-}
-new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements);
-// logs:
-// "m[foo] = 3"
-// "m[bar] = [object Object]"
-// "m[baz] = undefined"
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Definición Inicial.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Compatibilidad con navegadores

- - - -

{{Compat("javascript.builtins.Map.forEach")}}

- -

Véase también

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index e61bf94935..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -
{{JSRef}}
- -

El método get() devuelve un elemento específico de un objeto Map.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
- - - -

Sintaxis

- -
miMapa.get(clave);
- -

Parametros

- -
-
clave
-
Requerido. La clave del elemento del objeto Map que queremos obtener.
-
- -

Valor devuelto

- -

Devuelve el elemento asociado a la clave indicada o undefined si la clave no ha sido encontrada en el objeto Map.

- -

Ejemplos

- -

Usando el método get

- -
var miMapa = new Map();
-miMapa.set('bar', 'foo');
-
-miMapa.get('bar');  // Devuelve "foo".
-miMapa.get('baz');  // Devuelve undefined.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
- -

Compatiblidad con navegadores

- - - -

{{Compat("javascript.builtins.Map.get")}}

- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index 81253e3317..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -
{{JSRef}}
- -

El método has() devuelve un booleano indicando si el elemento con la llave especificada existe o no.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
- - - -

Sintaxis

- -
myMap.has(key)
- -

Parameteros

- -
-
key
-
La llave del elemento a probar si esta presente en el objeto Map.
-
- -

Valor devuelto

- -

true si el elemento con la llave especificada existe en el objeto Map; de lo contrario false.

- -

Ejemplos

- -

Usando has()

- -
let myMap = new Map()
-myMap.set('bar', "foo")
-
-myMap.has('bar')   // returns true
-myMap.has('baz')   // returns false
-
- -

Especificaciones

- - - - - - - - - - -
Especificación
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Map.has")}}

- -

See also

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 8fc502cf71..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript2015 - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -
{{JSRef("Global_Objects", "Map")}}
- -

Resumen

- -

El objeto Map almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.

- -

Sintaxis

- -
new Map([iterable])
-
- -

Parámetros

- -
-
iterable
-
Iterable es un array o cualquier otro objeto iterable cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.
-
- -

Descripción

- -

Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle for..of devolverá un array de [clave, valor] en cada iteración.

- -

Cabe destacar que un Map el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.

- -

Igualdad de claves

- -

La igualdad de claves esta basada en el algoritmo "SameValueZero": NaN es considerado lo mismo que NaN (sin importar que NaN !== NaN) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 -0 y +0 eran considarados distintos (even though -0 === +0), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a recent nightly Chrome.

- -

Objetos y mapas comparados

- -

Los {{jsxref("Object", "Objetos")}} son similares a los Maps en cuanto a que ambos permiten establecer claves a valores, recuperar dichos valores, eliminar claves, y detectar si existe algo almacenado en una clave determinada. Por esto, los Objects han sido usados históricamente como Maps; no obstante, hay diferencias importantes entre  Objects y Maps que hacen mejor usar un  Map  en la mayoría de casos.

- -
    -
  • Las claves de un Object son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un Map pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.
    • -
  • Puedes saber facilmente el tamaño de un Map usando la propiedad size, mientras que le número de propiedades en un Object tiene que ser deternminado manualmente.
    • -
  • Un Map es un iterable lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un Object necesitamos obtener primero las claves de alguna forma para después iterar sobre el.
    • -
  • Un Object tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando mapa = Object.create(null), pero esto raramente se hace.
    • -
- -

Propiedades

- -
-
Map.length
-
El valor de la propiedad de longitud es 0
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
La función constructor que se usa para crear objetos derivados.
-
{{jsxref("Map.prototype")}}
-
Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos Map.
-
- -

Instancias de Map

- -

Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.

- -

Propiedades

- -

{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}

- -

Métodos

- -

{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}

- -

Ejemplos

- -

Ejemplo: Usando el objeto Map

- -
var miMapa = new Map();
-
-var claveObj = {},
-    claveFunc = function () {},
-    claveCadena = "una cadena";
-
-// asignando valores
-miMapa.set(claveCadena, "valor asociado con 'una cadena'");
-miMapa.set(claveObj, "valor asociado con claveObj");
-miMapa.set(claveFunc, "valor asociado with claveFunc");
-
-miMapa.size; // 3
-
-// obteniendo los valores
-miMapa.get(claveCadena);    // "valor asociado con 'una cadena'"
-miMapa.get(claveObj);       // "valor asociado con claveObj"
-miMapa.get(claveFunc);      // "valor asociado con claveFunc"
-
-miMapa.get("una cadena");   // ""valor asociado con 'una cadena'"
-                         // porque claveCadena === 'una cadena'
-miMapa.get({});           // undefined, porque claveObj !== {}
-miMapa.get(function() {}) // undefined, porque claveFunc !== function () {}
-
- -

Ejemplo: Usando NaN como claves de Map

- -

NaN también puede ser usado como una clave. Aún cuando cada clave NaN no es igual a sí misma (NaN !== NaN es verdadera), el siguiente ejemplo funciona, porque las claves NaNs NaNs no son distinguibles unas de otras:

- -
var miMapa = new Map();
-miMapa.set(NaN, "no es un número");
-
-miMapa.get(NaN); // "no es un número"
-
-var otroNaN = Number("foo");
-miMapa.get(otroNaN); // "no es un número"
-
- -

Ejemplo: Iterando Map con for..of

- -

Los Map pueden ser iterados usando un bucle for..of:

- -
var miMapa = new Map();
-miMapa.set(0, "cero");
-miMapa.set(1, "uno");
-for (var [clave, valor] of miMapa) {
-  alert(clave + " = " + valor);
-}
-// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
-
-for (var clave of miMapa.keys()) {
-  alert(clave);
-}
-// Mostrará 2 alertas; primero con "0" y segundo con "1"
-
-for (var valor of miMapa.values()) {
-  alert(valor);
-}
-// Mostrará 2 alertas; primero con "cero" y segundo con "uno"
-
-for (var [clave, valor] of miMapa.entries()) {
-  alert(clave + " = " + valor);
-}
-// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
-
-miMapa.forEach(function(valor, clave, miMapa) {
-  alert(clave + " = " + valor);
-})
-// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
-
- -

Iterando Maps usando forEach()

- -

Los Map pueden ser iterados usando el método forEach():

- -
miMapa.forEach(function(valor, clave) {
-  console.log(clave + ' = ' + valor);
-});
-// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"
- -

Ejemplo: Relación con los objetos Array

- -
var kvArray = [["clave1", "valor1"], ["clave2", "valor2"]];
-
-// El constructor por defecto de Map para transforar un Array 2D (clave-valor) en un mapa
-var miMapa = new Map(kvArray);
-
-miMapa.get("clave1"); // devuelve "valor1"
-
-// Usando la función Array.from para transformar el mapa a un Array 2D clave-valor.
-console.log(Array.from(miMapa)); // Muestra exactamente el mismo Array que kvArray
-
-// O usando los iteradores de claves o valores y convirtiendo a array.
-console.log(Array.from(miMapa.keys())); // Muestra ["clave1", "clave2"]
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con Navegadores

- -

 

- - - -

{{Compat("javascript.builtins.Map")}}

- -

 

- -

Ver también

- - diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index 8301bf7867..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -
{{JSRef}}
- -

El metodo keys() returna un nuevo objeto Iterator que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.

- -

Syntax

- -
myMap.keys()
- -

Ejemplos

- -

Usando keys()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Object
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
-
- -

See also

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index cd552b8f37..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript6 - - JavaScript - - Mapa - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -
{{JSRef}}
- -

El método set() agrega un nuevo elemento al objeto Map con la llave y el valor especificado.

- -

Syntax

- -
myMap.set(llave, valor);
- -

Parámetros

- -
-
llave
-
Requerido. La llave del elemento a agregar al objeto Map.
-
valor
-
Requerido. El valor del elemento a agregar al objeto Map.
-
- -

Valor de retorno

- -

El objeto Map.

- -

Ejemplos

- -

Usando el método set

- -
var miMapa = new Map();
-
-// Agregar nuevos elementos al mapa
-miMapa.set("bar", "foo");
-miMapa.set(1, "foobar");
-
-// Actualizar un elemento en el mapa
-miMapa.set("bar", "baz");
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracteríticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracteríticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notas de compatibilidad

- -
    -
  • En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, Map.prototype.set retorna undefined y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (issue).
    • -
- -

Véase también

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index 4f3a1fa90d..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -
{{JSRef}}
- -

La propiedad evaluada size retorna el número de elementos en un objeto  {{jsxref("Map")}}.

- -

Descripción

- -

El valor de size es un entero representando cuántas entradas tiene el objeto Map. No hay definida una función de evalador set  para size; uted no puede cambiar esta propiedad.

- -

Ejemplos

- -

Usando size

- -
var myMap = new Map();
-myMap.set("a", "alpha");
-myMap.set("b", "beta");
-myMap.set("g", "gamma");
-
-myMap.size // 3
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}} 
- -

Compatibildad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{ CompatGeckoDesktop("19") }}{{ CompatIE("11") }}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notas específicas para Gecko

- -
    -
  • Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método Map.prototype.size(), esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).
    • -
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 815a6e75f8..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -tags: - - ECMAScript 2015 - - Iterador - - JavaScript - - Map - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -
{{JSRef}}
- -

El método values() devuelve un nuevo objeto Iterador que contiene los valores para cada elemento en el objeto Map en el mismo orden de inserción.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
- - - -

Sintaxis

- -
myMap.values()
- -

Valor devuelto

- -

Un nuevo objeto iterador {{jsxref("Map")}}.

- -

Ejemplos

- -

Utilizando values()

- -
var myMap = new Map();
-myMap.set('0', 'foo');
-myMap.set(1, 'bar');
-myMap.set({}, 'baz');
-
-var mapIter = myMap.values();
-
-console.log(mapIter.next().value); // "foo"
-console.log(mapIter.next().value); // "bar"
-console.log(mapIter.next().value); // "baz"
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad en navegadores

- - - -

{{Compat("javascript.builtins.Map.values")}}

- -

Ver también

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
diff --git a/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 63fef3fed0..0000000000 --- a/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Operador Pipeline -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Encadenamiento - - Experimental - - JavaScript - - Operador - - Pipeline -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

El operador experimental pipeline |> (actualmente en su fase1) conduce el valor de una expresión dentro de una función. Esto permite la creación de llamadas de función en cadena de un modo más legible. El resultado es una simplificación sintáctica en la cual la llamada a una función con un único parámetro puede ser escrita del siguiente modo:

- -
let url = "%21" |> decodeURI;
- -

La llamada equivalente en sintaxis tradicional tiene este aspecto:

- -
let url = decodeURI("%21");
-
- -

Sintaxis

- -
expression |> function
-
- -

El valor especificado en la expression se pasa dentro de la  function como su único parámetro.

- -

Ejemplos

- -

Encadenando llamadas  a funciones

- -

El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.

- -
const double = (n) => n * 2;
-const increment = (n) => n + 1;
-
-// sin operador pipeline
-double(increment(double(double(5)))); // 42
-
-// con operador pipeline
-5 |> double |> double |> increment |> double; // 42
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
Borrador del operador PipelineFase 1Todavía no forma parte de la especificación ECMAScript
- -

Compatibilidad con navegadores

- -
- - -

{{Compat("javascript.operators.pipeline")}}

-
- -

Ver también

- - diff --git a/files/es/orphaned/web/reference/api/index.html b/files/es/orphaned/web/reference/api/index.html deleted file mode 100644 index 066b8c0f8c..0000000000 --- a/files/es/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Referencias para API Web -slug: orphaned/Web/Reference/API -tags: - - API - - Diseño Web - - Referencia - - Web -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -

La Web ofrece una amplia variedad de APIs para ejecutar toda una variedad de tareas útiles. Éstas pueden ser accesadas mediante código JavaScript, y te permiten hacer cualquier cosa, desde realizar ajustes menores a cualquier  {{domxref("window")}} ó {{domxref("element")}}, hasta generar efectos gráficos y de aúdio complejos usando APIs tales como WebGL y Web Audio.

- -

Cada interfaz individual a lo largo de todas las APIs se encuentra listada en el índice.

- -

También hay un listado de todos los eventos disponibles en la referencia de eventos.

- -
-
-
-
Modelo de Objetos del Documento (DOM)
-
El DOM es una API que permite acceder y modificar el documento actual. La misma permite manipular el {{domxref("Node")}} y {{domxref("Element")}} del documento. Tanto HTML como SVG la han extendido para manipular sus elementos específicos.
-
API de Dispositivos
-
Este conjunto de APIs permiten acceder a varias funciones de hardware disponibles para páginas Web y aplicaciones. Por ejemplo, API de Sensor Luz Ambiental, API de Estado de Batería, API de Geolocalización, API de Bloqueo de Puntero, API de Proximidad, API de Orientación de Dispositivo, API de Orientación de Pantalla, API de Vibración.
-
API de Comunicación
-
Estas APIs le permiten a páginas Web y aplicaciones comunicarse con otras páginas o dispositivos. Por ejemplo, API de Información de Red, Notificaciones Web, API de Push Simple.
-
API de gestión de datos
-
Los datos de los usuarios pueden ser almacenados y gestionados usando este conjunto de APIs. Por ejemplo, FileHandle API, IndexedDB.
-
- -

Además de estas APIs, que están disponibles para cualquier sitio Web o aplicación, existen otras APIs de Mozilla más poderosas que están disponibles para aplicaciones privilegiadas y certificadas.

- -
-
API Privilegiadas
-
Una aplicación privilegiada es una aplicación instalada que ha recibido derechos específicos por parte del usuario. Entre las APIs privilegiadas se encuentran: TCP Socket API, API de Contactos, API de Almacenamiento de Dispositivos, API de Navegador,
-
API Certificadas
-
Una aplicación certificada es una aplicación de bajo nivel que ejecuta operaciones críticas sobre un sistema operativo como Firefox OS. Las aplicaciones menos privilegiadas interactúan con estas aplicaciones certificadas mediante Actividades Web.  Entre las APIs Certificadas se incluyen: API Bluetooth, API de Conexión Móvil, API de Estadísticas de Red, Telefonía, WebSMS, API de Información WíFi, API de Cámara, API de Administración de Energía, API de Ajustes, API de Inactividad, API de Permisos, API de Hora/Reloj.
-
-
- -
-

Comunidad

- -

Únete a la comunidad de API Web en nuestra lista de correos o grupo de noticias:

- - - -

También, asegúrate de unirte a la discusión en vivo en el canal #webapi de IRC.

- - - -

Los siguientes temas podrían ser de interés:

- - -
-
- -

 

diff --git a/files/es/orphaned/web/reference/index.html b/files/es/orphaned/web/reference/index.html deleted file mode 100644 index 01576b7243..0000000000 --- a/files/es/orphaned/web/reference/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Referencia de Tecnologías Web -slug: orphaned/Web/Reference -tags: - - Landing - - Reference - - Referencia - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -

La Web abierta (open Web) se construye usando diversas tecnologías. A continuación encontrará enlaces a nuestro material de referencia para cada una de ellas.

- -
-
-

Tecnologias Web Fundamentales

- -

Basicas

- -
-
HTML
-
El Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es usado para describir y definir el contenido de una página Web en un formato bien estructurado.
-
CSS
-
Las Hojas de Estilo en Cascada (Cascading Style Sheets) se usan para describir la apariencia del contenido Web.
-
- -

Código

- -
-
JavaScript
-
JavaScript es el lenguaje de programación que se ejecuta en los navegadores, se usa para para construir avanzados sitios Web interactivos y aplicaciones para ejecución segura en el navegador.
-
Web APIs
-
Material de referencia para cada una de las APIs que constituyen las poderosas posiblidades de programación del Web, incluyendo el DOM y todas las APIs e interfaces que puedes usar para desarrollar contenidos Web y aplicaciones. - -
-
- -

Gráficos

- -
-
SVG
-
Los Gráficos Vectoriales Escalables (Scalable Vector Graphics) le permiten describir imágenes como conjuntos de vectores (líneas) y formas para permitir su escalamiento continúo independientemente del tamaño con el que hayan sido dibujados.
-
WebGL
-
WebGL trae gráficos 3D al Web al introducir una API que cumple de cerca al estándar OpenGL ES 2.0, y que puede usarse en los elemntos <canvas> de HTML.
-
- -

Otras

- -
-
MathML
-
El Lenguaje de Marcado Matemático (Mathematical Markup Language) hace posible presentar ecuaciones complejas.
-
-
-
diff --git a/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html b/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html deleted file mode 100644 index 363238cb7c..0000000000 --- a/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: SVG en Firefox 1.5 -slug: orphaned/Web/SVG/SVG_en_Firefox_1.5 -tags: - - SVG - - Todas_las_Categorías -original_slug: Web/SVG/SVG_en_Firefox_1.5 ---- -

-Firefox 1.5 marca la publicación del primer navegador de Mozilla que soporta el formato de gráficos vectoriales escalables (SVG). El camino de este proyecto ha sido largo, nos satisface poner a disposición de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos.

Firefox SVG es un subconjunto de SVG 1.1, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Además encontrará información sobre las limitaciones en su implementación. -

La peculiar implementación que hemos realizado puede dificultar el creación de contenidos, le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación. -

Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el mapa de ruta actual situa la publicación de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposición en las nightly builds las últimas evoluciones, y si lo desea puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. -


-

-

Performance

-

Firefox usa el mismo motor de renderizado, cairo, en todas las plataformas en las que navega. Por lo tanto sus características de interpretación serán similares. La Performance en linux es la más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER. -

En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. -

-

Coordinate range

-

Si tu contenido posee geometría con un gran rango de coordenadas, necesitarás tener cuidado con los problemas causados por el uso interno de cairo de una representación en punto fijo de 16.16 bit para sus cálculos. Cairo no clip primitives antes de la rasterización, por lo que las coordenadas finales tras la transformación que excedan el rango desde -32678 a 32677 causarán errores de renderizado y posiblemente un funcionamiento bastante lento. -

-

Texto en Windows 98

-

Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado del texto no funcionará en Windows 98. En realidad la cosa es aun peor, si aparece cualquier texto durante la visualización de contenidos SVG, todo el dibujo se parará. -

-

Selección de fuente

-

Si usted está familiarizado con CSS probablemente sabrá que puede especificar fuentes alternativas para las propiedades 'font' por si los glifos de una fuente concreta no estén disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si esta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible. -

-

Impresión

-

Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen. -

Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. -

-

Opacidad de grupo

-

La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados. -

Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> -

-

Stroking fonts

-

On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference: -


-Imagen:Text-fill-stroke.png -

-

<image>

-

<image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. -

Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso. -

De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. -

-

Eventos

-

Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". -

Nuestro manejo del evento "onload" es actualmente no-estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo "onload" será llamado para cada elemento, un evento SVGLoad es llamado únicamente para el elemento <svg> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código "onload". Dichos métodos son getBBox, getScreenCTM, etc. -

No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). -

-

Interoperabilidad

-

Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales, y son el resultado de una implementación más estricta en Firefox. En SVG Authoring Guidelines Jonathan Watt's explica los problemas comunes. -

-

Situaciones del uso

-

Firefox 1.5 maneja SVG como un documento entero, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes. -

-

Animación

-

Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear SmilScript, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. -

-

Elementos, estado de la implementación

Elemento Notas
Módulo Estructura
svg
  • Implementado.
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
  • SVGSVGElement
    • Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
g
  • Implementado.
defs
  • Implementado.
desc
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
title
  • Implementado.
metadata
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
symbol
  • Implementado.
use
  • Implementado.
  • Only works for internal document references (bug 269482).
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
Conditional Processing Module
switch
  • Implementado.
Image Module
image
  • Implementado.
  • Only works for raster images (bug 272288).
Style Module
style
  • Implementado.
Shape Module
path
  • Implementado.
  • SVGPathElement Interfaz
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
  • SVGPathSegList Interface
    • Bindings no implementados: replaceItem()
rect
  • Implementado.
circle
  • Implementado.
line
  • Implementado.
ellipse
  • Implementado.
polyline
  • SImplementado.
polygon
  • Implementado.
Módulo Texto
text
  • Implementado.
  • SVGTextElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • Bindings not functional at onload time: getExtentOfChar
tspan
  • Implementado.
  • SVGTSpanElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
tref
  • No implementado.
textPath
  • No implementado.
altGlyph
  • No implementado.
altGlyphDef
  • No implementado.
altGlyphItem
  • No implementado.
glyphRef
  • No implementado.
Módulo Marker
marker
  • Implementado.
Módulo Color-Profile
color-profile
  • No implementado.
Módulo Gradientes
linearGradient
  • Implementado.
radialGradient
  • Implementado.
stop
  • Implementado.
Módulo Pattern
pattern
  • No implementado.
Módulo Clip
clipPath
  • Implementado.
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
Módulo Mask
mask
  • No implementado.
Módulo Filtro
filter
  • No implementado.
feBlend
  • No implementado.
feColorMatrix
  • No implementado.
feComponentTransfer
  • No implementado.
feComposite
  • No implementado.
feConvolveMatrix
  • No implementado.
feDiffuseLighting
  • No implementado.
feDisplacementMap
  • No implementado.
feFlood
  • No implementado.
feGaussianBlur
  • No implementado.
feImage
  • No implementado.
feMerge
  • No implementado.
feMergeNode
  • No implementado.
feMorphology
  • No implementado.
feOffset
  • No implementado.
feSpecularLighting
  • No implementado.
feTile
  • No implementado.
feTurbulence
  • No implementado.
feDistantLight
  • No implementado.
fePointLight
  • No implementado.
feSpotLight
  • No implementado.
feFuncR
  • No implementado.
feFuncG
  • No implementado.
feFuncB
  • No implementado.
feFuncA
  • No implementado.
Módulo Cursor
cursor
  • No implementado.
Módulo hiperenlace
a
  • Implementado en un binding XBL - object no es del tipo SVGAElement.
  • Solo están implementados los atributos xlink:href y xlink:show
  • Sobre el atributo target vea bug 300868
Módulo visión
view
  • No implementado.
Módulo Script
script
  • Implementado.
Módulo Animación
animate
  • No implementado.
set
  • No implementado.
animateMotion
  • No implementado.
animateTransform
  • No implementado.
animateColor
  • No implementado.
mpath
  • No implementado.
Módulo Fuentes
font
  • No implementado.
font-face
  • No implementado.
glyph
  • No implementado.
missing-glyph
  • No implementado.
hkern
  • No implementado.
vkern
  • No implementado.
font-face-src
  • No implementado.
font-face-uri
  • No implementado.
font-face-format
  • No implementado.
font-face-name
  • No implementado.
definition-src
  • No implementado.
Módulo Extensibilidad
foreignObject
  • Implementado, but not built.
-{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }} -- cgit v1.2.3-54-g00ecf