diff options
Diffstat (limited to 'files/es/webapi')
| -rw-r--r-- | files/es/webapi/alarm/index.html | 180 | ||||
| -rw-r--r-- | files/es/webapi/cámara/index.html | 20 | ||||
| -rw-r--r-- | files/es/webapi/device_storage/index.html | 226 | ||||
| -rw-r--r-- | files/es/webapi/estado_de_bateria/index.html | 39 | ||||
| -rw-r--r-- | files/es/webapi/index.html | 143 | ||||
| -rw-r--r-- | files/es/webapi/pointer_lock/index.html | 284 | ||||
| -rw-r--r-- | files/es/webapi/using_geolocation/index.html | 232 |
7 files changed, 1124 insertions, 0 deletions
diff --git a/files/es/webapi/alarm/index.html b/files/es/webapi/alarm/index.html new file mode 100644 index 0000000000..32add5da86 --- /dev/null +++ b/files/es/webapi/alarm/index.html @@ -0,0 +1,180 @@ +--- +title: Api de Alarma +slug: WebAPI/Alarm +translation_of: Archive/B2G_OS/API/Alarm_API +--- +<p>{{ SeeCompatTable() }}</p> +<h2 id="Resumen">Resumen</h2> +<p>La <span class="external">API</span> de Alarma provee acceso a la configuración de alarmas del dispositivo, con la cual se puede programar una notificación o una aplicación para que se inicie en un momento específico. Por ejemplo, algunas aplicaciones, como el despertador, calendario o actualizaciones automáticas necesitan utilizar la API de alarma para activar comportamientos particulares del dispositivo en los tiempos especificados.</p> +<p>Por si mismo, la API de alarmas solo permite programar alarmas. Una alarma es enviada a las aplicaciones a través de la API de mensaje del sistema, entonces las aplicaciones que desean reaccionar a las alarmas tienen que registrarse en los mensajes de alarma.</p> +<p>Las alarmas son establecidas usando el objeto {{domxref("window.navigator.mozAlarms")}}, el cual es una instancia de {{domxref("MozAlarmsManager")}}.</p> +<h2 id="example" name="example">Programar alarmas</h2> +<p>Lo primero ha hacer cuando se utiliza alarmas es programar alarmas. Existen dos tipos de alarmas basadas respecto a la zona horaria. En ambos casos se realiza utilizando el método {{domxref("MozAlarmsManager.add")}} .</p> +<div class="note"> + <p><strong>Nota:</strong> Si una alarmar no es dirigida a una aplicación específica, el sistema podría enviar todas las alarmas a todas las aplicaciones que escuchan por alarmas.</p> +</div> +<h3 id="Alarmas_ignorando_zonas_horarias">Alarmas ignorando zonas horarias</h3> +<p>Este tipo de alarmas es enviado basado en la hora local del dispositivo. Si el usuario del dispositivo cambia la zona horaria, la alarma será enviada basada en la nueva zona horaria. Por ejemplo, si un usuario se encuentra en Paris y configura una alarma que debería ser enviada a las 12 PM CET (hora de europa central) y el usuario viaja a San Francisco, la alarma será enviada a las 12 PM PDT (Hora del Pacífico).</p> +<pre class="brush: js">// Esta es la fecha a programar la alarma +var myDate = new Date("May 15, 2012 16:20:00"); + +// Esta es la información a pasar a la alarma +var data = { + foo: "bar" +} + +// La cadena "ignoreTimezone" es lo que hace a la alarma ignorar esto +var request = navigator.mozAlarms.add(myDate, "ignoreTimezone", data); + +request.onsuccess = function () { + console.log("La alarma ha sido programada"); +}; + +request.onerror = function () { + console.log("Ha ocurrido un error: " + this.error.name); +}; +</pre> +<h3 id="Alarmas_respetando_zonas_horarias">Alarmas respetando zonas horarias</h3> +<p>Este tipo de alarmas es enviado basado en la hora en la zona horaria que se definio cuando la alarma fue programada. Si por alguna razón, el usuario del dispositivo cambia su zona horaria, la alarma será enviada basada en la zona horaria original. Por ejemplo, si un usuario se encuentra en Paris y programa una alarma que debería ser enviada a las 12 PM CET (Hora de europa central) y si el usuario viaja a San Francisco, la alarma será enviada a las 3 AM PDT (Hora del Pacífico).</p> +<pre class="brush: js">// Esta es la fecha a programar la alarma +var myDate = new Date("May 15, 2012 16:20:00"); + +// Esta es la información a pasar a la alarma +var data = { + foo: "bar" +} + +// La cadena "honorTimezone" es lo que hace a la alarma respetar la zona horaria +var request = navigator.mozAlarms.add(myDate, "honorTimezone", data); + +request.onsuccess = function () { + console.log("La alarma ha sido programada"); +}; + +request.onerror = function () { + console.log("Ha ocurrido un error: " + this.error.name); +}; +</pre> +<h2 id="Administrando_alarmas">Administrando alarmas</h2> +<p>Una vez que uan alarma es programada, es posible administrarla.</p> +<p>El método {{domxref("MozAlarmsManager.getAll")}} devolverá la lista completa de alarmas actualmente programadas por la aplicación. Esta lista es un <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> de objetos {{Anch("mozAlarm")}} .</p> +<h3 id="mozAlarm">mozAlarm</h3> +<p>{{page("/en-US/docs/Web/API/MozAlarmsManager.getAll","mozAlarm")}}</p> +<pre class="brush: js">var request = navigator.mozAlarms.getAll(); + +request.onsuccess = function () { + this.result.forEach(function (alarm) { + console.log('Id: ' + alarm.id); + console.log('date: ' + alarm.date); + console.log('respectTimezone: ' + alarm.respectTimezone); + console.log('data: ' + JSON.stringify(alarm.data)); + }); +}; + +request.onerror = function () { + console.log("An error occurred: " + this.error.name); +}; +</pre> +<p>El método {{domxref("MozAlarmsManager.remove")}} se utiliza para desprogramar una alarma existente.</p> +<pre class="brush: js">var alarmId; + +// Set an alarm and store it's id +var request = navigator.mozAlarms.add(new Date("May 15, 2012 16:20:00"), "honorTimezone"); + +request.onsuccess = function () { + alarmId = this.result.id; +} + +// ... + +// Later on, removing the alarm if it exists +if (alarmId) { + navigator.mozAlarms.remove(alarmId); +} +</pre> +<h2 id="Manejando_alarmas">Manejando alarmas</h2> +<p>Cualquier aplicación puede reaccionar cuando una alarma es programada por el sistema. Con el fin de ser capaz de manejar alarmas, una aplicación debe registrarse como manejador de alarmas. Esto se logra a través del API de mensajes del sistema en dos pasos:</p> +<p>Primero, las aplicaciones deberán incluir <code>alarm</code> en la propiedad de mensajes en el manifiesto de su aplicación con la URL del documento que registra la función de retorno (callback) ha ser usada cuando la alarma sea enviada.</p> +<pre class="brush: js">"messages": [ + { "alarm": "/index.html" } +]</pre> +<p>Segundo, la aplicación debe enlazar la función de retorno (callback) con el mensaje de <code>alarm</code>.</p> +<p>Esto se logra usando el método {{domxref("window.navigator.mozSetMessageHandler","navigator.mozSetMessageHandler")}} . Esta función recibirá el objeto {{Anch("mozAlarm")}} conteniendo la información agregada a la alarma.</p> +<pre class="brush: js">navigator.mozSetMessageHandler("alarm", function (mozAlarm) { + alert("alarm fired: " + JSON.stringify(mozAlarm.data)); +}); +</pre> +<p>Si una aplicación desea saber si existe una alarma pendiente a nivel del sistema, es posible utilizar el método {{domxref("window.navigator.mozHasPendingMessage","navigator.mozHasPendingMessage")}} con el valor <code>alarm</code>.</p> +<pre class="brush: js">navigator.mozHasPendingMessage("alarm"); +</pre> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Alarm API')}}</td> + <td>{{Spec2('Alarm API')}}</td> + <td>Especificación inicial.</td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("16")}} {{ property_prefix("moz") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Ver_también">Ver también</h2> +<ul> + <li>{{domxref("window.navigator.mozAlarms","navigator.mozAlarms")}}</li> + <li>{{domxref("MozAlarmsManager")}}</li> + <li>{{domxref("window.navigator.mozSetMessageHandler")}}</li> +</ul> diff --git a/files/es/webapi/cámara/index.html b/files/es/webapi/cámara/index.html new file mode 100644 index 0000000000..2cd89a2d8b --- /dev/null +++ b/files/es/webapi/cámara/index.html @@ -0,0 +1,20 @@ +--- +title: API de la Cámara +slug: WebAPI/Cámara +translation_of: Archive/B2G_OS/API/Camera_API +--- +<p>{{ ApiRef() }}</p> +<p>{{ non-standard_header() }}</p> +<p>{{ B2GOnlyHeader2('certified') }}</p> +<p><span id="result_box" lang="es">The <strong>Camera API</strong> allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.</span></p> +<div class="note"> + <p><strong>Note:</strong> Except if you are implementing a replacement for the default <em>Camera</em> application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the <a href="/en-US/docs/WebAPI/Web_Activities" title="/en-US/docs/Web/API/Web_Activities">Web Activities API</a>.</p> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("window.navigator.mozCameras", "navigator.mozCameras")}}</li> + <li>{{domxref("CameraManager")}}</li> + <li>{{domxref("CameraControl")}}</li> + <li>{{domxref("CameraCapabilities")}}</li> +</ul> +<p> </p> diff --git a/files/es/webapi/device_storage/index.html b/files/es/webapi/device_storage/index.html new file mode 100644 index 0000000000..eb9b4d5fb7 --- /dev/null +++ b/files/es/webapi/device_storage/index.html @@ -0,0 +1,226 @@ +--- +title: Device Storage API +slug: WebAPI/Device_Storage +translation_of: Archive/B2G_OS/API/Device_Storage_API +--- +<p>{{ non-standard_header() }}</p> +<p>{{ B2GOnlyHeader2('privileged') }}</p> +<h2 id="Resumen">Resumen</h2> +<p>La API de Device Storage es usada para acceder al sistema de archivos dentro de una aplicación Web. Acceder al sistema de archivos puede ser muy susceptible, por ese motivo, esta API está disponible sólo para aplicaciones con privilegios.</p> +<div class="note"> + <p><strong>Nota:</strong> El acceso a un dispositivo de almacenamiento es lento debido a la limitación en el nivel físico. En muchos casos puede resultar más rápido usar una base de datos <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> para almacenar archivos en lugar del dispositivo de almacenamiento físico.</p> +</div> +<h2 id="Acceso_a_un_almacenamiento">Acceso a un almacenamiento</h2> +<h3 id="Punto_de_entrada">Punto de entrada</h3> +<p>Es posible acceder a un área de almacenamiento usando el método {{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}. Acepta un parámetro de cadena que representa el nombre del alamacenamiento al cual se quiere tener acceso. El método devuelve un objeto {{domxref("DeviceStorage")}} que es usado para acceder al área de almacenamiento relacionada.</p> +<p>Firefox OS proporciona el siguiente nombre de almacenamiento:</p> +<ul> + <li><code>apps</code>: Esta área de almacenamiento es usada para almacenar los datos de usuario necesarios para las aplicaciones. Como se trata de datos confidenciales, acceder a esta área de almacenamiento requiere algunos privilegios extra y está disponible sólamente para aplicaciones certificadas.</li> + <li><code>music</code>: Esta es el área de almacenamiento donde son almacenados música y sonidos.</li> + <li><code>pictures</code>: Esta es el área de almacenamiento donde se almacenan las fotos.</li> + <li><code>sdcard</code>: Esta es el área de almacenamiento que brinda acceso al SDCard del dispositivo.</li> + <li><code>videos</code>: Esta es el área de almacenamiento donde son almacenados los videos.</li> +</ul> +<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures');</pre> +<p>Para ser capaz de usar cada una de las áreas de almacenamiento, la aplicación debe declararlas en su archivo de manifiesto. Por ejemplo, si la aplicación quiere acceder al área de almacenamiento de la <code>sdcard</code>, debe tener el permiso "<code>device-storage:sdcard</code>" en su manifiesto.</p> +<pre class="brush: js">"permissions": { + "device-storage:videos":{ "access": "readonly" }, + "device-storage:pictures":{ "access": "readwrite" } +}</pre> +<h2 id="El_uso_de_un_almacenamiento">El uso de un almacenamiento</h2> +<p>Una vez que una aplicación tenga acceso de un área de almacenamiento, es posible agregar, obtener y eliminar archivos dentro del área.</p> +<h3 id="Agregar_un_archivo">Agregar un archivo</h3> +<p>Se puede agregar una archivo utilizando el método {{domxref("DeviceStorage.addNamed()","addNamed")}} o {{domxref("DeviceStorage.add()","add")}}. La primera permite establecer un nombre explícito para guardar un archivo mientras que la segunda crea un nombre automáticamente cuando se guarda el archivo. Ambos nombres son asíncronos y devuelven un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación. Esto debe considerar importante que tanto agregar, escribir y leer archivos en un soporte físico es un proceso lento.</p> +<p>Esos dos métodos esperan un {{domxref("Blob")}} como su primer parámetro. Este objeto será convertido en un archivo y almacenado. Al crear un objeto {{domxref("Blob")}}, es obligatorio darle un tipo. Este tipo, que es un mime type, es importante porque algunas áreas de almacenamiento tienen restricciones basadas en el tipo:</p> +<ul> + <li><code>music</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de audio</li> + <li><code>pictures</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de imagen</li> + <li><code>videos</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de video</li> +</ul> +<pre class="brush: js">var sdcard = navigator.getDeviceStorage("sdcard"); +var file = new Blob(["Este es un archivo de texto."], {type: "text/plain"}); + +var request = sdcard.addNamed(file, "mi-archivo.txt"); + +request.onsuccess = function () { + var name = this.result.name; + console.log('El archivo "' + name + '" se escribió correctamente en el área de almacenamiento sdcard'); +} + +// Un error suele producirse si un archivo con el mismo nombre ya existe +request.onerror = function () { + console.warn('No se puede escribir el archivo: ' + this.error); +} +</pre> +<div class="note"> + <p><strong>Nota:</strong> El repositorio en un área de almacenamiento está implícito. No es posible crear explícitamente un repositorio vacío. Si quiere usar una estructura de repositorio tiene que hacerlo parte del nombre del archivo a almacenar. Así que si quiere almacenar el archivo <code>bar</code> dentro del repositorio <code>foo</code>, tiene que usar el método {{domxref("DeviceStorage.addNamed()","addNamed")}} con el nombre completo de la ruta del archivo <code>addNamed(<em>blob</em>, "foo/bar")</code>. Esto también se aplica cuando quiere recuperar un archivo con su nombre (véase más adelante).</p> + <p>Como el archivo es agregado en un área de almacenamiento restringido por razones de seguridad, un nombre de ruta de archivo no puede empezar con "<code>/</code>" ni "<code>../</code>" (y "<code>./</code>" no tiene sentido).</p> +</div> +<h3 id="Obtener_un_archivo">Obtener un archivo</h3> +<p>Se puede recuperar un archivo de dos maneras: usando su nombre o iterando toda la lista de archivos.</p> +<p>La manera más fácil es recuperar un archivo por su nombre usando los métodos {{domxref("DeviceStorage.get()","get")}} y {{domxref("DeviceStorage.getEditable","getEditable")}}. La primera proporciona un objeto {{domxref("File")}} (que actúa como un archivo de sólo lectura) mientras que la segunda proporciona un objeto {{domxref("FileHandle")}} (que permite actualizar el archivo subyacente). Ambos métodos son asíncronos y devuelven un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación.</p> +<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard'); + +var request = sdcard.get("mi-archivo.txt"); + +request.onsuccess = function () { + var file = this.result; + console.log("Obtenido el archivo: " + file.name); +} + +request.onerror = function () { + console.warn("No se puede obtener el archivo: " + this.error); +} +</pre> +<p>La otra forma de recuperar archivos es explorar el contenido del área de almacenamiento. Esto es posible usando los métodos {{domxref("DeviceStorage.enumerate()","enumerate")}} y {{domxref("DeviceStorage.enumerateEditable()","enumerateEditable")}}. El primero proporciona objetos {{domxref("File")}} mientras que el segundo proporciona objetos {{domxref("FileHandle")}}. Ambos métodos son asíncronos y devuelven un objeto {{domxref("DOMCursor")}} para recorrer a lo largo de la lista de archivos. Un {{domxref("DOMCursor")}} es nada menos que un objeto {{domxref("DOMRequest")}} con potencia extra para recorrer a lo largo de la lista de cosas (archivos en ese caso) en forma asíncrona.</p> +<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures'); + +// Exploremos todas las imágenes disponibles +var cursor = pics.enumerate(); + +cursor.onsuccess = function () { + var file = this.result; + console.log("Archivo encontrado: " + file.name); + + // Una vez que encontremos el archivo verifiquemos si hay otros resultados + if (!this.done) { + // Entonces nos movemos al siguiente resultado, que llama al cursor + // success con el siguiente archivo como resultado. + this.continue(); + } +} + +cursor.onerror = function () { + console.warn("Archivo no encontrado: " + this.error); +} +</pre> +<p>Es posible limitar el número de resultados pasando dos parámetros opcionales a los m´todos {{domxref("DeviceStorage.enumerate()","enumerate")}} y {{domxref("DeviceStorage.enumerateEditable()","enumerateEditable")}}.</p> +<p>El primer parámetro puede ser una cadena que representa una subcarpeta para buscar dentro.</p> +<p>El segundo parámetro puede ser un objeto con una propiedad <code>since</code>, que permite limitar la búsqueda a un determinado periodo de tiempo.</p> +<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures'); + +// Recuperamos fotos de la semana pasada +var param = { + since: new Date((+new Date()) - 7*24*60*60*1000) +} + +var cursor = pics.enumerate(param); + +cursor.onsuccess = function () { + var file = this.result; + console.log("Foto tomada en: " + file.<code class="language-js">lastModifiedDate</code>); + + if (!this.done) { + this.continue(); + } +} +</pre> +<h3 id="Eliminar_un_archivo">Eliminar un archivo</h3> +<p>Un archivo se puede eliminar del área de almacenamiento usando simplemente el método {{domxref("DeviceStorage.delete()","delete")}}. Este método sólo necesita el nombre del archivo a eliminar. Como todos los demás métodos de la interfaz {{domxref("DeviceStorage")}}, este también es asíncrono y devuelve un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación.</p> +<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard'); + +var request = sdcard.delete("mi-archivo.txt"); + +request.onsuccess = function () { + console.log("Archivo eliminado"); +} + +request.onerror = function () { + console.log("No se puede eliminar el archivo: " + this.error); +} +</pre> +<h2 id="Información_de_almacenamiento">Información de almacenamiento</h2> +<p>Además de acceder a los archivos, un área de almacenamiento proporciona algunos métodos para obtener fácilmente información importante.</p> +<h3 id="Espacio_disponible">Espacio disponible</h3> +<p>Una de las cosas más importantes a saber cuando se almacenan archivos en un dispositivo es la cantidad de espacio disponible. La interfaz {{domxref("DeviceStorage")}} proporciona tres funciones útiles dedicadas al espacio:</p> +<ul> + <li>{{domxref("DeviceStorage.freeSpace()","freeSpace()")}} para obtener la cantidad de espacio libre disponible para almacenar nuevos archivos;</li> + <li>{{domxref("DeviceStorage.freeSpace()","usedSpace()")}} para obtener la cantidad de espacio utilizado para almacenar archivos;</li> + <li>{{domxref("DeviceStorage.available()","available()")}} para obtener la cantidad total de espacio dedicado al área de almacenamiento.</li> +</ul> +<p>Como esos métodos son asíncronos, devuelven un objeto {{domxref("DOMRequest")}} para manejar los success o error de la operación.</p> +<pre class="brush: js">var videos = navigator.getDeviceStorage('videos'); + +var request = videos.usedSpace(); + +request.onsuccess = function () { + // El resultado es expresado en bytes, permite convertirlo en megabytes + var size = this.result / 1000000; + + console.log("Los videos en tu dispositivo ocupan un total de " + size.toFixed(2) + "Mb de espacio."); +} + +request.onerror = function () { + console.warn("No se puede obtener el espacio utilizado por videos: " + this.error); +} +</pre> +<h3 id="Escuchar_los_cambios">Escuchar los cambios</h3> +<p>Como muchas aplicaciones pueden usar un mismo área de almacenamiento al mismo tiempo, a veces es útil para una aplicación ser consciente de un cambio en ese área de almacenamiento. También es útil para una aplicación que quiere realizar la acción asíncrona sin la retransmisión de todos los objetos {{domxref("DOMRequest")}} que devuelven por cada método de la interfaz {{domxref("DeviceStorage")}}.</p> +<p>Para ese fin, un evento {{event("change")}} se activa cada vez que se crea, modifica o elimina un archivo. Este evento se puede capturar usando la propiedad {{domxref("DeviceStorage.onchange","onchange")}} o el método {{domxref("EventTarget.addEventListener()","addEventListener()")}}. El controlador de eventos recibe un objeto {{domxref("DeviceStorageChangeEvent")}} que es un objeto {{domxref("Event")}} regular con dos propiedades adicionales:</p> +<ul> + <li>{{domxref("DeviceStorageChangeEvent.reason")}} que da la razón del cambio (<code>created</code>, <code>modified</code> o <code>deleted</code>)</li> + <li>{{domxref("DeviceStorageChangeEvent.path")}} que brinda la ruta completa del archivo afectado por el cambio.</li> +</ul> +<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard'); + +sdcard.onchange = function (change) { + var reason = change.reason; + var path = change.path; + + console.log('El archivo "' + path + '" ha sido ' + reason); +} +</pre> +<h2 id="Especificación">Especificación</h2> +<p>No es parte de ninguna especificación.</p> +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Véase_también">Véase también</h2> +<ul> + <li>{{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}</li> + <li>{{domxref("DeviceStorage")}}</li> + <li>{{domxref("DeviceStorageChangeEvent")}}</li> +</ul> diff --git a/files/es/webapi/estado_de_bateria/index.html b/files/es/webapi/estado_de_bateria/index.html new file mode 100644 index 0000000000..9cdc7259be --- /dev/null +++ b/files/es/webapi/estado_de_bateria/index.html @@ -0,0 +1,39 @@ +--- +title: API de Estado de Bateria +slug: WebAPI/Estado_de_Bateria +tags: + - API + - Apps + - Firefox OS + - Mobile +translation_of: Web/API/Battery_Status_API +--- +<p>La <strong>API de Estado de Batería</strong>, también conocida como "<strong>Battery API</strong>", provee información acerca del sistema de carga de la batería y permite notificar mediante eventos que son enviados cuando el nivel de la batería cambia. Este puede ser usado para ajustar el uso de recursos por parte de una aplicación y evitar un gasto innecesario de energía cuando la batería esta baja o para guardar cambios en un archivo antes de que la batería se agote y así prevenir perdida de información.</p> +<p>La API de Estado de Batería se puede extender mediante {{domxref("window.navigator")}} con una propiedad {{domxref("window.navigator.battery")}} que pertenece al objeto {{domxref("BatteryManager")}} y agrega algunos nuevos eventos que usted puede recibir en el monitor de estado de la batería.</p> +<h2 id="Ejemplo">Ejemplo</h2> +<p>En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y en el nivel de la batería. Esto se hace escuchando el evento {{event("chargingchange")}} y el evento {{event("levelchange")}} respectivamente.</p> +<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; + +function updateBatteryStatus() { + console.log("Battery status: " + battery.level * 100 + " %"); + + if (battery.charging) { + console.log("Battery is charging"); + } +} + +battery.addEventListener("chargingchange", updateBatteryStatus); +battery.addEventListener("levelchange", updateBatteryStatus); +updateBatteryStatus(); +</pre> +<p>Vea también: <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">El ejemplo en las especificaciones</a></p> +<h2 id="Especificaciones">Especificaciones</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p> +<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p> +<h2 id="Vea_también">Vea también</h2> +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Usando la API de Batería</a></li> + <li>{{domxref("BatteryManager")}}</li> + <li>{{domxref("window.navigator.battery","navigator.battery")}}</li> +</ul> diff --git a/files/es/webapi/index.html b/files/es/webapi/index.html new file mode 100644 index 0000000000..60f5615e83 --- /dev/null +++ b/files/es/webapi/index.html @@ -0,0 +1,143 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Web/API +--- +<p><strong>WebAPI</strong> 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.</p> + +<div class="note"> +<p><strong>Nota:</strong> 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 <a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">APIs DE COMUNICACIÓN</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de información de la red</a></dt> + <dd>Provee información básica sobre la conexión de red actual, como la velocidad de conexión.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> + <dd>La API de WebBluetooth provee acceso a bajo nivel al hardware de Bluetooth del dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de conexión móvil</a> {{NonStandardBadge}}</dt> + <dd>Expone información sobre la conectividad celular del dispositivo, como la fuerza de la señal, información del operador y así suscesivamente.</dd> + <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de estadísticas de red</a></dt> + <dd>Monitorea la data usada y expone esta data a aplicaciones privilegiadas.</dd> + <dt><a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a></dt> + <dd>Proporciona sockets de bajo nivel y soporte SSL.</dd> + <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a> {{NonStandardBadge}}</dt> + <dd>Permite a las apps contestar llamadas telefónicas y usar la interfaz de usuario de telefonía integrada.</dd> + <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>Permite a las apps enviar y recibir mensajes de texto, así como también acceder y manejar los mensajes almacenados en el dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de información de WiFi</a></dt> + <dd>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.</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">APIS de acceso a Hardware</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">API de sensor de luz ambiental</a></dt> + <dd>Provee acceso al sensor de luz ambiental, el cual permite a una app detectar el nivel de luz ambiental proximos al dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de estado de batería</a></dt> + <dd>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.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a></dt> + <dd>Provee información sobre la ubicación física del dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de bloqueo de puntero</a></dt> + <dd>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.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de proximidad</a></dt> + <dd>Permite determinar la proximidad del dispositivo a objetos cercanos, como el rostro del usuario.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de orientación del dispositivo</a></dt> + <dd>Provee notificaciones cuando la orientación del dispositivo cambia.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">API de orientación de pantalla</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a></dt> + <dd>Permite a las apps controlar la vibración de hardware del dispositivo para cosas como retroalimentación háptica en juegos. Esto <strong>no</strong> es pensado para cosas como vibraciones de notificaciones, para ello revisa la <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a>.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a> {{NonStandardBadge}}</dt> + <dd>Permite a las apps tomar fotografías y/o grabar videos usaando la cámara integrada del dispositivo.</dd> + <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de administración de energía </a>{{NonStandardBadge}}</dt> + <dd>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.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">APIs de administración de información</h2> + +<dl> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">API de identificador de archivos</a></dt> + <dd>Provee soporte para escribir archivos con soporte de bloqueo.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>Almacenamiento de información estructurada del lado cliente con soporte para búsquedas de alto rendimiento.</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">OtrAS APIs</h2> + +<dl> + <dt><a href="/es/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a></dt> + <dd>Permite a las apps programar notificaciones.</dd> + <dd>También proporciona soporte para el lanzamiento de una aplicación de forma automática en un momento determinado.</dd> + <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>API de navegador</strong></a></dt> + <dd>Provee soporte para construir un navegador web usando tecnologías web completamente (en esencia, un navegador dentro de un navegador).</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>Permite a las apps recibir información cuando el usuario no está usando el dispositivo activamente.</dd> + <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de permisos</a></dt> + <dd>Administra permisos de las apps en una ubicación central. Usado por la app de Ajustes.</dd> + <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>Permite a la plataforma enviar mensajes de notificación a aplicaciones específicas.</dd> + <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de tiempo/reloj</a> {{NonStandardBadge}}</dt> + <dd>Provee soporte para ajustar el tiempo actual. La zona horaria es establecida usando la <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de ajustes</a>.</dd> + <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> + <dd>Permite a contenido web iniciar pago y reembolsos por bienes virtuales.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">comunidad WebAPI</h2> + +<p>Si necesitas ayuda con estas APIs, existen varias maneras en la que puedes hablar con otros desarrolladores que las utilizan.</p> + +<ul> + <li>Consulta en el foro de WebAPI: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>Visita el canal de IRC de WebAPI: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">temas Relacionados</h2> + +<ul> + <li>El <a href="/es/docs/DOM" title="Document Object Model (DOM)">Modelo de Objetos del Documento (DOM)</a> es la representación estructural del documento HTML.</li> + <li><a href="/es/docs/JavaScript" title="JavaScript">JavaScript</a> - Lenguaje de Script para la Web.</li> + <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: Una lista de WebAPIs y el estado de su documentación.</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/es/webapi/pointer_lock/index.html b/files/es/webapi/pointer_lock/index.html new file mode 100644 index 0000000000..13a27d6d48 --- /dev/null +++ b/files/es/webapi/pointer_lock/index.html @@ -0,0 +1,284 @@ +--- +title: API Pointer Lock +slug: WebAPI/Pointer_Lock +translation_of: Web/API/Pointer_Lock_API +--- +<p> </p> + +<p><strong>Pointer Lock </strong>(antes llamado Bloqueo del <em>Mouse</em>) proporciona métodos de entrada basados en el movimiento del ratón a traves del tiempo (es decir, deltas), no sólo la posición absoluta del cursor del <em>mouse</em>. Te da acceso al movimiento <span style="line-height: inherit;">puro </span><span style="line-height: inherit;">del <em>mouse</em>, bloquea el objetivo de los eventos del <em>mouse</em> a un solo elemento, elimina límites en cuanto a que tan lejos puedes mover el <em>mouse</em> en una sola dirección, y quita el cursor de la vista.</span></p> + +<p>Esta API es útil para aplicaciones que requieren bastantes acciones para controlar los movimientos del <em>mouse</em>, rotar objetos y cambiar las entradas. Es especialmente importante para aplicaciones altamente visuales, tales como los que utilizan la perspectiva en primera persona, así como vistas en 3D y modelado.</p> + +<p>Por ejemplo, puedes crear aplicaciones que permiten a los usuarios controlar el ángulo de visión con sólo mover el <em>mouse</em> sin ningún clic, permitiendo liberar <span style="line-height: inherit;">los clics</span><span style="line-height: inherit;"> para otras acciones. Este tipo de entrada del <em>mouse</em> es muy útil para ver mapas, imágenes de satélite, o escenas en primera persona (como en un juego o un vídeo embebido).</span></p> + +<p><strong>Pointer Lock</strong><span style="line-height: inherit;"> te permite acceder a los eventos del </span><em>mouse</em><span style="line-height: inherit;"> incluso cuando el cursor pasa por el límite de la pantalla del navegador. Por ejemplo, los usuarios pueden seguir girando o manipular un modelo 3D moviendo el </span><em>mouse</em><span style="line-height: inherit;"> sin fin. Sin </span><strong>Pointer Lock</strong><span style="line-height: inherit;">, la rotación o la manipulación se detiene en el momento en que el cursor alcanza el borde de la pantalla del navegador. Los jugadores se verán particularmente encantados con esta característica, ya que anciosamente pueden hacer clic en los botones y arrastrar el cursor del </span><em>mouse</em><span style="line-height: inherit;"> de un lado a otro sin tener que preocuparse por salir de la zona de juego ni de cliquear accidentalmente otra aplicación que podría llevar al </span><em>mouse</em><span style="line-height: inherit;"> fuera del juego. Una tragedia!</span></p> + +<h2 id="basics" name="basics">Conceptos Básicos</h2> + +<p><strong>Pointer Lock</strong><strong style="line-height: inherit;"> </strong><span style="line-height: inherit;">está relacionado con la <em>mouse capture</em>. </span><em>mouse capture </em><span style="line-height: inherit;">proporciona la entrega continua de eventos a un elemento de destino, mientras que el <em>mouse</em> se arrastra, pero se detiene cuando se suelta el clic. </span><strong>Pointer Lock</strong><span style="line-height: inherit;"> es diferente de </span><em>mouse capture </em><span style="line-height: inherit;">en las siguientes maneras:</span></p> + +<ul> + <li><span style="line-height: 1.5em;">Es persistente. <strong style="line-height: normal;">Pointer Lock</strong> no libera el <em>mouse</em> hasta que se haga una llamada explícita a la API o el usuario utilize un gesto concreto de lanzamiento.</span></li> + <li><span style="line-height: 1.5em;">No está limitado por los limites del navegador o la pantalla.</span></li> + <li>Envia continuamente eventos independientemente del estado del clic del <em>mouse</em>.</li> + <li>Oculta el cursor.</li> +</ul> + +<h2 id="example" name="example">Ejemplo</h2> + +<p>El siguiente es un ejemplo de cómo se puede configurar <strong>Pointer Lock</strong> en su página web.</p> + +<pre class="brush: js"><button onclick="lockPointer();">Lock it!</button> +<div id="pointer-lock-element"></div> +<script> +// Nota: Al momento de escribir esto, sólo Mozilla y WebKit apoyan Pointer Lock. + +// El elemento que servirá para pantalla completa y pointer lock. +var elem; + +document.addEventListener("mousemove", function(e) { + var movementX = e.movementX || + e.mozMovementX || + e.webkitMovementX || + 0, + movementY = e.movementY || + e.mozMovementY || + e.webkitMovementY || + 0; + + // Imprime los valores delta del movimiento del mouse + console.log("movementX=" + movementX, "movementY=" + movementY); +}, false); + +function fullscreenChange() { + if (document.webkitFullscreenElement === elem || + document.mozFullscreenElement === elem || + document.mozFullScreenElement === elem) { // Older API upper case 'S'. + // El elemento esta en pantalla completa, ahora podemos hacer el request de pointer lock + elem.requestPointerLock = elem.requestPointerLock || + elem.mozRequestPointerLock || + elem.webkitRequestPointerLock; + elem.requestPointerLock(); + } +} + +document.addEventListener('fullscreenchange', fullscreenChange, false); +document.addEventListener('mozfullscreenchange', fullscreenChange, false); +document.addEventListener('webkitfullscreenchange', fullscreenChange, false); + +function pointerLockChange() { + if (document.mozPointerLockElement === elem || + document.webkitPointerLockElement === elem) { + console.log("Pointer Lock was successful."); + } else { + console.log("Pointer Lock was lost."); + } +} + +document.addEventListener('pointerlockchange', pointerLockChange, false); +document.addEventListener('mozpointerlockchange', pointerLockChange, false); +document.addEventListener('webkitpointerlockchange', pointerLockChange, false); + +function pointerLockError() { + console.log("Error while locking pointer."); +} + +document.addEventListener('pointerlockerror', pointerLockError, false); +document.addEventListener('mozpointerlockerror', pointerLockError, false); +document.addEventListener('webkitpointerlockerror', pointerLockError, false); + +function lockPointer() { + elem = document.getElementById("pointer-lock-element"); + // Start by going fullscreen with the element. Current implementations + // require the element to be in fullscreen before requesting pointer + // lock--something that will likely change in the future. + elem.requestFullscreen = elem.requestFullscreen || + elem.mozRequestFullscreen || + elem.mozRequestFullScreen || // Older API upper case 'S'. + elem.webkitRequestFullscreen; + elem.requestFullscreen(); +} +</script> +</pre> + +<h2 id="method_overview" name="method_overview">Propiedades/Métodos</h2> + +<p>La API de bloque de puntero ,similar a la API de Fullscreen,extiende del elemento DOM agregando un nuevo método, <code>requestPointerLock</code>, la cual es dependiente del vendedor(del navegador). Puede escribirse como:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">element.webkitRequestPointerLock(); // para Chrome</span></span> + +element.mozRequestPointerLock(); // para Firefox +</pre> + +<p>Current implementations of <code>requestPointerLock</code> are tightly bound to <code>requestFullScreen</code> and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (<code>pointerlockchange</code>, <code>pointerlockerror</code>) indicating the success or failure of the request. This matches how the Fullscreen API works, with its <code>requestFullScreen</code> method and <code>fullscreenchange</code> and <code>fullscreenerror</code> events.</p> + +<p>The Pointer lock API also extends the <code>document</code> interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named <code>pointerLockElement</code>, which is vendor-prefixed for now. The new method on <code>document</code> is <code>exitPointerLock</code> and, as the name implies, it is used to exit Pointer lock.</p> + +<p>The <code>pointerLockElement</code> property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + +// 1) Used as a boolean check--are we pointer locked? +if (!!document.pointerLockElement) { + // pointer is locked +} else { + // pointer is not locked +} + +// 2) Used to access the pointer locked element +if (document.pointerLockElement === someElement) { + // someElement is currently pointer locked +} +</pre> + +<p>The <code>document</code>'s <code>exitPointerLock</code> method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the <code>pointerlockchange</code> and <code>pointerlockerror</code> events:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.exitPointerLock = document.exitPointerLock || + document.mozExitPointerLock || + document.webkitExitPointerLock;</span></span> + +function pointerLockChange() { + <span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + + if (!!document.pointerLockElement) { + console.log("Still locked."); + } else { + console.log("Exited lock."); + } +} + +document.addEventListener('pointerlockchange', pointerLockChange, false); +document.addEventListener('mozpointerlockchange', pointerLockChange, false); +document.addEventListener('webkitpointerlockchange', pointerLockChange, false); + +// Attempt to unlock +document.exitPointerLock(); +</pre> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2> + +<p>When the Pointer lock state changes—for example, when calling <code>requestPointerLock</code>, <code>exitPointerLock</code>, the user pressing the ESC key, etc.—the <code>pointerlockchange</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p> + +<div class="note">This event is currently prefixed as <code>mozpointerlockchange</code> in Firefox and <code>webkitpointerlockchange</code> in Chrome. </div> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2> + +<p>When there is an error caused by calling <code>requestPointerLock</code> or <code>exitPointerLock</code>, the <code>pointerlockerror</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p> + +<div class="note">This event is currently prefixed as <code>mozpointerlockerror</code> in Firefox and <code>webkitpointerlockerror</code> in Chrome. </div> + +<h2 id="extensions" name="extensions">Extensions to mouse events</h2> + +<p>The Pointer lock API extends the normal <code>MouseEvent</code> with movement attributes.</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> { +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span> +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span> +};</span></pre> + +<div class="note">The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div> + +<p>Two new parameters to mouse events—<code>movementX</code> and <code>movementY</code>—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of <a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent"><code>MouseEvent</code></a> properties, <code>screenX</code> and <code>screenY</code>, which are stored in two subsequent <code>mousemove</code> events, <code>eNow</code> and <code>ePrevious</code>. In other words, the Pointer lock parameter <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p> + +<h3 id="locked_state" name="locked_state">Locked state</h3> + +<p>When Pointer lock is enabled, the standard <code>MouseEvent</code> properties <code>clientX</code>, <code>clientY</code>, <code>screenX</code>, and <code>screenY</code> are held constant, as if the mouse is not moving. The <code>movementX</code> and <code>movementY</code> properties continue to provide the mouse's change in position. There is no limit to <code>movementX</code> and <code>movementY</code> values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.</p> + +<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3> + +<p>The parameters <code>movementX</code> and <code>movementY</code> are valid regardless of the mouse lock state, and are available even when unlocked for convenience.</p> + +<p>When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, <code>movementX</code> and <code>movementY</code> could be set to zero.</p> + +<h2 id="iframe_limitations">iframe limitations</h2> + +<p>Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.</p> + +<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code><iframe sandbox="allow-pointer-lock"></code>, is expected to appear in Chrome soon.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>Targeting 23{{ property_prefix("webkit") }}*</p> + + <p>See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754">CR/72574</a></p> + </td> + <td> + <p>{{ CompatGeckoDesktop("14.0") }}</p> + + <p>{{bug("633602") }}</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>* Requires the feature be enabled in <code>about:flags</code> or Chrome started with the <code>--enable-pointer-lock</code> flag.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<p><a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent">MouseEvent</a></p> diff --git a/files/es/webapi/using_geolocation/index.html b/files/es/webapi/using_geolocation/index.html new file mode 100644 index 0000000000..6d50972f8b --- /dev/null +++ b/files/es/webapi/using_geolocation/index.html @@ -0,0 +1,232 @@ +--- +title: Uso de geolocalización +slug: WebAPI/Using_geolocation +tags: + - API + - Geolocalización + - Guía + - clearWatch + - watchPosition +translation_of: Web/API/Geolocation_API +--- +<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p> + +<p><span id="result_box" lang="es"><span class="hps">La</span> <strong><span class="hps">API de geolocalización</span></strong> <span class="hps">permite al</span> <span class="hps">usuario compartir su</span> <span class="hps">ubicación</span> <span class="hps">a las aplicaciones web</span> <span class="hps">si</span> <span class="hps">así lo desea.</span> <span class="hps">Por razones de privacidad</span><span>,</span> <span class="hps">al usuario</span> <span class="hps">se le pide que</span> <span class="hps">confirme el permiso</span> <span class="hps">para proporcionar información</span> <span class="hps">de ubicación.</span></span></p> + +<h2 id="El_objeto_geolocation">El objeto geolocation</h2> + +<p><span id="result_box" lang="es"><span class="hps">La API</span> <span class="hps">de geolocalización</span> <span class="hps">se publica</span> <span class="hps">a través del objeto </span></span>{{domxref("window.navigator.geolocation","navigator.geolocation")}}.</p> + +<p><span id="result_box" lang="es"><span class="hps">Si el objeto existe</span><span>,</span> <span class="hps">los servicios de geolocalización</span> <span class="hps">están disponibles.</span> <span class="hps">Se puede</span> <span class="hps">comprobar la presencia</span> <span class="hps">de la geolocalización</span> <span class="hps">de esta manera:</span></span></p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* la geolocalización está disponible */ +} else { + /* la geolocalización NO está disponible */ +} +</pre> + +<div class="blockIndicator note"> +<p>Nota: En Firefox 24 y versiones anteriores, <code>"geolocation" in navigator</code> siempre retornaba <code>true</code> incluso si la API se encontraba deshabilitada. Esto ha sido corregido en <a href="https://www.fxsitecompat.com/en-CA/versions/25/">Firefox 25</a> para cumplir con la especificación. ({{bug(884921)}}).</p> +</div> + +<h3 id="Obtención_de_la_ubicación_actual">Obtención de la ubicación actual</h3> + +<p><span lang="es"><span class="hps">Para</span> <span class="hps">obtener la ubicación</span> <span class="hps">actual del usuario</span><span>, puede llamar a</span><span class="atn hps">l método </span></span>{{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}<span lang="es"><span class="hps">.</span></span></p> + +<p><span lang="es"><span class="hps">Esto inicia</span> <span class="hps">una solicitud asíncrona</span> <span class="hps">para detectar</span> <span class="hps">la posición del usuario</span><span>, y</span> <span class="hps">consulta el</span> <span class="hps">hardware</span> <span class="hps">de posicionamiento para</span> <span class="hps">obtener</span><span class="hps"> información actualizada.</span> </span><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">se determina la posición</span><span>, se ejecuta la función</span> <span class="hps">de callback</span><span class="hps">.</span></span><span lang="es"> <span class="hps">Si lo desea,</span> <span class="hps">puede proporcionar otra función de callback</span><span class="hps"> que se</span> <span class="hps">ejecuta si</span> <span class="hps">se produce un error</span><span>.</span> <span class="hps">Un tercer</span> <span class="hps">parámetro</span> <span class="hps">opcional</span><span>, es un</span> <span class="hps">objeto de opciones</span> <span class="hps">donde se puede establecer</span> <span class="hps">la edad máxima de</span> <span class="hps">la</span> <span class="hps">posición devuelta</span><span>,</span> <span class="hps">el tiempo de espera</span> <span class="hps">para una solicitud</span> <span class="hps">y si se requiere</span> <span class="hps">una alta precisión</span> <span class="hps">para la posición.</span></span></p> + +<div class="note"> +<p><strong>Nota:</strong> Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + haz_algo(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.</p> + +<h3 id="Rastreando_la_posición_actual">Rastreando la posición actual</h3> + +<p>Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.</p> + +<div class="note"> +<p><strong>Nota:</strong> Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} para dejar de rastrear la posición del usuario.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Afinando_la_respuesta">Afinando la respuesta</h3> + +<p>Ambos métodos, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto <code>PositionOptions</code> también opcional.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> + +<p>Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:</p> + +<pre class="brush: js">function geo_success(position) { + do_something(position.coords.latitude, position.coords.longitude); +} + +function geo_error() { + alert("Sorry, no position available."); +} + +var geo_options = { + enableHighAccuracy: true, + maximumAge : 30000, + timeout : 27000 +}; + +var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> + +<p><a id="fck_paste_padding">Demo de watchPosition: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br> + <a id="fck_paste_padding"></a></p> + +<h2 id="Describiendo_una_posición">Describiendo una posición</h2> + +<p>La ubicación del usuario es descrita con un objeto <code>Position</code> referenciando a un objeto <code>Coordinates</code>.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p> + +<h2 id="Manejo_de_errores">Manejo de errores</h2> + +<p>La función de callback de error, si existe cuando se llama a <code>getCurrentPosition()</code> o <code>watchPosition()</code>, recibe un objeto <code>PositionError</code> como su primer parámetro.</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p> + +<h2 id="Ejemplo_de_geolocalización">Ejemplo de geolocalización</h2> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p> +<div id="out"></div> +</pre> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js;">function geoFindMe() { + var output = document.getElementById("out"); + + if (!navigator.geolocation){ + output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; + return; + } + + function success(position) { + var latitude = position.coords.latitude; + var longitude = position.coords.longitude; + + output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; + + var img = new Image(); + img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; + + output.appendChild(img); + }; + + function error() { + output.innerHTML = "Unable to retrieve your location"; + }; + + output.innerHTML = "<p>Locating…</p>"; + + navigator.geolocation.getCurrentPosition(success, error); +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_sobre_Gecko">Notas sobre Gecko</h3> + +<p>Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son compartidos incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y la dirección IP del usuario. Para más información, por favor consulte la <a href="http://www.mozilla.com/en-US/legal/privacy/" title="http://www.mozilla.com/en-US/legal/privacy/">Política de Privacidad de Mozilla</a><span class="external"> y la</span> <a href="http://www.google.com/privacy-lsf.html" title="http://www.google.com/privacy-lsf.html">Política de Privacidad de Google</a>, dichos documentos cubren como estos datos pueden ser utilizados.</p> + +<p>En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio <a href="http://catb.org/gpsd/" title="http://catb.org/gpsd/">GPSD</a> para geolocalización en sistemas Linux.</p> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li> + <li><a href="http://www.w3.org/TR/geolocation-API/" title="http://www.w3.org/TR/geolocation-API/">API de Geolocalización en w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation" title="/en-US/demos/tag/tech:geolocation">Demos que utilizan la API de Geolocalización</a></li> +</ul> + +<p> </p> |