diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-06 12:07:28 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-06 12:07:28 -0400 |
| commit | 4f70db6399a732ca7571c6c8cb952be7c9a85763 (patch) | |
| tree | 3a8b67ddf3790f32902d686e4939abedb7c97578 /files/es/orphaned/web | |
| parent | a0526cb59dfc2de8f87f12e09d9fa6bf2fca6c92 (diff) | |
| download | translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.gz translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.bz2 translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.zip | |
delete conflicting/orphaned in es (#1418)
Diffstat (limited to 'files/es/orphaned/web')
64 files changed, 0 insertions, 7875 deletions
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 ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<p>La interfaz <strong><code>AbstractWorker</code></strong> de la <a href="/en-US/docs/Web/API/Web_Workers_API">API de Web Workers</a> 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")}}.<br> - Al ser una clase abstracta, usted no interactúa directamente con el <code>AbstractWorker</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no hereda ninguna propiedad.</em></p> - -<h3 id="Gestor_de_eventos">Gestor de eventos</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo <code>error</code> se gatilla através del worker.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no implementa o hereda ningún método.</em></p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Note que usted no estará usando la interfaz <code>AbstractWorker</code> diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.</p> - -<p>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:</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Mensaje enviado al worker'); -}</pre> - -<p>El código del worker se carga desde el archivo <code>"worker.js"</code>. Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como <code>first</code>; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de <code>first</code>, un mensaje se enviará al worker haciendoselo saber.</p> - -<p>Para ejemplos completos, visitar:</p> - -<ul> - <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> - <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No existen cambios para {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("Web Workers")}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> - -<div>{{CompatibilityTable()}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatChrome(4)}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10</td> - <td>10.6</td> - <td>4</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>1.0.1</td> - <td>10</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vease_también">Vease también</h2> - -<ul> - <li>Las interfaces de {{domxref("Worker")}}, {{domxref("ServiceWorker")}} y {{domxref("SharedWorker")}}, que están basadas en el <code>AbstractWorker</code> .</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando Web Workers</a></li> -</ul> 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 ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>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.</p> - -<h2 id="Eventos_de_luz"><span class="short_text" id="result_box" lang="es"><span>Eventos</span> <span>de luz</span></span></h2> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">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'); -} -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <td>Especificaciones</td> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td>definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[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)}}).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> 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 ---- -<div>{{APIRef("Fetch")}}</div> - -<p>El método <strong><code>formData()</code></strong> de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</p> - -<div class="note"> -<p><strong>Nota</strong>: Esto es principalmente relevante en <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a <code>formData()</code> para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).</p> -</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">response.formData() -.then(function(formdata) { - // hacer algo con tu formdata -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>Ninguno.</p> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>TBD.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.Body.formData")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> 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 ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>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")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>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.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">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; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> 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 ---- -<div>{{APIRef("Fetch API")}}</div> - -<p>El método <strong><code>json()</code></strong> 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")}}.</p> - -<h2 id="Sintáxis">Sintáxis</h2> - -<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> => { - // do something with your data -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>No.</p> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>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...).</p> - -<h2 id="Example">Example</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p> - -<pre class="brush: js highlight[5]">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); - } - });</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> 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 ---- -<p>{{APIRef("DOM")}} {{SeeCompatTable}}<br> - <span lang="es"><span>El método <code><strong>ChildNode.after()</strong></code> inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este <code>ChildNode</code> del padre, justo después de este <code>ChildNode</code>.</span> <span>Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.after((Node o DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos </span></span><span lang="es"><span>{{domxref("Node")}} o </span></span>{{domxref("DOMString")}}<span lang="es"><span> para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">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>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">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>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">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>"</pre> - -<h3 id="ChildNode.after_es_unscopable"><code>ChildNode.after()</code> es unscopable</h3> - -<p>El método <code>after()</code> no está incluido en la declaración <code>with</code>.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.</p> - -<pre class="brush: js">with(node) { - after("foo"); -} -// ReferenceError: after is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Puedes usar un polyfill del método <code>after()</code> en Internet Explorer 9 y superiores con el siguente código:</p> - -<pre class="brush: js">// 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]);</pre> - -<h3 id="Otro_polyfill">Otro polyfill</h3> - -<pre class="brush: js">// 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)); -*/ -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("api.ChildNode.after")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} y {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> 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 ---- -<p><textarea></textarea></p> - -<div id="gt-input-tool"> -<div id="itamenu"> </div> -</div> - -<div class="g-unit" id="gt-src-c"> -<div id="gt-src-p"> </div> -</div> - -<div id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> -<br> -<span>El método <strong>ChildNode.before</strong> 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.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></div> -</div> - -<h2 id="Síntasix">Síntasix</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">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>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">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>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">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>"</pre> - -<h3 id="ChildNode.before()_es_unscopable"><code>ChildNode.before()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método before () no está definido en la declaración <em>with</em>.</span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> - -<p><code>ChildNode</code> 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.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There are neither inherited, nor specific properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>There are no inherited methods.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>Replaces this <code>ChildNode</code> 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.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatChrome(23.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatChrome(29.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>Edge</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> 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 ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}}</span><br> - <span>El método<strong> ChildNode.remove ( ) </strong>elimina el objeto del árbol al que pertenece.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Utilizando_remove">Utilizando <code>remove()</code></h3> - -<pre class="brush: html"><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> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.nextElementSibling.remove(); // Elimina el div con el id 'div-03' -</pre> - -<h3 id="ChildNode.remove_es_unscopable"><code>ChildNode.remove()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método <code>remove()</code> no está definido en el contexto de las declaración <code>with</code>.</span> <span>Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>El código a continuación es un polyfill del método <code>remove()</code> para Internet Explorer 9 y superiores:</p> - -<pre class="brush: js">// 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]);</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> - -<div> -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><span class="short_text" id="result_box" lang="es"><span>La interfaz pura {{domxref ( "ChildNode")}} .</span></span></li> - <li> - <div class="syntaxbox"><span id="result_box" lang="es"><span>Tipos de objetos que implementan esta interfaz pura: {{domxref ( "CharacterData")}}, {{domxref ( "Elemento")}} y {{domxref ( "DocumentType")}}.</span></span></div> - </li> -</ul> 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 ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> - <br> - <span>El método <strong>ChildNode.replaceWith () </strong>reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></p> - -<p> </p> - -<h2 id="Síntasix">Síntasix</h2> - -<p> </p> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.replaceWith((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li><span id="result_box" lang="es"><span>{{Domxref ( "HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</span></span></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Utilizando_replaceWith()">Utilizando <code>replaceWith()</code></h3> - -<pre class="brush: js">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>" -</pre> - -<h3 id="ChildNode.replaceWith()_es_unscopable"><code>ChildNode.replaceWith()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método replaceWith () no está incluido en la declaracion <em><code>with</code>.</em></span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - replaceWith("foo"); -} -// ReferenceError: replaceWith is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> 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 ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación</strong>; 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. </p> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Trabajando_con_eventos_de_orientación">Trabajando con eventos de orientación</h2> - -<p>Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:</p> - -<pre class="brush: js notranslate">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>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.</p> - -<p>La información del evento contiene 4 valores:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>El manejador del evento puede ser similar a lo siguiente:</p> - -<pre class="brush: js notranslate">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 -} -</pre> - -<h3 id="Explicación_de_los_Valores_de_Orientación">Explicación de los Valores de Orientación</h3> - -<p>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 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientacíon y datos del movimiento explicado</a> que es resumido abajo. </p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} representa el movimiento alrededor del eje z, representado en grados con valores que van desde 0 a 360.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} representa el movimiento del dispositivo alrededor del eje x, representado en grados con valores que van desde -180 a 180. Esto representa un movimiento de frente hacia atrás del dispositivo.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} representa el movimiento del dispositivo alrededor del eje y, representado en grados con valores que van de -90 a 90. Esto representa un movimiento de izquierda a derecha del dispositivo.</li> -</ul> - -<h3 id="Ejemplo_de_orientación">Ejemplo de orientación</h3> - -<p>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.</p> - -<p>Imaginemos una pelota en un jardin:</p> - -<pre class="brush: html notranslate"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:</p> - -<pre class="brush: css notranslate">.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%; -} -</pre> - -<p>Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:</p> - -<pre class="brush: js notranslate">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); -</pre> - -<p>Aqui el resultado en vivo:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>Tener en cuenta:</strong> Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.</p> -</div> - -<h2 id="Procesando_eventos_de_movimiento">Procesando eventos de movimiento</h2> - -<p>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") }}</p> - -<pre class="brush: js notranslate">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p>Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función <em>HandleMotion.</em></p> - -<p>El evento de movimiento tiene cuatro propiedades:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="Valores_de_movimiento_explicados">Valores de movimiento explicados</h3> - -<p>{{ 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 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Datos de orientación y movimiento explicados</a> por más detalles).</p> - -<p>Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:</p> - -<ul> - <li><code>x</code>: Representa el eje de oeste a este.</li> - <li><code>y</code>: Representa el eje de sur a norte.</li> - <li><code>z</code>: Representa el eje perpendicular al suelo.</li> -</ul> - -<p>Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:</p> - -<ul> - <li><code>alpha</code>: Representa la velocidad de rotación a lo largo del eje perpendicular a la pantalla ( teclado para desktop).</li> - <li><code>beta</code>: Representa la velocidad de rotación a lo largo del eje que va de la izquierda a la derecha del plano de la pantalla (o teclado para desktop).</li> - <li><code>gamma</code>: Representa la velocidad de rotación a lo largo del eje que va desde la parte inferior a la parte superrior del plano de la pantalla (o teclado para desktop).</li> -</ul> - -<p>Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Especificación inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div class="note"> -<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> es un <em>polyfill</em> 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..</p> -</div> - -<h3 id="Gecko_implementation_notes">Gecko implementation notes</h3> - -<ol> - <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li> -</ol> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> - <li><a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation" title="2D maze game with device orientation">Cyber Orb: 2D maze game with device orientation</a></li> -</ul> 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 ---- -<h2 id="Introduction" name="Introduction">Introducción</h2> - -<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p> - -<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p> - -<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2> - -<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.addEventListener('click', function(){alert('Hello world');}, false); -</pre> - -<p>Este es el método que debe usar en las páginas web modernas. </p> - -<p>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.</p> - -<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3> - -<pre class="brush: html"><button onclick="alert('Hello world!')"> -</pre> - -<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>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.</p> - -<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.onclick = function(event){alert('Hello world');}; -</pre> - -<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p> - -<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2> - -<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p> - -<p>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.</p> - -<pre class="brush: js">function foo(evt) { - // al parámetro evt se le asigna automáticamente el objeto event - alert(evt); -} -table_el.onclick = foo; -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><strong><code>Element.currentStyle </code></strong><span lang="es"><span>es</span> <span>una propiedad</span> <span>que es una</span> <span>alternativa propietaria</span> <span>del método estandarizado</span></span> {{domxref("window.getComputedStyle")}} . <span id="result_box" lang="es"><span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="Especificación">Especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">tiene una descripción MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}} </li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><span id="result_box" lang="es"><strong><span>Element.runtimeStyle</span></strong> <span>es una</span> <span>propiedad exclusiva</span> <span>similar a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>HTMLElement.style</span><span>"</span><span>)</span><span>}</span><span>}</span><span>, excepto</span> <span>sus</span> <span>estilos,</span> <span>que tienen</span> <span>mayor precedencia</span> <span>y</span> <span>modificaciön.It</span> <span>no modifica</span> <span>el contenido del atributo</span> </span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> <span lang="es"><span>.</span> <span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="especificación">especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">tiene una descripción en MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("Element.currentStyle")}} </li> -</ul> 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 ---- -<p>{{ ApiRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">Resumen</h3> - -<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p> - -<h3 id="Example" name="Example">Ejemplo</h3> - -<pre class="eval">var div = document.getElementById("div1"); -div.style.marginTop = ".25in"; -</pre> - -<h3 id="Notes" name="Notes">Notas</h3> - -<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p> - -<p>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 <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.</p> - -<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p> - -<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p> - -<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p> - -<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p> - -<pre class="eval">elt.style.color = "blue"; // Asignación directa - -var st = elt.style; -st.color = "blue"; // Asignación Indirecta -</pre> - -<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p> - -<pre class="eval">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"; -</pre> - -<p> </p> - -<h3 id="Specification" name="Specification">Especificación</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> 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 ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM. Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente. En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p> - -<ul> - <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li> - <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li> -</ul> - -<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Conversion_de_nombres">Conversion de nombres</h3> - -<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p> - -<ul> - <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li> - <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li> - <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li> -</ul> - -<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p> - -<ul> - <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li> - <li>se agrega el prefijo <code>data-</code>;</li> - <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li> - <li>otros caracteres se mantienen intactos.</li> -</ul> - -<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p> - -<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Accediendo_valores">Accediendo valores</h3> - -<ul> - <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li> - <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li> - <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li> -</ul> - -<h3 id="Definiendo_valores">Definiendo valores</h3> - -<ul> - <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li> - <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">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 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> - <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> -</ul> 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 ---- -<p><strong>IndexedDB</strong> 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).</p> - -<h2 id="Sobre_este_documento">Sobre este documento</h2> - -<p>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 <a href="#definitions">Definiciones</a>.</p> - -<p>Para un tutorial sobre cómo usar la API, vea <a href="/es/IndexedDB/Usando_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> 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.</p> - -<h2 id="Visión_general_de_IndexedDB">Visión general de IndexedDB</h2> - -<p>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 <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mismo origen</a>, 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.</p> - -<p>La API incluye una variante <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asíncrona</a> y una <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">síncrona</a>. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo <a href="/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, 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.</p> - -<p>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.</p> - -<h2 id="concepts" name="concepts">Conceptos principales</h2> - -<p>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:</p> - -<ul> - <li> - <p><strong>IndexedDB almacena pares llave-valor.</strong> Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.</p> - </li> - <li> - <p><strong>IndexedDB está hecho sobre un modelo de base de datos transaccional.</strong> Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una <a href="#gloss_transaction">transacción</a>. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.</p> - - <p>Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer <em>commit</em> automáticamente.</p> - - <p>Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se <em>pisen</em> o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el <a class="link-https" href="https://es.wikipedia.org/wiki/Transacci%C3%B3n_%28base_de_datos%29" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">artículo correspondiente en la Wikipedia</a> y <a href="#gloss_transaction">transacción</a> en la sección de definiciones.</p> - </li> - <li> - <p><strong>La API de IndexedDB es mayormente asincrona.</strong> La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como <em>callback</em>. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona <a href="/es/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>.</p> - </li> - <li> - <p><strong>IndexedDB usa solicitudes en todos lados. </strong>Las solicitudes (<em>requests</em>) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades <code style="font-size: 14px;">onsuccess</code> y <code style="font-size: 14px;">onerror</code>, sobre las cuales se puede aplicar <code style="font-size: 14px;">addEventListener()</code> y <code style="font-size: 14px;">removeEventListener()</code>. Estas también tienen las propiedades <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, y <code style="font-size: 14px;">errorCode</code> que permiten conocer el estado de la solicitud. La propiedad <code style="font-size: 14px;">result</code> es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de <code>IDBCursor</code>, o la llave de un valor recién insertado en la base de datos).</p> - </li> - <li> - <p><strong>IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles.</strong> Los eventos del DOM siempre tienen una propiedad <code style="font-size: 14px;">type</code> (en IndexedDB, ésta es generalmente <code style="font-size: 14px;">"success"</code> o <code style="font-size: 14px;">"error"</code>). Los eventos del DOM también tienen una propiedad <code style="font-size: 14px;">target</code> que dice a dónde apunta el evento. En la mayoría de los casos, el <code style="font-size: 14px;">target</code> de un evento es el objeto <code style="font-size: 14px;">IDBRequest</code> que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.</p> - </li> - <li> - <p><strong>IndexedDB es orientada a objetos.</strong> IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.</p> - - <p>En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el <a class="external" href="https://es.wikipedia.org/wiki/Base_de_datos_orientada_a_objetos" title="http://en.wikipedia.org/wiki/Object_database">artículo de la Wikipedia sobre bases de datos orientadas a objetos</a>.</p> - </li> - <li> - <p><strong>IndexedDB no utiliza SQL (</strong><strong>Structured Query Language).</strong> En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el <a class="external" href="https://es.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">artículo de Wikipedia sobre NoSQL</a>.</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB se adhiere a una política de mismo origen</strong></a>. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.</p> - - <p>El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> puede obtener datos desde <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, debido a que comparten un mismo orígen, esta no puede leer datos desde <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (puerto distinto) o desde <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocolo distinto), debido a que tienen distintos orígenes.</p> - </li> -</ul> - -<h2 id="definitions" name="definitions">Definiciones</h2> - -<p>Esta sección define y explica los términos utilizados en la API de IndexedDB.</p> - -<h3 id="database" name="database">Base de Datos</h3> - -<dl> - <dt><a name="gloss_database">base de datos</a></dt> - <dd>Un repositorio de información, típicamente compuesto de uno o más <a href="#gloss_object_store" title="#gloss_object_store"><em>almacenes de objetos</em></a>. Cada base de datos debe tener: - <ul> - <li><strong>Nombre</strong>. 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).</li> - <li> - <p><strong><a href="#gloss_version"><em>Versión</em></a> actual</strong>. 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.</p> - </li> - </ul> - </dd> - <dt><a name="gloss_object_store">almacén de objetos</a></dt> - <dd> - <p>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 <em><a href="#gloss_key">llaves</a></em> en orden ascendente.</p> - - <p>Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un <em><a href="#gloss_keygenerator">generador de llaves</a></em> y una <em><a href="#gloss_keypath">ruta de llaves</a></em>. Si el almacén tiene una ruta de llaves, éste utiliza <em><a href="#gloss_inline_key">llaves en línea</a></em>; si no, utiliza <em><a href="#gloss_outofline_key">llaves fuera de línea</a></em>.</p> - - <p>Para documentación de referencia sobre los almacenes de objetos, vew <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> o <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p> - </dd> - <dt><a name="gloss_version">versión</a></dt> - <dd>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 <em>transacción</em> <code>versionchang<em>e</em></code> y dispara el evento <code>upgradeneeded</code>. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.</dd> - <dd>Nota: Esta definición describe la <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación más actual</a>, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>, que ya ha sido marcado obsoleto y removido.</dd> - <dt><a name="gloss_database_connection">conexión a la base de datos</a></dt> - <dd>Una operación creada al abrir una <em><a href="#gloss_database">base de datos</a></em>. Una base de datos puede tener múltiples conexiónes al mismo tiempo.</dd> - <dt><a name="gloss_transaction">transacción</a></dt> - <dd> - <p>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.</p> - - <p>Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan <a href="#scope"><em>ámbitos</em></a> 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 <code>flyingMonkey</code>, se puede iniciar una segunda que tenga como ámbito los almacenes <code>unicornCentaur</code> y <code>unicornPegasus</code>. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.</p> - - <p>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.</p> - - <p>Los tres modos de transacción son: <code>readwrite</code>, <code>readonly</code>, y <code>versionchange</code>. La única manera de crear y borrar almacenes es usar una transacción <code>versionchange</code>. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p> - - <p>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 <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p> - </dd> - <dt><a name="gloss_request">solicitud</a></dt> - <dd>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.</dd> - <dt><a name="gloss_index">índice</a></dt> - <dd> - <p>Un almacén especializado para buscar registros en otro almacén, llamado <em>almacén de objetos referenciado</em>. 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.</p> - - <p>Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la <a href="#gloss_key">llave</a><em>.</em></p> - - <p>Para aprender más sobre el uso de los índices, vea <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Usando IndexedDB</a>. Para documentación de referencia, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h3 id="key" name="key">Llave y valor</h3> - -<dl> - <dt><a name="gloss_key">llave</a></dt> - <dd> - <p>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 <em><a href="#gloss_keygenerator">generador de llaves</a></em>, una <em><a href="#gloss_keypath">ruta de llave</a></em><a>, 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.</a></p> - <a> </a> - - <p><a>Una llave puede ser de uno de los siguientes tipos: </a><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">String</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">Date</a>, float, y <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="Array">Array</a>. 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.</p> - - <p>Como alternativa, se pueden realizar búsquedas de objetos usando un <em><a href="#gloss_index">índice</a>.</em></p> - </dd> - <dt><a name="gloss_keygenerator">generador de llaves</a></dt> - <dd>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.</dd> - <dt><a name="gloss_inline_key">llaves en línea</a></dt> - <dd>Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una <em>ruta de llave</em>. 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.</dd> - <dt><a name="gloss_outofline_key">llave fuera de línea</a></dt> - <dd>Una llave que se almacena separada del valor.</dd> - <dt><a name="gloss_keypath">ruta de llave</a></dt> - <dd>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.</dd> - <dt><a name="gloss_value">valor</a></dt> - <dd> - <p>Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean" rel="internal" title="Boolean">booleanos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number" rel="internal" title="Number">números</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">cadenas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">fechas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object" title="Object">objetos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" rel="internal" title="Array">arreglos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" rel="internal" title="RegExp">expresiones regulares</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/undefined" title="undefined">undefined</a>, y null.</p> - - <p>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.</p> - - <p>Se pueden almacenar <a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> y archivos. cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Rango y ámbito</h3> - -<dl> - <dt>ámbito</dt> - <dd>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.</dd> - <dt>cursor</dt> - <dd>Un mecanismo para iterar a través de múltiples registros con un <em>rango de llaves</em>. 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 <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> o <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd> - <dt>rango de llaves</dt> - <dd> - <p>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.</p> - - <p>Para documentación de referencia sobre los rangos de llaves, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">Limitaciones</h2> - -<p>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:</p> - -<ul> - <li>Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.</li> - <li>Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.</li> - <li>Búsqueda de Texto Completo. La API no ofrece un equivalente al operador <span style="direction: ltr;"><code>LIKE</code> en SQL. </span></li> -</ul> - -<p>Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:</p> - -<ul> - <li>El usuario pide borrar los datos del navegador.<br> - Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.</li> - <li>El navegador está en modo de navegación privada.<br> - Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.</li> - <li>Se alcanza el límite de espacio en disco.</li> - <li>Los datos se corrompen.</li> - <li>Se realiza un cambio incompatible a ésta característica.</li> -</ul> - -<p>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.</p> - -<div class="warning"> -<p><strong>Advertencia:</strong> Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un <a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. Esto requiere mayor investigación para documentarlo.</p> -</div> - -<h2 id="next" name="next">Próximo paso</h2> - -<p>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 <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>.</p> - -<h2 id="Vea_también">Vea también</h2> - -<p>Especificación</p> - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Especificación de la API de IndexedDB</span></a></li> -</ul> - -<p>Referencia</p> - -<ul> - <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">Referencia de la API de IndexedDB</a></li> -</ul> - -<p>Tutoriales</p> - -<ul> - <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li> - <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista de tareas sencilla usando HTML5 e IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("Este ejemplo usa una versión antigua de la especificación y no funciona en las versiones más recientes de los navegadores principales (aún utiliza el método <code>setVersion()</code>, que fue removido.") }}</span></li> -</ul> - -<p>Artículo relacionado</p> - -<ul> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El almacén en su navegador</a></li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El método </span></font><strong>ParentNode.append()</strong></code> inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de <code>ParentNode</code>. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.</p> - -<p>Diferencias con {{domxref("Node.appendChild()")}}:</p> - -<ul> - <li><code>ParentNode.append()</code> te permite también agregar objetos {{domxref("DOMString")}}, mientras que <code>Node.appendChild()</code> solo acepta objetos {{domxref("Node")}}.</li> - <li><code>ParentNode.append()</code> no tiene valor de retorno, en cambio, <code>Node.appendChild()</code> devuelve el objeto {{domxref("Node")}} agregado.</li> - <li><code>ParentNode.append()</code> puede agregar varios nodos y cadenas, mientras que <code>Node.appendChild()</code> sólo puede agregar uno.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.</dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Appending_an_element">Appending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text">Appending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3> - -<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>append() method</code> in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js">// 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]);</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>Node.children</strong></code> es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un <code>Node</code>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children; </pre> - -<p><code><var>children</var></code> es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos <code>de <em>node</em></code>. Si no hay elementos hijos, entonces <code><var>children</var></code> no contendrá elementos y su longitud ( <code>length</code> ) será <code>0</code>.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">var foo = document.getElementById('foo'); -for (var i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// 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); -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>38.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Soporte en {{domxref("SVGElement")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Las interfaces {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos e objetos que implementan este interfaz: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p><span style="font-family: verdana,tahoma,sans-serif;">La propiedad de sólo lectura </span><strong><code>ParentNode.firstElementChild</code></strong> retorna el primer hijo del objeto {{domxref("Element")}}, o bien <code>null</code> si no existen elementos hijos.</p> - -<div class="note"> -<p>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, <code>firstElementChild</code> fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><p id="para-01"> - <span>First span</span> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstElementChild.nodeName) -</script></pre> - -<p>En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// 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; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda definido ahora en el segundo.<br> - Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Objetos que implementan estos interfaces puros: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p> - -<p><code>ParentNode</code> 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.</p> - -<p> </p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd> - <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>There is no inherited or specific and implemented methods.</em></p> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br> - Added the <code>children</code> property.<br> - Added the <code>append()</code> and <code>prepend()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> -</ul> 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p>La propiedad de sólo lectura <code><strong>ParentNode.lastElementChild</strong></code> retorna el último hijo del objeto {{domxref("Element")}} o bien <code>null</code> si no hay elementos hijos.</p> - -<div class="note"> -<p>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, <code>lastElementChild</code> fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.lastElementChild; </pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><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> -</pre> - -<p>En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// 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; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda ahora definido en el segundo.<br> - {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> 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 ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use <code>localforage.js</code> 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.</p> - -<p>The data we want to access is of the form:</p> - -<p> </p> - -<p>where <code>data</code><em> </em>is the information to guarantee the integrity and <code>signature</code> the information used to verify it.</p> - -<p>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.</p> - -<p>We ask the user for a password, and we use it to generate the key:</p> - -<pre> </pre> - -<p>With that key, we will be able to compute the <em>mac</em> of the data.</p> - -<pre> </pre> 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 ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS:-moz-ui-valid</code> CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación</a>.</p> - -<p>Se aplica siguiendo las siguientes reglas:</p> - -<ul> - <li>Se aplica la psuedo clase si el control no tiene el foco y el valor es válido.</li> - <li>Si el control tiene el foco y el valor era válido (esto incluye cuando está vacío), al obtener el foco de aplica la pseudo clase.</li> - <li>Si el control tiene el foco y el valor era inválido, una vez obtenido el foco se vuelve a validar cada vez que presionamos una tecla para ver si el nuevo valor es válido.</li> - <li>Si el elemento es requerido la reglas anteriores sólo se aplican si el usuario ha cambiado el valor o intenta enviar el formulario.</li> -</ul> - -<p>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.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación.</p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(2)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref(":valid")}}</li> - <li>{{cssxref(":invalid")}}</li> - <li>{{cssxref(":required")}}</li> - <li>{{cssxref(":optional")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> -</ul> 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) ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p> -<p>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.</p> -<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li> -</ul> -<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li> -</ul> -<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p> -<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3> -<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p> -<p>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.</p> -<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p> -<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>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.</p> -<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p> -<p>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.</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> 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.</p> -<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3> -<p>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.</p> -<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p> -<p>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.</p> -<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p> -<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2> -<p>Una guía de CSS paso a paso.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2> -<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li> -</ol> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ 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" } ) }}</p> 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() ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumen">Resumen</h2> - -<p>La función CSS <code>linear-gradient()</code> 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>")}}.</p> - -<p>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</p> - -<p>Cómo cualquier otro degradado, un degradado lineal no tiene<a href="/en/CSS/image#no_intrinsic"> dimensiones intrínsecas</a>; 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.</p> - -<p>Los gradientes lineales están definidos por un eje, la <em>línea gradiente</em>, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la <em>línea gradiente</em> tienen un único color, para cada punto de la <em>línea gradiente</em>.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda <em>magic corners</em> (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.</p> - -<p>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.</p> - -<p>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") }}.</p> - -<p>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.</p> - -<div class="note">Gradients are defined as CSS <code><image></code> 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") }}.<br> -For this reason, <code>linear-gradient</code> won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="twopartsyntaxbox notranslate">Formal grammar: linear-gradient( [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - - where <code><side-or-corner> = [left | right] || [top | bottom]</code> - and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> -</pre> - -<pre class="notranslate">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 */ -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> - The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> 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 <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> - <dt><code><angle></code></dt> - <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> - <dt><code><color-stop></code></dt> - <dd>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).<br> - Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> -</dl> - -<h3 id="History_of_the_syntax">History of the syntax</h3> - -<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p> - -<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> -</pre> - -<p>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.</p> - -<p>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:</p> - -<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p> - -<p>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.</p> - -<ul> - <li>The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.</li> - <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li> -</ul> - -<p>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):</p> - -<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>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.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p> - -<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>This should be the final syntax.</p> - -<p>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 <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> 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 (<code>0deg</code> = East<code>)</code>. 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 <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3> - -<p>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.</p> - -<p><img alt="lingradexample.png" class="default internal" src="/files/2843/lingradexample.png" style="height: 329px; width: 453px;"></p> - -<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3> - -<p>If the first color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 0%. If the last color-stop does not have a <code><length></code> or <code><percentage></code>, 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.</p> - -<p>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.</p> - -<div>A rainbow made from a gradient</div> - -<pre class="notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -</pre> - -<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3> - -<p>The <code>linear-gradient</code> 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") }}.</p> - -<h3 id="Using_transparency">Using transparency</h3> - -<div>Linear with transparency</div> - -<pre class="notranslate">background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));</pre> - -<p>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 <code>background-size</code>).</p> - -<h2 id="Notes">Notes</h2> - -<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="http://richard.milewski.org/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}</td> - <td>{{ Spec2('CSS3 Images') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> - <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - </tr> - <tr> - <td>On any properties that accept {{cssxref("<image>")}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> - </tr> - <tr> - <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>10</td> - <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>16</td> - <td>26.0 (537.27)</td> - <td>10</td> - <td>12.10</td> - <td>6.1</td> - </tr> - </tbody> -</table> - -<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. 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 <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> - -<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> 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:</p> - -<pre class="notranslate">linear-gradient(to top left, blue, red);</pre> - -<p>is almost the same as:</p> - -<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre> - -<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> - -<h3 id="Cross-browser_gradients">Cross-browser gradients</h3> - -<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p> - -<pre class="brush: css notranslate">.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 */ -} -</pre> - -<p>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'.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> - <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li> - <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li> - <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> -</ul> 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 ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p> -<p>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.</p> -<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li> -</ul> -<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li> -</ul> -<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p> -<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3> -<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p> -<p>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.</p> -<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p> -<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>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.</p> -<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p> -<p>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:</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> 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.</p> -<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3> -<p>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.</p> -<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p> -<p>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.</p> -<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p> -<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2> -<p>Una guía básica paso a paso de CSS.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2> -<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li> -</ol> -<p>{{ 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" } ) }}</p> 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() ---- -<p>{{CSSRef}}</p> - -<p>La función CSS <code>radial-gradient()</code> crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (<em>center</em>) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.</p> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Los gradientes radiales son definidos por su centro (<em>center</em>), el contorno y posición de la <em>figura resultante</em> y los puntos de definición de color (<em>color stops</em>). 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 <em>rayo de gradiente virtual</em> 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 <code>100%</code>. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.</p> - -<p>Las figuras resultantes solo pueden ser círculos (<code>circle</code>) o elipses (<code>ellipse</code>).</p> - -<p>Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen <a href="/es/docs/Web/CSS/image#no_intrinsic">sin dimensiones intrínsecas</a>, 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.</p> - -<p>La función <code>radial-gradient</code> no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: css notranslate">// 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( <em><extent-keyword></em>, … ) /* Dibuja un círculo */ -radial-gradient( circle <em>radius</em>, … ) /* Un círculo centrado con longitud dada. Puede ser un porcentaje */ -radial-gradient( ellipse <em>x-axis</em> <em>y-axis</em>, … ) /* 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> )</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code><position></code></dt> - <dd>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 <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>La figura del gradiente. Puede ser un valor <code>circle</code> (que indica que la figura del gradiente es un círculo con radio constante) o <code>ellipse</code> (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es <code>ellipse</code>.</dd> - <dt><code><color-stop></code></dt> - <dd>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 <code>0%</code>, o una longitud de <code>0</code>, representan el centro del gradiente, mientras que el valor de <code>100%</code> 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.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Valores clave que describen la longitud de la figura resultante. Los valores posibles son:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Constante</th> - <th>Descripción</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>La 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).</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Similar 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).</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.</td> - </tr> - </tbody> - </table> - Los borradores anteriores del estándar incluyeron otras palabras clave (<code>cover</code> y <code>contain</code>) como sinónimos de los estándares <span class="st"><code>farthest-corner</code></span> y <code>closest-side</code> respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -<pre class="syntaxbox notranslate"><code>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<code> <color-stop> = <color> [ <percentage> | <length> ]?</code> -</code></pre> - -<h2 id="Example_1" name="Example_1">Ejemplo 1</h2> - -<p>Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de turquesa (<code>#00FFFF</code>), a blanco, a azul (<code>#0000FF</code>):</p> - -<pre class="brush: css notranslate">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%); -} </pre> - -<p>{{ EmbedLiveSample('Example_1') }}</p> - -<h2 id="Example_2" name="Example_2">Ejemplo 2</h2> - -<p>Este código generará un fondo de elipse in la esquina más lejana (<code>farthest-corner</code>) a <code>470px 45px</code>, cambiando el color de amarillo (<code>#FFFF80</code>), a marrón pálido, a azul pálido (<code>#E6E6FF</code>):</p> - -<pre class="brush: css notranslate">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%); -}</pre> - -<p>{{ EmbedLiveSample('Example_2') }}</p> - -<h2 id="Example_3" name="Example_3">Ejemplo 3</h2> - -<p>Este código generará un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de rojo (<code>#FF0000</code>) a azul (<code>#0000FF</code>):</p> - -<pre class="brush: css notranslate">body { - width: 100vh; - height: 100vh; - background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%); -}</pre> - -<p>{{ EmbedLiveSample('Example_3') }}</p> - -<h2 id="Example_4" name="Example_4">Ejemplo 4</h2> - -<p>Este código producirá un círculo difuso con radio de <code>16px</code>:</p> - -<pre class="brush: css notranslate">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); -} </pre> - -<p>{{ EmbedLiveSample('Example_4') }}</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}</td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td> - <td>10.0<sup>[3]</sup></td> - <td>11.60{{property_prefix("-o")}}</td> - <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>En {{cssxref("border-image")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> - <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td> - <td>26</td> - <td>10.0</td> - <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br> - 2.12</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Consejos de interpolación (un porcentaje sin color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>40</td> - <td> </td> - <td>27</td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}</td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En {{cssxref("border-image")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}</td> - <td>10</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[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 <code>layout.css.prefixes.gradients</code> en <code>false</code>.</p> - -<p>[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Véase también su <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">soporte actual</a> para gradientes radiales.</p> - -<p>[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo <code>-webkit</code> de la función, por razones de compatibilidad, dentro de la opción <code>layout.css.prefixes.webkit</code>, con valor <code>false</code> de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es <code>true</code>.</p> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li><a href="/es/docs/CSS/Using_CSS_gradients">Usando gradientes con CSS</a>, {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}</li> - <li>Propuesta original de WebKit: <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> - <li>Nueva implementación de WebKit: <a href="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li> -</ul> 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 ---- -<h3 id="Sumario" name="Sumario"> Sumario </h3> -<p>El valor <i>rtl</i> 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. -</p><p><br> -</p> -<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> -<pre class="eval">div { - position: absolute; - right: 20px; - height: 200px; - border: 1px solid #000; - direction: rtl; -} -</pre> -<p><br> -</p> -<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> -<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -</p> 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 ---- -<div id="Tool"> -<div class="hidden"> -<pre class="brush:html"><html> - <canvas id="bezier" width="336" height="336"> - </canvas> - <form> - <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> - <label for="y1">y1 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> - <label for="x2">x2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> - <label for="y2">y2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> - <br> - <output id="output">Log</output> - </form> -</html> - </pre> - -<pre class="brush:css">.field { - width: 40px; -} - </pre> - -<pre class="brush:js">function updateCanvas() { - - var x1 = document.getElementById('x1').value; - var y1 = document.getElementById('y1').value; - var x2 = document.getElementById('x2').value; - var y2 = document.getElementById('y2').value; - - drawBezierCurve(x1, y1, x2, y2); -} - -const radius = 4; -// Place needed to draw the rulers -const rulers = 30.5; -const margin = 10.5; -const basic_scale_size = 5; // Size of 0.1 tick on the rulers -var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated -var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged - -function initCanvas() { - // get the canvas element using the DOM - var canvas = document.getElementById('bezier'); - - // Make sure we don't execute when canvas isn't supported - if (canvas.getContext) { - // use getContext to use the canvas for drawing - var ctx = canvas.getContext('2d'); - - scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); - - canvas.onmousedown = mouseDown; - canvas.onmouseup = mouseUp; - } else { - alert('You need Safari or Firefox 1.5+ to see this demo.'); - } -} - -function cX(x) { - return x * scaling + rulers; -} - -function reverseX(x) { - return (x - rulers) / scaling; -} - -function lX(x) { - //Used when drawing vertical lines to prevent subpixel blur - var result = cX(x); - return Math.round(result) == result ? result + 0.5 : result; -} - -function cY(y) { - - return (1 - y) * scaling + margin; -} - -function reverseY(y) { - return (margin - y) / scaling + 1; -} - -function lY(y) { - // Used when drawing horizontal lines to prevent subpixel blur - var result = cY(y); - return Math.round(result) == result ? result + 0.5 : result; -} - -function drawBezierCurve(x1, y1, x2, y2) { - - // get the canvas element using the DOM - var canvas = document.getElementById('bezier'); - - // Make sure we don't execute when canvas isn't supported - if (canvas.getContext) { - - // use getContext to use the canvas for drawing - var ctx = canvas.getContext('2d'); - - - - // Clear canvas - ctx.clearRect(0, 0, canvas.width, canvas.height); - - // Draw the rulers - ctx.beginPath(); - ctx.strokeStyle = "black"; - - // Draw the Y axis - ctx.moveTo(cX(0), cY(0)); - ctx.lineTo(cX(1), cY(0)); - ctx.textAlign = "right"; - - for (var i = 0.1; i <= 1; i = i + 0.1) { - ctx.moveTo(-basic_scale_size + cX(0), lY(i)); - if ((i == 0.5) || (i > 0.9)) { - ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i)); - ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4); - // Limitation the constant 4 should be font size dependant - } - ctx.lineTo(cX(0), lY(i)); - } - ctx.stroke(); - ctx.closePath(); - ctx.beginPath(); - - // Draw the Y axis label - ctx.save(); - ctx.rotate(-Math.PI / 2); - ctx.textAlign = "left"; - ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0)); - ctx.restore(); - - // Draw the X axis - ctx.moveTo(cX(0), cY(0)); - ctx.lineTo(cX(0), cY(1)); - ctx.textAlign = "center"; - for (i = 0.1; i <= 1; i = i + 0.1) { - ctx.moveTo(lX(i), basic_scale_size + cY(0)); - if ((i == 0.5) || (i > 0.9)) { - ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0)); - ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0)); - // Limitation the constant 4 should be dependant of the font size - } - ctx.lineTo(lX(i), cY(0)); - } - - // Draw the X axis label - ctx.textAlign = "left"; - ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0)); - // Limitation the constant 4 should be dependant of the font size - ctx.stroke(); - ctx.closePath(); - - // Draw the Bézier Curve - ctx.beginPath(); - ctx.moveTo(cX(0), cY(0)); - ctx.strokeStyle = 'blue'; - ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1)); - ctx.stroke(); - ctx.closePath(); - - - - // Draw the P2 point (with a line to P0) - ctx.beginPath(); - ctx.strokeStyle = 'red'; - ctx.moveTo(cX(x1), cY(y1)); - ctx.lineTo(cX(0), cY(0)); - ctx.stroke(); - ctx.closePath(); - ctx.beginPath(); - ctx.moveTo(cX(x1), cY(y1)); - ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI); - ctx.stroke(); - ctx.fillStyle = 'white'; - ctx.fill(); - ctx.closePath(); - - - - // Draw the P3 point (with a line to P1) - ctx.beginPath(); - ctx.strokeStyle = 'red'; - ctx.moveTo(cX(x2), cY(y2)); - ctx.lineTo(cX(1), cY(1)); - ctx.stroke(); - ctx.closePath(); - - ctx.beginPath(); - ctx.moveTo(cX(x2), cY(y2)); - ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI); - ctx.stroke(); - ctx.fill(); - ctx.closePath(); - - // Draw the P1(1,1) point (with dashed hints) - ctx.beginPath(); - ctx.moveTo(cX(1), cY(1)); - ctx.strokeStyle = 'lightgrey'; - ctx.lineTo(cX(0), cY(1)); - ctx.moveTo(cX(1), cY(1)); - ctx.lineTo(cX(1), cY(0)); - ctx.stroke(); - ctx.closePath(); - - ctx.beginPath(); - ctx.strokeStyle = "black"; - ctx.fillStyle = "black"; - ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI); - ctx.fill(); - ctx.stroke(); - ctx.closePath(); - - - // Draw the P0(0,0) point - ctx.beginPath(); - ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI); - ctx.fill(); - ctx.stroke(); - ctx.closePath(); - - - } else { - alert('You need Safari or Firefox 1.5+ to see this demo.'); - } -} - -function mouseDown(e) { - - var canvas = document.getElementById('bezier'); - - var x1 = cX(document.getElementById('x1').value); - var y1 = cY(document.getElementById('y1').value); - - var x = e.pageX - canvas.offsetLeft; - var y = e.pageY - canvas.offsetTop; - - var output = document.getElementById('output'); - output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; - - - if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) { - var output = document.getElementById('output'); - output.value = "P1!"; - dragSM = 1; - } - - var x2 = cX(document.getElementById('x2').value); - var y2 = cY(document.getElementById('y2').value); - - if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) { - var output = document.getElementById('output'); - output.value = "P2!"; - dragSM = 2; - } - - // If we are starting a drag - if (dragSM != 0) { - canvas.onmousemove = mouseMove; - } -} - -function mouseUp(e) { - - var output = document.getElementById('output'); - output.value = "Mouse up!"; - dragSM = 0; - canvas.onmousemove = null; -} - -function mouseMove(e) { - if (dragSM != 0) { - var canvas = document.getElementById('bezier'); - - var x = e.pageX - canvas.offsetLeft; - var y = e.pageY - canvas.offsetTop; - - var output = document.getElementById('output'); - output.value = "Drag!"; - - if (dragSM == 1) { - var x1 = document.getElementById('x1'); - var y1 = document.getElementById('y1'); - x1.value = reverseX(x); - x1.value = Math.round(x1.value * 10000) / 10000; - y1.value = reverseY(y); - y1.value = Math.round(y1.value * 10000) / 10000; - if (x1.value < 0) { x1.value = 0; } - if (x1.value > 1) { x1.value = 1; } - } else if (dragSM == 2) { - var x2 = document.getElementById('x2'); - var y2 = document.getElementById('y2'); - x2.value = reverseX(x); - x2.value = Math.round(x2.value * 10000) / 10000; - y2.value = reverseY(y); - y2.value = Math.round(y2.value * 10000) / 10000; - if (x2.value < 0) { x2.value = 0; } - if (x2.value > 1) { x2.value = 1; } - } - updateCanvas(); - } -} - -initCanvas(); -updateCanvas(); - </pre> -</div> - -<p>{{draft}}</p> - -<p>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á!</p> - -<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p> -</div> - -<p> </p> 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 ---- -<p>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.</p> - -<h2 id="Crear_eventos_personalizados">Crear eventos personalizados</h2> - -<p> Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Escucha para el evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Disparar event. -elem.dispatchEvent(event);</pre> - -<p>El codigo de ejemplo de arriba usa el metodo <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a>. </p> - -<p>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.</p> - -<h3 id="Adición_de_datos_personalizados_con_CustomEvent_()">Adición de datos personalizados con CustomEvent ()</h3> - -<p> 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.<br> - <span style="line-height: 1.5;">Por Ejemplo, </span>el evento se puede crear de la siguiente manera<span style="line-height: 1.5;">:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p> Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (<span style="line-height: 19.0909080505371px;">event listener</span>):</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="La_Forma_Antigua">La Forma Antigua</h3> - -<p> El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:</p> - -<pre class="brush: js">// 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); - -</pre> - -<h2 id="El_disparo_incorporado_eventos">El disparo incorporado eventos</h2> - -<p> Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: </p> - -<pre class="brush: js">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"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con los Navegadores</h2> - -<h2 id="sect1"> </h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>Event()</code> constructor</td> - <td>15</td> - <td>11</td> - <td>{{ CompatNo() }}</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Phone</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> 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 ---- -<p><span class="seoSummary">La plataforma Web provee varias formas de recibir notificaciones de los eventos del <a href="/en-US/docs/Web/Events">DOM</a>. 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.</span> Esta página se enfoca en los detalles de cómo funcionan estos.</p> - -<h3 id="Registering_on-event_handlers">Registering <em>on-event</em> handlers</h3> - -<p>Los controladores <em><strong>on-event</strong></em> 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 <code>onclick</code>, <code>onkeypress</code>, <code>onfocus</code>, etc.</p> - -<p>Pueden especificar un controlador de evento <code>on<...></code> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:</p> - -<ul> - <li>Usando el HTML {{Glossary("atributo")}} llamados <code>on<em>{eventtype}</em></code> en un elemento, por ejemplo:<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>Un controlador onevent</p> - -<p>Notese que cada objeto puede tener sólo un controlador <em>on-event</em> 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.</p> - -<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>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:</p> - -<pre class="notranslate">xhr.onprogress = function() { ... }</pre> - -<h2 id="Details">Details</h2> - -<h3 id="The_value_of_HTML_on<...>_attributes_and_corresponding_JavaScript_properties">The value of HTML on<...> attributes and corresponding JavaScript properties</h3> - -<p>A handler registered via an <code>on<...></code> attribute will be available via the corresponding <code>on<...></code> property, but not the other way around:</p> - -<pre class="brush: html notranslate"><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></pre> - -<p>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: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">the this keyword documentation</a>.</p> - -<p>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 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may be used to refer to:</p> - -<ul> - <li>any function or object registered to be notified of events,</li> - <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { /* ... */ }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events,</p> - -<ul> - <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li> - <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3> - -<p>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") }}.</p> - -<p>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.</p> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>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 <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, 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.</p> 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 ---- -<p>{{draft()}}</p> -<p>Everything you need to know about events will go under here. We're working on cleanup here now.</p> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> 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 ---- -<p>{{ Draft() }}</p> -<h2 id="Sumario">Sumario</h2> -<p>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.</p> -<div class="warning"> - <p><strong>Atención:</strong> 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.</p> -</div> -<h2 id="Acerca_de_los_marcos_de_coordenadas">Acerca de los marcos de coordenadas</h2> -<p>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:</p> -<h3 id="Marco_de_coordenadas_terrestres">Marco de coordenadas terrestres</h3> -<p>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.</p> -<ul> - <li>El eje <strong>X</strong> sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).</li> - <li>El eje <strong>Y</strong> sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.</li> - <li>El eje <strong>Z</strong> es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).</li> -</ul> -<p> </p> -<p><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Cartesian_xyz.png" style="width: 200px; height: 153px;"></p> -<p> </p> -<h3 id="Marco_de_coordenadas_del_dispositivo">Marco de coordenadas del dispositivo</h3> -<p>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</p> -<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p> -<ul> - <li>El eje <strong>x</strong> está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.</li> - <li>El eje <strong>y</strong> está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.</li> - <li>El eje <strong>z</strong> es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.</li> -</ul> -<div class="note"> - <strong>Nota:</strong> 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.</div> -<h2 id="Sobre_la_rotación">Sobre la rotación</h2> -<p>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.</p> -<h3 id="Alpha">Alpha</h3> -<p>Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p> -<p>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.</p> -<h3 id="Beta">Beta</h3> -<p>Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p>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.</p> -<h3 id="Gamma">Gamma</h3> -<p>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:</p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p>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.</p> 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 ---- -<p>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.<a href="/es/docs/HTML/HTML5" title="en/HTML/HTML5"> HTML5</a> introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y <em>validación de restricciones</em> 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 <a href="/es/docs/HTML/HTML5/Formularios_en_HTML5#Validaci.C3.B3n_restringida" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">API de Validación de Restricciones</a> de HTML.</p> - -<div class="note"><strong>Nota:</strong> La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones <em>de lado del servidor</em>. 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.</div> - -<h2 id="Restricciones_intrínsecas_y_básicas">Restricciones intrínsecas y básicas</h2> - -<p>En HTML5, las restricciones básicas son declaradas de dos formas:</p> - -<ul> - <li>Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo <span style="font-family: courier new;">email</span> creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.</li> - <li>Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.</li> -</ul> - -<h3 id="Tipos_de_captura_semánticos">Tipos de captura semánticos</h3> - -<p>Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tipo de input</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>El valor debe ser una URL absoluta, es decir, una de las siguientes: - <ul> - <li>una URI válida (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>una IRI válida, sin un componente de query (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>El valor debe obedecer a la producción <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> donde: - <ul> - <li><code>atext</code> está definido en <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, y representa una letra US-ASCII (<span style="font-family: courier new;">A</span>-<span style="font-family: courier new;">Z</span> y <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), un dígito (<span style="font-family: courier new;">0</span>-<span style="font-family: courier new;">9</span>) o uno de los siguientes caracteres especiales: <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~</span>,</li> - <li><code>ldh-str</code> está definido en <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, y representa letras US-ASCII, combinadas con dígitos y el símbolo <span style="font-family: courier new;">-</span> agrupados en palabras separadas por un punto (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Nota:</strong> 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 <strong>tipo no coincidente</strong>.</div> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - </tbody> -</table> - -<p>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. </p> - -<h3 id="Atributos_relacionados_con_validaciones">Atributos relacionados con validaciones</h3> - -<p>Los siguientes atributos son usados para describir restricciones básicas:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Atributo</th> - <th scope="col">Tipos de input que soportan el atributo</th> - <th scope="col">Valores posibles</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>Una expresión regular de JavaScript (compilada con las banderas <code title="">global</code>, <code title="">ignoreCase</code>, y <code title="">multiline</code> de ECMAScript 5 <em>desabilitadas</em>)</td> - <td>El valor debe coincidir con el patrón.</td> - <td>Incumplimiento de restricción por <strong>incompatibilidad de patrones (Pattern mismatch)</strong></td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser mayor o igual al de este atributo.</td> - <td rowspan="3">Incumplimiento de restricción por <strong>flujo insuficiente (Underflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser menor o igual al de este atributo</td> - <td rowspan="3">Incumplimiento de restricción por <strong>desborde (Overflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>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") }}</td> - <td><em>ninguno</em>, pues éste es un atributo de tipo Boolean: su presencia representa <em>true</em>, y su ausencia representa <em>false</em></td> - <td>Debe tener un valor (si se establece).</td> - <td>Incumplimiento de restricción por<strong> ausencia (Missing)</strong></td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>Un número entero de días</td> - <td rowspan="5">A menos que se establezca el atributo con la literal <span style="font-family: courier new;">any</span>, el valor debe ser <strong>min</strong> + un enter múltiplo del valor de este atributo.</td> - <td rowspan="5">Incumplimiento de restricción por<strong> inconsistencia de paso (Step mismatch)</strong></td> - </tr> - <tr> - <td>month</td> - <td>Un número entero de meses</td> - </tr> - <tr> - <td>week</td> - <td>Un número entero de semanas</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Un número entero de segundos</td> - </tr> - <tr> - <td>range, number</td> - <td>Un entero</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}</td> - <td>Una longitud en enteros</td> - <td>El número de caracteres (puntos de código) no debe exceder el valor del atributo.</td> - <td>Incumplimiento de restricción por ser<strong> muy largo (Too long)</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Proceso_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Proceso de validación de restricciones</span></h2> - -<p>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:</p> - -<ul> - <li>Invocando a la función <code>checkValidity()</code> de una interfaz <a href="/es/docs/DOM" title="en/DOM">DOM</a> relacionada con formas (<code><a href="/es/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/es/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/es/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> o <code><a href="/es/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a>, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)</li> - <li>Invocando a la función <code>checkValidity()</code> en la interfaz <code><a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code>, llamada <em>validación estática de restricciones</em>.</li> - <li>Enviando el formulario en sí, llamado <em>validación interactiva de restricciones</em>.</li> -</ul> - -<div class="note"><strong>Nota: </strong> - -<ul> - <li>Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.</li> - <li>Invocando al método <code>send()</code> en la interfaz <a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.</li> -</ul> -</div> - -<h2 id="Restricciones_complejas_usando_la_API_de_Restricciones_de_HTML5"><span class="author-g-by4vjwmiwjiydpj7">Restricciones complejas usando la API de Restricciones de HTML5</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">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.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como <strong>onchange</strong>) para calcular si la restricción no se cumple, y entonces usar el método <code><em>field</em>.setCustomValidity()</code> 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.</span></p> - -<h3 id="Restricciones_que_combinan_varios_campos_Validación_de_código_postal">Restricciones que combinan varios campos: Validación de código postal</h3> - -<p>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 <code>D-</code> en Alemania, <code>F-</code> 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.</p> - -<div class="note"> -<p><strong>Nota:</strong> 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.</p> -</div> - -<p><span style="line-height: 1.5;">Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:</span></p> - -<pre class="brush: html notranslate"><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></pre> - -<p>Esto mostrará el siguiente formulario: </p> - -<p><label>Código Postal : </label><input> <label>Country: </label><select><option value="ch">Suiza</option><option value="fr">Francia</option><option value="de">Alemania</option><option value="nl">Países Bajos</option></select></p> - -<p>Primero, escribimos una función que revisará las restricciones en sí:</p> - -<pre class="brush: js notranslate">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]); - } -} -</pre> - -<p>Entonces, enlazamos este código al evento <strong>onchange</strong> del elemento {{ HTMLElement("select") }} y al evento <strong>oninput</strong> del elemento {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">aquí un ejemplo en vivo</a> de la validación de código postal.</p> - -<h3 id="Limitando_el_tamaño_de_un_archivo_antes_de_ser_subido">Limitando el tamaño de un archivo antes de ser subido</h3> - -<p>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.</p> - -<p>Aquí está la parte de HTML:</p> - -<pre class="brush: html notranslate"><label for="FS">Selecciona un archivo menor a 75KB : </label> -<input type="file" id="FS"></pre> - -<p>Esto muestra lo siguiente:</p> - -<p><label>Seleciona un archivo menor a 75KB : </label> <input></p> - - - -<p>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:</p> - -<pre class="brush: js notranslate">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(""); -}</pre> - - - -<p>Finalmente, anclamos el método al evento requerido:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">aquí un ejemplo en vivo</a> de la validación de tamaño de archivos.</p> - -<h2 id="Estilos_visuales_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Estilos visuales de validación de restricciones</span></h2> - -<p>Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.</p> - -<h3 id="Controlando_el_aspecto_de_los_elementos">Controlando el aspecto de los elementos</h3> - -<p>El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.</p> - -<h4 id="Pseudo-clases_required_y_optional">Pseudo-clases :required y :optional</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> y <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.</p> - -<h4 id="Pseudo-clase_-moz-placeholder">Pseudo-clase :-moz-placeholder</h4> - -<p>Véase <a href="/es/docs/Web/CSS/::placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">::placeholder</a> (experimental).</p> - -<h4 id="Pseudo-clases_valid_invalid">Pseudo-clases :valid :invalid</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> e <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> 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.</p> - -<h4 id="Estilos_predeterminados">Estilos predeterminados</h4> - -<h3 id="Controlando_el_texto_de_incumplimiento_de_restricciones">Controlando el texto de incumplimiento de restricciones</h3> - -<h4 id="El_atributo_x-moz-errormessage">El atributo x-moz-errormessage</h4> - -<p>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.</p> - -<div class="note"> -<p style="margin-left: 40px;">Nota: Esta extensión no es estándar.</p> -</div> - -<h4 id="element.setCustomValidity_de_la_API_de_Validación_de_Restricciones">element.setCustomValidity() de la API de Validación de Restricciones</h4> - -<p>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.</p> - -<h4 id="Objeto_ValidityState_de_la_API_de_Validación_de_Restricciones"><span class="author-g-by4vjwmiwjiydpj7">Objeto ValidityState</span> de la API de Validación de Restricciones</h4> - -<p>La interfaz de DOM <code><a href="/es/docs/Web/API/ValidityState">ValidityState</a></code><a href="/es/docs/Web/API/ValidityState"> </a>representa los <em>estados de validez</em> 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.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusión"><span class="author-g-by4vjwmiwjiydpj7">Conclusión</span></h2> 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 ---- -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">{{ gecko_minversion_header("2") }}{{ draft() }}</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gecko 2 introduce un nuevo analizador basado en HTML 5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nuevo analizador presenta estas mejoras importantes:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Las llamadas a <code>innerHTML</code> son mucho más rápidas.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Se han corregido <a class="external" href="http://tinyurl.com/html-parser-bugs" title="http://tinyurl.com/html-parser-bugs">decenas de errores relacionados desde hace tiempo con el analizador</a>.</span></span></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificación de HTML 5</a> 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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.</span></span></p> -<h2 id="Conductas_del_analizador_modificadas"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Conductas del analizador modificadas</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> -<h3 id="Tokenización_del_ángulo_izquierdo_del_soporte_dentro_de_una_etiqueta"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Tokenización del ángulo izquierdo del soporte dentro de una etiqueta</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Teniendo en cuenta la cadena <code><foo<bar></code> , el nuevo analizador la lee como una etiqueta llamada <code>foo<bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, <code>foo</code> y <code>bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> -<h3 id="Llamar_a_document.write_()_durante_el_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Llamar a document.write () durante el análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Antes de HTML5, Gecko y WebKit permitían las llamadas a <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>durante el análisis</em> para insertar contenido en la secuencia de origen.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento daba lugar inherentemente a <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">condiciones de carrera</a>, puesto que el contenido se insertaba, </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en la secuencia de origen, en</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> un punto dependiente de los tiempos de ejecución.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En IE, este tipo de llamadas son ignoradas o implican una llamada a <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, sustituyendo el documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En HTML5, <code>document.write()</code> sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> o <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Con el analizador de HTML 5, las llamadas a <code>document.write()</code> en cualquier otro contexto o se ignoran o sustituyen el documento.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos contextos en los que <em>no</em> debes llamar a <code>document.write()</code> incluyen:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">scripts creados con <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement ()</a></span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">controladores de eventos</span></span></li> - <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setTimeout ()</span></span></a></li> - <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setInterval ()</span></span></a></li> - <li><code><script async src="..."></code></li> - <li><code><script defer src="..."></code></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a <code>document.write()</code> .</span></span></p> -<h3 id="Falta_de_repetición_del_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Falta de repetición del análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, si el documento carecía de una etiqueta de cierre <code></title></code>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este comportamiento creaba una vulnerabilidad de seguridad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Con HTML 5, los analizadores ya no repiten análisis de ningún documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este cambio tiene las siguientes consecuencias para los desarrolladores web:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página <em>fallará</em> el análisis.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En un script alineado, con el fin de utilizar las cadenas literales <code></script></code> y <code><!--</code> , deberías evitar que se analicen literalmente, expresándolas como <code>\u003c/script></code> y <code>\u003c!--</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La práctica anterior de escapar de la cadena <code></script></code> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.</span></span></li> -</ul> -<h2 id="Mejora_del_rendimiento_con_el_análisis_especulativo"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Mejora del rendimiento con el análisis especulativo</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza <em>el análisis especulativo</em>, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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 <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write ()</a> , escribas un <em>subárbol equilibrado</em> dentro de ese trozo de script.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada <code>document.write()</code>, siempre y cuando estén dentro de la misma etiqueta <code><script></code>.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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') }}.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(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.)</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, el siguiente código escribe un subárbol equilibrado:</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><script></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("<div>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">document.write ("<p> Aquí va el contenido. </ p>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("</ div>");</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ script></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- Aquí va el HTML sin script. --> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" style=""><script>document.write("<div>");</script> -<p>El contenido va aquí.</p> -<script>document.write("</div>");</script> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener más información, consulta <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/HTML/HTML5/Optimizing Your Pages for Speculative Parsing">Optimizar tus páginas para el análisis especulativo</a></span></span></p> -<p>{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}</p> 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 ---- -<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5 </strong> <span style="line-height: 21px;">es la última versión de</span> <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span><span style="line-height: 21px;">El término representa dos conceptos diferentes:</span></p> - -<ul style="line-height: 22px;"> - <li><span class="seoSummary">Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.</span></li> - <li><span class="seoSummary">Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.</span> A este conjunto se le llama <em>HTML5 y amigos</em>, a menudo reducido a <em>HTML5</em> .</li> -</ul> - -<p style="line-height: 22px;"><span style="line-height: 21px;">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. </span></p> - -<ul style="line-height: 22px;"> - <li><em>Semántica</em>: Permite describir con mayor precisión <span id="docs-internal-guid-624d18e2-7fff-fe56-de5d-c9472725617e" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cuál</span> es su contenido.</li> - <li><em>Conectividad</em>: Permite comunicarse con el servidor de formas nuevas e innovadoras.</li> - <li><em>Sin conexión y almacenamiento</em>: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.</li> - <li><em>Multimedia</em>: <span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nos otorga un excelente soporte para utilizar contenido multimedia</span> como lo son audio y video nativamente.</li> - <li><em>Gráficos y efectos 2D/3D</em>: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.</li> - <li><em>Rendimiento e Integración</em>: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.</li> - <li><em>Acceso al dispositivo</em>: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.</li> - <li><em>CSS3</em>: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.</li> -</ul> - -<div class="cleared row topicpage-table" style="line-height: 22px;"> -<div class="section" style="width: 436px;"> -<h2 id="SEMÁNTICA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SEMÁNTICA</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y contenidos en HTML5</a></dt> - <dd>Un vistazo al nuevo esquema y secciones de un documento HTML5: <span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.</span></dd> - <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Uso de audio y video en HTML5">Uso de audio y video en HTML5</a></dt> - <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.</dd> -</dl> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt> - <dd>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<span style="line-height: 1.572;"> {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.</span></dd> - <dt><span style="line-height: 1.572;">Nuevos elementos semánticos</span></dt> - <dd>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 <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>. - <dl> - <dt></dt> - <dt>Mejora en {{HTMLElement("iframe")}}</dt> - <dd>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")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd>Permite integrar directamente fórmulas matemáticas.</dd> - <dd></dd> - <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducción a HTML5</a></dt> - <dd><span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">se explica cómo</span> <span class="hps">indicar al</span> <span class="hps">navegador</span> <span class="hps">que está utilizando</span> <span class="hps">HTML5</span> <span class="hps">en</span> <span class="hps">su diseño web</span> <span class="hps">o aplicación web</span><span>.</span></span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analizador de HTML5 compatible</a></dt> - <dd>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.</dd> - </dl> - - <h2 id="CONECTIVIDAD" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONECTIVIDAD</h2> - - <dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Eventos de servidor enviados</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>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.</dd> - </dl> - - <h2 id="Sin_Conexión_Y_ALMACENAMIENTO" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sin Conexión Y ALMACENAMIENTO</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sin conexión: el caché de la aplicación</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos con y sin conexión</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM / Almacenamiento">WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt> - <dd>Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Uso de archivos desde aplicaciones web</a></dt> - <dd>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<span style="line-height: 1.572;"> </span><span style="font-family: monospace; line-height: 1.572;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;"> de </span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-type" style="line-height: 1.572;" title="HTML/Element/input#attr-type">tipo</a></strong><span style="line-height: 1.572;"> <em>file</em> </span>del elemento HTML <strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-multiple" style="line-height: 1.572;" title="HTML/Element/input#attr-multiple">múltiple</a>s </strong><span style="line-height: 1.572;">atributos. </span>También esta<span style="line-height: 1.572;"> </span><a href="/en-US/docs/DOM/FileReader" style="line-height: 1.572;" title="DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.572;">.</span></dd> - </dl> - - <h2 id="MULTIMEDIA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Usando HTML5 de audio y video</a></dt> - <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. - <dl> - <dt></dt> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> - <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> - <dt>Track and WebVTT</dt> - <dd>El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> <span style="line-height: 1.572;">es un formato de pista de texto.</span></dd> - </dl> - - <h2 id="3D_GRAFICOS_EFECTOS" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, GRAFICOS & EFECTOS</h2> - - <dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> - <dd>Conozca el nuevo elemento <span style="font-family: courier new,andale mono,monospace; line-height: normal;">{{HTMLElement("canvas")}}</span> y cómo dibujar gráficos y otros objetos en Firefox</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos <code style="font-size: 14px;"><canvas></code> </a></dt> - <dd>El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;"><canvas></code></a> HTML5 .</dd> - <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> - <dd>Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.</dd> - <dt></dt> - </dl> - </dd> - </dl> - </dd> -</dl> -</div> - -<div class="section" style="width: 435px;"> -<h2 id="RESULTADOS_e_INTEGRACIÓN" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">RESULTADOS e INTEGRACIÓN</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.</dd> - <dt><code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Nivel 2</dt> - <dd>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<span style="line-height: 1.572;"> </span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd> -</dl> - -<dl> - <dt>Motores JIT compilación de JavaScript</dt> - <dd>La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML / contenido editable">El atributo contentEditable: transformar su sitio web en una wiki!</a></dt> - <dd>HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop / Drag_and_Drop">Arrastrar y soltar</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestión del foco en HTML</a></dt> - <dd>Los nuevos atributos HTML5 <code style="font-size: 14px;">activeElement</code> y <code style="font-size: 14px;">hasFocus</code> son soportados.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manejadores de protocolo basados en web</a></dt> - <dd>Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code style="font-size: 14px;">requestAnimationFrame</code></a></dt> - <dd>Permite controlar la renderización de animaciones para obtener un óptimo rendimiento.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> - <dd>Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt> - <dd> - <dl style="margin: 0px 0px 1.286em; padding: 0px;"> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">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.</dd> - </dl> - </dd> -</dl> - -<h2 id="ACCESO_al_dispositivo" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ACCESO al dispositivo</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> - <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM / Touch_events">Eventos táctiles</a></dt> - <dd>Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="El uso de geolocalización">El uso de geolocalización</a></dt> - <dd>Permite a los navegadores localizar la posición del usuario mediante geolocalización.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detección de la orientación del dispositivo</a></dt> - <dd>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).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="CSS3_STYLING" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CSS3 STYLING</h2> - -<p><a href="/en-US/docs/CSS" title="CSS">CSS </a> <font>se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. </font><font>Esto se refiere a menudo como</font> <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, <span style="line-height: 21px;">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.</span></p> - -<dl> - <dt>Nuevas características de diseño de fondo</dt> - <dd>Ahora es posible poner una sombra a un cuadro, con <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a> y <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a> se pueden ajustar.</dd> -</dl> - -<dl> - <dt>Bordes mas "lujosos"</dt> - <dd>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 <span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">, </span>aunque los bordes redondeados son apoyados a través de propiedades <span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd> - <dt>Animación de su estilo</dt> - <dd>Utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a> para animar entre los diferentes estados o utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a> para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.</dd> - <dt>Tipografía mejorada</dt> - <dd>Los autores tienen un mejor control para usar la tipografía. Se puede controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto </code></a>{{cssxref("text-overflow")}} y <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a> y también puede poner una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow"> sombra</a> o controlar con mayor precisión sus <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG / atributo / text-decoration">decoraciones</a> . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">@font-face</code></a> .</dd> - <dt>Nuevos diseños de presentación</dt> - <dd>Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS / Using_CSS_multi-column_layouts">CSS diseño de varias columnas</a> , y el <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a> .</dd> -</dl> -</div> -</div> 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 ---- -<p><br> - <span lang="es-ES"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>, 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.</span> <span lang="es-ES">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.</span></p> -<p><span lang="es-ES">Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones.</span> <span lang="es-ES">Debido a esto, algunos navegadores no admiten aún determinadas características.</span> <span lang="es-ES">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.</span> <span lang="es-ES">Puedes encontrar una lista de las características de HTML5 que admite Gecko en la <a href="/es/HTML/HTML5" title="es/HTML/HTML5">página principal de HTML5</a>.</span></p> -<h2 id="El_tipo_de_documento_HTML5">El tipo de documento HTML5</h2> -<p><span lang="es-ES">El tipo de documento para HTML5 es muy sencillo.</span> <span lang="es-ES">Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:</span></p> -<pre lang="es-ES" style="margin-bottom: 0.5cm;"><!DOCTYPE html></pre> -<p lang="es-ES">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.</p> -<p lang="es-ES">{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}</p> 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 ---- -<p>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.</p> - -<p>Varias tecnologías (como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) 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 <a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a> (<strong>HyperText Markup Language)</strong>. Sin HTML, no habría páginas web.</p> - -<p>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.</p> - -<h2 id="Una_breve_historia_del_HTML">Una breve historia del HTML</h2> - -<p>A finales de la década de los 80s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> estuvo trabajando como físico en <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (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, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), y <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>- 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).</p> - -<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2> - -<p>HTML es un <strong>lenguaje de etiquetas</strong>. 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 /.</p> - -<p>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> - -<div id="Spl1"> -<pre class="brush:html;"><p>Mi perro odia el pescado.</p></pre> -</div> - -<p>Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:</p> - -<p>{{ EmbedLiveSample("Spl1", 400, 50) }}</p> - -<p>El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.</p> - -<p>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> - -<div id="Spl2"> -<pre class="brush:html;"><p>Mi perro <em>odia</em> el pescado.</p></pre> -</div> - -<p>Cuando se muestre se verá del siguiente modo:</p> - -<p>{{ EmbedLiveSample("Spl2", 400, 50) }}</p> - -<p>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:</p> - -<pre class="brush:html;"><img src="smileyface.jpg"></pre> - -<p>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 <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).</p> - -<p>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 <a href="http://thimble.webmaker.org/en-US/projects/wrangler/edit" title="http://thimble.webmaker.org/en-US/projects/wrangler/edit">Mozilla Thimble</a>, que es un editor online interactivo que enseña cómo escribir HTML. Además, en el <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> 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.</p> - -<h2 id="Elementos_—_los_bloques_básicos_de_construcción">Elementos — los bloques básicos de construcción</h2> - -<p>El HTML consiste en una serie de elementos. Los Elementos definen el significado <strong>semántico</strong> 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 <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> para ver una lista completa de todos los elementos.</p> - -<p>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.</p> - -<p>Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:</p> - -<pre class="brush:html;"><html> - <body> - - <p>Mi perro <em>odia</em> el pescado.</p> - - </body> -</html></pre> - -<p>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 <strong>DOM</strong>: siglas inglesas del Documento Objeto Modelo (<strong>Document Object Model)</strong>.</p> - -<h2 id="Etiquetas">Etiquetas</h2> - -<p>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 <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requiere de las minúsculas).</p> - -<p>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> - -<pre class="brush: xml"><p>Esto es texto dentro de un párrafo.</p> -</pre> - -<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 <strong>código válido</strong>.</p> - -<p>Esto es un ejemplo de <em>código válido</em>:</p> - -<pre class="brush: xml"><em>Me <strong>refiero</strong> a eso</em>. -</pre> - -<p>Esto es un ejemplo de <em>código inválido</em>:</p> - -<pre class="brush: xml">Invalido: <em>Me <strong>refiero</em> a eso</strong>.</pre> - -<p>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.</p> - -<div class="note"> -<p>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 <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">en todos los navegadores modernos</a>.</p> -</div> - -<p>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:</p> - -<pre class="brush: xml"><img src="smileyface.jpg"></pre> - -<p>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).</p> - -<pre class="brush: xml"><img src="smileyface.jpg" /></pre> - -<p>En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.</p> - -<h2 id="Atributos">Atributos</h2> - -<p>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 <strong>atributos</strong>. Los atributos suelen consistir en dor partes:</p> - -<ul> - <li>Un atributo <strong>nombre </strong>(name).</li> - <li>Un atributo <strong>valor</strong> (value).</li> -</ul> - -<p>Algunos atributos sólo pueden tener un único valor. Son atributos <strong>Booleanos</strong> 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:</p> - -<pre class="brush: xml"><input required="required"> - -<input required=""> - -<input required> -</pre> - -<p>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> - -<pre class="brush: xml"><p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)</pre> - -<p>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> - -<pre class="brush: xml"><p class="foo" bar=""></pre> - -<h2 id="Nombre_de_caracteres_referenciados">Nombre de caracteres referenciados</h2> - -<p>Los<strong> Caraceteres Referenciados </strong> (a veces llamados<em> entidades) </em>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:</p> - -<ul> - <li><code>&gt;</code> representa el carater mayor que (<code>></code>)</li> - <li><code>&lt;</code> representa el caracter menor que (<code><</code>)</li> - <li><code>&amp;</code> representa el caracter ampersand (<code>&</code>)</li> - <li><code>&quot;</code> representa el caracter de comillas dobles (")</li> -</ul> - -<p>Hay <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">muchas más entidades</a>, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.</p> - -<h2 id="Tipo_de_documento_y_comentarios">Tipo de documento y comentarios</h2> - -<p>Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración <strong>doctype</strong> en la primera línea. En el HTML actual esto se escribe del siguiente modo:</p> - -<pre class="brush: xml"><!DOCTYPE html></pre> - -<p>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 <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">peculiaridades</a>.)</p> - -<p>HTML tiene un mecanismo para poder introducir <strong>comentarios</strong> 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:</p> - -<pre class="brush: xml"><!-- Esto es un comentario de texto --></pre> - -<h2 id="Un_pequeño_documento_pero_completo">Un pequeño documento pero completo</h2> - -<p>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 <em>myfirstdoc.html</em> 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.</p> - -<pre class="brush: xml"><!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> -</pre> 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 ---- -<p>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.</p> - -<div class="note"> -<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> 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 <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p> -</div> - -<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2> - -<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> <body></code> y <code></body></code> 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.</p> - -<p>Entonces el siguiente marcado:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><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> -</pre> -</div> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat -</pre> - -<p>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,</p> - -<pre class="brush:xml"><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> -</pre> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat - 1.2 Costumbres -2. El oso -</pre> - -<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2> - -<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p> - -<ol> - <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> 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 <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, 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.</li> - <li>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.</li> - <li>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, <code><h1>Mozart</h1><h2>El genio salzburgués</h2></code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code><hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup></code> crea el esquema <code>1. Mozart</code>).</li> - <li>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.</li> - <li>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.</li> -</ol> - -<p>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.</p> - -<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2> - -<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3> - -<p>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")}}.</p> - -<div class="note"><strong>Nota: </strong>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 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div> - -<p>Ejemplo:</p> - -<pre class="brush:xml"><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></pre> - -<p>El bloque de HTML define dos secciones de alto nivel:</p> - -<pre><span style="color: red;"><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></span> - -<span style="color: green;"><footer> - <p>(c) 2010 The Example company -</footer></span></pre> - -<p>La primera sección tiene tres subsecciones:</p> - -<pre><section> - <h1>El pato</h1> - - <span style="color: red;"><section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section></span> - - <span style="color: green;"><section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section></span> - - <span style="color: blue;"><aside> - <p>Otros estudiosos del lobo - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company -</footer></pre> - -<p>Esto genera la siguiente estructura:</p> - -<pre>1. El pato - 1.1 Introducción - 1.2 Hábitat - 1.3 Section (aside) -</pre> - -<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3> - -<p>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.</p> - -<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. 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:</p> - -<pre class="brush:xml"><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></pre> - -<p>Genera el siguiente esquema:</p> - -<pre>1. La mosca - 1.1 Hábitat -2. El mosquito</pre> - -<p>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).</p> - -<h3 id="Seccionado_implícito">Seccionado implícito</h3> - -<p>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 <em>seccionado implícito</em>.</p> - -<p>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:</p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p> .... - - <h3 class="subsec-implicita">Hábitat</h3> - <p> ... -</section></pre> - -<p>Genera el siguiente esquema:</p> - -<pre><strong>1. El águila</strong> - <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante <h3>)</em> -</pre> - -<p>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: </p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p>... - <h1 class="secc-implicita">El buitre</h1> - <p>... -</section></pre> - -<p>genera el siguiente esquema: </p> - -<pre><strong>1. El águila</strong> -<strong>2. El buitre</strong> <em>(implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)</em> -</pre> - -<p>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:</p> - -<pre class="brush:xml"><body> - <h1>Colores</h1> - <h2>Rojo</h2> - <p> ... - <section> - <h3>Amarillo</h3> - <p> ... - <h3>Verde</h3> - <p> ... - <h2>Sabores</h2> - <p>... - </section> -</body></pre> - -<p>generando el siguiente esquema:</p> - -<pre><strong>1. Colores - 1.1 Rojo</strong> <em>(implícitamente con <code><h2></code> )</em> - <strong>1.2 Amarillo</strong><em>(explícitamente con <code><section> </code>)</em> - <strong>1.3 Verde</strong> <em>(impícitamente con <code><h3></code>, cerrando el <code><h3></code> previo)</em> -<strong>2. Sabores</strong> <em>(implícitamente con <h2>, cerrando el <section> previo)</em> -</pre> - -<p>É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</p> - -<ul> - <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li> - <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li> -</ul> - -<p>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.</p> - -<p>Una <strong>excepción</strong> 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 <strong>reutilizadas</strong> 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.</p> - -<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3> - -<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p> - -<ul> - <li>Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: - <pre class="brush:xml"><section> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> -</section></pre> - - <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p> - - <pre>1. La flauta mágica - 1.1 Ópera en dos actos del genio salzburgués -</pre> - </li> - <li>El encabezado secundario puede ser usado por una lista de etiquetas: - <pre class="brush:xml"><section> - <h1>Secciones y esquema del documento</h1> - <h2>HTML, HTML5, secciones, esquema</h2> -</section></pre> - - <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p> - - <pre>1. Secciones y esquema del documento - 1.1 HTML, HTML5, secciones, esquema</pre> - </li> -</ul> - -<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{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:</p> - -<pre class="brush:xml"><section> - <hgroup> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> - </hgroup> - ... algún contenido ... -</section> -</pre> - -<p>genera el siguiente esquema, que es el que se desea:</p> - -<pre>1. La flauta mágica</pre> - -<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3> - -<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p> - -<p>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")}}.<br> - Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p> - -<p>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.</p> - -<p>Ejemplo:</p> - -<pre class="brush: html"><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></pre> - -<p>Este ejemplo resulta en el siguiente esquema:</p> - -<pre>1. Bach - 1.1 Introducción - 1.2 La Pasión según s. Mateo</pre> - -<p>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.</p> - -<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3> - -<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p> - -<ol> - <li>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.</li> - <li>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.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2> - -<p>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.</p> - -<p>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")}}.</p> - -<p>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")}}.</p> - -<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2> - -<p>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 <code>display:inline</code> por defecto:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>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.<br> - <br> - 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:</p> - -<pre class="brush:xml"><!--[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]--></pre> - -<p>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.</p> - -<pre class="brush:xml"><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></pre> - -<p>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:</p> - -<pre class="brush:xml"><!--[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]--></pre> - -<h2 id="Conclusión">Conclusión</h2> - -<p>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.</p> 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: <command> -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsoleto -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Elemento/command ---- -<div>{{obsolete_header()}}</div> - -<div class="note"> -<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>El elemento <code>command</code> ha sido removido de </span>{{Gecko("24.0")}} en favor del elemento {{HTMLElement("menuitem")}} . Firefox nunca ha soportado este elemento <code>command , </code>y la implementación existente de la interface DOM {{domxref("HTMLCommandElement")}} ha sido removida de <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>.</p> -</div> - -<h2 id="Resumen_de_el_catalogo">Resumen de el catalogo</h2> - -<pre><command function="About live stream"></pre> - -<h3 class="brush: html" id="sect1"></h3> - -<h4 id="El_elemento_command_representa_un_comando_que_el_usuario_puede_invocar_.">El elemento <code>command </code>representa un comando que el usuario puede invocar .</h4> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> - <td>Contenido dinámico , contenido estático de texto, contenido de metadata .</td> - </tr> - <tr> - <th scope="row">Contenido permitido</th> - <td>Ninguno , es un {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Omisión de etiquetas</th> - <td>La etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . </td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos </th> - <td>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 .</td> - </tr> - <tr> - <th scope="row">Interface DOM </th> - <td>{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> - -<ul> - <li><code>command</code> o <code>empty</code> el cual es el estado por default e indica que este es un comando normal.</li> - <li><code>checkbox</code> indica que el comando puede ser alternado usando un checkbox.</li> - <li><code>radio</code> indica que el comando puede ser alternado usando un radiobutton.</li> -</ul> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo <code>type </code>sea <code>checkbox </code>o <code>radio.</code></dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Indica que el comando no está disponible .</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Proporciona una imagen que representa el comando.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>El nombre del comando como se muestra al usuario .</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>Este atributo proporciona el nombre del grupo de comandos , con un atributo <code>type </code>de<code> tipo radio ,</code>que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo <code>type </code>sea del tipo <code>radio .</code></dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :</dd> -</dl> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>{{ HTMLRef }}</p> 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: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Elemento/element ---- -<div class="note"> -<p><strong>Nota:</strong> Este elemento ha sido borrado de la especificación. Mira <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">esto</a> para obtener más información desde el editor de la espeficicación.</p> -</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El <strong>elemento <a href="/es/docs/Web/HTML">HTML</a> <code><element></code></strong> es utilizado para personalizar los elementos DOM.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Categorias_de_contenido">Categorias de contenido</a></th> - <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Modelo_de_contenido_transparente">Contenido transparente</a>.</td> - </tr> - <tr> - <th scope="row">Contenido Permitido</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Etiquetas omitidas</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Interfaz DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos" name="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> - -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> - -<p>El texto va aquí</p> - -<pre class="brush: html">Más texto va aquí. -</pre> - -<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> - -<p>El elemento <code><element></code> fue formulado en un borrador de la especificación de <a href="http://w3c.github.io/webcomponents/spec/custom/">elementos personalizados</a>, que se ha eliminado.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad dee navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver También" name="Ver También">Ver También</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> 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: <isindex> -slug: orphaned/Web/HTML/Element/isindex -tags: - - Deprecado - - Elemento - - HTML - - Referencia - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -<div>{{Deprecated_header}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p><code><isindex> </code>es un elemento HTML obsoleto que posiciona un campo de texto en una página para buscar en el documento . <code><isindex></code> fue pensado por el W3C para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .</p> - -<p><<font face="Consolas, Liberation Mono, Courier, monospace">isindex> </font>fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. </p> - -<h2 id="Atributos">Atributos </h2> - -<p>Como todos los otros elementos HTML , este elemento acepta los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> - -<dl> - <dt>{{htmlattrdef("prompt")}}</dt> - <dd>Este atributo añade su valor como una ventana para un campo de texto.</dd> - <dt>{{htmlattrdef("action")}}</dt> - <dd>Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .</dd> -</dl> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: html"><head> - <isindex prompt="Search Document... " /> -</head></pre> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("form")}}</li> -</ul> - -<p>{{HTMLRef}}</p> 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: <multicol> -slug: orphaned/Web/HTML/Element/multicol -tags: - - HTML -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -<div>{{non-standard_header}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El elemento HTML <code><multicol> </code>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 .</p> - -<div class="note"> -<p><strong>No usar esto ! </strong>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 <a href="/es/docs/Columnas_con_CSS-3">Column</a> ,</p> -</div> - -<p>Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <code><multicol> </code>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 .</p> - -<p> </p> 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 ---- -<p>Una etiqueta personalizada sencilla, es crear una plantilla de elementos.</p> - -<p>Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:</p> - -<h2 id="corazon.js" name="corazon.js">corazon.js</h2> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js">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</pre> - -<p>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.</p> - -<h2 id="index.html" name="index.html">index.html</h2> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<p><!DOCTYPE html><br> - <html><br> - <head><br> - <meta charset="utf-8"><br> - <title>Mi Etiqueta</title><br> - <script src="corazon.js" type="text/javascript"></script><br> - </head><br> - <body><br> - <corazon></corazon><br> - </body><br> - </html></p> - -<p> </p> 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 ---- -<p>Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.</p> - -<h2 id="Seg.C3.BAn_el_doctype" name="Seg.C3.BAn_el_doctype">Según el doctype</h2> - -<p>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.</p> - -<p>Los doctypes válidos en HTML 4.01 son tres:</p> - -<h3 id="Para_marcos" name="Para_marcos">Para marcos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" - "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos del html.</p> - -<h3 id="De_transici.C3.B3n" name="De_transici.C3.B3n">De transición</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" - "<a class="external" href="http://www.w3.org/TR/html4/loose.dtd" rel="freelink">http://www.w3.org/TR/html4/loose.dtd</a>"> -</pre> - -<p>Pueden usarse todos los elementos <strong>menos</strong> los especificos de marcos que son: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a></p> - -<h3 id="Estrictos" name="Estrictos">Estrictos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos <strong>menos</strong> los específicos de los marcos: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a> <a href="/es/docs/HTML/Elemento/menu">menu</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a> <a href="/es/docs/HTML/Elemento/u">u</a></p> - -<h2 id="Seg.C3.BAn_su_estructura" name="Seg.C3.BAn_su_estructura">Según su estructura</h2> - -<p>Se dividen en tres grupos: básicos, de cabecera y de cuerpo.</p> - -<h3 id="Los_elementos_b.C3.A1sicos" name="Los_elementos_b.C3.A1sicos">Los elementos básicos</h3> - -<p>Son los elemento que conforman la columna vertebral de un documento html:</p> - -<dl> - <dt>Para un documento normal</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/body">body</a></dd> -</dl> - -<dl> - <dt>para uno de marcos</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> <a href="/es/docs/HTML/Elemento/frame">frame</a></dd> -</dl> - -<h3 id="De_cabecera" name="De_cabecera">De cabecera</h3> - -<p>Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.</p> - -<dl> - <dt>Elementos de cabecera son</dt> - <dd> </dd> - <dd>El obligatorio: <a href="/es/docs/HTML/Elemento/title">title</a></dd> - <dd>Los opcionales: <a href="/es/docs/HTML/Elemento/base">base</a> <a href="/es/docs/HTML/Elemento/meta">meta</a> <a href="/es/docs/HTML/Elemento/link">link</a></dd> - <dd>Los mixtos: <a href="/es/docs/HTML/Elemento/style">style</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/object">object</a> y el transicional: <a href="/es/docs/HTML/Elemento/isindex">isindex</a>. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.</dd> -</dl> - -<h3 id="De_cuerpo" name="De_cuerpo">De cuerpo</h3> - -<p>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.</p> - -<h4 id="En_bloque" name="En_bloque">En bloque</h4> - -<dl> - <dt>Elementos en bloque son</dt> - <dd> </dd> - <dd><a href="/es/docs/HTML/Elemento/p">p</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> <a href="/es/docs/HTML/Elemento/div">div</a> <a href="/es/docs/HTML/Elemento/address">address</a> <a href="/es/docs/HTML/Elemento/hr">hr</a> <a href="/es/docs/HTML/Elemento/blockquote">blockquote</a> <a href="/es/docs/HTML/Elemento/form">form</a> <a href="/es/docs/HTML/Elemento/table">table</a> <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a> <a href="/es/docs/HTML/Elemento/pre">pre</a> <a href="/es/docs/HTML/Elemento/noscript">noscript</a> <a href="/es/docs/HTML/Elemento/noframes">noframes</a> Y los transicionales: <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a></dd> - <dd>Los elementos de encabezados: <a href="/es/docs/HTML/Elemento/h1">h1</a> <a href="/es/docs/HTML/Elemento/h2">h2</a> <a href="/es/docs/HTML/Elemento/h3">h3</a> <a href="/es/docs/HTML/Elemento/h4">h4</a> <a href="/es/docs/HTML/Elemento/h5">h5</a> <a href="/es/docs/HTML/Elemento/h6">h6</a></dd> - <dd>los elementos para listas: <a href="/es/docs/HTML/Elemento/ul">ul</a> y <a href="/es/docs/HTML/Elemento/ol">ol</a>. Y los transicionales: <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/menu">menu</a></dd> -</dl> - -<h4 id="En_l.C3.ADnea" name="En_l.C3.ADnea">En línea</h4> - -<dl> - <dt>Elementos en línea son</dt> - <dd> </dd> - <dd>Los elementos de frase: <a href="/es/docs/HTML/Elemento/abbr">abbr</a> <a href="/es/docs/HTML/Elemento/acronym">acronym</a> <a href="/es/docs/HTML/Elemento/cite">cite</a> <a href="/es/docs/HTML/Elemento/code">code</a> <a href="/es/docs/HTML/Elemento/em">em</a> <a href="/es/docs/HTML/Elemento/strong">strong</a> <a href="/es/docs/HTML/Elemento/dfn">dfn</a> <a href="/es/docs/HTML/Elemento/kbd">kbd</a> <a href="/es/docs/HTML/Elemento/samp">samp</a> <a href="/es/docs/HTML/Elemento/var">var</a></dd> - <dd>Los elementos de estilo de fuente: <a href="/es/docs/HTML/Elemento/b">b</a> <a href="/es/docs/HTML/Elemento/big">big</a> <a href="/es/docs/HTML/Elemento/i">i</a> <a href="/es/docs/HTML/Elemento/small">small</a> <a href="/es/docs/HTML/Elemento/tt">tt</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/u">u</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a></dd> - <dd>Los elementos especiales: <a href="/es/docs/HTML/Elemento/a">a</a> <a href="/es/docs/HTML/Elemento/bdo">bdo</a> <a href="/es/docs/HTML/Elemento/br">br</a> <a href="/es/docs/HTML/Elemento/img">img</a> <a href="/es/docs/HTML/Elemento/map">map</a> <a href="/es/docs/HTML/Elemento/object">object</a> <a href="/es/docs/HTML/Elemento/q">q</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/span">span</a> <a href="/es/docs/HTML/Elemento/sub">sub</a> <a href="/es/docs/HTML/Elemento/sup">sup</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/iframe">iframe</a></dd> - <dd>Los elementos de controles de formulario: <a href="/es/docs/HTML/Elemento/button">button</a> <a href="/es/docs/HTML/Elemento/input">input</a> <a href="/es/docs/HTML/Elemento/label">label</a> <a href="/es/docs/HTML/Elemento/select">select</a> <a href="/es/docs/HTML/Elemento/textarea">textarea</a></dd> -</dl> - -<h4 id="Ni_en_bloque_ni_en_l.C3.ADnea" name="Ni_en_bloque_ni_en_l.C3.ADnea">Ni en bloque ni en línea</h4> - -<p>Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.</p> - -<dl> - <dt>Elementos subordinados son</dt> - <dd> </dd> - <dd>Subordinados a table: <a href="/es/docs/HTML/Elemento/caption">caption</a> <a href="/es/docs/HTML/Elemento/tr">tr</a> <a href="/es/docs/HTML/Elemento/th">th</a> <a href="/es/docs/HTML/Elemento/td">td</a> <a href="/es/docs/HTML/Elemento/thead">thead</a> <a href="/es/docs/HTML/Elemento/tbody">tbody</a> <a href="/es/docs/HTML/Elemento/tfoot">tfoot</a> <a href="/es/docs/HTML/Elemento/col">col</a> <a href="/es/docs/HTML/Elemento/colgroup">colgroup</a></dd> - <dd>Subordinados de listas: <a href="/es/docs/HTML/Elemento/li">li</a> <a href="/es/docs/HTML/Elemento/dd">dd</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> Subordinados a select son: <a href="/es/docs/HTML/Elemento/optgroup">optgroup</a> <a href="/es/docs/HTML/Elemento/option">option</a></dd> - <dd>Por último, <a href="/es/docs/HTML/Elemento/area">area</a> subordinado a map. <a href="/es/docs/HTML/Elemento/param">param</a> subordinado a object. y <a href="/es/docs/HTML/Elemento/legend">legend</a> subordinado a fieldset.</dd> -</dl> - -<h4 id="En_bloque_y_en_l.C3.ADnea" name="En_bloque_y_en_l.C3.ADnea">En bloque y en línea</h4> - -<p>Los elementos <a href="/es/docs/HTML/Elemento/ins">ins</a> y <a href="/es/docs/HTML/Elemento/del">del</a> pueden ser elementos en línea o en bloque según convenga.</p> - -<h2 id="Seg.C3.BAn_su_funci.C3.B3n" name="Seg.C3.BAn_su_funci.C3.B3n">Según su función</h2> - - -<div class="note"> -<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p> - -<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>Cómo ayudar</a>.</p> -</div> 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 ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p>El atributo global <strong>dropzone </strong>es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la <a href="/es/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a> . Pueden tener los siguientes valores :</p> - -<ul> - <li>copy , indica que el soltado creará una copia del elemento que fue arrastrado .</li> - <li>move , indica que el elemento que fue arrastrado será movido a su nueva localización .</li> - <li>link, indica que creara un link para el dato arrastrado.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterísitica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Cataracterística</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también </h2> - -<ul> - <li>Tos los atributos globales </li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>La propiedad <strong><code>Array.prototype</code></strong> representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.</p> - -<pre class="brush: js">// 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]; - } -} -</pre> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Las instancias {{jsxref("Array")}} heredan de <code>Array.prototype</code>. 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 <code>Array</code>. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.</p> - -<p>Un hecho poco conocido: <code>Array.prototype</code> en sí es un {{jsxref("Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">Propiedades</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Especifica la función que crea el prototipo de un objeto.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Refleja el número de elementos en un array.</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd>Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> -</dl> - -<h2 id="Methods" name="Methods">Métodos</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Métodos de mutación</h3> - -<p>Estos métodos modifican el array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>Copia una secuencia de elementos dentro del array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Elimina el último elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Elimina el primer elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Ordena los elementos de un array y devuelve el array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Añade o elimina elementos de un array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Métodos de consulta</h3> - -<p>Estos métodos no modifican el array y devuelven alguna representación del array.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>Determina si un array contiene cierto elemento, devolviendo <code>true</code> o <code>false</code> apropiadamente.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Une todos los elementos de un array en una cadena de texto.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Extrae una sección de un array y devuelve un nuevo array.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteración</h3> - -<p>Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (<code style="font-style: normal;">length</code>) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (<span style="font-family: consolas,monaco,andale mono,monospace;">callback</span>) 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.</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o <code>undefined</code> si no se halla ninguno.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>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.</dd> -</dl> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Llama a una función para cada elemento del array.</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos (no estándar)</h3> - -<p>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 (<code style="font-style: normal;">length</code>), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación <code><span style="font-family: consolas,monaco,andale mono,monospace;">array[5]</span></code>). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la <code>longitud</code> 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 <code>longitud</code> 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.</p> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<p> </p> - -<table> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Se agregaron los métodos <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Se agregó el método <code>includes()</code>.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> - -<div>{{Compat("javascript.builtins.Array.prototype")}}</div> - -<div id="compat-mobile"> </div> - -<h2 id="See_also" name="See_also">Ver también</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>clear()</strong></code> elimina todos los elementos de un objeto <code>Map.</code></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_clear">Usando el método <code>clear</code></h3> - -<pre class="brush: js">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 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>38</td> - <td>{{CompatGeckoDesktop("19.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>delete()</strong></code> elimina el elemento especificado de un objeto <code>Map.</code></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: js">myMap.delete(clave);</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt>clave</dt> - <dd>Requerido. La clave del elemento a eliminar del objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Retorna <code>true</code> si el elemento existe en el objeto <code>Map</code> objecty fue eliminado, o <code>false</code> si el elemento no existe.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3> - -<pre class="brush: js">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. -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <code><strong>Iterator</strong></code> que contiene los pares <code>[clave, valor]</code> para cada elemento en el objeto <code>Map</code> en orden de inserción.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_entries()">Usando <code>entries()</code></h3> - -<pre class="brush:js">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"] -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("20") }}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>forEach()</strong></code> ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Función ejecutada en cada elemento.</dd> - <dt><code>thisArg</code></dt> - <dd>Valor a usar por la funcion <code>callback</code>.</dd> -</dl> - -<h3 id="Valor_de_Retorno">Valor de Retorno</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>El método <code>forEach</code> ejecuta la devolución de llamada (<code>callback</code>) 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 (<code>undefined</code>).</p> - -<p>La función (<code>callback</code>) es invocada con <strong>3 argumentos</strong>:</p> - -<ul> - <li><strong>valor del elemento</strong></li> - <li><strong>clave del elemento</strong></li> - <li><strong>El objeto utilizado</strong></li> -</ul> - -<p>Si se provee un parámetro <code>thisArg</code> al método <code>forEach</code>, pasará al <code>callback</code> cuando sea invocado, para ser utilizado como su valor <code>this</code>. De otra manera, el valor <code>undefined</code> pasará para ser usado como su valor <code>this</code>. El valor <code>this</code> finalmente observable por el <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">las reglas usuales para determinar la visibilidad de <code>this</code> por una función</a>.</p> - -<p>Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el <code>forEach</code> haya terminado. <code>callback</code> no es invocado para valores eliminados antes de que sean usados. </p> - -<p>El método <code>forEach</code> ejecuta la función <code>callback</code> una vez para cada elemento en el objeto <code>Map</code>; No se retornan valores.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Imprimiendo_el_contenido_de_un_objeto_Map">Imprimiendo el contenido de un objeto <code>Map</code></h3> - -<p>El siguiente código imprime una línea por cada elemento en el objeto <code>Map</code>:</p> - -<pre class="brush:js">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" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición Inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.forEach")}}</p> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>get()</strong></code> devuelve un elemento específico de un objeto <code>Map</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> - -<p class="hidden">El código fuente de este ejemplo se escuentra en un repositorio de GitHub. Si quieres contribuir al projecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud de pull request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>miMapa</em>.get(clave);</code></pre> - -<h3 id="Parametros">Parametros</h3> - -<dl> - <dt>clave</dt> - <dd>Requerido. La clave del elemento del objeto <code>Map</code> que queremos obtener.</dd> -</dl> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Devuelve el elemento asociado a la clave indicada o <code>undefined</code> si la clave no ha sido encontrada en el objeto <code>Map</code>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_get">Usando el método <code>get</code></h3> - -<pre class="brush: js">var miMapa = new Map(); -miMapa.set('bar', 'foo'); - -miMapa.get('bar'); // Devuelve "foo". -miMapa.get('baz'); // Devuelve undefined. -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>has()</strong></code> devuelve un booleano indicando si el elemento con la llave especificada existe o no.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><var>myMap</var>.has(<var>key</var>)</pre> - -<h3 id="Parameteros">Parameteros</h3> - -<dl> - <dt><code><var>key</var></code></dt> - <dd>La llave del elemento a probar si esta presente en el objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p><code>true</code> si el elemento con la llave especificada existe en el objeto <code>Map</code>; de lo contrario <code>false</code>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_has">Usando <code>has()</code></h3> - -<pre class="brush: js notranslate">let myMap = new Map() -myMap.set('bar', "foo") - -myMap.has('bar') // returns true -myMap.has('baz') // returns false -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map.has")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> 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 ---- -<div>{{JSRef("Global_Objects", "Map")}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El objeto <strong><code>Map</code></strong> almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox"><code>new Map([iterable]) -</code></pre> - -<h3 id="Parameters" name="Parameters">Parámetros</h3> - -<dl> - <dt><code>iterable</code></dt> - <dd>Iterable es un array o cualquier otro objeto <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle <code>for..of</code> devolverá un array de <code>[clave, valor]</code> en cada iteración.</p> - -<p>Cabe destacar que un <strong>Map </strong>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.</p> - -<h3 id="Igualdad_de_claves">Igualdad de claves</h3> - -<p>La igualdad de claves esta basada en el algoritmo "SameValueZero": <code>NaN</code> es considerado lo mismo que <code>NaN </code>(sin importar que <code>NaN !== NaN</code>) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 <code>-0</code> y <code>+0</code> eran considarados distintos (even though <code>-0 === +0</code>), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> - -<h3 id="Objetos_y_mapas_comparados">Objetos y mapas comparados</h3> - -<p>Los {{jsxref("Object", "Objetos")}} son similares a los <code>Maps</code> 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 <code>Objects</code> han sido usados históricamente como <code>Maps</code>; no obstante, hay diferencias importantes entre <code>Objects</code> y <code>Maps</code> que hacen mejor usar un <code>Map</code> en la mayoría de casos.</p> - -<ul> - <li>Las claves de un <code>Object</code> son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un <code>Map</code> pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.</li> - <li>Puedes saber facilmente el tamaño de un <code>Map</code> usando la propiedad <code>size</code>, mientras que le número de propiedades en un <code>Object</code> tiene que ser deternminado manualmente.</li> - <li>Un <code>Map</code> es un <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un <code>Object</code> necesitamos obtener primero las claves de alguna forma para después iterar sobre el.</li> - <li>Un <code>Object</code> 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 <code>mapa = Object.create(null)</code>, pero esto raramente se hace.</li> -</ul> - -<h2 id="Properties" name="Properties">Propiedades</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>El valor de la propiedad de longitud es 0</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>La función constructor que se usa para crear objetos derivados.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd>Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos <code>Map</code>.</dd> -</dl> - -<h2 id="Boolean_instances" name="Boolean_instances">Instancias de Map</h2> - -<p>Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.</p> - -<h3 id="Propiedades">Propiedades</h3> - -<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}</p> - -<h3 id="Métodos">Métodos</h3> - -<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_Usando_el_objeto_Map">Ejemplo: Usando el objeto Map</h3> - -<pre class="brush: js">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 () {} -</pre> - -<h3 id="Ejemplo_Usando_NaN_como_claves_de_Map">Ejemplo: Usando <code>NaN</code> como claves de Map</h3> - -<p><code>NaN</code> también puede ser usado como una clave. Aún cuando cada clave <code>NaN</code> no es igual a sí misma (<code>NaN !== NaN</code> es verdadera), el siguiente ejemplo funciona, porque las claves NaNs <code>NaN</code>s no son distinguibles unas de otras:</p> - -<pre class="brush: js">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" -</pre> - -<h3 id="Ejemplo_Iterando_Map_con_for..of">Ejemplo: Iterando <code>Map</code> con <code>for..of</code></h3> - -<p>Los Map pueden ser iterados usando un bucle <code>for..of</code>:</p> - -<pre class="brush: js">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" -</pre> - -<h3 id="Iterando_Maps_usando_forEach()">Iterando <code>Maps</code> usando <code>forEach()</code></h3> - -<p>Los Map pueden ser iterados usando el método <code>forEach()</code>:</p> - -<pre><code>miMapa.forEach(function(valor, clave) { - console.log(clave + ' = ' + valor); -}); -// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"</code></pre> - -<h3 id="Ejemplo_Relación_con_los_objetos_Array">Ejemplo: Relación con los objetos <code>Array</code></h3> - -<pre class="brush: js">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"] -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - -<p> </p> - -<div class="hidden"> -<p>La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, pro favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</p> -</div> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<p> </p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El metodo <code><strong>keys()</strong></code> returna un nuevo objeto <code><strong>Iterator</strong></code> que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_keys()">Usando <code>keys()</code></h3> - -<pre class="brush:js">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 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("20")}}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <strong>set()</strong> agrega un nuevo elemento al objeto Map con la llave y el valor especificado.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(llave, valor);</code></pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt>llave</dt> - <dd>Requerido. La llave del elemento a agregar al objeto Map.</dd> - <dt>valor</dt> - <dd>Requerido. El valor del elemento a agregar al objeto Map.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>El objeto Map.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_set">Usando el método set</h3> - -<pre class="brush: js">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"); -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterítica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterítica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> - -<ul> - <li>En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, <code>Map.prototype.set</code> retorna <code>undefined</code> y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li> -</ul> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>La propiedad evaluada <code><strong>size</strong></code> retorna el número de elementos en un objeto {{jsxref("Map")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>El valor de <code>size</code> es un entero representando cuántas entradas tiene el objeto <code>Map</code>. No hay definida una función de evalador set para <code>size</code>; uted no puede cambiar esta propiedad.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_size">Usando <code>size</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("a", "alpha"); -myMap.set("b", "beta"); -myMap.set("g", "gamma"); - -myMap.size // 3 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibildad_entre_navegadores">Compatibildad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("19") }}</td> - <td>{{ CompatIE("11") }}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> - -<ul> - <li>Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método <strong><code>Map.prototype.size()</code></strong>, esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).</li> -</ul> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>values()</strong></code> devuelve un nuevo objeto <strong><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterador</a></strong> que contiene los valores para cada elemento en el objeto <code>Map</code> en el mismo orden de inserción.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Un nuevo objeto iterador {{jsxref("Map")}}.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Utilizando_values()">Utilizando <code>values()</code></h3> - -<pre class="brush:js">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"</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.values")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>El operador experimental pipeline <code>|></code> (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:</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>La llamada equivalente en sintaxis tradicional tiene este aspecto:</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>expression</em> |> <em>function</em> -</pre> - -<p>El valor especificado en la <code>expression</code> se pasa dentro de la <code>function</code> como su único parámetro.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Encadenando_llamadas_a_funciones">Encadenando llamadas a funciones</h3> - -<p>El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.</p> - -<pre class="brush: js">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 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Borrador del operador Pipeline</a></td> - <td>Fase 1</td> - <td>Todavía no forma parte de la especificación ECMAScript</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> - <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> -</ul> 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 ---- -<p><span class="seoSummary">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 <a href="/en-US/docs/Web/WebGL">WebGL</a> y <a href="/en-US/docs/Web_Audio_API">Web Audio</a>.</span></p> - -<p>Cada interfaz individual a lo largo de todas las APIs se encuentra listada en el <a href="/en-US/docs/Web/API">índice.</a></p> - -<p>También hay un <a href="/en-US/docs/Web/Reference/Events">listado de todos los eventos disponibles</a> en la referencia de eventos.</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/DOM">Modelo de Objetos del Documento (DOM)</a></dt> - <dd>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.</dd> - <dt>API de Dispositivos</dt> - <dd>Este conjunto de APIs permiten acceder a varias funciones de hardware disponibles para páginas Web y aplicaciones. Por ejemplo, <a href="/en-US/docs/WebAPI/Using_Light_Events">API de Sensor Luz Ambiental</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de Estado de Batería</a>, <a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de Bloqueo de Puntero</a>, <a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de Proximidad</a>, <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Dispositivo</a>, <a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Pantalla</a>, <a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a>.</dd> - <dt>API de Comunicación</dt> - <dd>Estas APIs le permiten a páginas Web y aplicaciones comunicarse con otras páginas o dispositivos. Por ejemplo, <a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de Información de Red</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notificaciones Web</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">API de Push Simple</a>.</dd> - <dt id="Data_management_APIs">API de gestión de datos</dt> - <dd>Los datos de los usuarios pueden ser almacenados y gestionados usando este conjunto de APIs. Por ejemplo, <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> -</dl> - -<p>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.</p> - -<dl> - <dt>API Privilegiadas</dt> - <dd>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: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">API de Contactos</a>, <a href="/en-US/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">API de Almacenamiento de Dispositivos</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">API de Navegador</a>,</dd> - <dt>API Certificadas</dt> - <dd>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 <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Actividades Web</a>. Entre las APIs Certificadas se incluyen:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> API Bluetooth</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de Conexión Móvil</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de Estadísticas de Red</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de Información WíFi</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de Administración de Energía</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de Ajustes</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">API de Inactividad</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de Permisos</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de Hora/Reloj</a>.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Comunidad" id="Comunidad">Comunidad</h2> - -<p>Únete a la comunidad de API Web en nuestra lista de correos o grupo de noticias:</p> - -<ul> - <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">Como Lista de Correo</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">Como Grupo de Noticias</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Como Grupo Google</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Como Feed de Noticias en la Wéb</a></li> -</ul> - -<p>También, asegúrate de unirte a la discusión en vivo en el canal <a href="irc://irc.mozilla.org/webapi">#webapi</a> de <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<h2 class="Related_Topics" id="Temas_Relacionados">Temas Relacionados</h2> - -<p>Los siguientes temas podrían ser de interés:</p> - -<ul> - <li><a href="/en-US/docs/Web/API">Índice de todas las interfaces API Web</a></li> -</ul> -</div> -</div> - -<p> </p> 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 ---- -<p>La Web abierta (<em>open Web)</em> se construye usando diversas tecnologías. A continuación encontrará enlaces a nuestro material de referencia para cada una de ellas.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tecnologias_Web_Fundamentales">Tecnologias Web Fundamentales</h2> - -<h3 id="Basicas">Basicas</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/HTML">HTML</a></dt> - <dd>El Lenguaje de Marcado para Hipertextos (<em>HyperText Markup Language</em>) es usado para describir y definir el contenido de una página Web en un formato bien estructurado.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></dt> - <dd>Las Hojas de Estilo en Cascada (<em>Cascading Style Sheets</em>) se usan para describir la apariencia del contenido Web.</dd> -</dl> - -<h3 id="Código">Código</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/JavaScript">JavaScript</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/Reference/API">Web APIs</a></dt> - <dd>Material de referencia para cada una de las APIs que constituyen las poderosas posiblidades de programación del Web, incluyendo el <a href="https://developer.mozilla.org/es/docs/DOM">DOM</a> y todas las APIs e interfaces que puedes usar para desarrollar contenidos Web y aplicaciones. - <ul> - <li><a href="https://developer.mozilla.org/es/docs/Web/API" title="/en-US/docs/Web/API">Referencia a la interfaz API del WEB</a> - todas las interfaces, ordenandas alfabetícamente.</li> - <li>La página <a href="https://developer.mozilla.org/es/docs/WebAPI">WebAPI</a> lista APIs para acceso a dispositivos y otras APIs utiles para aplicaciones.</li> - </ul> - </dd> -</dl> - -<h3 id="Gráficos">Gráficos</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/SVG">SVG</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>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 <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/canvas" title="Editorial review completed."><code><canvas></code></a> de HTML.</dd> -</dl> - -<h3 id="Otras">Otras</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/MathML">MathML</a></dt> - <dd>El Lenguaje de Marcado Matemático (<em>Mathematical Markup Language</em>) hace posible presentar ecuaciones complejas.</dd> -</dl> -</div> -</div> 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 ---- -<p> -<a href="es/Firefox_1.5">Firefox 1.5</a> marca la publicación del primer navegador de Mozilla que soporta el formato de <a class="external" href="http://www.w3.org/Graphics/SVG/">gráficos vectoriales escalables (SVG)</a>. 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. </p><p>Firefox SVG es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, 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. -</p><p>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. -</p><p>Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">mapa de ruta actual</a> 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 <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a> las últimas evoluciones, y si lo desea puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. -</p><p><br> -</p> -<h2 id="Performance" name="Performance"> Performance </h2> -<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, 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. -</p><p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. -</p> -<h2 id="Coordinate_range" name="Coordinate_range"> Coordinate range </h2> -<p>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. -</p> -<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98"> Texto en Windows 98 </h2> -<p>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á. -</p> -<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente"> Selección de fuente </h2> -<p>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. -</p> -<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n"> Impresión </h2> -<p>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. -</p><p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. -</p> -<h2 id="Opacidad_de_grupo" name="Opacidad_de_grupo"> Opacidad de grupo </h2> -<p>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. -</p><p>Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> -</p> -<h2 id="Stroking_fonts" name="Stroking_fonts"> Stroking fonts </h2> -<p>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: -</p><p><br> -<img alt="Imagen:Text-fill-stroke.png"> -</p> -<h2 id=".3Cimage.3E" name=".3Cimage.3E"> <image> </h2> -<p><image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. -</p><p>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. -</p><p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. -</p> -<h2 id="Eventos" name="Eventos"> Eventos </h2> -<p>Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". -</p><p>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. -</p><p>No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). -</p> -<h2 id="Interoperabilidad" name="Interoperabilidad"> Interoperabilidad </h2> -<p>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 <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> Jonathan Watt's explica los problemas comunes. -</p> -<h2 id="Situaciones_del_uso" name="Situaciones_del_uso"> Situaciones del uso </h2> -<p>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. -</p> -<h2 id="Animaci.C3.B3n" name="Animaci.C3.B3n"> Animación </h2> -<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. -</p> -<h2 id="Elementos.2C_estado_de_la_implementaci.C3.B3n" name="Elementos.2C_estado_de_la_implementaci.C3.B3n"> Elementos, estado de la implementación </h2> <table style="margin: 5px;"> <tbody><tr> <th><b>Elemento</b></th> <th><b>Notas</b></th> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo Estructura</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> <td> <ul> <li>Implementado. </li><li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface. </li><li>SVGSVGElement <ul> <li> Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView </li> <li> Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> <td> <ul> <li>Implementado. </li><li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>). </li><li>Doesn't completely follow <svg:use> cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>). </li><li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> <td> <ul> <li>Implementado. </li><li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> <td> <ul> <li>Implementado.</li> <li>SVGPathElement Interfaz <ul> <li> Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList </li> <li> Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength </li> </ul> </li> <li>SVGPathSegList Interface <ul> <li>Bindings no implementados: replaceItem()</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> <td> <ul> <li>SImplementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo Texto</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> <td> <ul> <li>Implementado. </li><li>SVGTextElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> <li> Bindings not functional at <code>onload</code> time: getExtentOfChar </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> <td> <ul> <li>Implementado. </li><li>SVGTSpanElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo Marker</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Módulo Color-Profile</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo Gradientes</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo Pattern</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo Clip</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> <td> <ul> <li>Implementado. </li><li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo Mask</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo Filtro</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo Cursor</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulo hiperenlace</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> <td> <ul> <li>Implementado en un binding XBL - object no es del tipo SVGAElement.</li> <li>Solo están implementados los atributos <code>xlink:href</code> y <code>xlink:show</code> </li> <li>Sobre el atributo <code>target</code> vea <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=300868">bug 300868</a></li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo visión</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo Script</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo Animación</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo Fuentes</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo Extensibilidad</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> <td> <ul> <li>Implementado, but not built. </li></ul> </td> </tr> </tbody></table> -{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }} |