From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../web/api/canvas_api/tutorial/index.html | 162 +++++ .../web/api/crypto/getrandomvalues/index.html | 111 ++++ .../web/api/document_object_model/index.html | 24 + .../index.html | 22 + .../index.html | 87 +++ .../index.html | 76 +++ .../es/conflicting/web/api/geolocation/index.html | 107 +++ .../web/api/html_drag_and_drop_api/index.html | 11 + files/es/conflicting/web/api/index.html | 80 +++ .../conflicting/web/api/indexeddb_api/index.html | 145 +++++ files/es/conflicting/web/api/node/index.html | 34 + files/es/conflicting/web/api/push_api/index.html | 433 ++++++++++++ files/es/conflicting/web/api/url/index.html | 102 +++ .../conflicting/web/api/web_storage_api/index.html | 303 +++++++++ files/es/conflicting/web/api/webrtc_api/index.html | 78 +++ .../conflicting/web/api/websockets_api/index.html | 37 ++ .../web/api/window/localstorage/index.html | 136 ++++ .../web/api/windoworworkerglobalscope/index.html | 109 ++++ .../index.html | 119 ++++ .../index.html | 144 ++++ files/es/conflicting/web/css/@viewport/index.html | 126 ++++ .../index.html | 123 ++++ .../web/css/_colon_placeholder-shown/index.html | 123 ++++ .../index.html | 112 ++++ .../web/css/_doublecolon_placeholder/index.html | 109 ++++ .../index.html | 86 +++ .../basic_concepts_of_flexbox/index.html | 376 +++++++++++ .../typical_use_cases_of_flexbox/index.html | 191 ++++++ files/es/conflicting/web/css/cursor/index.html | 11 + .../es/conflicting/web/css/font-variant/index.html | 11 + files/es/conflicting/web/css/width/index.html | 50 ++ files/es/conflicting/web/guide/index.html | 60 ++ files/es/conflicting/web/guide/mobile/index.html | 18 + files/es/conflicting/web/html/element/index.html | 599 +++++++++++++++++ .../web/html/global_attributes/index.html | 27 + .../html/global_attributes/spellcheck/index.html | 73 +++ .../web/http/basics_of_http/mime_types/index.html | 47 ++ files/es/conflicting/web/http/csp/index.html | 39 ++ .../index.html | 57 ++ .../headers/content-security-policy/index.html | 709 ++++++++++++++++++++ .../global_objects/arraybuffer/index.html | 69 ++ .../reference/global_objects/date/index.html | 201 ++++++ .../reference/global_objects/error/index.html | 154 +++++ .../reference/global_objects/function/index.html | 65 ++ .../reference/global_objects/map/index.html | 135 ++++ .../reference/global_objects/number/index.html | 16 + .../reference/global_objects/object/index.html | 195 ++++++ .../reference/global_objects/promise/index.html | 69 ++ .../reference/global_objects/rangeerror/index.html | 131 ++++ .../reference/global_objects/string/index.html | 118 ++++ .../global_objects/syntaxerror/index.html | 133 ++++ .../reference/global_objects/weakmap/index.html | 143 ++++ .../reference/lexical_grammar/index.html | 99 +++ .../web/javascript/reference/operators/index.html | 315 +++++++++ .../reference/operators/spread_syntax/index.html | 220 +++++++ .../index.html | 262 ++++++++ .../index.html | 722 +++++++++++++++++++++ .../index.html | 462 +++++++++++++ .../index.html | 296 +++++++++ .../reference/statements/switch/index.html | 121 ++++ files/es/conflicting/web/media/formats/index.html | 281 ++++++++ files/es/conflicting/web/opensearch/index.html | 54 ++ .../web/progressive_web_apps/index.html | 45 ++ .../progressive_web_apps/introduction/index.html | 63 ++ .../using_custom_elements/index.html | 182 ++++++ 65 files changed, 9818 insertions(+) create mode 100644 files/es/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/es/conflicting/web/api/crypto/getrandomvalues/index.html create mode 100644 files/es/conflicting/web/api/document_object_model/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html create mode 100644 files/es/conflicting/web/api/geolocation/index.html create mode 100644 files/es/conflicting/web/api/html_drag_and_drop_api/index.html create mode 100644 files/es/conflicting/web/api/index.html create mode 100644 files/es/conflicting/web/api/indexeddb_api/index.html create mode 100644 files/es/conflicting/web/api/node/index.html create mode 100644 files/es/conflicting/web/api/push_api/index.html create mode 100644 files/es/conflicting/web/api/url/index.html create mode 100644 files/es/conflicting/web/api/web_storage_api/index.html create mode 100644 files/es/conflicting/web/api/webrtc_api/index.html create mode 100644 files/es/conflicting/web/api/websockets_api/index.html create mode 100644 files/es/conflicting/web/api/window/localstorage/index.html create mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html create mode 100644 files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html create mode 100644 files/es/conflicting/web/css/@viewport/index.html create mode 100644 files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html create mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown/index.html create mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html create mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder/index.html create mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html create mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/es/conflicting/web/css/cursor/index.html create mode 100644 files/es/conflicting/web/css/font-variant/index.html create mode 100644 files/es/conflicting/web/css/width/index.html create mode 100644 files/es/conflicting/web/guide/index.html create mode 100644 files/es/conflicting/web/guide/mobile/index.html create mode 100644 files/es/conflicting/web/html/element/index.html create mode 100644 files/es/conflicting/web/html/global_attributes/index.html create mode 100644 files/es/conflicting/web/html/global_attributes/spellcheck/index.html create mode 100644 files/es/conflicting/web/http/basics_of_http/mime_types/index.html create mode 100644 files/es/conflicting/web/http/csp/index.html create mode 100644 files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html create mode 100644 files/es/conflicting/web/http/headers/content-security-policy/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/es/conflicting/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html create mode 100644 files/es/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/es/conflicting/web/media/formats/index.html create mode 100644 files/es/conflicting/web/opensearch/index.html create mode 100644 files/es/conflicting/web/progressive_web_apps/index.html create mode 100644 files/es/conflicting/web/progressive_web_apps/introduction/index.html create mode 100644 files/es/conflicting/web/web_components/using_custom_elements/index.html (limited to 'files/es/conflicting/web') diff --git a/files/es/conflicting/web/api/canvas_api/tutorial/index.html b/files/es/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..7271aabfb7 --- /dev/null +++ b/files/es/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,162 @@ +--- +title: Dibujando gráficos con canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +
+

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

+
+

Introduction

+

Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables.   <canvas> está basado en la especificación de canvas WHATWG, la que a su vez está basada en el <canvas> de Apple, implementado en Safari.   Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.

+

La etiqueta <canvas> crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado.   Nos enfocaremos en la representación del contexto 2D   Para gráficos 3D, podrías usar la representación del contexto WebGL

+

El contexto de representación 2D

+

Un ejemplo sencillo

+

Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ +

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

+

La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D.   El objeto ctx puede entonces actualmente ser renderizado para el canvas   El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect   El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.

+

El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo.   Para representar formas más complejas, se usan trayectorias.  

+

Usando trayectorias

+

La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo.   La trayectoria puede ser cerrada usando closePath   Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+
+ +

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

+

Llamando fill() o stroke() causa que el trazo sea usado.   Para ser llenado o juntado otra vez, el trazo debe ser recreado.

+

Estado de gráficos

+

Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos   El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.

+

Un ejemplo más complicado

+

Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación.   Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual.   Todos los puntos renderizados son primero transformados por esta matriz.

+
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "yellow";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ +

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

+

Esto define dos métodos, lazo y punto, que son llamados 4 veces.   Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo.   el punto presenta un pequeño cuadrado negro centrado a (0,0).   Ese punto se mueve alrededor de la matriz de transformación.   El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.

+

Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original.   Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().

+

Compatibilidad con Apple <canvas>

+

En su mayor parte, <canvas> es compatible con Apple y otras implementaciones.   Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.

+

Etiqueta </canvas> requerida 

+

En la aplicación de Apple Safari, <canvas> es un elemento ejecutado de la misma manera <img> es, sino que no tiene una etiqueta de cierre.   Sin embargo, para <canvas> tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva.   Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.

+

Si no se necesita contenido de reserva, un simple <canvas id="foo" ...> </ canvas> será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.

+

Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).

+
canvas {
+  font-size: 0.00001px !ie;
+}
+

Caracteristicas adicionales  

+

Renderizando el contenido we dentro de un Canvas.

+
+ Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome.   No esta permitido en paginas HTML normales. Porqué leer.
+

El canvas de Mozilla se extendio con el metodo drawWindow().   Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+

atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo.   Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).

+

Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.

+

Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas.   sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.

+

Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia.  

+
+ Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja   En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina  
+

See also

+ diff --git a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..76e8d7fdc2 --- /dev/null +++ b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,111 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +

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

+ +

RandomSource represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.

+ +

RandomSource is a not an interface and no object of this type can be created.

+ +

Properties

+ +

RandomSource neither defines nor inherits any property.

+ +
+
+ +

Methods

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Initial definition
+ +

Browser Compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

+ +

See also

+ + diff --git a/files/es/conflicting/web/api/document_object_model/index.html b/files/es/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..8123441661 --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,24 @@ +--- +title: Acerca del Modelo de Objetos del Documento +slug: Acerca_del_Modelo_de_Objetos_del_Documento +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +

¿Qué es DOM?

+ +

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

+ +

Todas las propiedades, métodos, y eventos disponibles por el desarrollador web para manipular y crear páginas web están organizados en objetos (por ejemplo: el objeto 'document' representa al documento en sí mismo, el objeto 'table' representa los elementos HTML para tablas, etcétera). En los navegadores modernos estos objetos son manejables con lenguajes de scripts.

+ +

Es muy común usar DOM conjuntamente con JavaScript. Así es, el código es escrito en JavaScript, pero éste usa DOM para tener acceso a la página Web y sus elementos. Sin embargo, DOM fue diseñado para ser independiente de cualquier lenguaje de programación concreto, poniendo la representación estructural del documento disponible en un solo API consistente. Aunque en este sitio nos centremos en JavaScript, las implementaciones de DOM pueden hacerse para cualquier lenguaje.

+ +

El Consorcio de World Wide Web establece un estándar para el DOM, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.

+ +

¿Por qué es importante el soporte que Mozilla da al DOM?

+ +

HTML dinámico (DHTML) es un término usado por muchos para describir la combinación de HTML, hojas de estilo y scripts que permite que los documentos sean dinámicos. El grupo de trabajo W3C DOM trabaja duro para asegurarse de que sus soluciones son interoperables e independientes del lenguaje (ver también la DOM FAQ). Cuando Mozilla reclama el título de "Plataforma para aplicaciones web", el soporte a DOM es uno de los rasgos más solicitados, y es necesario si Mozilla quiere ser una alternativa real a otros navegadores.

+ +

El hecho incluso más importante es que la interfaz de usuario de Firefox (también la de Mozilla Suite y Thunderbird) está construida usando XUL - un lenguaje XML para interfaces de usuario. Así Mozilla usa el DOM para manipular sus propias interfaces de usuario. (en inglés)

diff --git a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..fc26bc0bee --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,22 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

{{draft}}

+

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

+

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

+

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

+

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

+

Why is the DOM important?

+

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.

+

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

+

More about the DOM

+

{{LandingPageListSubpages}}

diff --git a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html new file mode 100644 index 0000000000..26d372847a --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html @@ -0,0 +1,87 @@ +--- +title: DOM +slug: DOM +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +
+ Acerca del Modelo de Objetos del Documento
+ Un par de cosas básicas sobre DOM y Mozilla.
+
+

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

+
+

DOM es un estándar del W3C

+ + + + + + + +
+

Documentación

+
+
+ Introducción a la manipulación DOM
+
+ Introducción a los métodos de manipulación DOM mediante Javascript
+
+
+
+ Especificación del DOM Nivel 1
+
+ El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.
+
+
+
+ Uso del núcleo del nivel 1 del DOM
+
+ Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.
+
+
+
+ Los niveles del DOM
+
+ Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.
+
+
+
+ DHTML Demostraciones del uso de DOM/Style
+
+ Contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para Eventos DOM, DOM Core, DOM HTML y mucho mas.
+
+
+
+ The Document Object Model in Mozilla.org (en)
+
+ Una versión más antigua acerca de DOM se encuentra en mozilla.org.
+
+

enlaces a ninguna parte: ; DOM y JavaScript: <small>"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"</small>  ; Modificando dinámicamente las interfaces de usuario en XUL: <small>Fundamentos de manipulación con XUL UI y métodos DOM.</small>  ; Espacios en blanco en el DOM: <small>Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.</small>  ; Tablas HTML con JavaScript e interfaces DOM: <small>Una descripción de algunos métodos de gran alcance, fundamentales para el nivel 1 en el uso de DOM y de cómo utilizarlo con Javascript .</small> fin de enlaces a ninguna parte Ver todos

+ 		+

Comunidad

+
    +
  • En la comunidad Mozilla... en inglés
    • +
+

{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

+

Ver todos

+

Herramientas

+ +

Ver todos

+

Temas relacionados

+
+
+ • AJAX • CSS • XML • JavaScript •
+
+

 

+
+

fin de tabla

+

Categorías

+

Interwiki Language Links

+

{{ languages( { "de": "de/DOM", "en": "en/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }} 

diff --git a/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html new file mode 100644 index 0000000000..7759932552 --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html @@ -0,0 +1,76 @@ +--- +title: Prefacio +slug: Referencia_DOM_de_Gecko/Prefacio +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +

« Referencia DOM de Gecko

+ +

Sobre Esta referencia

+ +

Esta parte describe el manual en sí: para quién está hecho, cómo se presenta la información y cómo se pueden usar los ejemplos de la referencia en el desarrollo propio de DOM.

+ +

Notará que este documento está en curso de desarrollo y aún no es un listado completo de todos los métodos y propiedades DOM que funcionan para GECKO. Sin embargo, cada parte individual de esta guía (por ejemplo, La referencia al documento de DOM) sí está completa para el/los objeto/s que describe. Cuando nuevas informaciones de referencia para los numerosos miembros de esta enorme API estén disponibles, se irán integrando dentro de este documento.

+ +

A quién va dirigida esta guía?

+ +

El lector de Referencia DOM de Gecko puede ser un desarrollador Web o un usuario sabio que tiene alguna idea de como se construyen las páginas Web. Esta referencia evita tener presunciones sobre el nivel de conocimiento del lector con el DOM, el XML, los servidores o estándares Web y también con JavaScript, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con HTML, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.

+ +

El material introductorio presentado aquí, con sus varios ejemplos y sus explicaciones de alto nivel, debe ser valorado tanto para los desarrolladores inexpertos como para los experimentados, no es sólo una guía de desarrollo Web para principiantes. En general y sin embargo se le puede considerar como un manual evolutivo del API.

+ +

Qué es Gecko?

+ +

Mozilla, Firefox, Netscape 6+, y otros navegadores basados en Mozilla tienen la idéntica codificación DOM. Es así porque utilizan la misma tecnología. naturalmente, es sólo aplicable a los productos basados en la misma versión de Gecko, pero es complicado explicarlo - (naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain)

+ +

Gecko, la parte del programa en estos navegadores que se ocupa del análisis del HTML, de la disposición de las páginas, del modelo de objeto del documento, e incluso de la representación de la interfaz de aplicación entera, es una rápida, máquina cumplidora de los estándares de presentación que ejecutar los estándares del modelo de objeto del navegador (por ejemplo, ventana - window) del W3C DOM y del parecido DOM (pero no estándar) en el contexto de las páginas Web y la interfaz de aplicación (ochrome) del navegador.

+ +

Aunque la interfaz de aplicación y el contenido exhibido por el navegador son diferentes en muchos puntos, el DOM los expone uniformemente como una jerarquía de nodos. (commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

+ +

Sintaxis del API

+ +

Cada descripción en la referencia API incluye la sintaxis, los parámetros de entrada y salida (donde el tipo de retorno es agarrado), un ejemplo, todas las notas adicionales y un enlace a la especificación apropiada.

+ +

Típicamente, las propiedades de sólo lectura tienen una simple línea de sintaxis, porque es posible leerlas pero imposible modificarlas. Por ejemplo, la propiedad de sólo lectura availHeight del objeto screen incluye la información siguiente:

+ +
+ +

Eso significa que sólo se puede utilizar la propiedad a la derecha de la declaración. En el caso de propiedades de lectura/escritura (posibilidad de modificación) se puede asignar un valor a la propiedad, como se ilustra en el siguiente ejemplo de sintaxis:

+ +
+ +

En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:

+ + + +

Utilización de ejemplos

+ +

Varios ejemplos en esta referencia son archivos completos que se pueden ejecutar copiándolos y pegándolos dentro de un nuevo archivo y abriéndolo en un navegador. Otros son trozos de código que se pueden ejecutar poniéndolos en las funciones repeticón de llamada (callback) de JavaScript. Por ejemplo, la propiedad de window.document se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:

+ +
<html>
+
+<script>
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+</script>
+
+<button onclick="testWinDoc();">Prueba la propiedad del documento</button>
+
+</html>
+
+ +

Funciones y páginas similares pueden ser creadas para todos los miembros de objeto que no hayan sido ya preparados para su uso directo. Ver la parte Probando el API del DOM en la introducción para una "prueba pesada" que permite probar varios API a la vez.

+ +

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/es/conflicting/web/api/geolocation/index.html b/files/es/conflicting/web/api/geolocation/index.html new file mode 100644 index 0000000000..0f8895b7b8 --- /dev/null +++ b/files/es/conflicting/web/api/geolocation/index.html @@ -0,0 +1,107 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +tags: + - API +translation_of: Web/API/Geolocation +translation_of_original: Web/API/NavigatorGeolocation +--- +

{{APIRef("Geolocation API")}}

+ +

NavigatorGeolocation  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.

+ +

There is no object of type NavigatorGeolocation, but some interfaces, like {{domxref("Navigator")}} implements it.

+ +

Properties

+ +

The NavigatorGeolocation interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
+ +

Methods

+ +

The NavigatorGeolocation interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

See also

+ + + +

 

diff --git a/files/es/conflicting/web/api/html_drag_and_drop_api/index.html b/files/es/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/es/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: DragDrop +--- +

 

+

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/es/conflicting/web/api/index.html b/files/es/conflicting/web/api/index.html new file mode 100644 index 0000000000..c970ea8947 --- /dev/null +++ b/files/es/conflicting/web/api/index.html @@ -0,0 +1,80 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Elemento + - Propiedad + - Referencia + - Web + - actualizacion +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +

{{ APIRef("DOM") }}

+ +

Sumario

+ +

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.

+ +
+

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

+
+ +

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

+ +

Síntasix

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Ejemplo

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Get a reference to the first element in the form
+  var formElement = document.forms['formA'].elements[0];
+
+  // Give it a name
+  formElement.name = 'inputA';
+
+  // Show the value of the input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notas

+ +

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

+ +

Especificaciones

+ +

W3C DOM 2 HTML Specification:

+ + diff --git a/files/es/conflicting/web/api/indexeddb_api/index.html b/files/es/conflicting/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..91e216833a --- /dev/null +++ b/files/es/conflicting/web/api/indexeddb_api/index.html @@ -0,0 +1,145 @@ +--- +title: IndexedDB +slug: IndexedDB +tags: + - páginas_a_traducir +--- +

{{ SeeCompatTable() }}

+ +

IndexedDB es una API del lado del cliente, para el almacenamiento de grandes cantidades de datos estructurados y para búsquedas de alto rendimiento en esos datos, usando índices. Mientras DOM Storage es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.

+ +

Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;Conceptos básicos acerca de IndexedDB. Para más detalles, vea Usando IndexedDB.

+ +

IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de Web Workers, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.

+ +

API Asíncrono

+ +

Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use open() en el atributo indexedDB de un objeto window. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.

+ +
+

Nota: El objeto indexedDB se prefija en las versiones antiguas de los navegadores (propiedad mozIndexedDB para Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

+
+ + + +

Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:

+ + + +

Hay también una versión sincrónica de la API. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con WebWorkers.

+ +

Límites de almacenamiento

+ +

No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:

+ + + +

Ejemplo

+ +

Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue eLibri, una biblioteca y una aplicación de lectura de libros electrónicos.

+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
API asíncrono +

24.0
+ 11.0 {{ property_prefix("webkit") }}

+ 		+

{{ CompatGeckoDesktop("16.0") }}
+ {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

+ 		10 {{ property_prefix("ms") }}{{ CompatNo() }}{{ CompatNo() }}
API síncrono
+ (usado por WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ Vea {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API síncrono{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Para otra matriz de compatibilidad, vea también: Cuándo puedo usar IndexedDB

+ +

También existe la posibilidad de usar IndexedDB en navegadores que soportan WebSQL por el uso de IndexedDB Polyfill.

+ +

Ver también

+ + diff --git a/files/es/conflicting/web/api/node/index.html b/files/es/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..f6faf58631 --- /dev/null +++ b/files/es/conflicting/web/api/node/index.html @@ -0,0 +1,34 @@ +--- +title: Nodo.nodoPrincipal +slug: Web/API/Node/nodoPrincipal +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +
+
{{APIRef("DOM")}}
+{{Non-standard_header}} + +

La propiedad de solo loctura de Nodo.nodePrincipal devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.

+ +

{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}

+ +

Sintaxis

+ +
principalObj = element.nodePrincipal
+
+ +

Notas

+ +

Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado

+ +

Especificación

+ +

No hay especificaciones.

+
+ +

 

diff --git a/files/es/conflicting/web/api/push_api/index.html b/files/es/conflicting/web/api/push_api/index.html new file mode 100644 index 0000000000..05d101e5fa --- /dev/null +++ b/files/es/conflicting/web/api/push_api/index.html @@ -0,0 +1,433 @@ +--- +title: Usando la API Push +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +translation_of_original: Web/API/Push_API/Using_the_Push_API +--- +

La W3C Push API offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.

+ +

La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.

+ +
+

Note: Early versions of Firefox OS used a proprietary version of this API called Simple Push. This is being rendered obsolete by the Push API standard.

+
+ +

Demo: las bases de una simple app de servidor de chat

+ +

La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.

+ +

En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.

+ +

At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.

+ +

+ +

Para correr la demo, siga las instrucciones de push-api-demo README. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.

+ +

Visión de la tecnología

+ +

Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.

+ +

Los mensajes web push hacen parte de la familia tecnológica service workers; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:

+ +

Web Push messages are part of the service workers technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:

+ + + +

A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.

+ +
+

Nota: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor  quick-and-dirty usando NodeJS.

+
+ +

El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad  ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.

+ +

Encryption

+ +
+

Note: For an interactive walkthrough, try JR Conlin's Web Push Data Encryption Test Page.

+
+ +

To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read Message Encryption for Web Push for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS web-push library.

+ +
+

Note: There is also another library to handle the encryption with a Node and Python version available, see encrypted-content-encoding.

+
+ +

Push workflow summary

+ +

To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.

+ +
    +
  1. Request permission for web notifications, or anything else you are using that requires permissions.
    2. +
  2. Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.
    3. +
  3. Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.
    4. +
  4. Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that getKey() is currently experimental and Firefox only.)
    5. +
  5. Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use Fetch.
    6. +
  6. If you are using the Channel Messaging API to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send port2 over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.
    7. +
  7. On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.
    8. +
  8. To send a push message, you need to send an HTTP POST to the endpoint URL. The request must include a TTL header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the web-push module, which handles all the hard work for you.
    9. +
  9. Over in your service worker, set up a push event handler to respond to push messages being received. +
      +
    1. If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the port2 we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the onmessage handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the ports property, index 0. Once this is done, you can send a message back to port1, using {{domxref("MessagePort.postMessage()")}}.
      2. +
    2. If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.
      3. +
    +
    10. +
+ +

Construyendo la demo

+ +

Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.

+ + + +

No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.

+ +

El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.

+ + + +

El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.

+ +

Variables y configuración inicial

+ +

Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:

+ +
var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';
+ +

Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.

+ +

A continuación, tomamos una referencia al suscrito/no-suscrito {{htmlelement("button")}}, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)

+ +

Las siguientes variables toman referencia a los trés elementos principales {{htmlelement("div")}} en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón envíar el mensaje de chat o el mensaje de chat aparezca en la lista de mensajes.)

+ +

Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento {{htmlelement("input")}}, damos a la entrada un valor por defecto, y usamos preventDefault() para detener el envío del formulario cuando este es enviado pulsando return.

+ +

A continuación, pedimos permiso para enviar las notificaciones web, usando {{domxref("Notification.requestPermission","requestPermission()")}}:

+ +
Notification.requestPermission();
+ +

Ahora ejecutamos una sección de código cuando se dispara el onload, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón  Sucribirse/unsubscribe que ejecuta nuestra funcion unsubscribe() si actualmente estamos suscritos (isPushEnabled is true), y subscribe() de la otra manera:

+ +
window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });
+ +

A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando {{domxref("ServiceWorkerContainer.register()")}}, y ejecutando nuestra función initialiseState(). Si no es así, entregamos un mensaje de error a la consola.

+ +
  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+
+ +

La siguiente cosa en el código es la función initialiseState() — para el codigo completo comentado, mira en initialiseState() source on Github (no lo estamos repitiendo aquí por brevedad.)

+ +

initialiseState() primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  useNotifications a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.

+ +

Finalmente, se usa {{domxref("ServiceWorkerContainer.ready()")}} para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad {{domxref("ServiceWorkerRegistration.pushManager")}}, que devuelve un objeto {{domxref("PushManager")}} cuando llamamos a {{domxref("PushManager.getSubscription()")}}. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (subBtn.disabled = false;), y verificamos que tenemos un objeto suscripsión para trabajar.

+ +

Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos isPushEnabled to true, toma el punto final de suscripsión desde {{domxref("PushSubscription.endpoint")}}, genera una public key usando {{domxref("PushSubscription.getKey()")}}, y ejecutando nuestra función updateStatus(), que como verá más adelante se comunica con el servidor.

+ +

Como un bonus añadido, configuramos un nuevo {{domxref("MessageChannel")}} usando el constructor {{domxref("MessageChannel.MessageChannel()")}}, toma una referencia al service worker activo usando {{domxref("ServiceworkerRegistration.active")}}, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando {{domxref("Worker.postMessage()")}}. El contexto del navegador recive mensajes en {{domxref("MessageChannel.port1")}}; Cuando esto suceda, ejecutamos la función handleChannelMessage() para decidir que hacer con esos datos (mirar la sección {{anch("Handling channel messages sent from the service worker")}} ).

+ +

Subscribing and unsubscribing

+ +

Ahora regresamos la atención a las funciones subscribe() y unsubscribe() usadas para subscribe/unsubscribe al servicion de notificaciones push.

+ +

In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

+ +

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

+ +

The unsubscribe() function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.

+ +

Appropriate error handling is also provided in both functions.  

+ +

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

+ +
function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}
+ +

Updating the status in the app and server

+ +

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

+ +

The function does one of three different things, depending on the value of the statusType parameter passed into it:

+ + + +

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

+ +

Handling channel messages sent from the service worker

+ +

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

+ +
channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}
+ +

This occurs when the service worker sends a channel message over.

+ +

The handleChannelMessage() function looks like this:

+ +
function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i < subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}
+ +

What happens here depends on what the action property on the data object is set to:

+ + + +
+

Note: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read Using Service Workers for more details.

+
+ +

Sending chat messages

+ +

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a statusType of chatMsg.

+ +

The server

+ +

As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

+ +

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:

+ + + +

A couple more things to note:

+ + + +

The service worker

+ +

Now let's have a look at the service worker code (sw.js), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's action property:

+ + + +
self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+ +

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

+ +
function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}
+ +

Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)

+ +

+ +

Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

+ +
+

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

+
+ +

Handling premature subscription expiration

+ +

Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.

+ +
self.addEventListener('pushsubscriptionchange', function() {
+  // do something, usually resubscribe to push and
+  // send the new subscription details back to the
+  // server via XHR or Fetch
+});
+ +

Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.

+ +

Extra steps for Chrome support

+ +

To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.

+ +

Setting up Google Cloud Messaging

+ +

To get this set up, follow these steps:

+ +
    +
  1. Navigate to the Google Developers Console  and set up a new project.
    2. +
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then +
      +
    1. Select the Enable Google APIs for use in your apps option.
      2. +
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. +
    3. Click the Enable API button.
      4. +
    +
    3. +
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: +
      +
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. +
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. +
    +
    4. +
+ +

manifest.json

+ +

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

+ +
{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}
+ +

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

+ +
<link rel="manifest" href="manifest.json">
+ +

userVisibleOnly

+ +

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

+ +

See also

+ + + +
+

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

+
diff --git a/files/es/conflicting/web/api/url/index.html b/files/es/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..6ca15914a4 --- /dev/null +++ b/files/es/conflicting/web/api/url/index.html @@ -0,0 +1,102 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM + - WebAPI +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

La propiedad Window.URL devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +

Llamando a un método estático:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

Construyendo un nuevo objeto:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar nsIDOMMozURLProperty. En la práctica, esto no hace ninguna diferencia.

+ +

[2] Implementado bajo el nombre no estandar webkitURL.

diff --git a/files/es/conflicting/web/api/web_storage_api/index.html b/files/es/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..6889022c7a --- /dev/null +++ b/files/es/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,303 @@ +--- +title: Almacenamiento +slug: DOM/Almacenamiento +tags: + - DOM + - JavaScript + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +

{{ ApiRef() }}

+

Introducción

+

El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de características relacionadas con el almacenamiento introducidas en la especificación de aplicaciones web 1.0 y ahora detalladas por separado en su propia especificación W3C Web Storage. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en Firefox 2 y Safari 4 .

+
+ Nota: el almacenamiento DOM no es lo mismo que mozStorage (las interfaces XPCOM de Mozilla para SQLite) o la API para guardar sesiones (una utilidad de almacenamiento XPCOM usada por extensiones).
+

Descripción

+

El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).

+

Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "userData behavior" que permite conservar datos entre múltiples sesiones.

+

El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las cookies de los navegadores tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como almacenamiento local de Flash) necesitan un plugin externo.

+

Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue halfnote (una aplicación para tomar notas) escrita por Aaron Boodman. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.

+

Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.

+

Referencia

+

Los siguientes objetos globales existen como propiedades de cada objeto window. Esto significa que se puede acceder a ellas como sessionStorage o window.sessionStorage (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).

+

Storage

+

Este es un constructor ( Storage ) para todos los objetos de almacenamiento ( sessionStorage y globalStorage[location.hostname]). Al hacer Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } podrías usar luego como atajo a la función removeItem("key") la forma localStorage.removeKey and sessionStorage.removeKey.

+

Los elementos globalStorage no son de tipo Storage , sino StorageObsolete .

+

Storage se define por la interfaz de almacenamiento WhatWG de la siguiente forma:

+
interface Storage {
+  readonly attribute unsigned long length;
+  [IndexGetter]key DOMString (in unsigned long index);
+  [NameGetter] DOMString GetItem (in DOMString key);
+  [NameSetter] void setItem (in DOMString key, in DOMString data);
+  [NameDeleter] void removeItem (in DOMString key);
+  void clear();
+};
+
+

 

+
+ Nota: aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.
+
+ Nota: ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (storages) descritos en esta página se convierte en una cadena a través de su método .toString almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena "[object Object]" en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.
+

sessionStorage

+

Este es un objeto global (sessionStorage) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.

+
// Guardar datos en el almacén de la sesión actual
+sessionStorage.setItem("username", "John");
+
+// Acceder a algunos datos guardados
+alert( "username = " + sessionStorage.getItem("username"));
+
+

El objeto sessionStorage es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

+

{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}

+

Ejemplos:

+

Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.

+
 // Obtener el campo de texto al que vamos a seguir la pista
+ var field = document.getElementById("field");
+
+ // Ver si se tiene un valor de autoguardado
+ // (esto sólo sucede si la página es actualizada accidentalmente)
+ if ( sessionStorage.getItem("autosave")) {
+    // Restaurar los contenidos del campo de texto
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Comprobar los contenidos del campo de texto cada segundo
+ setInterval(function(){
+    // Y guardar los resultados en el objeto de almacenamiento de sesión
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+
+

Más información:

+ +

globalStorage

+

 

+

{{ Non-standard_header() }} Este es un objeto global ( globalStorage ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .

+
+ Nota: globalStorage no es de tipo Storage, sino un objeto de tipo StorageList que contiene a su vez elementos StorageObsolete.
+
// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
+globalStorage['mozilla.org'].setItem("snippet", "<b>Hola</b>, ¿cómo estás?");
+
+

Específicamente, el objeto globalStorage proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa globalStorage en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:

+ +

{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de localStorage, que se implementa a partir de Firefox 3.5.") }}

+

Ejemplos:

+

Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.

+

Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:

+
 globalStorage['developer.mozilla.org'].setItem("username", "John");
+
+

Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:

+
 // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+
+

 

+

localStorage

+

localStorage es lo mismo que globalStorage[location.hostname], excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que localStorage es un elemento de tipo Storage a diferencia de globalStorage[location.hostname], que es de tipo StorageObsolete . Por ejemplo, http://example.com no es capaz de acceder al mismo objeto localStorage que https://example.com pero pueden acceder al mismo objeto globalStorage. localStorage es una interfaz estándar, mientras que globalStorage no es estándar. localStorage fue introducida en Firefox 3.5.

+

Ten en cuenta que establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage y extender Storage.prototype no afecta a los elementos globalStorage. Esto sólo se hace extendiendo StorageObsolete.prototype.

+
+ Nota: cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; esta base de datos se vacía cuando se sale del modo de navegación privada.
+
+
Compatibilidad
+

Los objetos Storage se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto localStorage object en aquellas implementaciones que de forma nativa no lo admitan.

+

Este algoritmo es una imitación exacta del objeto localStorage, pero haciendo uso de cookies.

+ 
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        var sExpDate = new Date();
+        sExpDate.setDate(sExpDate.getDate() - 1);
+        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
+        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
+        if (iCouple.length > 1) {
+          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+
+ Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave = tuValor; y delete localStorage.tuClave; para establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
+

Aquí tienes otra imitación, menos exacta, del objeto localStorage. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer < 8. También usa cookies.

+ 
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      var sExpDate = new Date();
+      sExpDate.setDate(sExpDate.getDate() - 1);
+      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+
+ Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.getItem(), localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave para obtener, establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
+

Lugar de almacenamiento y borrado de datos

+

Los datos de almacenamiento DOM se guardan en el archivo webappsstore.sqlite de la carpeta del perfil.

+ +

Consulta también borrar la caché de recursos en modo sin conexión .

+
+

Más información

+ +

Ejemplos

+ +

Compatibilidad de los navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
globalStorage{{ CompatNo() }}2{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores.

+

Contenido relacionado

+ +

{{ HTML5ArticleTOC () }}

+

 

+

 

+

{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

diff --git a/files/es/conflicting/web/api/webrtc_api/index.html b/files/es/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..b8eb318529 --- /dev/null +++ b/files/es/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,78 @@ +--- +title: WebRTC +slug: WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +

El RTC en WebRTC significa Real-Time Communications, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.

+

Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.

+
+

Nota: Parte de este contenido está desactualizado, pero se estará actualizando pronto.

+
+

¿Quieres descubrir WebRTC? ¡Mira este vídeo introductorio!

+ + + + + + + +
+

Documentación sobre WebRTC

+
+
+ Introducción a WebRTC
+
+ Una guía de introducción sobre qué es WebRTC y cómo funciona.
+
+ Using the Network Stream API
+
+ Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.
+
+ Comunicaciones peer-to-peer (P2P) con WebRTC
+
+ Como realizar conexiones par a par usando las APIs de WebRTC.
+
+  
+
+ Capturar fotografías con la cámara web
+
+ Como capturar imágenes desde un Webcam con WebRTC.
+
+ API de MediaStream
+
+ Descripción de la API que soporta la creación y manipulación de flujos de medios.
+
+ getUserMedia()
+
+ La función del navegador que permite el acceso a dispositivos de medios del sistema.
+
+  
+
+

Ver todo...

+

Ejemplos

+ + 		+

Obteniendo ayuda de la comunidad

+

Cuando desarrolles sitios y aplicaciones que tomen ventaja de las tecnologías de WebRTC, puede ser muy útil ponerse en contacto con otras personas haciendo lo mismo.

+
    +
  • Consulta el tópico Media en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}
    • +
+
    +
  • Pregunta en el canal IRC de Media de Mozilla: #media
    • +
+

No olvides la netiqueta...

+
+ + +

Recursos

+ +
+

 

diff --git a/files/es/conflicting/web/api/websockets_api/index.html b/files/es/conflicting/web/api/websockets_api/index.html new file mode 100644 index 0000000000..f7ac10a94d --- /dev/null +++ b/files/es/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,37 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - WebSockets + - para_revisar +--- +

{{ SeeCompatTable () }}

+

WebSockets es una tecnología que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta API, puedes enviar mensajes a un servidor y recibir respuestas por eventos sin tener que consultar al servidor.

+ +

Documentación

Cómo escribir aplicaciones para cliente WebSocket
Una guía tutorial sobre cómo escribir clientes WebSocket para ejecutarse en el navegador.
Referencia WebSockets
Una referencia a la API del lado del cliente WebSocket.
El protocolo WebSocket
Una referencia al protocolo de WebSocket.
Cómo escribir servidores WebSocket
Una guía sobre cómo escribir el código del lado del servidor para manejar el protocolo WebSocket.

Ver todas

Herramientas

 

AJAX , JavaScript
+

Consulta también

+ +

Compatibilidad de los navegadores

+

{{ CompatibilityTable () }}

+
+ +
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Compatibilidad con la versión -76 {{ obsolete_inline () }} 6 {{ CompatGeckoDesktop ("2.0") }} {{ CompatNo () }} 11.00 (desactivado) 5.0.1
Compatibilidad con el protocolo de la versión 7 {{ CompatNo () }}

{{ CompatGeckoDesktop ("6.0") }}

usa MozWebSocket .
 {{ CompatNo () }} {{ CompatNo () }} {{ CompatNo () }}
Compatibilidad con el protocolo de la versión 10 14

{{ CompatGeckoDesktop ("7.0") }}

usa MozWebSocket .
 HTML5 Labs {{ CompatUnknown () }} {{ CompatUnknown () }}
+
+
+ +
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Compatibilidad con la versión -76 {{ obsolete_inline () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
Compatibilidad con el protocolo de la versión 7 {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
Compatibilidad con el protocolo de la versión 8 (borrador 10 de IETF) {{ CompatUnknown () }} {{ CompatGeckoMobile ("7.0") }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
+
+

Notas para Gecko

+

El soporte de WebSockets en Firefox sigue de cerca el desarrollo de la especificación WebSocket. Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (según lo especificado por el borrador 10 de IETF). Firefox Mobile recibió el soporte de WebSocket en Firefox móvil 7.0.

+
+

{{ gecko_callout_heading("6.0") }}

+

Antes de Gecko 6.0 {{ geckoRelease ("6,0 ") }}, hubo, incorrectamente, un objeto WebSocket que algunos sitios creyeron que implicaba que los servicios WebSocket no estaban prefijados. Este objeto se ha cambiado a MozWebSocket .

+
+
+

{{ gecko_callout_heading("7.0") }}

+

A partir de Gecko 7.0 {{ geckoRelease ("7,0 ") }}, la preferencia network.websocket.max-connections se usa para determinar el número máximo de conexiones WebSocket que pueden estar abiertas a la vez. El valor predeterminado es 200.

+
+
Advertencia: entre otras cosas, una razón clave por la que WebSockets está desactivado por defecto es el descubrimiento de un problema de seguridad en el diseño del protocolo. En este momento no se recomienda utilizar WebSockets en las versiones de Firefox en un entorno de producción. Si aun así deseas experimentar con WebSockets, puedes hacerlo abriendo about: config y estableciendo la preferencia network.websocket.enabled en true. También tendrás que establecer la preferencia network.websocket.override-security-block en true para permitir la inicialización de una conexión WebSocket.
+

{{ HTML5ArticleTOC () }}

+

{{ languages ( {"en": "en/WebSockets", "zh-tw": "zh_tw/WebSockets"} ) }}

diff --git a/files/es/conflicting/web/api/window/localstorage/index.html b/files/es/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..5c46cb9559 --- /dev/null +++ b/files/es/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,136 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +tags: + - Almacenamiento en Navegador + - Almacenamiento local +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. localStorage se introdujo en la version Firefox 3.5.

+ +
Nota: Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar datos de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.
+ +
// Guardar datos al almacenamiento local actual
+localStorage.setItem("nombredeusuario", "John");
+
+// Acceder a datos almacenados
+alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));
+ +

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en este tutorial en Codepen.

+ +

Compatibilidad

+ +

Los objetos de Storage (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

+ +

Este algoritmo es una imitación exacta del objeto localStorage, pero hace uso de cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se pasará a ser un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Esta es otra imitación menos exacta de el objeto localStorage, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Compatibilidad y relación con globalStorage

+ +

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de que tiene un ámbito de origen HTML5 (esquema + nombre del host + puerto no estandar), y localStorage es una instancia de Storage, al contrario que globalStorage[location.hostname], que es una instancia de StorageObsolete, como se explica más adelante. Por ejemplo, http://ejemplo.com no puede acceder al mismo objeto localStorage que https://ejemplo.com, pero los dos pueden acceder al mismo elemento de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

+ +

Nótese que al establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage, y al extender Storage.prototype no afecta a los elementos de globalStorage; sólo al extender StorageObsolete.prototype los afecta.

+ +

El formato de Storage

+ +

Las claves y valores de Storage se guardan en el formato UTF-16 DOMString, que usa 2 bytes por carácter.

diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..2607e635fa --- /dev/null +++ b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,109 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +

{{APIRef}}

+

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+

Properties

+

This helper neither defines nor inherits any properties.

+

Methods

+

This helper does not inherit any methods.

+
+
+ {{domxref("WindowBase64.atob()")}}
+
+ Decodes a string of data which has been encoded using base-64 encoding.
+
+ {{domxref("WindowBase64.btoa()")}}
+
+ Creates a base-64 encoded ASCII string from a string of binary data.
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+

Browser compatibility

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+

See also

+ diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..549969232f --- /dev/null +++ b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,119 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..0c189b625d --- /dev/null +++ b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,144 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Web/API +translation_of_original: WebAPI +--- +

WebAPI es un termino usado para referirse al conjunto de APIs compatibles y de acceso a los dispositivos que permite a las Web apps y contenido acceder al hardware del dispositivo (como el estado de la batería o la vibración de hardware), al igual que acceso a información almacenada en el dispositivo (como el calendario o la lista de contactos). Agregando estas APIs, esperamos expandir lo que la Web puede hacer hoy y solo plataformas propietarias fueron capaces de hacer en el pasado.

+ +
+

Nota: More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the WebAPI doc status page, where we're tracking work on WebAPI docs.

+
+ +
+
+

APIs DE COMUNICACIÓN

+ +
+
API de información de la red
+
Provee información básica sobre la conexión de red actual, como la velocidad de conexión.
+
+ +
+
Bluetooth
+
La API de  WebBluetooth provee acceso a bajo nivel  al hardware de Bluetooth del dispositivo.
+
API de conexión móvil {{NonStandardBadge}}
+
Expone información sobre la conectividad celular del dispositivo, como la fuerza de la señal, información del operador y así suscesivamente.
+
API de estadísticas de red
+
Monitorea la data usada y expone esta data a aplicaciones privilegiadas.
+
TCP Socket API
+
Proporciona sockets de bajo nivel y soporte SSL.
+
Telefonía {{NonStandardBadge}}
+
Permite a las apps contestar llamadas telefónicas y usar la interfaz de usuario de telefonía integrada.
+
WebSMS {{NonStandardBadge}}
+
Permite a las apps enviar y recibir mensajes de texto, así como también acceder y manejar los mensajes almacenados en el dispositivo.
+
API de información de WiFi
+
API privilegiada, la cual provee información sobre la fuerza de la señal, el nombre de la red actual, redes wifi disponibles, y más.
+
+ +

APIS de acceso a Hardware

+ +
+
API de sensor de luz ambiental
+
Provee acceso al sensor de luz ambiental, el cual permite a una app detectar el nivel de luz ambiental proximos al dispositivo.
+
API de estado de batería
+
Provee información sobre el nivel de carga de la batería y si el dispositivo se encuentra conectado a un punto de carga o no.
+
+ +
+
API de Geolocalización
+
Provee información sobre la ubicación física del dispositivo.
+
API de bloqueo de puntero
+
Permite a las apps bloquear acceso al mouse y obtener acceso a los deltas de movimiento en lugar de coordenadas absolutas; esto es ideal para juegos.
+
+ +
+
API de proximidad
+
Permite determinar la proximidad del dispositivo a objetos cercanos, como el rostro del usuario.
+
API de orientación del dispositivo
+
Provee notificaciones cuando la orientación del dispositivo cambia.
+
API de orientación de pantalla
+
Provee notificaciones cuando cambia la orientación de la pantalla. También puedes usar esta API para dejar que su app indique que orientación prefiere.
+
API de Vibración
+
Permite a las apps controlar la vibración de hardware del dispositivo para cosas como retroalimentación háptica en juegos. Esto no es pensado para cosas como vibraciones de notificaciones, para ello revisa la API de Alarma.
+
+ +
+
API de Cámara {{NonStandardBadge}}
+
Permite a las apps tomar fotografías y/o grabar videos usaando la cámara integrada del dispositivo.
+
API de administración de energía {{NonStandardBadge}}
+
Permite a las apps encender o apagar la pantalla, el CPU, la energía del dispositivo, y así sucesivamente. También provee soporte para escuchar e inspeccionar eventos de bloqueo de recursos.
+
+ +

View All...

+
+ +
+

APIs de administración de información

+ +
+
+ +
+
API de identificador de archivos
+
Provee soporte para escribir archivos con soporte de bloqueo.
+
IndexedDB
+
Almacenamiento de información estructurada del lado cliente con soporte para búsquedas de alto rendimiento.
+
+ +

OtrAS APIs

+ +
+
API de Alarma
+
Permite a las apps programar notificaciones.
+
También proporciona soporte para el lanzamiento de una aplicación de forma automática en un momento determinado.
+
Apps API
+
La API de aplicaciones web abiertas permite soporte para instalar y administrar aplicaciones web. Y además, permite a las aplicaciones determinar información de pago.
+
API de navegador
+
Provee soporte para construir un navegador web usando tecnologías web completamente (en esencia, un navegador dentro de un navegador).
+
+ +
+
Idle API
+
Permite a las apps recibir información cuando el usuario no está usando el dispositivo activamente.
+
API de permisos
+
Administra permisos de las apps en una ubicación central. Usado por la app de Ajustes.
+
Simple Push API
+
Permite a la plataforma enviar mensajes de notificación a aplicaciones específicas.
+
API de tiempo/reloj {{NonStandardBadge}}
+
Provee soporte para ajustar el tiempo actual. La zona horaria es establecida usando la API de ajustes.
+
Web Activities {{NonStandardBadge}}
+
Permite a una app delegar una actividad a otra app; por ejemplo, una app podría preguntar a otra app seleccionar (o crear) y devolver una foto. Normalmente el usuario es capaz de configurar que aplicaciones se utilizan para que actividad.
+
WebPayment API {{NonStandardBadge}}
+
Permite a contenido web iniciar pago y reembolsos por bienes virtuales.
+
+ +

comunidad WebAPI

+ +

Si necesitas ayuda con estas APIs, existen varias maneras en la que puedes hablar con otros desarrolladores que las utilizan.

+ +
    +
  • Consulta en el foro de WebAPI: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • +
  • Visita el canal de IRC de WebAPI: #webapi
    • +
+ +

Don't forget about the netiquette...

+ + + + +
+
+ +

 

diff --git a/files/es/conflicting/web/css/@viewport/index.html b/files/es/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..bb9c54b069 --- /dev/null +++ b/files/es/conflicting/web/css/@viewport/index.html @@ -0,0 +1,126 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - Descriptor CSS + - Referencia +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS height es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Dos valores */
+height: 320px 200px;
+
+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +
@viewport {
+  height: 500px;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
diff --git a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..2c550153bc --- /dev/null +++ b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,123 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS width es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Ejemplo con un valor de viewport: */
+@viewport {
+    width: 320px;
+}
+
+/* Ejemplo con dos valores de viewport: */
+@viewport {
+    width: 320px, 120px;
+}
+
+
+ +

 

+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +

 

diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..c7f84a0273 --- /dev/null +++ b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,123 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - Marcador de Posición INPUT + - Marcador de posición + - No estándar(2) + - Placeholder + - Pseudo-Clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-moz-placeholder' +--- +
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
+ +
Nota:  El CSSWG ha decidido introducir  :placeholder-shown. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase :-moz-placeholder representa a cualquier elemento que muestre un  texto del marcador de posición (placeholder). Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,

+ +

Ejemplo

+ +

Ejemplo básico

+ +

Este ejemplo le da estilo a un placeholder (marcador de posición) haciendo que el color del texto sea verde.

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input::-moz-placeholder {
+      color: green;
+    }
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Desbordamiento

+ +

En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS text-overflow: ellipsis para envolverlo.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado en {{bug("457801")}}.

+ +

Ver además

+ + diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html new file mode 100644 index 0000000000..b83b72db1a --- /dev/null +++ b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html @@ -0,0 +1,112 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo clase CSS + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-ms-input-placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase propietaria y no estándar  :-ms-input-placeholder representa el  texto del marcador de posición (placeholder) de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.

+ +

Ejemplo

+ +

El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.

+ +

HTML

+ +
<form id="test">
+  <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
+  <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
+  <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
+  <input type="submit" />
+</form>
+ +

CSS

+ +
input {
+   background-color:#E8E8E8;
+   color:black; }
+/* placeholder only style */
+input.studentid:-ms-input-placeholder {
+   font-style:italic;
+   color: red;
+   background-color: yellow;
+}
+ +

Resultado

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación aunque  Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..3c8fbb8c3a --- /dev/null +++ b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,109 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento CSS + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +translation_of_original: 'Web/CSS/::-moz-placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
Nota: El pseudo-elemento ::-moz-placeholder fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.
+ +

Resumen

+ +

El  pseudo-elemento ::-moz-placeholder sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  marcador de posición de texto (placeholder text) . Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).

+ +

Ejemplo

+ +

En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).

+ +

Contenido HTML

+ +
<input id="test" placeholder="Placeholder text!">
+
+ +

Contenido CSS

+ +
input::-moz-placeholder {
+  color: green;
+}
+
+ +

Obtendremos el siguiente resultado:

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox aplica un estilo por defecto de  {{cssxref("opacity")}}: 0.54 al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.

+ +

La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.

+ +

Ver además

+ + diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html new file mode 100644 index 0000000000..181f0a966c --- /dev/null +++ b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html @@ -0,0 +1,86 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +translation_of_original: 'Web/CSS/::-webkit-input-placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento no estándar y propietario ::-webkit-input-placeholder representa el marcador de posición de texto (placeholder text) de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..dd39986ed4 --- /dev/null +++ b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,376 @@ +--- +title: Usando las cajas flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +--- +
{{CSSRef}}
+ +

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

+ +

Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

+ +
Nota: Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo -webkit; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.
+ +

El concepto de "cajas flexibles"

+ +

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

+ +

El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.

+ +

Vocabulario de "cajas flexibles"

+ +

Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una flex-direction de tipo row, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.

+ +

flex_terms.png

+ +
+
Contenedor flexible (Flex container)
+
El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.
+
Elemento flexible (Flex item)
+
+

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

+
+
Ejes
+
+

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

+ +
    +
  • La propiedad flex-direction establece el eje principal.
    • +
  • La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
    • +
  • La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
    • +
  • La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
    • +
+
+
Direcciones
+
+

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).

+ +
    +
  • La propiedad order asigna elementos a grupos ordinales y determina qué elementos aparecen primero.
    • +
  • La propiedad flex-flow combina las propiedades flex-direction y flex-wrap para colocar los elementos flexibles.
    • +
+
+
Líneas
+
+

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad flex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

+
+
Dimensiones
+
+

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) and tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.

+ +
    +
  • La propiedades min-height y min-width tienen un nuevo valor, auto que establece el tamaño mínimo de un elemento flexible.
    • +
  • La propiedad flex combina las propiedades flex-basis, flex-grow, y flex-shrink para establecer el grado de flexibilidad de los elementos flexibles.
    • +
+
+
+ +

Diseñando una "caja flexible"

+ +

Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad display así:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

+ +
Nota: Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, display : -webkit-flex.
+ +

Consideraciones de los elementos flexibles

+ +

El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad display:none.

+ +

Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del inicio principal (main start) de su contenedor flexible.

+ +

Actualmente, debido a un problema conocido, asignar visibility:collapse a un elemento flexible causa que sea tratado como si fuera display:none en vez de lo que se supone que debería ocurrir, es decir, como si fuera visibility:hidden. La alternativa mientras se resuelve este problema es usar visibility:hidden para elementos flexibles que deban comportarse como visibility:collapse.

+ +

Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes auto se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver Aligning with 'auto' margins en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.

+ +

Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa min-width:auto y/o min-height:auto. Para los elementos flexibles, el valor de atributo auto calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.

+ +

Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades align-, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades justify-, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar justify-content con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "centrado-basado-en-márgenes" en el eje principal al reemplazar la propiedad justify-content.

+ +

Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. 

+ +

Propiedades de las "cajas flexibles"

+ +

Propiedades que no afectan a las "cajas flexibles"

+ +

Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.

+ + + +

Ejemplos

+ +

Ejemplo básico "flex"

+ +

Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. 

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Ejemplo de "Diseño del Santo Gríal"

+ +

Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.

+ +

HolyGrailLayout.png

+ +

Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.

+ +
​
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Área de juego

+ +

Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:

+ + + +

Cosas a tener en mente

+ +

El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".

+ +

Las "cajas flexibles" se comportan en función del modo de escritura establecido. Esto siginifica que inicio principal (main start) y fin principal (main end) se disponen de según la posición de inicio (start) y fin (end).

+ +

inicio secundario (cross start) y fin secundario (cross end) confían en la definición de la posición inicio (start) o antes (before) que depende del valor de direction.

+ +

Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad break- lo permita. Las propiedades CSS3 break-after, break-before y break-inside así como las propiedades CSS 2.1 page-break-before, page-break-after y page-break-inside se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoDesktop("22.0") }}		21.0{{ property_prefix("-webkit") }}10{{ property_prefix("-ms") }}(partial)12.13.1{{ property_prefix("-webkit") }}(partial)
+ 6.1{{ property_prefix("-webkit") }}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoMobile("22.0") }}		{{ CompatUnknown() }}10{{ property_prefix("-ms") }}(partial)
+ 11		12.1 +

3.2{{ property_prefix("-webkit") }}(partial)
+ 7.1{{ property_prefix("-webkit") }}
+ 9.0

+
+
+ +

Notas

+ +

[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.

+ +

[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a true.

+ +

[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.

+ +

[4] Mientras que en la implementación inicial en Opera 12.10 flexbox no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.

+ +

[5] Hasta Firefox 29, especificar visibility: collapse en un elemento flex causaba que fuera tratado como si fuera display: none en vez del comportamiento pretendido, tratándolo como si fuera visibility: hidden. El método alternativo sugerido es usar visibility: hidden para los elementos flex que debieran comportarse como si huberan sido designados visibility: collapse. Para más información, ver {{bug(783470)}}.

+ +

Ver también

+ + diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..e42553fe97 --- /dev/null +++ b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +title: Usando flexbox para componer aplicaciones web +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +tags: + - Avanzado + - CSS + - Cajas Flexibles CSS + - Ejemplo + - Guía + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +

{{CSSRef}}

+ +

Usar flexbox puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

+ + + +

Este artículo sólo aborda el uso de flexbox con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee la guía más general para usar cajas flexibles de CSS.

+ +

Conceptos básicos

+ +

Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como flex y luego dando a la propiedad {{cssxref("flex-flow")}} el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.

+ +

Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:

+ + + +

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.

+ +

Centrando un elemento en una página

+ +

Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}

+ +

Haciendo fluir verticalmente un conjunto de contenedores

+ +

Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como auto y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como none.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Contenido JavaScript

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}

+ +

Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.

+ +

Creando un contenedor que colapse horizontalmente

+ +

En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor wrap.

+ +

Contenido CSS

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

Contenido HTML

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Contenido JavaScript

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}

+ +

Ver también

+ + diff --git a/files/es/conflicting/web/css/cursor/index.html b/files/es/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..213b3607c0 --- /dev/null +++ b/files/es/conflicting/web/css/cursor/index.html @@ -0,0 +1,11 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +
{{CSSRef}}{{obsolete_header}}
+ +

¡No uses este valor!Don't use this value! Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.

diff --git a/files/es/conflicting/web/css/font-variant/index.html b/files/es/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..332e284385 --- /dev/null +++ b/files/es/conflicting/web/css/font-variant/index.html @@ -0,0 +1,11 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +

Sumario

+

El valor normal en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.

+

Ejemplos

+

En la propiedad font-style: normal establece que el tipo de fuente no es italic ni oblique.

+

El la propiedad font-size: normalse establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.

diff --git a/files/es/conflicting/web/css/width/index.html b/files/es/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..c380b1b891 --- /dev/null +++ b/files/es/conflicting/web/css/width/index.html @@ -0,0 +1,50 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +

+

<< Volver +

+

Resumen

+

Un valor computado automáticamente por el 'useragent.' +

Usando el valor auto en cualquier propiedad, dejamos al navegador que calcule el valor requerido.


+FIXME +

+

Ejemplos

+
div {
+   height: 600px;
+   border: 1px solid #000;
+}
+
+
div img {
+   height: auto;
+   border: 1px solid red;
+}
+
+

Se utiliza en

+ +


+

+
+

Categorías +Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/conflicting/web/guide/index.html b/files/es/conflicting/web/guide/index.html new file mode 100644 index 0000000000..d6d72dfef3 --- /dev/null +++ b/files/es/conflicting/web/guide/index.html @@ -0,0 +1,60 @@ +--- +title: Desarrollo Web +slug: Desarrollo_Web +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

+

+
Guía Breve de Web Semántica
+Una magnífica introducción al tema.
+
+

El Desarrollo Web abarca todos los aspectos necesarios para desarrollar un sitio o aplicación Web. Esto implica múltiples tecnologías, la mayoría cuentan con una sección específica en este wiki. En esta sección trataremos el tema desde una perspectiva más general. +

+
+ +
+

Documentación

+
Guía Breve de Independencia de Dispositivo +
"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo" +
+
Selección de modo en Mozilla +
Este documento describe cómo Mozilla utiliza la declaración de DOCTYPE para determinar el modo de renderizado más apropiado para visualizar una página web. +
+
El modo casi estándar de Gecko +
Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese. +
+
Mozilla Web Author FAQ (en) +
This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox. +
+

Ver más... +

+		 +

Comunidad

+ +
  • En la comunidad Mozilla... en inglés +
+

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} +

Ver más... +

+

Herramientas

+ +

Ver más... +

+

Temas relacionados

+
HTML, CSS, XHTML, XML, AJAX, JavaScript, Estándares Web +
+
+

Categorías +

Interwiki Language Links +

+
+{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/es/conflicting/web/guide/mobile/index.html b/files/es/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/es/conflicting/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

+ diff --git a/files/es/conflicting/web/html/element/index.html b/files/es/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..64595418c8 --- /dev/null +++ b/files/es/conflicting/web/html/element/index.html @@ -0,0 +1,599 @@ +--- +title: Lista de Elementos HTML5 +slug: HTML/HTML5/HTML5_lista_elementos +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +

Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al indice de elementos HTML el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.

+ +

El simbolo This element was added as part of HTML5 indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.

+ +

Elemento raíz

+ + + + + + + + + + + + +
ElementoDescripcion
{{HTMLElement("<!DOCTYPE html>")}}Define que el documento esta bajo el estandar de HTML 5
+ + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("html")}}Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.
+ +

Metadatos del documento

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("head")}}Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
{{HTMLElement("title")}}Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
{{HTMLElement("base")}}Define la URL base para las URLs relativas en la página.
{{HTMLElement("link")}}Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
{{HTMLElement("meta")}}Define los metadatos que no pueden ser definidos usando otro elemento HTML.
{{HTMLElement("style")}}Etiqueta de estilo usada para escribir CSS en línea.
+ +

Scripting

+ + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("script")}}Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
{{HTMLElement("noscript")}}Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.
+ +

Secciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("body")}} +
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
+
{{HTMLElement("section")}} This element has been added in HTML5Define una sección en un documento.
{{HTMLElement("nav")}} This element has been added in HTML5Define una sección que solamente contiene enlaces de navegación
{{HTMLElement("article")}} This element has been added in HTML5Define contenido autónomo que podría existir independientemente del resto del contenido.
{{HTMLElement("aside")}} This element has been added in HTML5Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
{{HTMLElement("header")}} This element has been added in HTML5Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
{{HTMLElement("footer")}} This element has been added in HTML5Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
{{HTMLElement("address")}}Define una sección que contiene información de contacto.
{{HTMLElement("main")}}This element has been added in HTML5Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
+ +

Agrupación de Contenido

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("p")}}Define una parte que debe mostrarse como un párrafo.
{{HTMLElement("hr")}}Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.
{{HTMLElement("pre")}}Indica que su contenido esta preformateado y que este formato debe ser preservado.
{{HTMLElement("blockquote")}}Representa un contenido citado desde otra fuente.
{{HTMLElement("ol")}}Define una lista ordenada de artículos.
{{HTMLElement("ul")}}Define una lista de artículos sin orden.
{{HTMLElement("li")}}Define un artículo de una lista enumerada.
{{HTMLElement("dl")}}Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
{{HTMLElement("dt")}}Representa un término definido por el siguiente <dd>.
{{HTMLElement("dd")}}Representa la definición de los términos listados antes que él.
{{HTMLElement("figure")}} This element has been added in HTML5Representa una figura ilustrada como parte del documento.
{{HTMLElement("figcaption")}} This element has been added in HTML5Representa la leyenda de una figura.
{{HTMLElement("div")}}Representa un contenedor genérico sin ningún significado especial.
+ +

Semántica a nivel de Texto

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("a")}}Representa un hiperenlace, enlazando a otro recurso.
{{HTMLElement("em")}}Representa un texto enfatizado, como un acento de intensidad.
{{HTMLElement("strong")}}Representa un texto especialmente importante.
{{HTMLElement("small")}}Representa un comentario aparte, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
{{HTMLElement("s")}}Representa contenido que ya no es exacto o relevante.
{{HTMLElement("cite")}}Representa el título de una obra.
{{HTMLElement("q")}}Representa una cita textual inline.
{{HTMLElement("dfn")}}Representa un término cuya definición  está contenida en su contenido ancestro más próximo.
{{HTMLElement("abbr")}}Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
{{HTMLElement("data")}} This element has been added in HTML5Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
{{HTMLElement("time")}} This element has been added in HTML5Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
{{HTMLElement("code")}}Representa un código de ordenador.
{{HTMLElement("var")}}Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.
{{HTMLElement("samp")}}Representa la salida de un programa o un ordenador.
{{HTMLElement("kbd")}}Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
{{HTMLElement("sub")}},{{HTMLElement("sup")}}Representan un subíndice y un superíndice, respectivamente.
{{HTMLElement("i")}}Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
{{HTMLElement("b")}}Representa un texto hacia el cual se llama la atención para propósitos utilitarios.  No confiere ninguna importancia adicional y no implica una voz alterna.
{{HTMLElement("u")}}Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en chino.
{{HTMLElement("mark")}} This element has been added in HTML5Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
{{HTMLElement("ruby")}} This element has been added in HTML5 +

Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana japonés.

+
{{HTMLElement("rt")}} This element has been added in HTML5Representa el texto de una anotación ruby.
{{HTMLElement("rp")}} This element has been added in HTML5Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
{{HTMLElement("bdi")}} This element has been added in HTML5Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
{{HTMLElement("bdo")}}Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
{{HTMLElement("span")}}Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
{{HTMLElement("br")}}Representa un salto de línea.
{{HTMLElement("wbr")}} This element has been added in HTML5Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.
+ +

Ediciones

+ + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("ins")}}Define una adición en el documento.
{{HTMLElement("del")}}Define una remoción del documento.
+ +

Contenido incrustado

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("img")}}Representa una imagen.
{{HTMLElement("iframe")}}Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
{{HTMLElement("embed")}} This element has been added in HTML5Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
{{HTMLElement("object")}}Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
{{HTMLElement("param")}}Define parámetros para el uso por los plugins invocados por los elementos <object>.
{{HTMLElement("video")}} This element has been added in HTML5Representa un video, y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. 
{{HTMLElement("audio")}} This element has been added in HTML5Representa un sonido o stream de audio.
{{HTMLElement("source")}} This element has been added in HTML5Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>.
{{HTMLElement("track")}} This element has been added in HTML5Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>.
{{HTMLElement("canvas")}} This element has been added in HTML5Representa un área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
{{HTMLElement("map")}}En conjunto con <area>, define un mapa de imagen.
{{HTMLElement("area")}}En conjunto con <map>, define un mapa de imagen.
{{SVGElement("svg")}} This element has been added in HTML5Define una imagen vectorial embebida.
{{MathMLElement("math")}} This element has been added in HTML5Define una fórmula matemática.
+ +

Datos tabulares

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("table")}}Representa datos con más de una dimensión.
{{HTMLElement("caption")}}Representa el título de una tabla.
{{HTMLElement("colgroup")}}Representa un conjunto de una o más columnas de una tabla.
{{HTMLElement("col")}}Representa una columna de una tabla.
{{HTMLElement("tbody")}}Representa el bloque de filas que describen los datos concretos de una tabla.
{{HTMLElement("thead")}}Representa el bloque de filas que describen las etiquetas de columna de una tabla.
{{HTMLElement("tfoot")}}Representa los bloques de filas que describen los resúmenes de columna de una tabla.
{{HTMLElement("tr")}}Representa una fila de celdas en una tabla.
{{HTMLElement("td")}}Representa una celda de datos en una tabla.
{{HTMLElement("th")}} +

Representa una celda encabezado en una tabla. 

+
+ +

Formularios

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("form")}}Representa un formulario, consistiendo de controles que puede ser enviado a un servidor para procesamiento.
{{HTMLElement("fieldset")}}Representa un conjunto de controles.
{{HTMLElement("legend")}}Representa el título de un <fieldset>.
{{HTMLElement("label")}}Representa el título de un control de formulario.
{{HTMLElement("input")}}Representa un campo de datos escrito que permite al usuario editar los datos.
{{HTMLElement("button")}}Representa un botón.
{{HTMLElement("select")}}Representa un control que permite la selección entre un conjunto de opciones.
{{HTMLElement("datalist")}} This element has been added in HTML5Representa un conjunto de opciones predefinidas para otros controles.
{{HTMLElement("optgroup")}}Representa un conjunto de opciones, agrupadas lógicamente.
{{HTMLElement("option")}}Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
{{HTMLElement("textarea")}}Representa un control de edición de texto multilínea.
{{HTMLElement("keygen")}} This element has been added in HTML5Representa un control de par generador de llaves.
{{HTMLElement("output")}} This element has been added in HTML5Representa el resultado de un cálculo.
{{HTMLElement("progress")}} This element has been added in HTML5Representa el progreso de finalización de una tarea.
{{HTMLElement("meter")}} This element has been added in HTML5Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
+ +

Elementos interactivos

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("details")}} This element has been added in HTML5Representa un widget desde el que un usuario puede obtener información o controles adicionales.
{{HTMLElement("summary")}} This element has been added in HTML5Representa un resumen, título o leyenda para un elemento <details> dado.
{{HTMLElement("command")}} This element has been added in HTML5Representa un comando que un usuario puede invocar.
{{HTMLElement("menu")}} This element has been added in HTML5Representa una lista de comandos .
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/html/global_attributes/index.html b/files/es/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..64afaf64ff --- /dev/null +++ b/files/es/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,27 @@ +--- +title: Atributo global +slug: Glossary/Atributo_global +tags: + - CodingScripting + - Glosario + - HTML + - atributo +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +

Los Atributos Globales son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).

+ +

Algunos atributos se pueden utilizar en cualquier elemento HTML:

+ + + +

Saber más

+ + diff --git a/files/es/conflicting/web/html/global_attributes/spellcheck/index.html b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..0f409bb10e --- /dev/null +++ b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,73 @@ +--- +title: Control de la corrección ortográfica en formularios HTML +slug: Control_de_la_corrección_ortográfica_en_formularios_HTML +tags: + - Desarrollo_Web + - Gestión de configuración + - HTML + - Intermedio + - Todas_las_Categorías + - XHTML +translation_of: Web/HTML/Global_attributes/spellcheck +translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms +--- +

{{ gecko_minversion_header("1.8.1") }} Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web. Usando la interfaz "about:config" el usuario puede activar o desactivar el corrector, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.

+ +

Por defecto, se comprueban las áreas de texto y los documentos en designMode, pero los campos de texto no. Esto se debe a que sería una distracción para los usuarios si Firefox marca cosas como el ID de usuario y direcciones de correo electrónico como errores.

+ +

Sin embargo, puede haber situaciones en las que este comportamiento no sea el más apropiado. Por ejemplo, si un área de texto va a ser usada para editar código HTML, u otro tipo de datos que no sean texto simple, el corrector ortográfico puede resultar un estorbo en vez de una ayuda. También puede haber casos en los que un sitio quiera recomendarle a Firefox que active la corrección ortográfica en un campo de texto específico; por ejemplo, para los cuadros de búsqueda y los campos de asunto del correo electrónico.

+ +

Si un sitio web desea recomendar si usar o no la corrección ortográfica para un elemento <input type="text"> concreto, se puede usar el atributo spellcheck, especificando el valor true para recomendar la activación del corrector, o false para desaconsejarla.

+ +

Ten en cuenta que la recomendación del sitio puede ser ignorado si el usuario ha desactivado la corrección ortográfica en su totalidad fijando layout.spellcheckDefault a "0". Si layout.spellcheckDefault tiene cualquier otro valor, el recomendaciones se tienen en cuenta.

+ +

Por ejemplo, el siguiente código HTML recomienda el uso del corrector en un campo de texto simple:

+ +
<input type="text" size="50" spellcheck="true">
+
+ +

Del mismo modo, se puede desaconsejar la corrección en un área de texto con un código HTML como este:

+ +
<textarea spellcheck="false"></textarea>
+
+ +

Se puede controlar un documento en designMode (habitualmente usado para la edición de texto enriquecido), poniendo el atributo spellcheck en la etiqueta <body> de los documentos. N.T. Esto del designMode no me gusta

+ +

También se puede usar el atributo spellcheck en otros elementos, como en los elementos <span> o <div>, en tal caso, cualquier elemento <input> contenido por estos elementos heredará ese atributo. Los elementos <input> que no tengan un atributo spellcheck lo heredarán de sus padres, y si estos tampoco lo tienen, se aplicará la configuración por defecto.

+ +

Por ejemplo:

+ +
<div spellcheck="true">
+  <label>Escribe una oración: </label><input type="text" size="50">
+  <br>
+  <label>Escriba otra: </label><input type="text" size="50">
+</div>
+<br>
+<label>Escriba una tercera: </label><input type="text" size="50">
+
+ +

En este fragmento de código HTML, los dos primeros campos de texto se comprueban mientras que el tercero no.

+ +

{{ h1_gecko_minversion("Controlar el idioma del corrector ortográfico", "9.0") }}

+ +

A partir de Gecko 9.0 {{ geckoRelease("9.0") }}, el corrector ortográfico utiliza un elemento {{ HTMLElement("input") }} con atributo {{ htmlattrxref("lang", "input") }} para determinar el idioma predeterminado del corrector ortográfico. Si {{ HTMLElement("input") }} no tiene atributo lang, el atributo se busca en cada elemento padre sucesivamente y hacia arriba, hacia el nodo raíz hasta encontrar uno.

+ +

De esta manera, si un usuario tiene a la vez instalados los diccionarios Frances e Ingles, y un elemento editable tiene lang="en", el diccionario Inglés se utilizará automáticamente para ese elemento.

+ +

Por ejemplo:

+ +
<html lang="en">
+<body>
+  <textarea></textarea>
+  <textarea lang="fr"></textarea>
+  <div lang="ru">
+    <textarea></textarea>
+  </div>
+</body>
+</html>
+
+-- + +

En este fragmento de código HTML, el primer {{ HTMLElement("textarea") }} será revisado en Inglés, el segundo en Francés, y el tercero en Ruso. + +

Si un elemento especifica un idioma, y el usuario no tiene instalado el diccionario para ese idioma, corrector ortográfico estrá desactivado por defecto, aunque el usuario puede elegir activarlo de forma manual.

diff --git a/files/es/conflicting/web/http/basics_of_http/mime_types/index.html b/files/es/conflicting/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..fbd15d6764 --- /dev/null +++ b/files/es/conflicting/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,47 @@ +--- +title: Tipo MIME incorrecto en archivos CSS +slug: Tipo_MIME_incorrecto_en_archivos_CSS +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +translation_of_original: Incorrect_MIME_Type_for_CSS_Files +--- +

¿Cuál es el problema?

+

Quizás encuentres una web que use CSS con un diseño pobre en Netscape 7.x o cualquier navegador basado en Gecko como Mozilla, mientras que en Internet Explorer se muestra correctamente. Una de las razones más comunes para que esto suceda es una configuración inapropiada del servidor que tiene almacenado el archivo CSS. Algunos servidores Apache e iPlanet asocian archivos con extensión .CSS con un tipo incorrecto MIME como el "text/plain" o "application/x-pointplus". En algunos casos, Netscape 7.x y Mozilla ignoran el archivo CSS porque tiene un tipo MIME incorrecto y usan una hoja de estilo por defecto que causa que el diseño sea diferente del que se pretendía por parte del desarrollador web. +

+

¿Cuándo ocurre esto?

+

La especificación W3C menciona que los archivos CSS deben ser almacenados con el tipo MIME "text/css". Mozilla y Netscape 7.x, cuando son usados en "modo estricto" siguen la especificación al pie de la letra y esperan que el archivo CSS este almacenado con el tipo MIME correcto (El "Modo estricto" se activa teniendo una Definición del Tipo de Documento estricta en la primera línea de la página HTML). En el "modo no estricto", ambas aplicaciones tolerarán el tipo MIME incorrecto y usarán la hoja de estilo adjunta a pesar de la configuración errónea del servidor. Esto significa que no puedes tener documentos en modo "estricto" con un servidor mal configurado. Internet Explorer te permite saltarte esta desconfiguración al no tener en cuenta el tipo MIME que el servidor proporciona en la cabecera del http. +

+

¿Qué puedo hacer para cambiar esto?

+

Debes comentar a los administradores del servidor que actualicen el archivo de configuración de tipo MIME en el servidor web. +

Esta cuestión, en los servidores web iPlanet/Netscape ya ha sido puesta en conocimiento por el vendedor, quien ha añadido una nota técnica en su base de conocimientos. +

Si usas Apache, puedes cambiar también la configuración del archivo .htaccess en tu directorio raíz (El archivo .htaccess es un archivo de solo lectura que maneja varias cosas incluyendo los tipos MIME). Añade esta línea a tu archivo .htaccess: +

+
AddType text/css .css
+

Ten en cuenta que algunos Webmasters han deshabilitado el uso del archivo de configuración .htaccess en sus servidores Apache porque tiene un pequeño impacto de rendimiento. +

+

Conclusión

+

Usar un tipo de definición de documento estricta con Mozilla dará lugar a que el servidor que aloja tus páginas web necesite ser configurado apropiadamente. Hay varias soluciones a este problema, pero la más efectiva es tener el tipo MIME correcto asociado a los archivos .css. Comenta al Webmaster que arregle esto por ti, ¡todo el mundo que publique documentos html en modo estricto te lo agradecerá! +

+

Cambiando el tipo MIME en servidores iPlanet/Sun

+

Problema +

Los usuarios se encuentran con un dialogo de Salvar como con el tipo de contenido application/x-pointplus o con el contenido del archivo CSS representado como texto en el navegador cuando una pagina incluye una Hoja de Estilo con la extensión .css. +

Solución +

El tipo de archivo .css no esta enlazado a las hojas de estilo en los tipos por defecto MIME incluidos en el Enterprise Server. Puedes cambiar el enlace en la pagina de tipos globales MIME. +

Para acceder a esta página, desde el admin server acceder a Preferencias del Servidor, MIME Types, y establece el tipo MIME a .css a text/css en vez de application/x-pointplus. +

Si el problema persiste, desactiva el keepalive añadiendo "KeepAliveTimeout 0" al magnus.conf +

Basado en: SunSolve, Sun Microsystems +

+

Fuentes adicionales

+

Configurar correctamente los tipos MIME del servidor +

Sobre garbled media +

+
+

Información original del documento

+ +
+{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "fr": "fr/Type_MIME_incorrect_pour_les_fichiers_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }} diff --git a/files/es/conflicting/web/http/csp/index.html b/files/es/conflicting/web/http/csp/index.html new file mode 100644 index 0000000000..6fcf1a2ff3 --- /dev/null +++ b/files/es/conflicting/web/http/csp/index.html @@ -0,0 +1,39 @@ +--- +title: CSP (Políticas de Seguridad de Contenido) +slug: Web/Security/CSP +tags: + - Documento + - Referencia +translation_of: Web/HTTP/CSP +translation_of_original: Web/Security/CSP +--- +
{{gecko_minversion_header("2.0")}}
+ +

Políticas de Seguridad de Contenido (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo Cross-Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde robo de datos hasta la alteración de su sitio o distribución de malware.

+ +

Aunque las Políticas de Seguridad de Contenido fueron incluidas desde Firefox 4, esa implementación, usando la cabecera X-Content-Security-Policy, es anterior a la existencia de una especificacion formal de CSP. Firefox 23 contiene una implementación actualizada de CSP que usa la cabecera Content-Security-Policy sin prefijo y las directivas como están descritas en la especificación W3C CSP 1.0.

+ +

Tópicos de Políticas de Seguridad de Contenido

+ +
+
Introducción a Políticas de Seguridad de Contenido
+
Un resumen de que es y como CSP puede hacer su sitio mas seguro.
+
Directivas de Políticas CSP
+
Una referencia de las directivas de políticas CSP.
+
Usando Políticas de Seguridad de Contenido
+
Puede ajustar el comportamiento de CSP configurando el conjunto de las políticas. Esto le permite reducir y ajustar la seguridad para tipos individuales de recursos, basado en las necesidades de su sitio. Este artículo describe como configurar CSP, asi como también habilitarlo para el uso en su sitio.
+
Usando reportes de violación de CSP
+
Como usar los reportes de violación de las Políticas de Seguridad de Contenido para monitorear los intentos de ataque a su sitio y a sus usuarios.
+
Restricciones CSP por defecto
+
Detalles acerca de las restricciones por defecto reforzadas por CSP.
+
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html new file mode 100644 index 0000000000..58960c7798 --- /dev/null +++ b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html @@ -0,0 +1,57 @@ +--- +title: Introducción a Políticas de Seguridad de Contenido +slug: Web/Security/CSP/Introducing_Content_Security_Policy +tags: + - Documento + - Políticas de Seguridad de Contenido + - Referencia + - Seguridad +translation_of: Web/HTTP/CSP +translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy +--- +

{{ gecko_minversion_header("2") }}

+ +

Políticas de Seguridad de Contenido (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo Cross-Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde el robo de datos hasta hasta la alteración de su sitio o la distribución de malware.

+ +

CSP esta diseñado para ser completamente compatible hacia atras; los navegadores web que no lo soporten todavía pueden trabajar con servidores que las implementen, y viceversa. Los navegadores web que no soporten CSP simplemente la ignoran, funcionando como es normal, usando la política de mismo origen por defecto para contenido web. Si el sitio no tiene la cabecera CSP, los navegadores web usan en su lugar la política de mismo origen.

+ +

Habilitar CSP tan fácil como configurar su servidor web para retornar la cabecera HTTP Content-Security-Policy. (Antes de Firefox 23, la cabecera X-Content-Security-Policy era usada). Ver Usando Políticas de Seguridad de Contenido para detalles de como configurar y habilitar CSP.

+ +
Nota: El estándar de Políticas de Seguridad de Contenido especifica que un elemento {{ HTMLElement("meta") }} puede ser usado para configurar una política, pero esta característica todavía no está soportada en Firefox. El soporte para esta característica será añadida según bug 663570.
+ +

Mitigando cross site scripting

+ +

Un objetivo primario de CSP es mitigar y reportar ataques XSS. Los ataques XSS explotan la confianza de los navegadores web en el contenido recibido del servidor. Los scripts maliciosos son ejecutados por la victima del navegador web por que éste confía en el origen del contenido, aún cuando no viene desde donde parece venir.

+ +

CSP hace posible a los administradores de servidores reducir o eliminar los vectores por los cuales un ataque XSS puede ocurrir especificando los dominios que el navegador web debe considerar orígenes válidos de scripts ejecutables. Un navegador web compatible con CSP entonces solo ejecutará scripts cargados en archivos fuente recibidos de aquellos dominios permitidos, ignorando todos los demás scripts (incluyendo scripts en línea y atributos HTML de manejo de eventos).

+ +

Como una última forma de protección, los sitios que no deseen permitir nunca la ejecución de scripts pueden optar por deshabilitar globalmente la ejecución de scripts.

+ +

Mitigando ataques de packet sniffing

+ +

En adición a la restricción de los dominos desde los cuales el contenido puede ser cargado, el servidor puede especificar que protocolos son permitidos para su uso; por ejemplo (e idealmente, desde un punto de vista de seguridad), un servidor puede especificar que todo el contenido debe ser cargado usando HTTPS.

+ +
Nota: Una estrategia de transmisión segura de datos incluye no solo reforzar HTTPS para la transferencia de datos, sino tambien marcar todas las cookies con indicadores seguros y proveer redirecciones automáticas desde páginas HTTP a sus contrapartes en HTTPS.
+ +
Nota: Los sitios pueden usar tambien la cabecera HTTP  Strict-Transport-Security para asegurarse de que los navegadores web se conecten solo a traves de un canal encriptado.
+ +

Ver también

+ + + +

Especificación

+ + + +
+

{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}

+
+ +

 

diff --git a/files/es/conflicting/web/http/headers/content-security-policy/index.html b/files/es/conflicting/web/http/headers/content-security-policy/index.html new file mode 100644 index 0000000000..c2f9c5a628 --- /dev/null +++ b/files/es/conflicting/web/http/headers/content-security-policy/index.html @@ -0,0 +1,709 @@ +--- +title: Políticas Directivas CSP +slug: Web/Security/CSP/CSP_policy_directives +translation_of: Web/HTTP/Headers/Content-Security-Policy +translation_of_original: Web/Security/CSP/CSP_policy_directives +--- +

 

+ +

Hay varios ámbitos de las políticas que pueden ser definidas por los administradores de las páginas web usando las Normas de Seguridad de Contenido o CSP por sus siglas en ingles. Cualquier combinación de estas políticas puede ser utilizada para satisfacer las necesidades de su sitio web, no es necesario especificar todas ellas..

+ +

Fuentes de contenido

+ +

La mayoría de las políticas directivas necesitan de una o más fuentes de contenido. Una fuente de contenido es una cadena que indica una posible fuente de donde el contenido puede ser descargado.

+ +

Listas de fuentes

+ +

Una lista de fuentes es un cadena que especifica uno o más hosts de internet o direcciones IP, así como un esquema de URL opcional y/o número de puerto. La dirección del sitio puede incluir un comodín líder (el carácter asterisco, '*'), y puedes usar un comodín (de nuevo, '*') como el número de puerto, indicando que todos los puertos legales son válidos para la fuente. Los hosts son delimitados por espacio.

+ +

Las expresiones validas del host son:

+ +
+
http://*.foo.com
+
Junta todos los intentos de carga desde cualquier subdominio de foo.com usando el sistema URL http:.
+
mail.foo.com:443
+
Junta todos los intentos de acceso al puerto 443 en mail.foo.com.
+
https://store.foo.com
+
Junta todos los intentos para acceder store.foo.com usando https:.
+
+ +

Si un número de puerto no está especificado, el navegador usara el número de puerto predeterminado para el sistema especificado. Si no hay sistema especificado, el mismo sistema que ha sido usado para acceder al documento protegido será usado.

+ +
+
+ +

Palabras claves

+ +

También existen algunas palabras claves disponibles para describir clases especiales de fuentes de contenido. Estas palabras son las siguientes:

+ +
+
'none'
+
Se refiere al conjunto vacío, es decir, no hay URLs que coincidan. Las comillas simples son necesarias.
+
'self'
+
Se refiere al origen del cual los documentos protegidos están siendo enviados, incluyendo el mismo sistema de URL y numero de puerto. Las comillas simples deben ser incluidas. Algunos navegadores excluyen específicamente blob y filesystem de las políticas directivas. Sitios que necesitan permitir  este tipo de contenido puede especificarlos usando el Data attribute.
+
'unsafe-inline'
+
Permite el uso de recursos alineados como elementos alineados {{ HTMLElement("script") }} , javascript: URLs, controladores de eventos alineados e elementos alineados {{ HTMLElement("style") }} . Las comillas simples deben ser incluidas.
+
'unsafe-eval'
+
Permite el uso de eval()y métodos similares para la creación de códigos desde las cadenas de caracteres. Las comillas simples deben ser incluidas.
+
+ +
Nota: 'unsafe-inline' y 'unsafe-eval' son inseguros y pueden hacer de tu página web vulnerable contra cross-site scripting.
+ +

Ejemplo, puedes especificar que el contenido sea cargado desde el origen del documento, así como desde trustedscripts.foo.com de la siguiente manera:

+ +
Content-Security-Policy: default-src 'self' trustedscripts.foo.com
+
+ +
+
+ +

Data

+ +
Nota: data: URIs son inseguras y pueden hacer de tu página web vulnerable contra cross-site scripting si es permitido por las fuentes del script.
+ +
+
data:
+
Permite que data: URIs sea usada como fuente de contenido. Esto es inseguro y un atacante puede insertar data: URIs arbitrarias. Utilízala con moderación y definitivamente no para los scripts.
+
mediastream:
+
Permite que mediastream: URIs sea usada como fuente de contenido.
+
blob:
+
Permite que blob: URIs sea usada como fuente de contenido.
+
filesystem:
+
Permite que filesystem: URIs sea usada como fuente de contenido.
+
+ +
Content-Security-Policy: default-src 'self'; img-src 'self' data: blob: filesystem:; media-src mediastream:
+
+ +

Políticas directivas soportadas

+ +

Las siguientes políticas directivas están disponibles para controlar la política de seguridad para varias ares de las políticas.

+ +

base-uri

+ +

La directiva >base-uri define las URLs que un agente usuario puede usar como el documento URL base. Si este valor no está presente, cualquier URL está permitido. Si esta directiva no está presente, el agente usuario usara el valor en el elemento base.

+ +
base-uri source-list
+ +

child-src

+ +

La directiva child-src define las fuentes válidas para los trabajadores de la web y contextos de navegación anidados cargados utilizando elementos tales como {{ HTMLElement("frame") }} y {{ HTMLElement("iframe") }}. Esta opción es preferida sobre la directiva frame-src, la cual es obsoleta. Para los trabajadores, las solicitudes no conformes son tratadas como errores de red fatales por el agente usuario.

+ +
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
+ +
​child-src source-list
+ +

connect-src

+ +

La directiva connect-src define fuentes válidas para fetch, XMLHttpRequest, WebSocket y conecciones EventSource.

+ +
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
+ +
Nota: Antes de la versión Firefox 23, xhr-src  era utilizado en lugar de la directiva connect-src y solo restringía el uso de XMLHttpRequest.
+ +
connect-src source-list
+ +

default-src

+ +

La directiva por defecto default-src define la política de seguridad para los tipos de contenidos que no están expresamente señalados por otras directivas. Esta directiva abarca las siguientes directivas:

+ + + +
default-src source-list
+ +

font-src

+ +

La directivas font-src especifica las fuentes válidas para los tipos de letras cargadas usando {{ cssxref("@font-face") }}.

+ +
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
+ +
font-src source-list
+ +

form-action

+ +

La directiva form-action{{experimental_inline}} especifica criterios de valoración válidos para las sumisiones {{ HTMLElement("form") }}.

+ +
form-action >source-list
+ +

frame-ancestors

+ +

La directiva frame-ancestors{{experimental_inline}} especifica padres validos que pueden incustrar una pagina usando elementos  {{ HTMLElement("frame") }} y {{ HTMLElement("frame") }}. Esta directiva no esta soportada en el elemento <meta> o por la cabecera Content-Security-Policy-Report-Only.

+ +
frame-ancestors source-list
+ +

frame-src {{obsolete_inline}}

+ +

The frame-src directive specifies valid sources for web workers and nested browsing contexts loading using elements such as >{{ HTMLElement("frame") }} and {{ HTMLElement("iframe") }}.>

+ +
+
Note: This directive is deprecated. Use child-src instead.
+
+ +
frame-src source-list
+ +

img-src

+ +

The img-src directive specifies valid sources of images and favicons. 

+ +
Note: If this directive is absent, the user agent will look for the default-src directive.
+ +
img-src source-list
+ +

manifest-src

+ +

The manifest-src directive specifies which manifest can be applied to the resource.

+ +
Note: If this directive is absent, the user agent will look for the default-src directive.
+ +
manifest-src source-list
+ +

media-src

+ +

The media-src directive specifies valid sources for loading media using the {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.

+ +
Note: If this directive is absent, the user agent will look for the default-src directive.
+ +
media-src source-list
+ +

object-src

+ +

The object-src directive specifies valid sources for the {{ HTMLElement("object") }}, {{ HTMLElement("embed") }}, and {{ HTMLElement("applet") }} elements. 

+ +
Note: If this directive is absent, the user agent will look for the default-src directive.
+ +
object-src source-list
+ +

plugin-types

+ +

The plugin-types directive specifies the valid plugins that the user agent may invoke.

+ +
plugin-types type-list
+ +

referrer

+ +

The referrer directive specifies information in the referrer header for links away from a page.

+ +
​referrer value
+ +

reflected-xss

+ +

The reflected-xss directive instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks. Valid values are allow, block, and filter. This directive is not supported in the <meta> element.

+ +
Note: This directive is ignored if it is contained in a meta element.
+ +
reflected-xss value
+ +

report-uri

+ +

The report-uri directive instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI. See Using CSP violation reports for details. This directive is not supported in the <meta> element.

+ +
report-uri uri
+ +

sandbox

+ +

The sandbox directive applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. This directive is not supported in the <meta> element or by the Content-Security-policy-Report-Only header field.

+ +
sandbox value
+ +

script-src

+ +

The script-src directive specifies valid sources for JavaScript. When either the script-src or the default-src directive is included, inline script and eval() are disabled unless you specify 'unsafe-inline' and 'unsafe-eval', respectively.

+ +
Note: If this directive is absent the user agent will look for the default-src directive.
+ +
script-src source-list
+ +

style-src

+ +

The style-src directive specifies valid sources for stylesheets. This includes both externally-loaded stylesheets and inline use of the {{ HTMLElement("style") }} element and HTML style attributes. Stylesheets from sources that aren't included in the source list are not requested or loaded. When either the style-src or the default-src directive is included, inline use of the {{ HTMLElement("style") }} element and HTML style attributes are disabled unless you specify 'unsafe-inline'.

+ +
Note: If this directive is absent, the user agent will look for the default-src directive.
+ +
style-src source-list
+ +
Note: Firefox currently requires using the same URL scheme and port for the report-uri as the content being protected by Content Security Policy.
+ +

upgrade-insecure-requests

+ +

The upgrade-insecure-requests directive instructs user agents to treat all of a site's unsecure URL's (those serverd over HTTP) as though they have been replaced with secure URL's (those served over HTTPS). This directive is intended for web sites with large numbers of unsecure legacy URL's that need to be rewritten. 

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ specName("Upgrade Insecure Requests")}}{{Spec2('Upgrade Insecure Requests')}}Adds upgrade-insecure-requests.
{{ specName("CSP 1.1") }}{{Spec2('CSP 1.1')}}Adds base-uri, child-src, form-action, frame-ancestors, plugin-types, referrer, reflected-xss, and report-uri. Deprecates frame-src.
{{ specName("CSP 1.0") }}{{Spec2('CSP 1.0')}}Defines connect-src, >default-src, >font-src, >frame-src, >img-src, >media-src, >objects-src, >report-uri,>sandbox, >script-src, and >style-src.>
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
{{CompatUnknown}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome{{ref("2")}}Firefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatChrome(14.0)}} (X-Webkit-CSP)

+ +

{{CompatChrome(25.0)}}

+ 		+

{{CompatGeckoDesktop("2.0")}} (X-Content-Security-Policy)

+ +

{{CompatGeckoDesktop("23.0")}}

+ 		Edge15 +

6 (X-Webkit-CSP)

+ +

7

+
base-uri{{CompatChrome(40.0)}}{{CompatGeckoDesktop("35.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
child-src{{CompatChrome(40.0)}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
connect-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
default-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
font-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
form-action{{CompatChrome(40.0)}}{{CompatGeckoDesktop("36.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
frame-ancestors{{CompatChrome(40.0)}}{{CompatGeckoDesktop("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
frame-src{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
img-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
manifest-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
media-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
object-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
plugin-types{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
referrer{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
reflected-xss{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
report-uri{{CompatChrome(40.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
script-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
style-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+

upgrade-insecure-requests

+ 		+

{{CompatChrome(43.0)}}

+ 		{{CompatGeckoDesktop("42.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid Browser{{ref("1")}}Android Webview{{ref("2")}}Firefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile{{ref("2")}}
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}iOS 7.1{{CompatVersionUnknown}}
base-uri{{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("35.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
child-src{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
connect-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
default-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
font-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
form-action {{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("36.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
frame-ancestors {{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
frame-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
img-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
manifest-src{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
media-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
object-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
plugin-types{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
referrer{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
reflected-xss{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
report-uri{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
sandbox{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
script-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
style-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
upgrade-insecure-requests{{CompatGeckoMobile(42)}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

 

+ +

Notes

+ +

{{ref("1")}} Deprecated since Android 4.0.

+ +

{{ref("2")}} Starting with version {{CompatChrome(45.0)}}, Chrome excludes blob and filesystem from source directives. Sites needing to allow these content types can specify them using the Data attribute.

+ +

See also

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..fef80071de --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,69 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype +tags: + - ArrayBuffer + - JavaScript + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +--- +
{{JSRef}}
+ +

La propiedad ArrayBuffer.prototype representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.

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

Descripción

+ +

Las instancias de ArrayBuffer heredan de ArrayBuffer.prototype. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de ArrayBuffer.

+ +

Propiedades

+ +
+
ArrayBuffer.prototype.constructor
+
Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar ArrayBuffer.
+
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
+
El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. Sólo lectura.
+
+ +

Métodos

+ +
+
{{jsxref("ArrayBuffer.prototype.slice()")}}
+
Retorna un nuevo ArrayBuffer cuyo contenido es una copia los bytes de este ArrayBuffer desde begin, incluido, hasta  end, no incluido. Si begin o end son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ +

{{Compat("javascript.builtins.ArrayBuffer.prototype")}}

+ +
 
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/date/index.html b/files/es/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..de92c8ee02 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,201 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype +tags: + - Date + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +
+ {{JSRef("Objetos_globales", "Date")}}
+

Resumen

+

Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.

+
+ {{js_property_attributes(0,0,1)}}
+

Propriedades

+
+
+ Date.prototype.constructor
+
+  
+
+
+ {{ jsOverrides("Object", "properties", "constructor") }}
+

Métodos

+
+
+ {{jsxref("Date.prototype.getDate()")}}
+
+ Devuelve el día del mes de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getDay()")}}
+
+ Devuelve el día de la semana de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getFullYear()")}}
+
+ Devuelve el año de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getHours()")}}
+
+ Devuelve la hora de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getMilliseconds()")}}
+
+ Devuelve los milisegundos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getMinutes()")}}
+
+ Devuelve los minutos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getMonth()")}}
+
+ Devuelve el mes de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getSeconds()")}}
+
+ Devuelve los segundos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.getTime()")}}
+
+ Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getTimezoneOffset()")}}
+
+ Devuelve la diferencia horaria en minutos para la zona geográfica actual.
+
+ {{jsxref("Date.prototype.getUTCDate()")}}
+
+ Devuelve el día del mes de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCDay()")}}
+
+ Devuelve el día de la semana de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCFullYear()")}}
+
+ Devuelve el día el año de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCHours()")}}
+
+ Devuelve las horas de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
+ Devuelve los milisegundos de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCMinutes()")}}
+
+ Devuelve los minutos de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCMonth()")}}
+
+ Devuelve el mes de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getUTCSeconds()")}}
+
+ Devuelve los segundos de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}
+
+ Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.
+
+ {{jsxref("Date.prototype.setDate()")}}
+
+ Establece el día del mes de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setFullYear()")}}
+
+ Establece el año completo de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setHours()")}}
+
+ Establece las horas de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setMilliseconds()")}}
+
+ Establece los milisegundos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setMinutes()")}}
+
+ Establece los minutos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setMonth()")}}
+
+ Establece el mes de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setSeconds()")}}
+
+ Establece los segundos de la fecha especificada según la hora local.
+
+ {{jsxref("Date.prototype.setTime()")}}
+
+ Establece el valor del objeto Date según la hora local.
+
+ {{jsxref("Date.prototype.setUTCDate()")}}
+
+ Establece el día del mes de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.setUTCFullYear()")}}
+
+ Establece el año completo de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.setUTCHours()")}}
+
+ Establece la hora de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
+ Establece los milisegundos de la fecha especificada según la hora universal..
+
+ {{jsxref("Date.prototype.setUTCMinutes()")}}
+
+ Establece los minutos de la fecha especificada según la hora universal..
+
+ {{jsxref("Date.prototype.setUTCMonth()")}}
+
+ Establece el mes de la fecha especificada según la hora universal.
+
+ {{jsxref("Date.prototype.setUTCSeconds()")}}
+
+ Establece los segundos de la fecha especificada según la hora universal..
+
+ {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}
+
+ Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.
+
+ {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}
+
+ Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.
+
+ {{jsxref("Date.prototype.toLocaleString()")}}
+
+ Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.
+
+ {{jsxref("Date.prototype.toLocaleDateString()")}}
+
+ Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.
+
+ {{jsxref("Date.prototype.toLocaleTimeString()")}}
+
+ Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.
+
+ {{jsxref("Date.prototype.toSource()")}}
+
+ Devuelve un literal que representa al objeto Date especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.
+
+ {{jsxref("Date.prototype.toString()")}}
+
+ Devuelve una cadena representando el objeto Date especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.
+
+ {{jsxref("Date.prototype.toUTCString()")}}
+
+ Convierte una fecha en una cadena, usando las reglas horarias universales.
+
+ {{jsxref("Date.prototype.valueOf()")}}
+
+ Devuelve el valor primitivo de un objeto Date. Sobreescribe el método {{jsxref("Object.valueOf()")}}.
+
+

{{ jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf") }}

diff --git a/files/es/conflicting/web/javascript/reference/global_objects/error/index.html b/files/es/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..aac1516fc2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,154 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +
{{JSRef}}
+ +

La propiedad Error.prototype representa el prototipo del constructor {{jsxref("Error")}}.

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

Descripción

+ +

Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de Error.prototype. Como todas las funciones constructoras, se puede usar el protoipo del constructor para añadir propiedades o métodos a todas las instancias creadas con este constructor.

+ +

Properties

+ +

Propiedades estándar

+ +
+
Error.prototype.constructor
+
Especifica la función que crea una instancia del prototipo.
+
{{jsxref("Error.prototype.message")}}
+
Mensaje de error.
+
{{jsxref("Error.prototype.name")}}
+
Nombre del error.
+
+ +

Extensiones específicas del proveedor

+ +
{{non-standard_header}}
+ +

Microsoft

+ +
+
{{jsxref("Error.prototype.description")}}
+
Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.
+
{{jsxref("Error.prototype.number")}}
+
Número de error.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Ruta del archivo que lanzó el error.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Número de fila en el archivo que lanzó el error.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Número de columna en el archivo que lanzó el error.
+
{{jsxref("Error.prototype.stack")}}
+
Seguimiento de la pila.
+
+ +

Métodos

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
+
Devuelve una cadena que contiene el codígo del objeto {{jsxref("Error")}}; se puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial. Implementado en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/function/index.html b/files/es/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..9d8671c534 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,65 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +
{{JSRef("Objetos_globales", "Function")}}
+ +

Resumen

+ +

Un valor desde cuyas instancias de una clase particular son creados. Cada objeto que puede ser creado por la invocación a la función constructora posee una propiedad prototype asociada.

+ +

Descripción

+ +

Puede añadir propiedades o métodos a una clase existente mediante la adición de ellos al prototipo asociado con la función constructora para esa clase.

+ +

Propiedades

+ +
+
{{jsxref("Function.arguments")}} {{Deprecated_inline}}
+
Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una Function, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.
+
{{jsxref("Function.caller")}}
+
Especifica la función que invoca la ejecución de la función actual (no estándar).
+
{{jsxref("Function.constructor")}}
+
Especifica la función que crea un prototipo de objeto.
+
{{jsxref("Function.length")}}
+
Specifica el número de argumentos esperados por la función.
+
{{jsxref("Function.name")}}
+
El nombre de la función (no forma parte del estándar).
+
{{jsxref("Function.prototype")}}
+
Permite añadir propiedades a los objetos función (ambos, los construidos usando Function y los declarados usando una declaración de función o una expresión de función).
+
+ +
{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}
+ +

Métodos

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).
+
{{jsxref("Function.prototype.call()")}}
+
Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).
+
{{jsxref("Function.prototype.toSource()")}}
+
Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.
+
+ +
{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}
+ +
+
 
+
+ +

Vea También

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/map/index.html b/files/es/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..b255e65b69 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,135 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

La propiedad Map.prototype  representa el prototipo del constructor {{jsxref("Map")}}.

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

Descripción

+ +

La instancia de {{jsxref("Map")}} hereda de {{jsxref("Map.prototype")}}. Puedes utilizar el constructor del prototipo del objeto para agregar propiedades o métodos a todas las instancias de Map.

+ +

Propiedades

+ +
+
Map.prototype.constructor
+
Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.
+
{{jsxref("Map.prototype.size")}}
+
Devuelve el número de conjuntos de llave/valor en el objeto Map.
+
+ +

Métodos

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Elimina todos los conjuntos de llave/valor del objeto Map.
+
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
+
Elimina cualquier valor asociado a la llave y devuelve el valor que  Map.prototype.has(key) tenía previamente. Después  Map.prototype.has(key) devolverá false.
+
{{jsxref("Map.prototype.entries()")}}
+
Devuelve un nuevo objeto  Iterador que contiene un array de [llave, valor] para cada elemento en el objeto  Map en orden de inserción.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto  Map, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.
+
{{jsxref("Map.get", "Map.prototype.get(key)")}}
+
Devuelve el valor asociado a la  llave, o undefined si no tiene ninguno.
+
{{jsxref("Map.has", "Map.prototype.has(key)")}}
+
Devuelve un booleano que indica si un valor se ha asociado a la llave en el objeto Map o no se ha asociado.
+
{{jsxref("Map.prototype.keys()")}}
+
Devuelve un nuevo objeto  Iterador que contiene las llaves para cada elemento en el objeto Map en orden de inserción.
+
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
+
Establece un valor para la llave en el objeto Map. Devuelve el objeto  Map.
+
{{jsxref("Map.prototype.values()")}}
+
Devuelve un nuevo objeto  Iterador que contiene los valores para cada elemento en el objeto  Map en orden de inserción.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Devuelve un nuevo objeto  Iterador que contiene un array de [llave, valor] para cada elemento en el objeto Map en orden de inserción.
+
+ +

Especificaciones

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

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{CompatVersionUnknown}}{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatVersionUnknown}}{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Vea también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/number/index.html b/files/es/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..c15b5b5fcb --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,16 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
+ {{JSRef("Objetos_globales", "Number")}}
+

Resumen

+

Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase. Para información acerca de prototipos.

+
+  
diff --git a/files/es/conflicting/web/javascript/reference/global_objects/object/index.html b/files/es/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..9b55c9cccc --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,195 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype +tags: + - JavaScript + - Objeto + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef("Objetos_globales", "Object")}}
+ +

Resumen

+ +

La propiedad Object.prototype representa al objeto prototipo de {{jsxref("Object")}}.

+ +

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

+ +

Descripción

+ +

Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de Object.prototype, aunque pueden ser sobrecargados. Sin embargo, un Object  puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando  {{jsxref("Object.create", "Object.create(null)")}}), o bien alterado para que no cumpla esta propiedad (por ejemplo usando {{jsxref("Object.setPrototypeOf")}}).

+ +

Cambios en el prototipo de {{jsxref("Object")}} son vistos por todos los objetos a traves de el encadenado de prototype, a no ser que las propiedades y los metodos sujetos a estos cambios sean sobreescritos en algun lugar de la cadena de prototype. Este poderoso y a la vez potencialmente peligroso mecanismo permite extender o sobreescribir el comportamiento de un objeto.

+ +

Propiedades

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Especifica la función que crea el prototipo de un objeto.
+
{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}
+
Apunta al objeto que se usó como prototipo cuando fue instanciado.
+
{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}
+
Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.
+
{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}
+
Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.
+
{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}
+
Apunta al contexto de un objeto. Ha sido borrado.
+
+ +

Métodos

+ +
+
{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
+
Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.
+
{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
+
Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.
+
{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
+
Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.
+
{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
+
Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Devuelve un valor lógico (boolean) que indica si el objeto contiene la propiedad indicada como una propiedad directa de ese objeto y no heredada por la cadena de prototipo.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Devuelve una indicación booleana cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Devuelve un valor lógico (boolean) indicando si el attributo ECMAScript [[Enumerable]] está definido.
+
{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}
+
Devuelve una cadena con el fuente de un literal de objeto que representa el objeto desde el que este método es llamado; se puede usar este valor para crear un nuevo objeto.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Llama a {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Devuelve la cadena de texto (string) que representa al objeto.
+
{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}
+
Remueve un punto de mira de una propiedad del objeto.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Devuelve el valor primitivo del objeto indicado.
+
{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}
+
Agrega un punto de mira a una propiedad del objeto.
+
{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}
+
Se utiliza para evaluar una cadena de código JavaScript  en el contexto del objeto especificado, pero que ha sido removido.
+
+ +

Ejemplos

+ +

Al alterar el comportamiento de un método existente en Object.prototype, es oportuno considerar envolver el código de tu extensión antes o después de la existente lógica. Por ejemplo, este trozo de código (sin testear) ejecutara una determinada lógica antes de que la lógica existente o la de algún otro elemento sea ejecutada.

+ +

Cuando una función es llamada, los parámetros de la llamada son mantenidos en el argumento parecido a una array llamado "arguments". Por ejemplo, en la llamada "myFn(a, b, c)", los parámetros dentro del cuerpo de la función myFn estarán contenidos en una variable llamada "arguments". Si se desea llamar al siguiente método de la cadena de prototype, simplemente añade this y arguments a la funcion apply(). Este patrón puede ser usado en cualquier prototype, por ejemplo Node.prototype, Function.prototype, etc.

+ +
var current = Object.prototype.valueOf;
+
+// Como mi propiedad "-prop-value" es un atajo y no se encuentra siempre
+// en la cadena de prototype, queremos modificar Object.prototype:
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty('-prop-value')) {
+    return this['-prop-value'];
+  } else {
+    // No parece que este objeto sea uno de los mios, por lo que recaeeremos
+    // en el comportamiento por defecto lo mejor que podamos.
+    // La llamada apply se comporta como el "super" en otros lenguages de programación.
+    // A pesar de que valueOf() no tiene parametros, alguna otra llamada podria tenerlos.
+    return current.apply(this, arguments);
+  }
+}
+ +

Como JavaScript no tiene objetos de tipo “subclase”, prototype es realmente útil para crear un objeto “base” donde ciertas funciones actúan como objetos. Por ejemplo:

+ +
var Person = function(name) {
+  this.name = name;
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this, name);
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this, name);
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this, name);
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservación
{{SpecName('ES1')}}{{Spec2('ES1')}} +

Definición inicial.Implementado en  JavaScript 1.0.

+
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} +

 

+
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ +

{{Compat("javascript.builtins.Object.prototype")}}

diff --git a/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..c15107912a --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,69 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype +tags: + - JavaScript + - Promesa + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +
{{JSRef}}
+ +

La propiedad Promise.prototype representa el prototipo del constructor de {{jsxref("Promise")}}

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

Descripción

+ +

Las instancias de {{jsxref("Promise")}} heredan de {{jsxref("Promise.prototype")}}. Se puede usar el objeto prototipo del constructor para agregar propiedades o métodos a todas las instancias de Promise.

+ +

Propiedades

+ +
+
Promise.prototype.constructor
+
Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.
+
+ +

Métodos

+ +
+
{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}
+
Anexa a la promesa un callback manejador de rechazo, y retorna una nueva promesa que resuelve al valor de retorno del callback si es llamado, o de lo contrario a su valor de cumplimiento original si la promesa es cumplida.
+
{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}
+
Anexa a la promesa manejadores de cumplimiento y rechazo, y retorna una nueva promesa que resuelve al valor de retorno del manejador llamado, o a su valor de determinación (settled) original si la promesa no fue manejada (p.ej. si el manejador relevante alCumplirse o alRechazarse no es una función).
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("javascript/promise","Promise.prototype")}}

+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..fa75157c9d --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,131 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +tags: + - Error + - JavaScript + - Propiedad + - Prototipo + - Prototype + - RangeError +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +--- +
{{JSRef}}
+ +

La propiedad RangeError.prototype representa el prototipo de {{jsxref("RangeError")}}.

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

Descripción

+ +

Todas las instancias de {{jsxref("RangeError")}} heredan de RangeError.prototype. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.

+ +

Propiedades

+ +
+
RangeError.prototype.constructor
+
Especifica la función que crea instancias del prototipo.
+
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
+
Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio message, en SpiderMonkey, se hereda de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
+
Nombre del error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
+
Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
+
Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
+
Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
+
Pila de llamadas. Heredada de {{jsxref("Error")}}.
+
+ +

Métodos

+ +

Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la cadena de prototipos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoCommentario
{{SpecName('ES3')}}{{Spec2('ES3')}}Definición inicial.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definido como NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definido como NativeError.prototype.
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vea también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/string/index.html b/files/es/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..89519b08d2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +

{{JSRef("Objetos_globales", "String")}}

+ +

Resumen

+ +

The String.prototype propiedad representa el prototipo de esta clase. Puede usar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.

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

Propiedades

+ +
+
String.prototype.constructor
+
Especifica la función que crea un prototipo de objeto.
+
{{jsxref("String.prototype.length")}}
+
Refleja la longitud de la cadena.
+
+ +
{{ jsOverrides("Object", "properties", "constructor", "length") }}
+ +

Métodos

+ +

Métodos no relacionados con HTML

+ +
+
{{jsxref("String.prototype.charAt()")}}
+
Devuelve el carácter en el índice especificado.
+
{{jsxref("String.prototype.charCodeAt()")}}
+
Devuelve el número que indica el valor Unicode del carácter en el índice especificado.
+
{{jsxref("String.prototype.concat()")}}
+
Combina el texto de dos cadenas y devuelve una nueva cadena.
+
{{jsxref("String.prototype.indexOf()")}}
+
Devuelve el índice dentro del objeto String que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.
+
{{jsxref("String.prototype.lastIndexOf()")}}
+
Devuelve el índice dentro del objeto String que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.
+
{{jsxref("String.prototype.match()")}}
+
Se usa para emparejar una expresión regular con una cadena.
+
{{jsxref("String.prototype.replace()")}}
+
Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.
+
{{jsxref("String.prototype.search()")}}
+
Realiza una búsqueda de una expresión regular en una cadena especificada.
+
{{jsxref("String.prototype.slice()")}}
+
Extrae una sección de una cadena y devuelve una nueva cadena.
+
{{jsxref("String.prototype.split()")}}
+
Divide un objeto String en un arreglo de cadenas, separando la cadena en subcadenas.
+
{{jsxref("String.prototype.substr()")}}
+
Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.
+
{{jsxref("String.prototype.substring()")}}
+
Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Devuelve el valor de la cadena que realiza la llamada en minúsculas.
+
{{jsxref("String.prototype.toSource()")}}
+
Devuelve el objeto literal que representa el objeto especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("String.prototype.toString()")}}
+
Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Devuelve el valor de la cadena que realiza la llamada en mayúsculas.
+
{{jsxref("String.prototype.valueOf()")}}
+
Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Métodos de encapsulado HTML

+ +

Cada uno de los métodos siguientes devuelve una copia de la cadena encapsulada dentro de una etiqueta HTML. Por ejemplo, "test".bold() devuelve "<b>test</b>".

+ +
+
{{jsxref("String.prototype.anchor()")}}
+
<a name="name"> (Ancha Hipertexto)
+
{{jsxref("String.prototype.big()")}}
+
{{HTMLElement("big")}}
+
{{jsxref("String.prototype.blink()")}}
+
{{HTMLElement("blink")}}
+
{{jsxref("String.prototype.bold()")}}
+
{{HTMLElement("b")}}
+
{{jsxref("String.prototype.fixed()")}}
+
{{HTMLElement("tt")}}
+
{{jsxref("String.prototype.fontcolor()")}}
+
<font color="color">
+
{{jsxref("String.prototype.fontsize()")}}
+
<font size="size">
+
{{jsxref("String.prototype.italics()")}}
+
{{HTMLElement("i")}}
+
{{jsxref("String.prototype.link()")}}
+
<a href="url"> (Enlace a URL)
+
{{jsxref("String.prototype.small()")}}
+
{{HTMLElement("small")}}
+
{{jsxref("String.prototype.strike()")}}
+
{{HTMLElement("strike")}}
+
{{jsxref("String.prototype.sub()")}}
+
{{HTMLElement("sub")}}
+
{{jsxref("String.prototype.sup()")}}
+
{{HTMLElement("sup")}}
+
+ +

Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.

+ +

{{ jsOverrides("Object", "methods", "charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "localeCompare", "match", "quote", "replace", "search", "slice", "split", "substr", "substring", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toSource", "toString", "toUpperCase", "trim", "trimLeft", "trimRight", "valueOf", "anchor", "big", "blink", "bold", "fixed", "fontcolor", "fontsize", "italics", "link", "small", "strike", "sub", "sup") }}

+ +

Vea también

+ + + +
+
 
+
diff --git a/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..2de491bc21 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,133 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype +tags: + - Error + - JavaScript + - Property + - Prototype + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

La propiedad SyntaxError.prototype representa el prototipo para el constructor {{jsxref("SyntaxError")}}.

+ +

Descripción

+ +

Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de SyntaxError.prototype. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.

+ +

Propiedades

+ +
+
SyntaxError.prototype.constructor
+
Especifica la funcion que creó una instancia del prototipo.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad message , en SpiderMonkey, es heredada de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Error name. Inherited from {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
Stack trace. Heredada de {{jsxref("Error")}}.
+
+ +

Metodos

+ +

A pesar de que el objeto prototipo de {{jsxref("SyntaxError")}} no contiene metodos propios, las instancias de {{jsxref("SyntaxError")}} heredan algunos metodos debido a la cadena de prototipos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Defined as NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Defined as NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Defined as NativeError.prototype.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ + diff --git a/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..41d501135d --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,143 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +
{{JSRef}}
+ +

La propiedad WeakMap.prototype representa el prototipo para el constructor {{jsxref("WeakMap")}}.

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

Descripción

+ +

Las instancias de {{jsxref("WeakMap")}} heredan de {{jsxref("WeakMap.prototype")}}. Se puede usar el objeto prototipo del constructor para añadir propiedades o métodos para todas las instancias de  WeakMap.

+ +

WeakMap.prototype por si mismo es solamente un objeto ordinario:

+ +
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
+ +

Propiedades

+ +
+
WeakMap.prototype.constructor
+
Retorna la función que creó el prototipo de la instanciaReturns the function that created an instance's prototype. Esta es la función {{jsxref("WeakMap")}} por defecto.
+
+ +

Métodos

+ +
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
+
Remueve cualquier valor asociado a la clave. Después de esto WeakMap.prototype.has(key) retornará falso.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
+
Retorna el valor asociado a la clave, o undefined si no hay ninguno.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
+
Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the WeakMap object o no.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
+
Asigna el valor para la clave en el objeto WeakMap. Retorna el objeto WeakMap.
+
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
+
Remueve todas los pares clave/valore del objeto WeakMap. Notese que es posible implementar un objeto parecido al WeakMap que posea un método .clear(), encapsulando el objeto WeakMap que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico36{{CompatGeckoDesktop("6.0")}}11237.1
Objeto ordinario{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Objeto ordinario{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..14010f37e3 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,99 @@ +--- +title: Palabras Reservadas +slug: Web/JavaScript/Referencia/Palabras_Reservadas +tags: + - JavaScript + - palabras reservadas +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +

 

+ +

Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos. Las siguientes son reservadas como palabras claves existentes por la especificación ECMAScript:

+ +

Reserved keywords as of ECMAScript 6

+ +
+ +
+ +

Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:

+ + + +

Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:

+ +
+ +
+ +

Futuras Palabras Reservadas en estandares antiguos

+ +

Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).

+ +
+ +
+ +

Adicionalmente, los literales "null", "true", y "false" estan reservadas en ECMAScript para usos normales.

diff --git a/files/es/conflicting/web/javascript/reference/operators/index.html b/files/es/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..71968fda85 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,315 @@ +--- +title: Operadores Aritméticos +slug: Web/JavaScript/Referencia/Operadores/Aritméticos +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).

+ +

Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:

+ +

{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}

+ +

Suma o adición (+)

+ +

La operación suma se produce mediante la suma de número o strings concatenados.

+ +

Sintaxis

+ +
Operador: x + y
+ +

Ejemplos:

+ +
// Número + Número = Adición
+
+1 + 2 // 3
+
+// Bolean + Número = Adición
+
+true + 1 // 2
+
+// Bolean + Bolean // Adición
+
+false + false // 0
+
+// Número + String = Concatenación
+
+5 + 'foo' // "5foo"
+
+// String + Bolean = Concatenación
+
+'foo' + true // "footrue"
+
+// String + String = Concatenación
+
+'foo' + 'bar' // "foobar"
+
+ +

Resta o sustracción (-)

+ +

La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.

+ +

Sintaxis

+ +
Operador: x - y
+ +

Ejemplos

+ +
5 - 3     // 2
+3 - 5     // -2
+'foo' - 3 // NaN
+
+ +

División (/)

+ +

El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.

+ +

Sintaxis

+ +
Operador: x / y
+ +

Ejemplos

+ +
1 / 2      // devuelve 0.5 en JavaScript
+1 / 2      // devuelve 0 en Java
+// (Ninguno de los números es explícitamente un número de punto flotante)
+
+1.0 / 2.0  // devuelve 0.5 en JavaScript y Java
+
+2.0 / 0    // devuelve Infinito en JavaScript
+2.0 / 0.0  // devuelve Infinito
+2.0 / -0.0 // devuelve -Infinito en JavaScript
+
+ +

Multiplicación (*)

+ +

El operador multiplicación produce el producto de la multiplicación de los operandos.

+ +

Sintaxis

+ +
Operador: x * y
+ +

Ejemplos

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinito * 0 // NaN
+Infinito * Infinito // Infinito
+'foo' * 2 // NaN
+ +

Resto o Residuo  (%)

+ +

El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de modulo incorporada para producir el resultado, que es el resto entero de dividir var1 por var2 - por ejemplo - var1 modulo var2. Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.

+ +

Sintaxis

+ +
Operador: var1 % var2
+ +

Ejemplos

+ +
12 % 5  // 2
+-1 % 2  // -1
+1 % -2  // 1
+NaN % 2 // NaN
+1 % 2   // 1
+2 % 3   // 2
+-4 % 2  // -0
+5.5 % 2 // 1.5
+ +

Exponenciación (**)

+ +

El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, var1var2, en la declaración anterior, donde var1 y var2 son variables. El operador de exponenciación es asociativo a la derecha. a ** b ** c es igual a a ** (b ** c).

+ +

Sintaxis

+ +
Operador: var1 ** var2
+ +

 

+ +

Notas

+ +

En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (+/-/~/!/delete/void/typeof) inmediatamente antes del número de base.

+ +
-2 ** 2;
+// 4 en Bash, -4 en otros idiomas.
+// Esto no es válido en JavaScript, ya que la operación es ambigua.
+
+
+-(2 ** 2);
+// -4 en JavaScript y la intención del autor no es ambigua.
+ +

Ejemplos

+ +
2 ** 3        // 8
+3 ** 2        // 9
+3 ** 2.5      // 15.588457268119896
+10 ** -1      // 0.1
+NaN ** 2      // NaN
+
+2 ** 3 ** 2   // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+ +

Para invertir el signo del resultado de una expresión de exponenciación:

+ +
-(2 ** 2) // -4
+ +

Para forzar la base de una expresión de exponenciación a ser un número negativo:

+ +
(-2) ** 2 // 4
+ +
+

Nota: JavaScript también tiene un operador bit a bit ^ (logical XOR). ** y ^ son diferentes (por ejemplo: 2 ** 3 === 8 cuando 2 ^ 3 === 1.)

+
+ +

 

+ +

Incremento (++)

+ +

 

+ +

El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.

+ + + +

Sintaxis

+ +
Operador: x++ o ++x
+ +

Ejemplos

+ +
// Postfijo
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefijo
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Decremento (--)

+ +

El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.

+ + + +

Sintaxis

+ +
Operador: x-- o --x
+ +

Ejemplos

+ +
// Postfijo
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefijo
+var a = 2;
+b = --a; // a = 1, b = 1
+ +

 

+ +

Negación unaria (-)

+ +

El operador de negación unaria precede su operando y lo niega.

+ +

Sintaxis

+ +
Operador: -x
+ +

Ejemplos

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+// el operador de negación unario puede convertir no-números en un número
+var x = "4";
+y = -x; // y = -4
+ +

Unario más (+)

+ +

El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas true, false y null. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a NaN.

+ +

Sintaxis

+ +
Operador: +x
+ +

Ejemplos

+ +
+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){  return val } // NaN
+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}} +

Definido en varias secciones de la especificación: Operadores aditivos, Operadores multiplicativos, Expresiones Postfijas, Operadores unarios.

+
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}} +

Definido en varias secciones de la especificación: Operadores aditivos, Operadores multiplicativos, Expresiones Postfijas, Operadores unarios.

+
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Operador de exponenciación agregado.
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ +

{{Compat("javascript.operators.arithmetic")}}

+ +

Ver también

+ + + +

 

diff --git a/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..050a2026f6 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,220 @@ +--- +title: Operador de propagación +slug: Web/JavaScript/Referencia/Operadores/Spread_operator +tags: + - Experimental + - Expérimental(2) + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +--- +
{{jsSidebar("Operators")}}
+ +

El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

+ +

Sintaxis

+ +

Llamadas a funciones:

+ +
f(...iterableObj);
+
+ +

Arrays literales:

+ +
[...iterableObj, 4, 5, 6]
+ +

Desestructuración destructuring:

+ +
[a, b, ...iterableObj] = [1, 2, 3, 4, 5];
+ +

Ejemplos

+ +

Un mejor método apply

+ +

Ejemplo: Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);
+ +

Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+ +

Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación spread, donde además puede ser usada varias veces.

+ +
function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);
+ +

Un array literal mas poderoso

+ +

Ejemplo: La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como push, splice, concat, etc. Con la sintaxis de propagación spread esta tarea resulta mucho mas concisa:

+ +
var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+ +

Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.

+ +

Combinación del método apply y el operador new

+ +

Ejemplo: En ES5 no es posible combinar new y apply (en ES5  el método apply crea un [[Call]] y no un [[Construct]]). En ES6 la sintaxis de propagación spread soporta esto de forma natural:

+ +
var dateFields = readDateFields(database);
+var d = new Date(...dateFields);
+ +

Un método push mejorado

+ +

Ejemplo: {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Agregar todos los elementos de arr2 a arr1
+Array.prototype.push.apply(arr1, arr2);
+ +

Usando el operador de propagación spread de ES6, este sería el resultado:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);
+ +

Solo funciona para iterables

+ +
var obj = {"key1":"value1"};
+function myFunction(x) {
+    console.log(x); // undefined
+}
+myFunction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0
+ +

Operador Rest

+ +

El operador Rest es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, Rest es lo contrario de spread. Spread 'expande' un array en sus elementos, y Rest recoge múltiples elementos y los 'condensa' en uno solo.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoCommentario
+

{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}
+ {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}

+ 		{{Spec2('ES6')}} +
    +
  • 12.2.4 Array Initializer
    • +
  • 12.3.6 Argument Lists
    • +
+
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Operación de spread en arrays literales{{CompatNo}}
+ v8 issue 3018		{{ CompatGeckoDesktop("16") }}
+ {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}7.1
Operación de spread en llamadas a funciones{{CompatNo}}{{ CompatGeckoDesktop("27") }}
+ {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}7.1
Operación de spread en desestructuración
+ destructuring		{{CompatUnknown}}{{ CompatGeckoDesktop("34") }}
+ {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Operación de spread en arrays literales{{CompatNo}}{{ CompatGeckoMobile("16") }}
+ {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}iOS 8
Operación de spread en llamadas a funciones{{CompatNo}}{{ CompatGeckoMobile("27") }}
+ {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}iOS 8
Operación de spread en desestructuración
+ destructuring		{{CompatUnknown}}{{ CompatGeckoDesktop("34") }}
+ {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Temas relacionados

+ + diff --git a/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html new file mode 100644 index 0000000000..8685790d2c --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html @@ -0,0 +1,262 @@ +--- +title: Operadores de Comparación +slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators +tags: + - JavaScript + - Operador + - Referencia +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, ===) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, ==) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <=), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.

+ +

Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.

+ +
console.log(1 == 1)
+// Esperamos True
+
+console.log("1" == 1 )
+// Esperamos true
+
+console.log( 1 === 1)
+// Esperamos true
+
+console.log( "1" === 1)
+// Esperamos false
+
+ +

Características de las comparaciones:

+ + + +

Operadores de igualdad

+ +

Igualdad (==)

+ +

El operador de igualdad convierte los operandos si no son del mismo tipo, luego aplica una comparación estricta. Si ambos operandos son objetos, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.

+ +

Sintaxis

+ +
x == y
+
+ +

Ejemplos

+ +
1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 == object2 // false
+0    == undefined  // false
+null == undefined  // true
+
+ +

Desigualdad (!=)

+ +

El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos no son del mismo tipo, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si ambos operandos son objetos, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.

+ +

Sintaxis

+ +
x != y
+ +

Ejemplos

+ +
1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

Identidad / igualdad estricta (===)

+ +

El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) sin conversión de tipo.

+ +

Sintaxis

+ +
x === y
+ +

Ejemplos

+ +
3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 // false
+ + + +

Sin identidad / desigualdad estricta (!==)

+ +

El operador sin identidad devuelve verdadero si los operandos no son iguales y / o no del mismo tipo.

+ +

Sintaxis

+ +
x !== y
+ +

Ejemplos

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

Operadores relacionales

+ +

Cada uno de estos operadores llamará a la función valueOf() en cada operando antes de realizar una comparación.

+ +

Operador mayor que (>)

+ +

El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.

+ +

Sintaxis

+ +
x > y
+ +

Ejemplos

+ +
4 > 3 // true
+
+ +

Operador mayor o igual (>=)

+ +

El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.

+ +

Sintaxis

+ +
 x >= y
+ +

Ejemplos

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

Operador menor que (<)

+ +

El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.

+ +

Sintaxis

+ +
 x < y
+ +

Ejemplos

+ +
3 < 4 // true
+
+ +

Operador menor o igual (<=)

+ +

El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.

+ +

Sintaxis

+ +
 x <= y
+ +

Ejemplos

+ +
3 <= 4 // true
+
+ +

Usando los operadores de igualdad

+ +

Los operadores de igualdad estándar (== y !=) utilizan el Algoritmo de Comparación de Igualdad Abstracta para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión 5 == '5', la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.

+ +

Los operadores de igualdad estricta (=== y !==) usan el Algoritmo de Comparación de Igualdad Estricta y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es false, entonces 5 !== '5'.

+ +

Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.

+ +

Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:

+ + + +
Nota: Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:
+ +
// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false como a y b son tipo Objeto y referencia a diferentes objetos
+a == b
+
+// false como a y b son tipo Objeto y referencia a diferentes objetos
+a === b
+
+// true como a y 'foo' son de tipo diferente y, el Objeto (a)
+// se convierte en cadena 'foo' antes de la comparación
+a == 'foo'
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial. Implementado en JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}} +

Agrega === y !== operadores. Implementado en JavaScript 1.3

+
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}} +

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

+
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}} +

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

+
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}} +

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

+
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html new file mode 100644 index 0000000000..c4276c1c95 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html @@ -0,0 +1,722 @@ +--- +title: Operadores a nivel de bit +slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Los operadores a nivel de bit tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de números decimales, hexadecimales u octales.  Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.

+ +

La siguiente tabla resume los operadores a nivel de bit de JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorUsoDescripción
AND binarioa & bDevuelve un uno en cada posición en la que ambos operandos sea uno.
OR binario a | bDevuelve un uno en cada posición en la que uno o ambos operandos sea uno.
Bitwise XORa ^ bDevuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. 
Bitwise NOT~ aInvierte los bits del operando.
Left shifta << bDesplaza en representación binaria b (< 32) bits a la izquierda, desplazando en ceros desde la derecha.
Sign-propagating right shifta >> bDesplaza en representación binaria b (< 32) bits a la derecha, descartando los bits desplazados fuera.
Zero-fill right shifta >>> bDesplaza en representación binaria b (< 32) bits a la derecha, desplazando en ceros desde la izquierda.
+ +

Enteros con signo de 32 bits

+ +

Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:

+ +
00000000000000000000000100111010
+
+ +

A continuación se codifica ~314 como complemento a uno de 314:

+ +
11111111111111111111111011000101
+
+ +

Por último, se codifica -314 como complemento a dos de 314:

+ +
11111111111111111111111011000110
+
+ +

El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado bit de signo.

+ +

El número 0 es el entero compuesto íntegramente por bits en 0.

+ +
0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+
+ +

El número -1 es el entero compuesto íntegramente por bits de 1.

+ +
-1 (base 10) = 11111111111111111111111111111111 (base 2)
+
+ +

El número -2147483648 (representación hexadecimal: -0x80000000) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.

+ +
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+
+ +

El número 2147483647 (representación hexadecimal: 0x7fffffff) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. 

+ +
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+
+ +

Los números -2147483648 and 2147483647 son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.

+ +

Operadores lógicos a nivel de bit

+ +

Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:

+ + + +

& (Bitwise AND o AND a nivel de bits)

+ +

Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, a AND b es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+
+ +

El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. 

+ +

| (Bitwise OR o  OR a nivel de bits)

+ +

Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+
+ +

Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.

+ +

^ (Bitwise XOR o XOR a nivel de bits)

+ +

Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+
+ +

Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x

+ +

~ (Bitwise NOT o Negación a nivel de bits)

+ +

Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +

 

+ +
 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+
+ +

 

+ +

Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.

+ +

Ejemplo con indexOf:

+ +
var str = 'rawr';
+var searchFor = 'a';
+
+// esta es un forma alternativa de escribir (-1*str.indexOf('a') <= 0)
+if (~str.indexOf(searchFor)) {
+  // searchFor esta en el string
+} else {
+  // searchFor no esta en el string
+}
+
+// aquí verás los valores que retorna (~str.indexOf(searchFor))
+// r == -1
+// a == -2
+// w == -3
+
+ +

Operadores de desplazamiento a nivel de bit

+ +

Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.

+ +

Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.

+ +

<< (Desplazamiento a la izquierda)

+ +

Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.

+ +

Por ejemplo, 9 << 2 devuelve 36:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+
+ +

Desplazar a la izquierda cualquier número x por y bits da por resultado x * 2^y.

+ +

>> (Desplazamiento a la derecha con propagación de signo o Desplazamiento aritmético a la derecha)

+ +

Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".

+ +

Por ejemplo, 9 >> 2 devuelve 2:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

Igualmente, -9 >> 2 devuelve-3, porque se mantiene el signo:

+ +
     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+
+ +

>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )

+ +

Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. 

+ +


+ Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, 9 >>> 2 da 2, al igual que 9 >> 2:

+ +
      9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

Sin embargo, no es el caso para números negativos. Por ejemplo, -9 >>> 2 da 1073741821, que es diferente de  -9 >> 2 (que da -3):

+ +
      -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+
+ +

Ejemplos

+ +

Banderas y máscaras de bits

+ +

Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).

+ +

Supongamos que hay 4 banderas:

+ + + +

Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:

+ +
var flags = 5;   // binary 0101
+
+ +

Este valor indica:

+ + + +

Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.

+ +

Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:

+ +
// if we own a cat
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // do stuff
+}
+
+ +

Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:

+ +
// if we own a bat or we own a cat
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // do stuff
+}
+
+ +
// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // do stuff
+}
+
+ +

Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:

+ +
// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:

+ +
// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):

+ +
// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:

+ +
// if we didn't have a bat, we have one now,
+// and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finalmente, todas las banderas se pueden voltear con el operador NOT:

+ +
// entering parallel universe...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Fragmentos de conversión

+ +

Convert a binary String to a decimal Number:

+ +
var sBinString = "1011";
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+
+ +

 

+ +

Convierte una cadena binaria a un número decimal:

+ +

 

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+
+ +

Automatiza la creación de una máscara.

+ +

Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:

+ +
function createMask () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+
+ +

Algoritmo inverso: una matriz de valores booleanos de una máscara

+ +

Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:

+ +
function arrayFromMask (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError("arrayFromMask - out of range");
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert("[" + array1.join(", ") + "]");
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

Puedes probar ambos algoritmos al mismo tiempo ...

+ +
var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:

+ +
function createBinaryString (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definicion inicial
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Bitwise NOT (~){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise AND (&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise OR (|){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise XOR (^){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Left shift (<<){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Right shift (>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Unsigned right shift (>>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Bitwise NOT (~){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise AND (&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise OR (|){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise XOR (^){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Left shift (<<){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Right shift (>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Unsigned right shift (>>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html new file mode 100644 index 0000000000..979eff63f2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html @@ -0,0 +1,462 @@ +--- +title: Operadores de asignación +slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Un operador de asignacion asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.

+ +

Visión general

+ +

El operador de asignación basico es el igual (=), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombresAbreviacionesSignificado
Asignaciónx = yx = y
Asignación de adiciónx += yx = x + y
Asignación de sustracciónx -= yx = x - y
Asignación de multiplicaciónx *= yx = x * y
Asignación de divisiónx /= yx = x / y
Asignación de Restox %= yx = x % y
Asignación de exponenciaciónx **= yx = x ** y
Asignación de desplazamiento a la izquierdax <<= yx = x << y
Asignación de desplazamiento a la derechax >>= yx = x >> y
Asignación sin signo de desplazamiento a la derechax >>>= yx = x >>> y
Asignacion ANDx &= yx = x & y
Asignacion XORx ^= yx = x ^ y
Asignacion ORx |= yx = x | y
+ +

Asignación

+ +

Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.

+ +

Sintaxis

+ +
Operador: x = y
+
+ +

Ejemplos

+ +
// Asumiendo las siguientes variables
+//  x = 5
+//  y = 10
+//  z = 25
+
+
+x = y     // x es 10
+x = y = z // x, y, z son todas 25
+
+ +

Asignación de Adición

+ +

El operador de asignación de suma agrega el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.

+ +

Sintaxis

+ +
Operador: x += y
+Significado:  x  = x + y
+
+ +

Ejemplos

+ +
// Asuma las siguientes variables
+//  foo = "foo"
+//  bar = 5
+//  baz = true
+
+
+// Number + Number -> Adición
+bar += 2 // 7
+
+// Boolean + Number -> Adición
+baz += 1 // 2
+
+// Boolean + Boolean -> Adición
+baz += false // 1
+
+// Number + String -> concatenación
+bar += "foo" // "5foo"
+
+// String + Boolean -> concatenación
+foo += false // "foofalse"
+
+// String + String -> concatenación
+foo += "bar" // "foobar"
+
+ +

Asignación de Sustracción

+ +

El operador de asignación de sustracción sustrae el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.

+ + + +

Sintaxis

+ + + +
Operador: x -= y
+Significado:  x  = x - y
+
+ +

Ejemplos

+ +
// Asumiendo las siguientes variables
+//  bar = 5
+
+bar -= 2     // 3
+bar -= "foo" // NaN
+
+ +

Asignación de Multiplicación 

+ +

El operador de asignación de multiplicación multiplica la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el  {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x *= y
+Significado:  x  = x * y
+
+ +

Ejemplos

+ +
// Asumiendo la siguiente variable
+//  bar = 5
+
+bar *= 2     // 10
+bar *= "foo" // NaN
+
+ +

Asignación de división

+ +

El operador de asignación de división divide la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x /= y
+Significado:  x  = x / y
+
+ +

Ejemplos

+ +
// Asumiendo la siguiente variable
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= "foo" // NaN
+bar /= 0     // Infinity
+
+ +

Asignación  de resto

+ +

El operador de asignación de resto divide la variable por el valor del operador derecho y asigna el resto a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.

+ +

Sintaxis

+ +
Operador: x %= y
+Significado:  x  = x % y
+
+ +

Ejemplos

+ +
// Asumiendo la siguiente variable
+//  bar = 5
+
+bar %= 2     // 1
+bar %= "foo" // NaN
+bar %= 0     // NaN
+
+ +

Asignación de exponenciación

+ +

El operador de asignación de exponente evalua el resultado de elevar primero el operando a la potencia del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles

+ +

Sintaxis

+ +
Operador: x **= y
+Significado:  x  = x ** y
+
+ +

Ejemplos

+ +
// Asumiendo la siguiente variable
+//  bar = 5
+
+bar **= 2     // 25
+bar **= "foo" // NaN
+ +

Asignación de desplazamiento a la izquierda

+ +

El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x <<= y
+Significado:  x   = x << y
+
+ +

Ejemplos

+ +
var bar = 5; //  (00000000000000000000000000000101)
+bar <<= 2; // 20 (00000000000000000000000000010100)
+
+ +

Asignación de desplazamiento a la derecha

+ +

El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x >>= y
+Significado:  x   = x >> y
+
+ +

Ejemplos

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

Asignación sin signo de desplazamiento a la derecha

+ +

El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x >>>= y
+Significado:  x    = x >>> y
+
+ +

Ejemplo

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

Asignación AND

+ +

El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.

+ +

Sintaxis

+ +
Operador: x &= y
+Significado:  x  = x & y
+
+ +

Ejemplo

+ +
var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &= 2; // 0
+
+ +

Asignación XOR

+ +

El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles

+ +

Sintaxis

+ +
Operador: x ^= y
+Significado:  x  = x ^ y
+
+ +

Ejemplo

+ +
var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Asignación OR

+ +

El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles

+ +

Sintaxis

+ +
Operador: x |= y
+Significado:  x  = x | y
+
+ +

Ejemplo

+ +
var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Ejemplos

+ +

Operador izquierdo con otros operadores de asignación

+ +

En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:

+ +
a[i++] += 5         // i es evaluado una vez
+a[i++] = a[i++] + 5 // i es evaluado dos veces
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}{{Spec2('ES1')}} +

Definición inicial

+
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vea tambien

+ + diff --git a/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html new file mode 100644 index 0000000000..4c9cb860a9 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html @@ -0,0 +1,296 @@ +--- +title: Operadores lógicos +slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operadores_lógicos")}}
+ +

Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores && y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.

+ +

Descripción

+ +

Los operadores lógicos se describen en la tabla siguiente:

+ + + + + + + + + + + + + + + + + + + + + + + + +
OperadorUsoDescripción
AND (&&) lógicoexpr1 && expr2 +

Regresa expr1 si tal puede convertirse a false; de lo contrario, regresa expr2. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.

+
OR (||) lógicoexpr1 || expr2 +

Regresa expr1 si tal puede convertirse a true; de lo contrario, regresa expr2. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".

+
NOT (!) lógico!expr +

Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.

+
+ +

Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.

+ +

A pesar de que los operadores && y ||  pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.

+ +

Evaluación contra "corto circuitos"

+ +

Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:

+ + + +

Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).

+ +

Por ejemplo, las siguientes dos expresiones son equivalentes.

+ +
function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+
+ +

Sin embargo, las siguientes expresiones no son equivalentes debido a la precedencia de operadores, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).

+ +
false && true  || true      // regresa true
+false && (true || true)     // regresa false
+ +

AND (&&) lógico

+ +

El siguiente código muestra ejemplos del operador && (AND lógico).

+ +
a1 = true  && true      // t && t regresa true
+a2 = true  && false     // t && f regresa false
+a3 = false && true      // f && t regresa false
+a4 = false && (3 == 4)  // f && f regresa false
+a5 = "Cat" && "Dog"     // t && t regresa "Dog"
+a6 = false && "Cat"     // f && t regresa false
+a7 = "Cat" && false     // t && f regresa false
+
+ +

OR (||) lógico

+ +

El siguiente código muestra ejemplos del operador || (OR lógico).

+ +
o1 = true  || true       // t || t regresa true
+o2 = false || true       // f || t regresa true
+o3 = true  || false      // t || f regresa true
+o4 = false || (3 == 4)   // f || f regresa false
+o5 = "Cat" || "Dog"      // t || t regresa "Cat"
+o6 = false || "Cat"      // f || t regresa "Cat"
+o7 = "Cat" || false      // t || f regresa "Cat"
+
+ +

Logical NOT (!)

+ +

El siguiente código muestra ejemplos del operador ! (NOT lógico).

+ +
n1 = !true              // !t regresa false
+n2 = !false             // !f regresa true
+n3 = !"Cat"             // !t regresa false
+
+ +

Reglas de conversión

+ +

Convertir de AND a OR

+ +

la siguiente operación que involucra Booleans:

+ +
bCondition1 && bCondition2
+ +

siempre es igual a:

+ +
!(!bCondition1 || !bCondition2)
+ +

Convertir de OR a AND

+ +

la siguiente operación que involucra Booleans:

+ +
bCondition1 || bCondition2
+ +

siempre es igual a:

+ +
!(!bCondition1 && !bCondition2)
+ +

Convertir entre operadores NOT

+ +

la siguiente operación que involucra Booleans:

+ +
!!bCondition
+ +

siempre es igual a:

+ +
bCondition
+ +

Eliminando paréntesis anidados

+ +

Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.

+ +

Eliminando operadores AND anidados

+ +

La siguiente operación compleja que involucra Booleans:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

siempre es igual a:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Eliminando operadores OR anidados

+ +

La siguiente operación compleja que involucra Booleans:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

siempre es igual a:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}} +

Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators

+
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
AND (&&) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
OR (||) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
NOT (!) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
AND (&&) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
OR (||) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
NOT (!) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/conflicting/web/javascript/reference/statements/switch/index.html b/files/es/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..a25a5a5369 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,121 @@ +--- +title: default +slug: Web/JavaScript/Referencia/Sentencias/default +tags: + - JavaScript + - Palabra clave +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +
{{jsSidebar("Sentencias")}}
+ +

La palabra clave default, en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
+ + + +

Sintaxis

+ +

Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:

+ +
switch (expresion) {
+  case valor1:
+    //Declaración ejecutada cuando el resultado de la expresion conincida con valor1
+    [break;]
+  default:
+    //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion
+    [break;]
+}
+ +

Con una sentencia {{jsxref("Sentencias/export", "export")}}:

+ +
export default nameN
+ +

Descripción

+ +

Para mas detalles vea las paginas:

+ + + +

Ejemplos

+ +

Usando default en una sentencia switch

+ +

En el siguiente ejemplo, si se evalua expr  como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave default ayudara en algun otro caso y ejecuta la declaración asociada.

+ +
switch (expr) {
+  case 'Naranjas':
+    console.log('Las Naranjas cuestan $0.59 el kilogramo.');
+    break;
+  case 'Manzanas':
+    console.log('Las Manzanas cuestan $0.32 el kilogramo.');
+    break;
+  default:
+    console.log('Lo esntimos, no tenemos ' + expr + '.');
+}
+ +

Usando default con export

+ +

Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:

+ +
// modulo "mi-modulo.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

Entonces, en otro script, sera sencillo de importar el valor del modulo:

+ +
// modulo "otro-modulo.js"
+import cubeArea from 'mi-modulo';  //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module'
+console.log(cubeArea(3)); // 27
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("javascript.statements.default")}}

+ +

Vea tambien

+ + diff --git a/files/es/conflicting/web/media/formats/index.html b/files/es/conflicting/web/media/formats/index.html new file mode 100644 index 0000000000..f342f64d11 --- /dev/null +++ b/files/es/conflicting/web/media/formats/index.html @@ -0,0 +1,281 @@ +--- +title: Formatos de medios admitidos por los elementos HTML audio y video +slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +--- +

Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} proporcionan apoyo para la reproducción de audio y video sin necesidad de plug-ins. Codecs de vídeo y codecs de audio se utilizan para manejar vídeo y audio, y los diferentes codecs ofrecen diferentes niveles de compresión y calidad. Un formato de contenedor se utiliza para almacenar y transmitir el vídeo y el audio codificado juntos. Muchos codecs y formatos de contenedor existe, e incluso hay más combinaciones de ellos. Para su uso en la web, sólo un puñado de combinaciones son relevantes.

+ +

Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)

+ +

Para hacer un vídeo de HTML5, que trabaja en las nuevas versiones de los principales navegadores, puede usar el elemento {{HTMLElement("source")}} para reproducir en formatos WebM o el formato AAC MPEG H.264, usando el elemento de origen de esta manera:

+ +
<video controls>
+  <source src="somevideo.webm" type="video/webm">
+  <source src="somevideo.mp4" type="video/mp4">
+  I'm sorry; your browser doesn't support HTML5 video.
+  <!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
+</video>
+
+ +

WebM

+ +

El formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis. WebM es soportado nativamente en Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Internet Explorer y Safari mediante la instalación de un add-on.

+ +

Declaración de Microsoft sobre por qué IE9 no tiene soporte WebM nativo.

+ +

El formato WebM, específicamente el códec de vídeo VP8, habría sido acusado de infracción de derechos de patente por un grupo de empresas de responder a una llamada por la MPEG LA para la formación de un consorcio de patentes, pero MPEG LA se ha comprometido a licenciar las patentes de Google bajo "transferible y de licencia gratuita". Esto significa, efectivamente, que todas las patentes conocidas en el formato WebM tienen licencia para todo el mundo de forma gratuita.

+ +

Gecko reconoce los siguientes tipos MIME para los archivos WebM:

+ +
+
video/webm
+
Un archivo WebM que es capaz de reproducir video (y es posible audio también)
+
audio/webm
+
Un archivo WebM que contiene audio unicamente.
+
+ +

Ogg Theora Vorbis

+ +

El formato contenedor Ogg con el códec de vídeo Theora y el códec de audio Vorbis es compatible con Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Safari mediante la instalación de un add-on. El formato no es compatible en Internet Explorer.

+ +

WebM es preferente, generalmente sobre Theora Ogg Vorbis cuando esté disponible, ya que proporciona una mejor relación de compresión para la calidad y se apoya en más navegadores. El formato Ogg sin embargo, puede ser utilizado para apoyar versiones de los navegadores más antiguos, en los que aún no se dispone de soporte para WebM.

+ +

La situación de las patentes de Theora es similar a la de WebM.

+ +

Usted puede aprender más sobre la creación de medios Ogg leyendo the Theora Cookbook.

+ +

Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:

+ +
+
audio/ogg
+
Un archivo Ogg que contiene sólo audio.
+
video/ogg
+
Un video que contiene el archivo ogg (y posiblemente audio también).
+
application/ogg
+
Un archivo Ogg con el contenido especificado. Utilizando uno de los otros dos tipos MIME es preferido, pero se puede usar esta opción si usted no sabe lo que el contenido del fichero es.
+
+ +

Ogg Opus

+ +

El contenedor Ogg también puede contener audio codificado con el códec Opus. El apoyo a esta disponible en Gecko 15.0 {{ geckoRelease("15.0") }} y superior.

+ +

MP4 H.264 (AAC o MP3)

+ +

El formato contenedor MP4 con el códec de vídeo H.264 y, o bien el códec de audio AAC o el códec de audio MP3 es nativamente compatible con Internet Explorer, Safari y Chrome, pero Chromium y Opera no son compatibles con el formato. Firefox pronto admite el formato, pero sólo cuando un decodificador de terceros esté disponible.

+ +

Los formatos MPEG están cubiertos por patentes, que no tienen licencia libre. Todas las licencias necesarias se pueden comprar de MPEG LA. Desde H.264 no está en un formato libre de regalías, no es apto para la plataforma web de código abierto, de acuerdo con Mozilla [1, 2], Google [1, 2] y Opera. Sin embargo, los formatos libres no son compatibles con Internet Explorer y Safari, Mozilla ha decidido apoyar el formato de todos modos, y Google no cumplió su promesa de eliminar el soporte para él en Chrome.

+ +

WAVE PCM

+ +

El formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".

+ +
Nota: Consulte RFC 2361 para el registro códec WAVE.
+ +

Gecko reconoce los siguientes tipos MIME en archivos de audio WAVE:

+ + + +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: WAVE, PCM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}3.1
<audio>: WebM, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (must be installed separately)
<audio>: Ogg, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (must be installed separately, e.g. XiphQT)
<audio>: MP4, MP3 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		+

Partial (see below)

+ 		9.0{{ CompatNo() }}3.1
<audio>: MP4, AAC +

{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)

+ 		+

Partial (see below)

+ 		9.0{{ CompatNo() }}3.1
<audio>: Ogg, Opus27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: WebM, VP8, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}9.0 (must be installed separately, e.g. WebM MF)10.603.1 (must be installed separately, e.g. Perian)
<video>: Ogg, Theora, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (must be installed separately, e.g. XiphQT)
<video>: MP4, H.264, MP3 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (see below)9.0{{ CompatNo() }}3.1
<video>: MP4, H.264, AAC +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (see below)9.0{{ CompatNo() }}3.1
any other format{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (plays all formats available via QuickTime)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Para evitar problemas de patentes, el apoyo a MPEG 4, H.264, MP3 y AAC no está integrado directamente en Firefox. En su lugar, se basa en el apoyo del sistema operativo o hardware. Firefox soporta estos formatos en las siguientes plataformas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlataformaVersión de Firefox
Windows 7+21.0
Windows Vista22.0
Android20.0
Firefox OS15.0
OS X 10.722.0
+ + + +

Véase también

+ + diff --git a/files/es/conflicting/web/opensearch/index.html b/files/es/conflicting/web/opensearch/index.html new file mode 100644 index 0000000000..638147ee38 --- /dev/null +++ b/files/es/conflicting/web/opensearch/index.html @@ -0,0 +1,54 @@ +--- +title: Añadir motores de búsqueda desde páginas web +slug: Añadir_motores_de_búsqueda_desde_páginas_web +tags: + - Plugins_de_búsqueda +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +

Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: OpenSearch, y Sherlock. +

+
Nota: a partir de Firefox 2, OpenSearch es el formato preferido de búsqueda para Firefox.
+

Cuando código JavaScript intenta instalar un plugin de búsqueda, Firefox presenta una alerta pidiendo permiso al usuario para instalar el plugin. +

+

Instalando plugins de OpenSearch

+

Para instalar un plugin de OpenSearch, necesita utlilizar el métodowindow.external.AddSearchProvider() DOM . El síntaxis de éste método es: +

+
window.external.AddSearchProvider(engineURL);
+
+

Donde engineURL es la URL absoluta del archivo XML para el plugin del motor de búsqueda. +

+
Nota: El soporte de OpenSearch esta sólo disponible en Firefox 2 y posterior.
+

Instalando plugins de Sherlock

+

Para instalar un plugin de Sherlock, necesitará llamar window.sidebar.addSearchEngine(), el síntaxis para el mismo es: +

+
window.sidebar.addSearchEngine(engineURL, iconURL, suggestedName, suggestedCategory);
+
+ +

Para detalles de Sherlock, visite http://developer.apple.com/macosx/sherlock/ +

+

Detección de la capacidad del motor de búsqueda del navegador

+

Debido a que las APIs para añadir motores de búsqueda ha cambiado en el paso de la versión 1.5 a la 2 de firefox y ya que Firefox 1.5 no soporta los ficheros de descripción OpenSearch, los desarrolladores web que quieran añadir motores de búsqueda manteniendo la compatibilidad hacia atrás (p.e. que funcione en Firefox 1.5, Firefox 2.0 o IE 7) deben soportar tanto el formato Sherlock como el OpenSearch y deben detectar las capacidades del navegador de acuerdo a ello. El siguiente fragmento de código es un ejemplo de cómo puede hacerse esto: +

+
function installSearchEngine() {
+ if (window.external && ("AddSearchProvider" in window.external)) {
+   // Firefox 2 and IE 7, OpenSearch
+   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
+ } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
+   // Firefox <= 1.5, Sherlock
+   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
+                                  "http://example.com/search-icon.png",
+                                  "Search Plugin", "");
+ } else {
+   // Sin soporte para motores de búsqueda (IE 6, Opera, etc...).
+   alert("Sin soporte para motores de búsqueda");
+ }
+}
+
+
+
+{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW", "zh-tw": "zh_tw/\u81ea\u7db2\u9801\u6dfb\u52a0\u641c\u5c0b\u5f15\u64ce" } ) }} diff --git a/files/es/conflicting/web/progressive_web_apps/index.html b/files/es/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..6445a631af --- /dev/null +++ b/files/es/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,45 @@ +--- +title: Diseño adaptable («responsivo») +slug: Web_Development/Mobile/Diseño_responsivo +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

Como reacción a los problemas asociados con la estrategia de desarrollar sitios web separados para los móviles y los escritorios, una idea relativamente nueva — aunque de hecho es bastante vieja— que está aumentando en popularidad: deshacerse por completo de la detección del agente de usuario y hacer que la misma página responda a las capacidades del navegador en el lado del cliente. Este enfoque se ha denominado comúnmente como diseño web adaptable —o «responsivo»—. Al igual que la estrategia de sitios separados, el diseño web adaptativo tiene aspectos positivos y negativos.

+

Las ventajas

+

Aunque no se propuso inicialmente como un método para crear sitios para los móviles, el diseño flexible ha ganado recientemente mucha atención como una forma de dar los primeros pasos para el desarrollo de sitios que sean compatibles y amigables con los móviles en vez de tener un sitio separado para los mismos.

+

Se ahorra tiempo y dinero, ya que no es necesario mantener sitios web separados para los diferentes dispositivos.

+

El diseño flexilbe ofrece cada página con una sola y única URL. Las estadísticas compartidas de las redes sociales (Facebook Likes, Tweets, 1 en Google plus) no están divididas, ya que las versiones de tus páginas web para el escritorio y los móviles utilizan la misma URL .

+

El diseño adaptativo no se preocupa por los agentes de usuario.

+

Hay aspectos realmente buenos en este enfoque. Puesto que no se basa en la detección del navegador del usuario, tiene más capacidad de adaptarse cara al futuro que el enfoque de sitios separados. Para sitios sencillos, puede ser más fácil de implementar y mantener que otras opciones.

+

Las desventajas

+

Este enfoque no está excento de limitaciones. Dado que el contenido debe ser modificado del lado del cliente con JavaScript, se busca cambiar solo lo mínimo necesario. En general, las cosas suelen complicarse muy rápido si tratamos de escribir dos códigos separados en JavaScript para trabajar con el mismo DOM. Ésta es la razón más importante por la que las aplicaciones web tienden a no adoptan esta enfoque.

+

Dar a tu sitio actual un diseño flexible también implica reescribir tus estilos, si aún no están luciendo un diseño flexible. Podría tener sus ventajas hacer un diseño adaptativo de tu sitio y ser una buena oportunidad para modernizar y limpiar el CSS de tu sitio.

+

Por último, dado que vas a añadir código a tus archivos de comandos (scripts) y tus estilos, el rendimiento puede ser peor que con el enfoque de los sitios separados. En realidad no hay forma de evitar esto salvo refactorizar tus archivos de comandos y tus estilos para ahorrar algunos bytes a largo plazo.

+

Cuándo es adecuado elegir esta opción

+

teixido_responsive-300x177.pngComo se mencionó anteriormente, debido a que los cambios de contenido pueden resultar difíciles, cuando se toma este enfoque, no somos capaces de dar a los usuarios una experiencia radicalmente diferente en el móvil sin un aumento significativo en la complejidad del código. Entonces, si las versiones del escritorio y los móviles son muy similares, este enfoque es una opción muy buena. Ésto es partir de páginas bien adaptadas a sitios centrados en los datos, como las páginas de producto. Puede ver ejemplos debajo, de blog o portfolios!

+

Ejemplos

+

Aunque no es tan popular como el enfoque de sitios separados, hay cada día más sitios web que emplean esta técnica. Por suerte, ya que todo el código está del lado del cliente, si desea ver cómo un sitio implementa técnicamente este método, es tan simple como visitar el sitio y hacer clic en “Ver código fuente.” Aquí tienes algunos ejemplos:

+ +

A pesar de ser un método relativamente nuevo, ya están apareciendo mejores prácticas. Por ejemplo, si tú estás diseñando un sitio desde cero con esta opción en mente,  por lo general vale la pena  crear primero un diseño de pantalla pequeña, de manera que las limitaciones del telefono móvil están contigo desde el principio. También es de gran utilidad la mejora progresiva de tus estilos en lugar de ocultar los elementos de tu sitio actual con preguntas de los medios. De esta manera, los navegadores antiguos que no admitan las preguntas de los medios siguen mostrando la disposición adecuada. Una excelente presentación sobre las ventajas de este método la puedes ver aquí.

+

Métodos de desarrollo web para móviles

+

Consulta los siguientes artículos de antecedentes y otros enfoques para el desarrollo de plataformas móviles.

+ +

Véase también

+ +
+

Original document information

+

Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky.

+
+

 

diff --git a/files/es/conflicting/web/progressive_web_apps/introduction/index.html b/files/es/conflicting/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..e1fa9fad1f --- /dev/null +++ b/files/es/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,63 @@ +--- +title: Ventajas de una aplicación web progresiva (AWP) +slug: Web/Progressive_web_apps/Ventajas +tags: + - AWP + - aplicaciones web progresivas + - conceptos + - ventajas +translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications +translation_of_original: Web/Progressive_web_apps/Advantages +--- +

Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.

+ + + +

Reconocible

+ +

El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.

+ +

Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como Open Graph, que proporciona un formato para especificar metadatos similares en el <head> de HTML usando metaetiquetas.

+ +

El estándar web relevante aquí es el Manifiesto de aplicación web, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.

+ + + +

Instalable

+ +

Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.

+ +

Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada Añadir a la página de inicio.

+ +

Enlazable

+ +

Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.

+ +

Independencia de la red

+ +

Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:

+ + + +

Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la Cache API para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como Web Storage y IndexedDB para almacenar datos de la aplicación sin conexión.

+ +

Progresiva

+ +

Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como mejora progresiva.

+ +

Reconectable

+ +

Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como Service Workers para controlar páginas, el Web Push API para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la API de notificaciones para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.

+ +

Adaptable

+ +

Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.

+ +

Seguro

+ +

La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (ejemplo).

diff --git a/files/es/conflicting/web/web_components/using_custom_elements/index.html b/files/es/conflicting/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..98c3562a7b --- /dev/null +++ b/files/es/conflicting/web/web_components/using_custom_elements/index.html @@ -0,0 +1,182 @@ +--- +title: Custom Elements +slug: Web/Web_Components/Custom_Elements +tags: + - Componentes Web + - Web Components + - custom elements +translation_of: Web/Web_Components/Using_custom_elements +translation_of_original: Web/Web_Components/Custom_Elements +--- +

Los Custom Elements son una característica que permite crear tus propios elementos HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los Web Components, pero también pueden ser utilizados independientemente.

+ +
+

Nota: Los Custom elements sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.

+
+ +

Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <mytag> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los custom elements son las reacciones de ciclo de vida (lifecycle reactions), que permiten asociar comportamiento a diferentes partes del nuevo "ciclo de vida" del elemento. Por ejemplo, se puede asociar un comportamiento concreto cuando un nuevo elemento se inserta en el DOM ("conectado"), y otro distinto cuando es eliminado del DOM ("desconectado"), o cuando sus atributos cambien.

+ +

El habilitador de claves de los elementos personalizados v1 es el método {{domxref("CustomElementRegistry.define()")}}, el cual se puede utilizar para definir un nuevo elemento personalizado. El nuevo elemento utilizará la clase suministrada para cualquier instancia, en lugar del valor predeterminado  {{domxref("HTMLUnknownElement")}}.  Los elementos personalizados pueden basarse en un elemento nativo como <button>,  utilizando la sintaxis  <button is="my-button">;  estos se llaman elementos integrados personalizados.

+ +

Métodos de custom element

+ +

Los Custom elements tienen los siguientes métodos que dictan su comportamiento:

+ +
+
constructor()
+
Llamado cuando el elemento es creado o actualizado
+
connectedCallback()
+
Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow
+
disconnectedCallback()
+
Llamado cuando el elemento es eliminado de un documento
+
attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)
+
Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre atributos observados.
+
adoptedCallback(antiguoDocumento, nuevoDocumento)
+
Llamado cuando un elemento es adoptado en otro nuevo documento
+
+ +

Ejemplo

+ +

Los custom elements necesitan usar la sintaxis de clase introducida en las versiones modernas de JavaScript.

+ +

Archivo HTML:

+ +
Si no aparece nada debajo, es que tu navegador no soporta aún los Custom Elements.
+<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
+<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
+<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
+ +

Archivo JS:

+ +
// Declaración de un custom element que hereda de HTMLElement
+class XProduct extends HTMLElement {
+  constructor() {
+    // Siempre debe llamarse primero al constructor padre
+    super();
+
+    // Se crea el shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Se crea un elemnto img y se asignan sus atributos.
+    var img = document.createElement('img');
+    img.alt = this.getAttribute('data-name');
+    img.src = this.getAttribute('data-img');
+    img.width = '150';
+    img.height = '150';
+    img.className = 'product-img';
+
+    // Añadir la imagen al shadow root.
+    shadow.appendChild(img);
+
+    // Añadir un elemento de escucha a la imagen.
+    img.addEventListener('click', () => {
+      window.location = this.getAttribute('data-url');
+    });
+
+    // Crear un enlace al producto.
+    var link = document.createElement('a');
+    link.innerText = this.getAttribute('data-name');
+    link.href = this.getAttribute('data-url');
+    link.className = 'product-name';
+
+    // Añadir el enlace al shadow root.
+    shadow.appendChild(link);
+  }
+}
+
+// Definir el nuevo elemento.
+customElements.define('x-product', XProduct);
+
+ +

Archivo CSS:

+ +
body {
+  background: #F7F7F7;
+}
+
+x-product {
+  display: inline-block;
+  float: left;
+  margin: 0.5em;
+  border-radius: 3px;
+  background: #FFF;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  font-family: Helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+x-product::slotted(.product-img) {
+  cursor: pointer;
+  background: #FFF;
+  margin: 0.5em;
+}
+
+x-product::slotted(.product-name) {
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: #08C;
+  border-top: 1px solid #EEE;
+  font-weight: bold;
+  padding: 0.75em 0;
+}
+
+ +

A continuación se muestra el ejemplo en vivo de lo anterior:

+ +

{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}

+ +

Atributos Observados

+ +

Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático observedAttributes en la clase del elemento que devuelve un array de nombre de atributos.

+ +

Archivo JS:

+ +
class HelloElement extends HTMLElement {
+  // Observar los cambios en el atributo 'name'.
+  static get observedAttributes() {return ['name']; }
+
+  // Responder a los cambios en el atributo.
+  attributeChangedCallback(attr, oldValue, newValue) {
+    if (attr == 'name') {
+      this.textContent = `Hello, ${newValue}`;
+    }
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('hello-element', HelloElement);
+
+ +

Archivo HTML:

+ +
<hello-element name="Anita"></hello-element>
+ +

A continuación está el ejemplo en vivo de lo anterior:

+ +

{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}

+ +

Especificaciones

+ +

Los Custom Elements están definido en la siguiente especificación:

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
The HTML Standard: Custom elementsLS 
+ +

Recursos

+ + -- cgit v1.2.3-54-g00ecf