aboutsummaryrefslogtreecommitdiff
path: root/files/es/orphaned
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2021-04-21 00:11:44 +0000
committerMDN <actions@users.noreply.github.com>2021-04-21 00:11:44 +0000
commitde630426a538c1f77d7c59e66827cb75693ed95b (patch)
treeff14c2d2677ed2137a84d3c322fa2f62e206e63a /files/es/orphaned
parentd7a27823444dc11c7ff40ca63a78b3b37ab82837 (diff)
downloadtranslated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.gz
translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.bz2
translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.zip
[CRON] sync translated content
Diffstat (limited to 'files/es/orphaned')
-rw-r--r--files/es/orphaned/web/api/detecting_device_orientation/index.html279
-rw-r--r--files/es/orphaned/web/api/document_object_model/events/index.html73
-rw-r--r--files/es/orphaned/web/guide/events/event_handlers/index.html133
-rw-r--r--files/es/orphaned/web/guide/events/index.html17
-rw-r--r--files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html48
5 files changed, 550 insertions, 0 deletions
diff --git a/files/es/orphaned/web/api/detecting_device_orientation/index.html b/files/es/orphaned/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..96afd861e0
--- /dev/null
+++ b/files/es/orphaned/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,279 @@
+---
+title: Detectando la orientación del dispositivo
+slug: orphaned/Web/API/Detecting_device_orientation
+translation_of: Web/API/Detecting_device_orientation
+original_slug: Web/API/Detecting_device_orientation
+---
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación</strong>; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. </p>
+
+<p>Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.</p>
+
+<p>El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.</p>
+
+<h2 id="Trabajando_con_eventos_de_orientación">Trabajando con eventos de orientación</h2>
+
+<p>Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.</p>
+
+<p>La información del evento contiene 4 valores:</p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
+</ul>
+
+<p>El manejador del evento puede ser similar a lo siguiente:</p>
+
+<pre class="brush: js notranslate">function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha = event.alpha;
+  var beta = event.beta;
+  var gamma = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+</pre>
+
+<h3 id="Explicación_de_los_Valores_de_Orientación">Explicación de los Valores de Orientación</h3>
+
+<p>El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientacíon y datos del movimiento explicado</a> que es resumido abajo. </p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }} representa el movimiento alrededor del eje z, representado en grados con valores que van desde 0 a 360.</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }} representa el movimiento del dispositivo alrededor del eje x, representado en grados con valores que van desde -180 a 180.  Esto representa un movimiento de frente hacia atrás del dispositivo.</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }} representa el movimiento del dispositivo alrededor del eje y, representado en grados con valores que van de -90 a 90. Esto representa un movimiento de izquierda a derecha del dispositivo.</li>
+</ul>
+
+<h3 id="Ejemplo_de_orientación">Ejemplo de orientación</h3>
+
+<p>Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.</p>
+
+<p>Imaginemos una pelota en un jardin:</p>
+
+<pre class="brush: html notranslate">&lt;div class="garden"&gt;
+ &lt;div class="ball"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="output"&gt;&lt;/pre&gt;
+</pre>
+
+<p>Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:</p>
+
+<pre class="brush: css notranslate">.garden {
+ position: relative;
+ width : 200px;
+ height: 200px;
+ border: 5px solid #CCC;
+ border-radius: 10px;
+}
+
+.ball {
+ position: absolute;
+ top : 90px;
+ left : 90px;
+ width : 20px;
+ height: 20px;
+ background: green;
+ border-radius: 100%;
+}
+</pre>
+
+<p>Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:</p>
+
+<pre class="brush: js notranslate">var ball = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+ var x = event.beta; // In degree in the range [-180,180]
+ var y = event.gamma; // In degree in the range [-90,90]
+
+ output.innerHTML = "beta : " + x + "\n";
+ output.innerHTML += "gamma: " + y + "\n";
+
+ // Because we don't want to have the device upside down
+ // We constrain the x value to the range [-90,90]
+ if (x &gt; 90) { x = 90};
+ if (x &lt; -90) { x = -90};
+
+ // To make computation easier we shift the range of
+ // x and y to [0,180]
+ x += 90;
+ y += 90;
+
+ // 10 is half the size of the ball
+ // It center the positioning point to the center of the ball
+ ball.style.top = (maxX*x/180 - 10) + "px";
+ ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+</pre>
+
+<p>Aqui el resultado en vivo:</p>
+
+<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div>
+
+<div class="warning">
+<p><strong>Tener en cuenta:</strong> Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.</p>
+</div>
+
+<h2 id="Procesando_eventos_de_movimiento">Procesando eventos de movimiento</h2>
+
+<p>Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}</p>
+
+<pre class="brush: js notranslate">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
+
+<p>Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función <em>HandleMotion.</em></p>
+
+<p>El evento de movimiento tiene cuatro propiedades:</p>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
+</ul>
+
+<h3 id="Valores_de_movimiento_explicados">Valores de movimiento explicados</h3>
+
+<p>{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Datos de orientación y movimiento explicados</a> por más detalles).</p>
+
+<p>Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:</p>
+
+<ul>
+ <li><code>x</code>: Representa el eje de oeste a este.</li>
+ <li><code>y</code>: Representa el eje de sur a norte.</li>
+ <li><code>z</code>: Representa el eje perpendicular al suelo.</li>
+</ul>
+
+<p>Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:</p>
+
+<ul>
+ <li><code>alpha</code>: Representa la velocidad de rotación a lo largo del eje perpendicular a la pantalla ( teclado para desktop).</li>
+ <li><code>beta</code>: Representa la velocidad de rotación  a lo largo del eje que va de la izquierda a la derecha del plano de la pantalla (o teclado para desktop).</li>
+ <li><code>gamma</code>: Representa la velocidad de rotación  a lo largo del eje que va desde la parte inferior a la parte superrior del plano de la pantalla (o teclado para desktop).</li>
+</ul>
+
+<p>Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('Device Orientation')}}</td>
+ <td>{{Spec2('Device Orientation')}}</td>
+ <td>Especificación inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>{{domxref("DeviceOrientationEvent")}}</td>
+ <td>7.0</td>
+ <td>3.6<sup>[1]</sup><br>
+ 6</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("DeviceMotionEvent")}}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>6</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>{{domxref("DeviceOrientationEvent")}}</td>
+ <td>3.0</td>
+ <td>3.6<sup>[1]</sup><br>
+ 6</td>
+ <td>{{ CompatNo() }}</td>
+ <td>{{ CompatNo() }}</td>
+ <td>4.2</td>
+ </tr>
+ <tr>
+ <td>{{domxref("DeviceMotionEvent")}}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>6</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> es un <em>polyfill</em> para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..</p>
+</div>
+
+<h3 id="Gecko_implementation_notes">Gecko implementation notes</h3>
+
+<ol>
+ <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li>
+</ol>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+ <li><a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation" title="2D maze game with device orientation">Cyber Orb: 2D maze game with device orientation</a></li>
+</ul>
diff --git a/files/es/orphaned/web/api/document_object_model/events/index.html b/files/es/orphaned/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..b40c7ce7ae
--- /dev/null
+++ b/files/es/orphaned/web/api/document_object_model/events/index.html
@@ -0,0 +1,73 @@
+---
+title: Eventos y el DOM
+slug: orphaned/Web/API/Document_Object_Model/Events
+tags:
+ - DOM
+ - Guía
+translation_of: Web/API/Document_Object_Model/Events
+original_slug: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introducción</h2>
+
+<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p>
+
+<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p>
+
+<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2>
+
+<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Se supone que myButton es un elemento de botón
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>Este es el método que debe usar en las páginas web modernas. </p>
+
+<p>Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.</p>
+
+<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p>
+
+<p>Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3>
+
+<pre class="brush: js">// Se supone que myButton es un elemento de botón
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p>
+
+<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p>
+
+<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2>
+
+<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p>
+
+<p>Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.</p>
+
+<pre class="brush: js">function foo(evt) {
+ // al parámetro evt se le asigna automáticamente el objeto event
+ alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/es/orphaned/web/guide/events/event_handlers/index.html b/files/es/orphaned/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..1c298b7826
--- /dev/null
+++ b/files/es/orphaned/web/guide/events/event_handlers/index.html
@@ -0,0 +1,133 @@
+---
+title: Manejadores de eventos en el DOM
+slug: orphaned/Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+original_slug: Web/Guide/Events/Event_handlers
+---
+<p><span class="seoSummary">La plataforma Web provee varias formas de recibir notificaciones de los eventos del <a href="/en-US/docs/Web/Events">DOM</a>.  Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos.</span> Esta página se enfoca en los detalles de cómo funcionan estos.</p>
+
+<h3 id="Registering_on-event_handlers">Registering <em>on-event</em> handlers</h3>
+
+<p>Los controladores <em><strong>on-event</strong></em> son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla,  enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser <code>onclick</code>, <code>onkeypress</code>, <code>onfocus</code>, etc.</p>
+
+<p>Pueden especificar un controlador de evento <code>on&lt;...&gt;</code> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:</p>
+
+<ul>
+ <li>Usando el HTML {{Glossary("atributo")}} llamados <code>on<em>{eventtype}</em></code> en un elemento, por ejemplo:<br>
+ <code>&lt;button <u>onclick="return handleClick(event);"</u>&gt;</code>,</li>
+ <li>O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:<br>
+ <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li>
+</ul>
+
+<p>Un controlador onevent</p>
+
+<p>Notese que cada objeto puede tener sólo un controlador <em>on-event</em> para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p>
+
+<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like  <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p>
+
+<h3 id="Non-element_objects">Non-element objects</h3>
+
+<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p>
+
+<pre class="notranslate">xhr.onprogress = function() { ... }</pre>
+
+<h2 id="Details">Details</h2>
+
+<h3 id="The_value_of_HTML_on&lt;...>_attributes_and_corresponding_JavaScript_properties">The value of HTML on&lt;...&gt; attributes and corresponding  JavaScript properties</h3>
+
+<p>A handler registered via an <code>on&lt;...&gt;</code> attribute will be available via the corresponding <code>on&lt;...&gt;</code> property, but not the other way around:</p>
+
+<pre class="brush: html notranslate">&lt;div id="a" onclick="alert('old')"&gt;Open the Developer Tools Console to see the output.&lt;/div&gt;
+
+&lt;script&gt;
+window.onload = function () {
+ var div = document.getElementById("a");
+ console.log("Attribute reflected as a property: ", div.onclick.toString());
+ // Prints: function onclick(event) { alert('old') }
+ div.onclick = function() { alert('new') };
+ console.log("Changed property to: ", div.onclick.toString());
+ // Prints: function () { alert('new') }
+ console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
+ // Prints: alert('old')
+}
+&lt;/script&gt;</pre>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3>
+
+<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p>
+
+<ul>
+ <li><code>event</code> - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as string.</li>
+</ul>
+
+<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">the this keyword documentation</a>.</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3>
+
+<p>TBD (non-capturing listener)</p>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The term <strong>event handler</strong> may be used to refer to:</p>
+
+<ul>
+ <li>any function or object registered to be notified of events,</li>
+ <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { /* ... */ }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events,</p>
+
+<ul>
+ <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li>
+ <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3>
+
+<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p>
+
+<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js notranslate">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/es/orphaned/web/guide/events/index.html b/files/es/orphaned/web/guide/events/index.html
new file mode 100644
index 0000000000..f9469eba26
--- /dev/null
+++ b/files/es/orphaned/web/guide/events/index.html
@@ -0,0 +1,17 @@
+---
+title: Event developer guide
+slug: orphaned/Web/Guide/Events
+tags:
+ - DOM
+ - Event
+ - Guide
+ - NeedsTranslation
+ - TopicStub
+ - events
+translation_of: Web/Guide/Events
+original_slug: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+<p>Everything you need to know about events will go under here. We're working on cleanup here now.</p>
+<h2 id="Docs">Docs</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..d6e7708621
--- /dev/null
+++ b/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,48 @@
+---
+title: Explicación de los datos de orientación y movimiento
+slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+original_slug: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+<h2 id="Sumario">Sumario</h2>
+<p>Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.</p>
+<div class="warning">
+ <p><strong>Atención:</strong> Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.</p>
+</div>
+<h2 id="Acerca_de_los_marcos_de_coordenadas">Acerca de los marcos de coordenadas</h2>
+<p>Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:</p>
+<h3 id="Marco_de_coordenadas_terrestres">Marco de coordenadas terrestres</h3>
+<p>El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.</p>
+<ul>
+ <li>El eje <strong>X</strong> sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).</li>
+ <li>El eje <strong>Y</strong> sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.</li>
+ <li>El eje <strong>Z</strong> es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).</li>
+</ul>
+<p> </p>
+<p><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Cartesian_xyz.png" style="width: 200px; height: 153px;"></p>
+<p> </p>
+<h3 id="Marco_de_coordenadas_del_dispositivo">Marco de coordenadas del dispositivo</h3>
+<p>El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo</p>
+<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p>
+<ul>
+ <li>El eje <strong>x</strong> está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.</li>
+ <li>El eje <strong>y</strong> está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.</li>
+ <li>El eje <strong>z</strong> es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.</li>
+</ul>
+<div class="note">
+ <strong>Nota:</strong> En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.</div>
+<h2 id="Sobre_la_rotación">Sobre la rotación</h2>
+<p>La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.</p>
+<h3 id="Alpha">Alpha</h3>
+<p>Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:</p>
+<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p>
+<p>El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.</p>
+<h3 id="Beta">Beta</h3>
+<p>Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:</p>
+<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p>
+<p>El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.</p>
+<h3 id="Gamma">Gamma</h3>
+<p>Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:</p>
+<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p>
+<p>El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.</p>