[CRON] sync translated content

2 files changed, 352 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>